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 }),
};
如果
flag
为true
,则{ age: 16 }
会被添加到对象中;如果flag
为false
,相当于展开false
,不会对对象产生任何影响
(2) 向数组添加属性
const flag = false
arr = ['a','b',flag && 'c'].filter(Boolean)