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

747 阅读1分钟

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"
  1. 变量先声明后赋值时
let a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
  1. 可以在解构赋值时,设置默认值
let a, b;

[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
  1. 交换变量,可以不用定义第三个变量
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,对象

  • 对象类似。