ES6 解构赋值与展开语法

解构赋值

将 属性/值 从 对象/数组 中取出赋值给其他变量 语法：要从原变量中取出的变量 = 原变量

数组解构

var [ one, two, three ] = [1, 2, 3]
console.log(one, two, three)  // 1 2 3

对象解构

const c1 =  {
          
   
    name: Tom,
    gender: 男,
    age: 20
}
 var {
          
   name, gender, age} = c1
 console.log(name, gender, age)  // Tom 男 20

嵌套对象数组解构

const c2 = {
          
   
    name: Tom,
    course: [
        {
          
   
            courseName: math,
            score: 90
        },
        {
          
   
            courseName: English,
            score: 80
        }
    ]
 }

var {
          
   
    name: name,   // 原变量：新变量
    course: [
        {
          
    score: mathScore },   
        {
          
    score: EngScore } 
    ]
} = c2
console.log(name, mathScore, EngScore)  //Tom 90 80

应用

1.交换变量

var x = 1
var y = 2  
var [x, y] = [y, x] 
console.log(x, y)  // 2 1

2. 获取指定值

var [a, b] = [1, 2, 3, 4]
console.log(a, b)  // 1 2
var [name, gender] = [Tom, 男, 20]
console.log(name, gender)  // Tom 男

获取指定外的值—剩余模式

var [a, ...b] = [1, 2, 3, 4]
console.log(b)   // [ 2, 3, 4 ]

展开语法

1.函数调用

function fun1(x, y) {
          
    console.log(x, y) }
var arr1 = [1, 2]
fun1(...arr1)  // 1 2

2.构造、拷贝、连接数组

var arr2 = [3, 4]
var newArr1 = [3, ...arr2]  // 数组构造
var newArr2 = [...arr2]   // 数组拷贝
var newArr3 = [...arr1, ...arr2]   // 数组连接
console.log(newArr1)   // [ 3, 3, 4 ]
console.log(newArr2)   // [ 3, 4 ]
console.log(newArr3)   // [ 1, 2, 3, 4 ]

3.拷贝、合并对象

var obj1 = {
          
    name: Tom, gender: 男}
var obj2 = {
          
   age: 20}
var obj3 = {
          
   ...obj1}
var obj4 = {
          
   ...obj1, ...obj2}
console.log(obj3)  // { name: Tom, gender: 男 }
console.log(obj4)  // { name: Tom, gender: 男, age: 20 }