超实用js技巧，帮你提升代码质量

**

1、改写多个if else

**
某一天我看见了这样一段代码，看的真是心里难受。。。。。

if (index === '1') {
	return 'index';
} else if (index === '2') {
	return 'my';
} else if (index === '3') {
	return 'classify';
} else if (index === '4') {
	return 'shopcart';
} else if(index === '5'){
	return 'detail';
} else if (index === '6') {
	return 'shop';
} else {
	return 'other';
}

我只想弱弱的说一句，这样写不累吗，为什么不抽离出一个方法呢？？他不香吗，现在来改写一下

function  judgeFun(index) {
    const list = [
        { key: '1', value: 'index' },
        { key: '2', value: 'my' },
        { key: '3', value: 'classify' },
        { key: '4', value: 'shopcart' },
        { key: '5', value: 'detail' },
        { key: '6', value: 'shop' },
    ]
    for (let i = 0; i < list.length; i++) {
        const item = list[i]
        if (index.includes(item.key)) { return item.value }
    }
    return '暂未找到符合条件的'
}
judgeFun('3')

2、If 多个条件的时候

下面这个代码也和上面差不多

if (x === '12' || x === '34' || x === '56' || x ==='78') {
    //do something
}


//改写后
if (['12', '34', '56', '78'].includes(x)) {
   //do something
}

3、if else短的时候建议使用三目运算符(尽量少用)

if (x === 'xxxxxx') {
    x = true
} else {
    x = false
}

//改写后
x === 'xxxxxx' ? true : false

三目运算符性能高，代码量少。最好在简单逻辑分支使用，在复杂逻辑分支避免使用

// 简单逻辑可以使用三目运算符
var data= typeof window !== "undefined" ? window : this

// 复杂逻辑不适合使用
var ok = isString ? (isTooLang ? 2 : (isTooShort ? 1 : 0)) : -1

4、Null, Undefined, 空检查、默认赋值

if (x !== null || x !== undefined || x !== '') {
    let y = x
}

// 改写后
let y = x || ''

5、更好的for 循环迭代

for (var i = 0; i < list.length; i++)

// 改写后
for (let i in list) 或  for (let i of list)
//或者
function forList(ele, index, array) {
  console.log(`test--${index}--${ele}`)
}

//或者
[1, 2, 3].forEach(list)

6、判断对象是否是空对象

有时候看见网上很多人都是这样判断的，这种方式也可以但是不严谨

JSON.stringify(obj) === '{}'

我们可以这样

Object.keys(obj).length === 0

7、声明多个变量

let x;
let y = 20

//改写后
let x, y = 20

8、给多个变量赋值

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

//改写后
let [a, b, c] = [1, 2, 3]

9、与 (&&) 短路运算

如果你只有当某个变量为 true 时调用一个函数，那么你可以使用与 (&&)短路形式书写。

if (isLogin) {
 navigateToHome()
}

//改写后
isLogin && navigateToHome()

利用这个我们还可以进行判断，如果某个值为真的时候同时执行三个方法

token && aa() || bb() || cc()

React 中想要有条件地渲染某个组件时，这个与 (&&)短路写法比较有用

<div> { this.state.isLoading && <Loading /> } </div>

10、找出数组中的最大和最小数字

const arr = [2, 8, 15, 4]
Math.max(...arr) // 15
Math.min(...arr) // 2

11、合并数组

let arr1 = [20, 30]
//Longhand
let arr2 = arr1.concat([60, 80])
// [20, 30, 60, 80]


//改写后
let arr2 = [...arr1, 60, 80]
// [20, 30, 60, 80]

12、比较返回

let test
function checkReturn() {
    if (!(test === undefined)) {
        return test;
    } else {
        return testFun('test')
    }
}
var data = checkReturn()
console.log(data); //输出test的值
function testFun(val) {
    console.log(val)
}

// 改写后
function checkReturn() {
    return test || testFun('test')
}

