javascript代码简写的几种常用方式汇总


Posted in Javascript onAugust 23, 2021

前言

本文主要介绍一些工作中常用的JavaScript编码技巧。非常有用,建议大家看完赶快实践,keep it in your mind!

首先推荐一个vscode的插件,Quokka.js,调试代码神器,插件的作用是:立即执行你键入的JavaScript代码或者TypeScript代码

javascript代码简写的几种常用方式汇总

箭头函数

简写规则:

  1. 只有一个参数,小括号可以不写
  2. 返回值只有一个,花括号和return可以不写
let arr=[1,2,3]

arr.filter((item)=>{
    return item >1
})

//只有一个参数,小括号可以不写
arr.filter(item=>{
    return item>1
})
//返回值只有一个,花括号和return可以不写
arr.filter(item=>item>1)

掌握数组常见操作方法

掌握数组常见方法,记在脑子里,不要写的时候再去看API了,这样可以有效提升编码效率,毕竟这些方法每天都在用

  • every
  • some
  • filter
  • map
  • forEach
  • find
  • findIndex
  • reduce
  • includes

javascript代码简写的几种常用方式汇总

掌握字符串常用操作函数

  • trim
  • startsWidth
  • includes
let str="Hello JueJue  "
//包含子串
console.log(str.includes("Hello"))
// 以子串开头
console.log(str.startsWith("Hello"))
// 去除收尾空格
console.log(str.trim())

延展运算符

很有用的哟,下面介绍两个使用场景:

对数组进行解构

//数组去重
function removeRepeat(arr){
    return  [...new Set(arr)]
}
//数组求最大值
Math.max(...arr)
Math.min(...arr)

对对象进行解构

//react  用于一次传入多个属性
let props={name:'Ben',age:10,sex:0}
const greeting=<Greeting {...props} />

//组合对象 这种情况可以使用Object.assign代替
let defaultParams={
    pageSize:1,
    pageNumber:10,
    sort:1
}

let reqParams={
    ...defaultParams,
    phone:'15196255885'
}

对象简写

对象的key和value同名,可以只写key,可以少些很多代码哟

let id,age,sex

let person={
    id,
    age,
    sex
}

解构赋值

  • 用于函数参数
  • 用于对对象进行解构

可以少些一些代码哟

class Spirit{
    constructor({x=0,y=0,w=10,h=10,rotate=0}){//函数参数结构
        this.x=x
        this.y=y
        this.w=w
        this.h=h
        this.rotate=rotate
    }
    draw(){
        const {x,y,w,h,rotate}=this
        console.log("draw -> x,y,w,h,rotate", x,y,w,h,rotate)
    }
}

掌握数据类型转换的方法

写JS的人一般没有类型观念,对于Number和String的区分不太敏感,其实JS的数据类型还是挺重要的,不注意的话就有可能会出错,所以希望大家记住下面的方法

Number和String类型互转

我一般喜欢使用构造函数转

Number('001')  //-> 1
String('1')   // ->1

保留n位小数

function cutNumber(value,n=2){//默认保留2位小数
    return Number(value).toFixed(n)
}

总结

到此这篇关于javascript代码简写方式的文章就介绍到这了,更多相关javascript代码简写方式内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
基于jQuery日历插件制作日历
Mar 11 Javascript
js选项卡的制作方法
Jan 23 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
js实现登录与注册界面
Nov 01 Javascript
layui实现点击按钮给table添加一行
Aug 10 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue使用Google Recaptcha验证的实现示例
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 #Vue.js
关于React Native使用axios进行网络请求的方法
Aug 02 #Javascript
vscode中使用npm安装babel的方法
Element实现动态表格的示例代码
JavaScript分页组件使用方法详解
webpack的移动端适配方案小结
Jul 25 #Javascript
You might like
中国的第一台收音机
2021/03/01 无线电
类的另类用法--数据的封装
2006/10/09 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
javascript异步编程的4种方法
2014/02/19 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python机器学习之神经网络(一)
2017/12/20 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
阳光体育活动方案
2014/02/16 职场文书
机械专业求职信
2014/05/25 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
2015年优质护理服务工作总结
2015/04/08 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python