ES6快速入门（三）--拓展运算符

6：拓展运算符

6.1：涵义：

ES6的拓展运算符，它的语法很简单，使用三个点表示"..."。可以将一个数组转为用逗号分隔的参数序列（相当于rest方法的逆运算）。

它将可迭代对象展开到其单独的元素中，所谓的可迭代对象就是任何能用for，of循环进行遍历的对象，例如，数组，字符串，Map，Set，DOM节点等。

6.2：应用：

抛弃apply来转换数组为参数序列的方法

复制数组arr_new=[...arr_old](浅拷贝)

合并数组[1,2,...more]

将字符串转为真正的数组[...'hello']//['h","e","l","l,"o"]

Array.from()将类数组和可遍历对象（set和map）转为数组

console.log(...[1,2,3])
//1 2 3
console.log(1,...[2,3,4],5)
//1 2 3 4 5

6.3：应用

6.3.1：数组的拓展运算符

// 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的方式，现在也可以使用扩展运算符

var arr1=[1,2,3];
var arr2=[...arr1];
 
6.3.2：合并数组
 
var a=[1,2,3];
 
var b=[4,5,6];
 
var c=[7,8,9];
 
//ES5
 
var d=a.concat(b,c);   //[1,2,3,4,5,6,7,8,9]
 
//ES6的合并数组
 
var e=[...a,...b,...c];   //[1,2,3,4,5,6,7,8,9]

6.3.2：对象的拓展运算符

     //对象拓展运算符
        let person1 = { 
             name: "ok",
             age: 10 }
        let someone = { ...person1 }
        console.log(someone)
      // {name: 'ok', age: 10} 对象的拷贝，这样可以拷贝一个新的对象，
    //新数据更改就不会影响旧的obj数据
 
        let age = { age: 66 }
        let name = { name: "小黑" }
        let person2 = { ...age, ...name }
        console.log(person2)//对象的合并，将新的数据合并在对象中

6.3.3：与解构赋值结合

拓展运算符可以与解构赋值结合起来，用于生成数组。

解构赋值是对赋值运算符的扩展。

它是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

补充：解构赋值主要分为对象的解构和数组的解构，在没有解构赋值的时候，我们赋值是这样的

let arr = [0,1,2]
let a = arr[0]
let b = arr[1]
let c = arr[2]

这样写很繁琐，那么我们有没办法既声明，又赋值，更好的写法呢？肯定是有的，那就是解构赋值。解构赋值，简单理解就是等号的左边和右边相等。
6.3.4：

//解构赋值与扩展运算符：
 
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
 
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
//对象：对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
 
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
 
//等同于
 
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }
 
//数组：复制数组
 
const arr1 = [1, 2];
const arr2 = [...arr1];
 
//扩展运算符还可以将字符串转为真正的数组
 
[...'hello']   // [ "h", "e", "l", "l", "o" ]

6.3.5：适用于所有的类数组集合（实现了遍历器接口的数组类型）。