学习笔记---ES6：解构赋值

一、定义：从数组或对象中提取到不同的变量的js表达式

数组、对象、字符串、数值、布尔值、函数参数

1、数组的解构赋值

扩展运算符（合并数组）：

const arr1 = [1, 2, 3]
const arr2 = ['a', 'b', 'c']
const arr3 = [arr1, arr2] // arr3 = [[1, 2, 3], ['a', 'b', 'c']]
const arr4 = [...arr1, ...arr2] // arr4 = [1, 2, 3, 'a', 'b', 'c']

const [a, ...b] = arr1 // b = [2, 3]

默认值：undefined

const arr = [1, undefined, null]
const [a, b = 2, c = 1] arr // a=1,b=2,c=null---undefined才会替换，null不会替换

变量交换：

const a = 10
const b = 20
[a, b] = [b, a] // a=20,b=10

接收多个 函数返回值

function getUserInfo (data) {
    return [
        true,
        {
            name: 'myName',
            sex: 'female'
        },
        '请求成功'
    ]
}

const [state, info, mes] = getUserInfo (obj) // state=true,info={name:'myName',sex: 'female'},mes='请求成功'

2、对象的解构赋值

解构赋值1：

const obj = {name: 'myName', sex: 'female'}
const {name, sex} = obj // name:'myName',sex:'female'

解构赋值2：

const player = {
  name: 'myName',
  master: 'masterName',
  skill: [
    {
      skillName: 'skillOneName',
      mp: 100,
      cd: 10
    },
    {
      skillName: 'skillTwoName',
      mp: 100,
      cd: 10
    },
    {
      skillName: 'skillThreeName',
      mp: 100,
      cd: 10
    }
  ]
}
const { name } = player // name='myName'
const { skill } = player // skill=[{skillName:'skillOneName',mp:100,cd:10}...cd:10}]
const { skill: [ skill1, { skillName }, { skillName:sklName }]} = player
// skill1={skillName:'skillOneName',mp:100,cd:10},skillName='skillTwoName',sklName='skillThreeName'
// 其中{skillName:sklName}=>获取到第三个数组中的skillName并赋值给sklName

结合扩展运算符1:

const obj = {
    name: 'myName',
    age: 18,
    sex: 'female',
    weight: '45kg'
}
const { name, ...otherInfo} = obj // name='myName',otherInfo={age:18,sex:'female',weight:'45kg'}

结合扩展运算符2:

const obj1 = {
    age: 18,
    sex: 'female',
    weight: '45kg'
}

const obj = {
    name: 'myName',
    ...obj1
}
// obj={name:'myName',age:18,sex:'female',weight:'45kg'}

对已声明的标量赋值：

let age
const obj = {
    name: 'myName',
    age: '18',
}
{ age } = obj // 会报错
({ age } = obj) // age = 18

默认值：

let aGirl = {
    name: 'myName',
    age: 18,
}
let { hobby } // hobby =undefined
let { name, age = 24, hobby = ['sing', 'game'] } // name='myName',age = 24,hobby=['sing', 'game']

使用对象传入乱序的函数参数

function AJAX({
    url,
    data,
    type = 'get' // 赋予默认值，如果没传，则是get
})
AJAX({ 
    url,
    data: {
        id: '1234567890'
    }
})