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 }