js开发中的常用小技巧（持续更新ing）

1. if 语句可以用&&运算代替

这样做的好处有两个：

• 代码会更加简洁

• &&运算执行比 if 语句速度更快

如

if (id === 4)
{
    //your code
}

可以写成

id === 4 && {
    //your code
}

2. 使用 || 运算符来赋值

let params = {
    id:123,
    name:"test",
    time:"2018-04-08",
}

let time = params.time || ""

  这样做的好处是：

•   避免页面出现undefined的情况

3. 使用void 0 替代undefined

判断变量是否为undefiend时，可以用void 0来代替，这样做的好处有两个：

• undefined 在 ES5 中已经是全局对象的一个只读（read-only）属性了，它不能被重写。但是在局部作用域中，还是可以被重写的。
• void 运算符能对给定的表达式进行求值，然后返回 undefined。也就是说，void 后面你随便跟上一个表达式，返回的都是 undefined，如 void (2), void (‘hello’)。并且void是不能被重写的。但为什么是void 0 呢，void 0 是表达式中最短的。用 void 0 代替 undefined 能节省字节。不少 JavaScript 压缩工具在压缩过程中，正是将 undefined 用 void 0 代替掉了。

示例：

if ( name === void 0 ) {
    // do something
}

4. ES6新增的...扩展运算符可以快速的进行变量更新或数组合并

  如：

const state = {
    name:'',
    time:'',
    active:false,
}

const payload = {
    time:'86400',
    active:true,
}
const update = (state,payload)=>{
    return{
      ...state,
      ...payload,
    }
}

控制台输出看一下结果：

console.log(update(state,payload));
/*
{name: "", time: "86400", active: true}
active: true
name: ""
time: "86400"
__proto__: Object
*/

 

这样做的好处：

• 使用函数进行变量更新，可以多次复用
• 代码结构更规范，逻辑性更强，更方便阅读

5. 使用!!快速将非bool值转化为bool值

 isLogin() {
    return !!userInfo;
  }

6.数组快速去重

let fruits = ['apple','orange','banana','apple','grape','apple']

//第一种方法
let uniqueFruits = Array.from(new Set(fruits))
console.log(uniqueFruits)
//['apple','orange','banana','grape']

//第二种方法
let uniqueFruits = [...(new Set(fruits))]
console.log(uniqueFruits)
//['apple','orange','banana','grape']

7.数据扁平化

//只要有一个元素有数组，那么循环继续
while (ary.some(Array.isArray)) {
  ary = [].concat(...ary);
}