ES6扩展运算符和解构赋值
一. 扩展运算符
// 1.数组扩展运算符(它好比rest参数的逆运算,将一个数组拆分成以逗号分割的参数序列) let arr = [1, 2] console.log(...arr) // 1, 2 数组的拆分,将一个数组拆分成以逗号分割的参数序列 console.log([0, ...arr, 3, 4]) // [0, 1, 2, 3, 4] 数组的合并,将新的数据合并在数组中 let newArr = [...arr] console.log(newArr) // [1, 2] 数组的拷贝,这样可以拷贝一个新的数组,新数据更改就不会影响旧的arr的数据 let arr1 = [3, 4, 5] arr1.forEach(item => { arr = [...arr, item] }) console.log(arr) // [1, 2, 3, 4, 5] 数组的循环添加,往常我们可以用push的方式,现在也可以使用扩展运算符
// 2.对象的扩展运算符 let obj = { name: 'Hello', age: '23' } let newObj = {...obj} console.log(newObj) // {name: 'Hello', age: '23'} 对象的拷贝,这样可以拷贝一个新的对象,新数据更改就不会影响旧的obj数据 console.log({say: 'Text', ...obj}) // {say: 'Text', name: 'Hello', age: '23'} 对象的合并,将新的数据合并在对象中
二. 解构赋值
// 1.数组的解构赋值 备注: 以数组的形式来定义变量名,并通过一一匹配的方式以数组给定变量值 let [a, b, c] = [1, 2, 3] console.log(a, b, c) // 1, 2, 3 一一对应可以进行变量赋值 let [a, [[b], c]] = [1, [[2], 3]]; console.log(a, b, c) // 1, 2, 3 只要是一一对应,不管几层,都可以进行赋值操作 let [a, b, c] = [1, 2] console.log(a, b, c) // 1, 2 undefined 要是变量名没有找到对应的值,就会抛出undefined function funArr() { return [1, 2] } let [a, b, c] = funArr() console.log(a, b, c) // 1, 2 undefined 当我们要拿数组中的某个值时,通过数组的解构赋值就可以直接拿到 备注(数组中他会按照顺序依次去哪,最后没有的会抛出undefined)
// 2.对象的解构赋值 备注:以对象的形式来定义变量名,并通过一一匹配的方式以对象给定变量值 let {name, age} = {name: 'Hello', age: '23'} console.log(name, age) // Hello, 23 注意定义的变量名一定要和赋值的对象属性名一致 let obj = { name: 'Hello', age: '23'} let {name} = obj console.log(name) // Hello 当我们要拿到对象中的某一个值时,我们就可以直接使用对象的解构赋值,就可以自动拿到对象中和你变量名相同的属性值,简洁了代码 function funObj() { return { name: 'Hello', age: '23' } } let {name, age, say} = funObj() console.log(name, age, say) // Hello, 23, undefined 同样,我们可以通过解构赋值一次拿到多个数据 备注(当我们需要拿的值找不到时,就会抛出undefined)