1. 程式人生 > 實用技巧 >學習筆記---ES6:解構賦值

學習筆記---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'
    }
})