ES6 展开运算符(延展运算符)

运算符(延展运算符)"/>

ES6 展开运算符(延展运算符)

1.数组构造

  数组合并

var arr = ['aa','cc'];
var str = ['bb',...arr,'dd'];
console.log(str)   //  ['bb,'aa','cc','dd']

数组复制

// 例子1
var arr = [1,3,4];
var str = [...arr];  // 此时str等于[1,3,4]
str.push(8);
console.log(str);   // 结果为1,3,4,8// 例子2
// 剩余元素变量只是把数组元素copy到另一个数组，所以它们包含的元素相等，但是这2个数组是没有关系的，是不相等的
let color = ['red', 'green', 'blue'];
let [...copiedColor] = color;
console.log(copiedColor);// ["red", "green", "blue"]
console.log(color.toString() === copiedColor.toString()); // true
console.log(color == copiedColor); // false
console.log(color === copiedColor); // fasle

2.数组解构赋值

   特别注意的是不定元素变量（剩余元素变量）必须是解构的最后一个变量，其后面不能再有别的变量，否则会抛出语法错误

错误写法：

// 不定元素变量（剩余元素变量）必须是解构的最后一个变量否则报错,例如下面1,2：
// 例子1
var arr = ['Abby', 'Andy', 'Jane', 'Tom'];
var arr_1,arr_2;
[...arr_1,arr_2] = arr;console.log(arr_1)     //  Uncaught SyntaxError: Rest element must be last element
console.log(arr_2)// 例子2
let color = ['red', 'green', 'blue'];
let [firstColor, ...secondColor, error] = color; // Uncaught SyntaxError: Rest element must be last element

正确写法：

let color = ['red', 'green', 'blue'];
let [, , thirdColor] = color;
console.log(thirdColor); // bluelet [arr1,...arr2] = ['Abby', 'Andy', 'Jane', 'Tom'];
console.log(arr1)   //  Abby
console.log(arr2)   // ['Andy','Jane','Tom']

3.对象解构赋值

let {a} = {a: 3}; // {a} 相当 {a: a}
console.log(a); // a = 3let {a: {b}} = {a: {b: 3}};
console.log(b); // b = 3// 快速的声明并赋予相应的属性值
let obj = {id: 2, name: '弢弢', ago: 29
}let { id, name, ago } = obj;
console.log(id);   // 2
console.log(name); // 弢弢
console.log(ago);  // 29let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x);   // 1
console.log(y);   // 2
console.log(z);   // { a: 3, b: 4 }

4.对象合并

// 将obj1属性添加到obj2中
let obj1 = {name: 'taotao',age: 26,phone: 15800008888
};let obj2 = {address: '江西景德镇'
};obj2 = {address: '江西景德镇',...obj1   
}

4.对象和数组的混合解构

let obj = {personal: {userBasicInfo: {name: {firstName: 'mike',lastName: 'deep'},}},checkRange: [1, 3]
};
let {personal: {userBasicInfo: {name}},checkRange: [checkLevel]
} = obj;console.log(name.firstName); // mike
console.log(checkLevel); // 1

5.react里面运用展开运算符

import React from 'react'   //创建组件，虚拟DOM元素，生命周期
import ReactDOM from 'react-dom'    //创建好的组件和虚拟DOM渲染到页面上function Hello(props) {return <div>你好---{props.name}---{props.age}</div>
}
const dog = {name: '大黄',age: 3
}ReactDOM.render(<div>{<Hello {...dog}></Hello>}
</div>, document.getElementById('app'));// 注意顺序很重要，后面的会覆盖掉前面的,比如下面代码，name会被覆盖成rose
ReactDOM.render(<div>{<Hello {...dog} name={'rose'}></Hello>}
</div>, document.getElementById('app'));