13、用三元运算符解决函数调用

function test1() {
  console.log('test1')
}
function test2() {
  console.log('test2')
}
var test3 = 1
if (test3 == 1) {
  test1()
} else {
  test2()
}


// 改写后
(test3 === 1 ? test1 : test2)()

14、改写switch语句

这部分和刚开始的if else 语句一样，都是过长的时候我们改写

switch (data) {
  case 1:
    test1()
  break;

  case 2:
    test2()
  break;

  case 3:
    test()
  break;
  // 下面太多省略
}


//改写后
var data = {
  1: test1,
  2: test2,
  3: test
};

data[anything] && data[anything]()

15、Object.entries()：帮助我们将对象转为对象数组

const data = { test1: '12', test2: '34', test3: '56' }
const arr = Object.entries(data)
console.log(arr)

/** 输出:
[ [ 'test1', '12' ],
  [ 'test2', '34' ],
  [ 'test3', '56' ]
]
**/

16、Object.values()

ES8 中引入的一项新功能，它执行与 Object.Entry () 类似的功能，但没有关键部分

const data = { test1: '12', test2: '34' }
const arr = Object.values(data)
console.log(arr)

/** 输出:
[ '12', '34']
**/

17、根据if判断条件调用不同方法

if (type === 'test1') {
  test1();
}
else if (type === 'test2') {
  test2();
}
else if (type === 'test3') {
  test3();
}
else if (type === 'test4') {
  test4();
} else {
  return '执行了这里，前面的都不成立'
}



// 改写后
var types = {
  test1: test1,
  test2: test2,
  test3: test3,
  test4: test4
};

var func = types[type];
(!func) && '执行了这里，前面的都不成立'; func();

18、数组类型常用方法

Concat() 连接两个或更多数组

splice(index,len,[item]) 删除元素，并向数组添加一个新元素。

slice() 从某个已有的数组返回选定的元素

join() 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分割

push() 在数组后添加元素，并返回新的长度

unshift() 在数组最前添加元素

pop() 删除数组最后一个元素并返回该元素的值

reverse() 颠倒数组中元素的顺序

shift() 删除并返回数组中第一个元素

sort() 对数组元素进行排序

toSource() 返回该对象的源代码

toString() 把数组转换为字符串并返回结果

toLocaleString() 把数组转换为本地数组，并返回结果

valueOf() 返回对象的原始值

19、深拷贝多级对象

为了深拷贝一个多级对象，我们要遍历每一个属性并检查当前属性是否包含一个对象。如果当前属性包含一个对象，然后要将当前属性值作为参数递归调用相同的方法（例如，嵌套的对象）。

我们可以使用JSON.stringify()和JSON.parse()，如果我们的对象不包含函数、undefined、NaN 或日期值的话。
如果有一个单级对象，例如没有嵌套的对象，那么我们也可以使用扩展符来实现深拷贝。

如果你的对象包含 function, undefined or NaN 值的话，JSON.parse(JSON.stringify(obj)) 就不会有效。因为当你 JSON.stringify 对象的时候，包含 function, undefined or NaN 值的属性会从对象中移除。因此，当你的对象只包含字符串和数字值时，可以使用JSON.parse(JSON.stringify(obj))

let obj = {x: 20, y: {z: 30}};

const makeDeepClone = (obj) => {
  let newObject = {};
  Object.keys(obj).map(key => {
    if(typeof obj[key] === 'object'){
      newObject[key] = makeDeepClone(obj[key]);
    } else {
      newObject[key] = obj[key];
    }
  });
 return newObject;
}
const cloneObj = makeDeepClone(obj);


//改写后
const cloneObj = JSON.parse(JSON.stringify(obj));
//Shorthand for single level object
let obj = {x: 20, y: 'hello'};
const cloneObj = {...obj};

21、获取字符串中的字符

let str = 'jscurious.com';

str.charAt(2); // c
//改写后
str[2]; // c