不可多得的JS优化技巧

1、有多个条件的 if 语句

// before:

if (x === 'a' || x === 'b' || x === 'c' || x ==='d') { // 语句 } 

// after:

if (['a', 'b', 'c', 'd'].includes(x)) { // 语句 }

2、简化 if true ... else

// before
let test;
if (x > 100) {
    test = 1;
} else {
    test = 2;
}
// after
let test = (x > 10) ? 1: 2;
//如果是布尔值可以直接进行下方代码
let test = x > 10;
console.log(test);

　我是经常用三目运算符嵌套操作的，如果条件过多不建议使用。

    扩展三目运算实现多个函数调用

// nefore
function a() {
  console.log('a');
};
function b() {
  console.log('b');
};
var c= 1;
if (c === 1) {
  a();
} else {
  b();
}
// after
(c=== 1? b)();

3、null、undefined和空值检查

当我们创建新变量时，有时候会检测该变量是不是非null或者undefined等

// before
if (test1 !== null || test1 !== undefined || test1 !== '') {
    let test2 = test1;
}
// after
let test2 = test1 || "";

4、给多个变量赋值

// before
let a,b,c;
a = 1;
b = 2;
c = 3;

// after
let [ a, b, c] = [1, 2, 3];

5、用于多个条件判断的&&操作符

//before
if (a) {
 callFun(); 
} 
//after
a&& callFun();

6、switch的简化

涉及到枚举比较多的功能时，避免不了使用switch，但是冗余的代码看起来真的很不爽

// before
switch (type) {
  case 1:
    a();
  break;
  case 2:
    b();
  break;
  case 3:
    c();
  break;
  // And so on...
}

// after
var arr = {
  1: a,
  2: b,
  3: c
};
data[type] && data[type]();

7、扩展运算符简化

这个大家应该都不陌生

//before
const data = [1, 2, 3];
const test = [4 ,5 , 6].concat(data);

//after
const data = [1, 2, 3];
const test = [4 ,5 , 6, ...data];
console.log(test); // [ 4, 5, 6, 1, 2, 3]

也可以直接使用扩展运算符进行克隆

//before
const a = [1, 2, 3];
const b = a.slice()

//after
const a = [1, 2, 3];
const b = [...a];

8、对象属性赋值

let a = 'a'; 
let b = 'b';
//before
let obj = {a: a, b: b}; 
//after
let obj = {a, b};

9、解构赋值

//before
const a = data.a;
const b = data.b;
const c = data.c;
//after
const { a, b, c} = data;

10、indexOf的按位操作简化

//before
if(arr.indexOf(item) > -1) { // item found 
}
if(arr.indexOf(item) === -1) { // item not found
}
//after
if(~arr.indexOf(item)) { // item found
}
if(!~arr.indexOf(item)) { // item not found
}

11、Object.entries() 和 Object.values()

Object.entries()可以把对象转化为对象数组，Object.values()跟前者功能类似，只不过没有键

// Object.entries()
const data = {a: "a", b:"b", c:"c"};
const arr = Object.entries(data);
console.log(arr);
/** Output:
[ [ 'a', 'a' ],
  [ 'b', 'b' ],
  [ 'c', 'c' ]
]
**/

// Object.values()
const arr2 = Object.values(data);
console.log(arr2);
/** Output:
[ 'a', 'b', 'c']
**/

12、双重按位操作

// before
Math.floor(1.8) === 1 // true

// after
~~1.8 === 1 // true

13、获取数组的最大值和最小值

const arr = [1,2,3];
Math.max(...arr); // 3
Math.min(...arr); // 1

14、指数幂简化

// before
Math.pow(2,3); // 8

// after
2**3 // 8

15、数组find简化

const data = [{
        label: 'a',
        name: 'a'
    },
    {
        label: 'b',
        name: 'b'
    },
    {
        label: 'c',
        name: 'c'
    },
]
function findFun (value) {
    for (let i = 0; i < data.length; ++i) {
        if (data[i].label=== 'a' && data[i].name === value) {
            return data[i];
        }
    }
}
//after
newData = data.find(data => data.label === 'a' && data.name === 'a');
console.log(newData ); // { label : 'a', name: 'a' }