js 代码简写

JavaScript 代码简写技巧

进入团队之后，在看前辈的代码式发现有许多js的编写技巧跟自己有所不同，第一时间感觉脑袋要转一下弯才能想过来。到了后面逐渐也被这种简写所影响，因此根据网上的文章以及自己的理解对js的代码简写做了一个总结。

常规篇

三目运算符替代if else

//原生语句
const x = 20
let name
if (x > 10) {
   name = '匿寻'
} else {
   name = '康康'
}

//简写版本
const name = x > 10 ? '匿寻' : '康康'

循环语句 for of 替代 for i

//原生语句
for (let i = 0; i < arr.length; i++)
  
//简写版本
 for (let item of arr)
 arr.forEach(res =>{})

模板字符串代替双引号(双引号在换行时必须使用+连接)

//原生语句
const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
   + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
   + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'

const lorem = `Lorem ipsum dolor sit amet, consectetur
   adipisicing elit, sed do eiusmod tempor incididunt
   ut labore et dolore magna aliqua. Ut enim ad minim`

用||进行变量赋值

//原生语句
let variable1,variable2
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
    variable2 = variable1;
}
else{
      variable2 = "new"
}

//简写版本
const variable2 = variable1  || 'new';

ES6 简写大全

对象属性key和value相同

//原生语句
const obj = { x:x, y:y }

//简写版本
const obj = { x, y }

箭头函数

//原生语句
function add (x, y){
  return x+y;
}

//简写版本
let add = (x, y) =>{ x+y }

tips: 1.如果只有一个参数，括号可以省略。
      2.如果一个参数都没有必须有括号
      3.函数体内如果只有一条return语句，可以省略return关键字
      4.箭头函数的this时逐渐往上层冒泡查询的

解构赋值

//原生语句
const observable = require('mobx/observable')
const action = require('mobx/action')
const store = this.props.store
const form = this.props.form
const loading = this.props.loading

//简写版本,loding:load 为重新命名
import { observable, action } from 'mobx'
const { store, form, loading: load} = this.props

扩展操作符 ...

//原生语句
const odd = [1, 3, 5]
const nums = [2 ,4 , 6].concat(odd)

//简写版本
const odd = [1, 3, 5 ]
const nums = [2 ,4 , 6, ...odd]

//将扩展操作符和解构赋值结合使用
const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 }
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

tips: 1.扩展操作符不仅可以运用在数组上也能运用在对象上面
      2.在数组操作上不仅能合并数组，还能复制，删减等

最后编辑于：2020.05.30 21:16:34