一、可选链操作符
let nestedProp = obj && obj.first && obj.first.second;
let nestedProp = obj?.first?.second;
二、空位合并操作符
let c = a ? a : b // 方式1
let c = a || b // 方式2
但是这两种方式有个明显的弊端，它都会覆盖所有的假值，如(0, false)，这些值可能是在某些情况下有效的输入
let c = a ?? b;
// 等价于let c = a !== undefined && a !== null ? a : b;
例如有以下代码：
let x = null;
let y = x ?? 500;
console.log(y); // 500
let n = 0
let m = n ?? 9000;
console.log(m) // 0
三、扩展运算符（…）用于取出参数对象的所有可遍历属性，浅拷贝到当前对象之中
1、克隆对象
const _obj = { a: 0, b: 1, c: 2 };
const obj = JSON.parse(JSON.stringify(_obj));
const obj = Object.assign({}, _obj)
const obj = { ..._obj };
2、合并对象
const obj1 = { a: 0, b: 1, c: 2 };
const obj2 = { c: 3, d: 4, e: 5 };
const obj = { ...obj1, ...obj2 };
3、克隆数组
const _arr = [0, 1, 2];
const arr = [..._arr];
4、合并数组
const arr1 = [0, 1, 2];
const arr2 = [3, 4, 5];
const arr = [...arr1, ...arr2];
5、扩展运算符还可以将字符串转为数组。
如果扩展运算符后面是字符串，它会自动转成一个数组
[...'hello']
// [ "h", "e", "l", "l", "o" ]
四、当想写if...else语句时，使用三元操作符来代替。
const x = 20;
let num;
if (x > 10) {
num= 'num > 10';
} else {
num= 'num <= 10';
}
简写：
const num = x > 10 ? 'num > 10': 'num <= 10';
五、js循环
一般我们会用for循环
for (var i = 0; i < arr.length; i++) {
}
简写：
for (var i in arr) {
}
arr.forEach((item, index) => {
})
map、filter、reduce
还有比如我们有一个包含名称和种类属性的对象数组，我们只想要这个数组中所有name属性的值放在一个新数组中
let nameList = lists.map(x => x.name);
let ageList = lists.filter(x => x.age === "18");
let ageTotale = lists.reduce(function(total, item) {
return item.age + total;
}, 0);
六、模板字符串
传统写法我们可能会这么写
const db = 'http://' + host + ':' + port + '/' + database;
简写：
const db = `http://${host}:${port}/${database}`;
七、命名参数
// 我们常常使用的写法
const getStuffNotBad = (id, force, verbose) => {
...do stuff
}
getStuffNotBad(150, true, true)
优化后的写法：
const getStuffAwesome = ({id, force, verbose}) => {
...do stuff
}
getStuffAwesome({ id: 150, force: true, verbose: true })
八、使用window对象的方法时
mounted() {
var self = this
window.addEventListener('scroll', function() {
self.scrolled = true
})
}
mounted() {
window.addEventListener('scroll', () => {
this.scrolled = true
})
}