这么好用的JS小技巧你确定不用?

353 阅读2分钟

1. if-else 或者三目运算符 ?:给某个变量赋予 boolean 值

let flag;
if(a > b){
    flag = true
}
flag = false
(或者)
a > b ?flag = true : flag = false;

优化:
let flag = a > b 

2. 多条件判断

if(a === '1' || a === '2' || a === '3') {}

优化:(使用 ES6 数组方法)
let isTrue = ['1','2','3'].includes(a);
if(isTrue) {}

3. 根据判断条件调用不同的函数(双分支条件)

function fn1(){}
function fn2(){}
a > b ? fn1() : fn2()

简单:
(a > b ? fn1 : fn2)()

4. 根据判断条件调用不同的函数(多分支条件)


switch(type) {
    case 'typeA':
        fn1();
        break;
    case 'typeB':
        fn2()
        break;
    case 'typeC':
        fn3()
        break;
    default:
        break
}

优化:(将函数封装成对象)
const obj = {
    'typeA': fn1,
    'typeB': fn2,
    'typeC': fn3,
}

obj[type] && obj[type]()

6. 使用 ES6 中的可选链操作符(?.)获取对象属性值

const obj = {
    name: 'zhangsan',
    age: 18
}

const userName = obj && obj.name

优化:(ES6 中的可选链操作符 ?.)
const userName = obj?.name

7. Null, Undefined, 空值检查 -- 空值合并运算符(??)

if (value !== null || value !== undefined || value !== '') { 
    //...
}

优化:(ES6中新出的空值合并运算符)
if(value??value !== ''){
  //...
}

vue项目中使用可选链(?.)及 空值合并运算符(??)配置步骤详见 juejin.cn/post/709594…

8. ES6 箭头函数

const data = () => a = b
返回一个对象(注意返回对象一定要用 '()'包裹,否则出错)
const obj = () => ({ a: 1, b: 2})

9. 数组和对象的合并

const a = [1,2,3];
const b = [1,2,4,5,6];
const c = a.concat(b);  //[1,2,3,1,2,4,5,6]

const obj1 = {
    a: 1,
}
const obj2 = {
    a: 1,
    b: 1,
}
const obj = Object.assgin({}, obj1, obj2);  //{a: 1,b: 1}
数组合并未去重
优化:(使用 ES6 提供的扩展运算符)
const c = [...new Set([...a, ...b])];  //[1,2,3,4,5,6]
const obj = { ...obj1, ...obj2 };  //{a: 1,b: 1}

10. 向对象或数组添加属性

(1) 向对象添加属性 -- 可以使用展开运算符来有条件地向对象中添加属性:

const flag = true;
const person = {
  id: 1,
  name: "zhangsan",
  ...(flag && { age: 12 }),
};

如果 flagtrue ,则 { age: 16 } 会被添加到对象中;如果 flagfalse ,相当于展开 false ,不会对对象产生任何影响

(2) 向数组添加属性

const flag = false
arr = ['a','b',flag && 'c'].filter(Boolean)

image.png