ES6-解构赋值，语义增强，扩展运算符

1，解构赋值

• 解构对象和数组的区别是，对象解构出的属性名必须一致，而数组的随意。

1.1，解构对象

1.1.1，直接解构对象

允许将某个对象的字段的作用域本地化。
也就是说，提取自己需要的字段，并为它们创建相应的变量。并且这个变量的声明，会受到关键字var或是let的影响，

function fun() {
    let person = {
      name: 'www',
      age: 100,
      sex: 'girl'
    }
    var {name, sex} = person
    console.log(name, sex)  // www girl
}
console.log(window.sex)     // undefined
复制代码

1.1.2，解构作为参数传入的对象

这里，解构了传入的对象

let getPerson = person => {
  // let {firstname} = person
  // console.log(`${firstname} is man`)
  console.log(`${person.firstname} is man`)
}
let person = {
  firstname: 'Beckham',
  lastname: 'David'
}
getPerson(person)
复制代码

也可以直接在传参时解构

let getPerson = ({firstname}) => {
    console.log(`${firstname} is man`)
}
let person = {
  firstname: 'Beckham',
  lastname: 'David'
}
getPerson(person)
复制代码

1.2，解构数组

1.2.1，基础用法

直接解构，是按数组的顺序进行的

let [first] = ['beijing', 'shanghai', 'shenzhen']
console.log(first) // beijing

let [first, second] = ['beijing', 'shanghai', 'shenzhen']
console.log(first, second)  // beijing shanghai
复制代码

可以使用逗号，进行列表的匹配，跳过不需要的值

let [,,thrid] = ['beijing', 'shanghai', 'shenzhen']
console.log(thrid) // shenzhen
复制代码

1.2.2，其他用法

1. 利用数组进行，变量声明并赋值时

let arr = ["one", "two", "three"];

let [first, second, third] = arr;
console.log(first); // "one"
console.log(second); // "two"
console.log(third); // "three"
复制代码

2. 变量先声明后赋值时

let a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
复制代码

3. 可以在解构赋值时，设置默认值

let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
复制代码

4. 交换变量，可以不用定义第三个变量

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
复制代码

2，语义增强

与解构恰恰相反，可以从全局作用域中获取变量，并将其转为一个对象。
数组类似。

let name = 'Backham',
  age = 100,
  print = function () {
    console.log(`${this.name},${this.age} `)
  }
let person = {name, age, print}
person.print() // Backham,100
复制代码

3，扩展运算符（三点运算符）

3.1，数组

3.1.1，可以联合数组与数组，或数组与变量的内容

let country1 = ['beijing', 'shanghai', 'shenzhen']
let country2 = ['hangzhou', 'chengdu']
let all = [...country1, ...country2]
console.log(all.join()) // beijing, shanghai, shenzhen, hangzhou, chengdu

let c = 'suzhou'
let a = [c, ...country2]
console.log(a.join()) // suzhou, hangzhou, chengdu
复制代码

3.1.2，可以拆解数组

let [first, ...country] = ['beijing', 'shanghai', 'shenzhen']
console.log(country.join()) // shanghai,shenzhen
复制代码

3.1.3，可以进行浅克隆

tips，浅克隆：当对象或数组的字段值被复制时，字段所引用对象不会被复制。

let country = ['beijing', 'shanghai', 'shenzhen', {sex: 108}]
let country1 = [...country]
let c = country
console.log(c === country) //true，c和country指向同一个引用
console.log(country1 === country) // false，country1是一个新的数组
console.log(country[3] === country1[3]) //true
复制代码

用处，可以在使用一些会影响原数组的方法时，使用它的浅克隆对象。
比如，获取数组的最后一个元素，而不影响原数组（当然使用length-1更优雅，这里只是举一个栗子）

let [...country] = ['beijing', 'shanghai', 'shenzhen']

let [last] = country.reverse()
console.log(last) // shenzhen
复制代码

3.2，对象

• 对象类似。

转载于:https://juejin.im/post/5b2f9b46f265da599d7d4970