ES6-解构赋值和扩展运算符

1.字符串的解构赋值

通过索引值进行映射

let [a, b, c, d, e, f] = 'hello';
console.log(e); // o

2.数组的解构赋值

通过索引值进行映射

let [a,b,c] = [123,456,789];
console.log(a); // 123

3.对象的解构赋值

1、对象的解构 通过key键进行映射

let obj = {
    name:'账单',
    price:100
}
let {name} = obj;
console.log(name); //账单

2、解构整个对象

let res = {...obj};
console.log(res); //{name: '账单', price: 100}
res.name = 'zhangsan';
console.log(res); // {name: 'zhangsan', price: 100}

3、重命名键名

let {name: title} = obj;
// //  重命名键名之后，操作的是 新的键名 
console.log(title); // 账单

4.扩展运算符...

1.数组的合并

let arr1 = ['刘备','关羽','张飞'];
let arr2 = ['李白','露娜'];
let wzxg = [...arr1,...arr2];
console.log(wzxg);
// ['刘备', '关羽', '张飞', '李白', '露娜']

2.数组的复制

let arr3 = ['E','G','M']
let arr4 = [...arr3];
console.log(arr4);
// ['E', 'G', 'M']

3.将伪数组转换为真正的数组

let divs = document.querySelectorAll('div'); // 默认返回的是一个伪数组
let divArr = [...divs];
console.log(divArr); // [div, div, div]

4.将字符串转换为单个字符数组

let nums = [..."12abc"]
console.log(nums);
//[ '1', '2', 'a', 'b', 'c' ]