本文是自己学习并记录的一些我们在前端项目中可能会经常用到的一些js使用小技巧，可以应用到我们的编码过程中。

1、数组去重

const numbers = [1, 2, 3, 4, 4, 1] 
console.log([...new Set(numbers)]) // [1, 2, 3, 4]

2、使用 && 符号简化条件语句

// 普通写法 
if (bool) {     doSomething() } 
// 简写 
bool && doSomething()

3、为了提高数字的可读性，可以使用下划线作为分隔符

const num = 200_200_200
console.log(num)  // 200200200

4、数组扁平化处理

二维数组

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr);  // [11, 22, 33, 44, 55, 66]`

多维数组

function flattenArray(arr) {
    const flattened = [].concat(...arr);
    return flattened.some(item => Array.isArray(item)) ?
    flattenArray(flattened) : flattened;
}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr);   // [11, 22, 33, 44, 55, 66, 77, 88, 99]

5、可选链操作符?.

在引用为空(nullish ) (null 或者 undefined) 的情况下不会引起错误，该表达式短路返回值是 undefined。与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。

当尝试访问可能不存在的对象属性时，可选链操作符将会使表达式更短、更简明。在探索一个对象的内容时，如果不能确定哪些属性必定存在，可选链操作符也是很有帮助的

const person = {
    name: 'David',
    dog: {
        name: '馒头',
        age: 1
    }
}
const catName = person.cat?.cat.name
console.log(catName)  // undefined
// 当调用没有定义的方法时,使用了?.运算符，只会返回undefined,不会报错
console.log(person.go()) //VM146:1 Uncaught TypeError: person.go is not a function
console.log(person.go?.()) // undefined

6、es6中的条件语句

多条件处理

// 普通写法
function test(fruit) { 
    if (fruit == 'apple' || fruit == 'banana'||fruit == 'orange'||fruit == 'pear'||fruit == 'litchi') {
         console.log('yes'); 
    } 
}
// 利用Array的includes 将条件提取到数组中 代码更加整洁
function test(fruit) { 
    const fruitArr = ['apple','banana','orange','pear','litchi'];
    if(fruitArr.includes(fruit)) {
        console.log('yes')
    }
}

反转条件，使用return，减少嵌套

// 还是使用上面的代码，不过多加一个条件
function test(fruit,number) { 
    const fruitArr = ['apple','banana','orange','pear','litchi'];
    if(fruitArr.includes(fruit)) {
        console.log('yes')
        if(number>10) {
            cosnole.log('a lot')
        }
    }
}
// return 减少嵌套
function test(fruit,number) { 
    const fruitArr = ['apple','banana','orange','pear','litchi'];
    if(!fruitArr.includes(fruit)) return;
    console.log('yes')
    if(number>10) {
        cosnole.log('a lot')
    }
}

关于函数参数的默认值

function test(number) { 
    const count = number||1;  // 当没有传入number的时候，设置默认值为1
    console.log(count)
}
// 结果
test();//1
//

// 设置默认参数，代码更简洁
function test(number=1) { 
    console.log(number)
}
// 结果
test();//1
//

如果参数是一个Object?

function test(person) { 
    if(person&&person.name) {
        console.log(person.name)
    }
}
// 结果
test(); // undifined
test({name: '张三'}); // 张三

使用默认函数参数和解构来避免person&&person.name这样的检查

function test({name}={}) { 
    console.log(name)
}
// 结果
test(); // undifined
test({name: '张三'}); // 张三

这里我们只需要person的name属性，我们可以使用{name}来解构参数。

同时我们设置函数的默认参数为空对象{}，这样我们可以避免传参为test(undefined)时报错的情况发生。

重点来咯！条件语句的优化

我在做项目的时候，有时候需要做一些条件判断，但是如果条件较多的时候，我们使用if else 或者 switch语句会显得代码过于臃肿。那么有没有更好的写法呢？

直接上代码

// if else语句
function change(status) {
    if(status === 'wait') {
        return '未开始';
    }else if(status === 'start') {
        return '已开始';
    }else if(status === 'doing') {
        return '进行中';
    }else if(status === 'end') {
        return '已结束';
    }else {
        return '无状态'
    }
}
change();// '无状态'
change('wait');  // '未开始'

// switch语句
function change(status) {
    switch(status) {
        case 'wait':
        return '未开始';
        case 'start':
        return '已开始';
        case 'doing':
        return '进行中';
        case 'end':
        return '已结束';
        default
        return '无状态'
    }
}
change();// '无状态'
change('wait');  // '未开始'

看起来是不是感觉很冗长？反正就是看起来不太爽就对了！

天不生我李淳罡，剑道万古如长夜。剑来！皮一下很开心

首先我们试试用对象字面量吧！

// 对象字面量
const obj = {
    wait: '未开始',
    start: '已开始',
    doing: '进行中',
    end: '已结束',
}
function change(status) {
    return obj[status] || '无状态'
}
change();// '无状态'
change('wait');  // '未开始'

我们再用Map试试看

// 
const obj = new Map()
    .set('wait', '未开始')
    .set('start', '已开始')
    .set('doing', '进行中')
    .set('end', '已结束')
    
function change(status) {
    return obj.get(status) || '无状态'
}
change();// '无状态'
change('wait');  // '未开始'

Array.filter()也可以实现

const arr = [    {key: 'wait',value: '未开始'},    {key: 'start',value: '已开始'},    {key: 'doing',value: '进行中'},    {key: 'end',value: '已结束'}]
function change(status) {
    return arr.filter(item => item.key === status)
}
change();// []
change('wait');  // [{key: 'wait',value: '未开始'}]

本文用于自己总结学习，后续如果有新的小技巧会加进来。

参考文档 : juejin.cn/post/698421…

实用JS小技巧汇总