學習筆記---ES6:解構賦值
阿新 • • 發佈:2020-07-22
一、定義:從陣列或物件中提取到不同的變數的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' } })