展开运算符
合并功能
例1
javascript
let state = { name: "jack" }
{...state, { name: "finley" }}
// 返回
{name: "finley"}
例2
javascript
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// 结果
["one", "two", "three", "four", "five"]
拷贝功能
javascript
var arr = [1,2,3];
var arr2 = [...arr]; // 和arr.slice()差不多
arr2.push(4)
// arr2 此时变成 [1, 2, 3, 4]
// arr 不受影响
记住:数组中的对象依然是引用值,所以不是任何东西都“拷贝”过去了。
例3
javascript
let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);
// 实际上, 展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)。
{...{name: "finley"}, ...{name: "xx"}} 结果 {name: "xx"}
module 模块
用default导出的话,import时就不用大括号,因为default只有一个。
async 和 await
async 表示函数里有异步操作 await 表示紧跟在后面的表达式需要等待结果。 async 函数返回一个 Promise 对象
例1
const demo = async function() {
// await 后面接表达式
await alert(1);
}
// async 函数返回一个 Promise 对象
demo().then(res => console.log(1))
链判断运算符
在项目开发中,我们经常会遇到要取结构深层数据的情况,下面的一行代码就在所难免: const price = data.result.redPacket.price
那么当某一个key不存在时,undefined.key就会报错,通常我们会优化成下面的样子:
const price = (data && data.result && data.result.redPacket && data.result.redPacket.price)||'default'
es6提供链判断运算符:
const price = data?.result?.redPacket?.price||'default'
这样即使某一个key不存在,也不会报错,只会返回undefined。
相关语法:
javascript
a?.b // 等同于 a == null ? undefined : a.b
a?.[x] // 等同于 a == null ? undefined : a[x]
a?.b() // 等同于 a == null ? undefined : a.b()
a?.() // 等同于 a == null ? undefined : a()