• 從ES6開始，JavaScript引入了解構賦值，可以同時對一組變量進行賦值。。

1. 基本類型

let [lString, lBoolean, lNumber] = ['ES6', true, 20181227]; // 結果：lString = ES6, lBoolean = true, lNumber = 20181227/*** 注意，對數組元素進行解構賦值時，多個變量要用[...]括起來。* 如果數組本身還有嵌套，也可以通過下面的形式進行解構賦值，注意嵌套層次和位置要保持一致：*/ let [lString, lBoolean, lNumber] = ['ES6', [true, 20181227]]; // 結果：lString = ES6, lBoolean = true,20181227, lNumber = undefined // 正確的做法 let [lString, [lBoolean, lNumber]] = ['ES6', [true, 20181227]]; // 結果：lString = ES6, lBoolean = true, lNumber = 20181227// 解構賦值還可以忽略某些元素： let [, , lNumber] = ['ES6', [true, 20181227]]; // 結果：lNumber = 20181227

2. 數組類型

let [clubs, players] = [['Lakers', 'Magic'], ['Lonzo Ball', 'Anthony Davis', 'Kawhi Leonard', 'Donovan Mitchell', '達龍 福克斯'] ]; // 結果：clubs = [ 'Lakers', 'Magic' ] // 結果：players = [ 'Lonzo Ball', 'Anthony Davis', 'Kawhi Leonard', 'Donovan Mitchell', '達龍 福克斯' ]

3. 對象類型

let person = {name: '達龍 福克斯',age: 20,gender: 'male',passport: 'G-12345678',school: 'Kentucky',address: {city: '重慶',street: '龍湖時代天街',zipcode: '400002'} }; let { name, address: { city, zip } } = person; /*** name = '達龍 福克斯'* city = '重慶'* zip = undefined #因為屬性名是zipcode而不是zip* 注意: address不是變量，而是為了讓city和zip獲得嵌套的address對象的屬性:* address; #ReferenceError: address is not defined*//*** >> 使用解構賦值對對象屬性進行賦值時，如果對應的屬性不存在，變量將被賦值為undefined，* 這和引用一個不存在的屬性獲得undefined是一致的。* >> 如果要使用的變量名和屬性名不一致，可以用下面的語法獲取：*/ let { name, address: { city, zipcode:code } } = person; // code = '400002'// 解構賦值還可以使用默認值，這樣就避免了不存在的屬性返回undefined的問題： let { name, address: { city, zipcode:code }, club='kings' } = person; // club = 'kings'

4. 使用場景

// 快速獲取當前頁面的域名和路徑： let {hostname:domain, pathname:path} = location;/*** 如果一個函數接收一個對象作為參數，那么，可以使用解構直接把對象的屬性綁定到變量中。* 例如，下面的函數可以快速創建一個Date對象：*/ function buildDate({year, month, day, hour=0, minute=0, second=0}) {return new Date(year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second); } buildDate({ year: 2018, month: 12, day: 27 }); // Thu Dec 27 2018 00:00:00 GMT+0800 (中國標準時間) // 傳入hour、minute和second屬性： buildDate({ year: 2018, month: 12, day: 27, hour: 20, minute: 15 }); // Thu Dec 27 2018 20:15:00 GMT+0800 (中國標準時間) 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的JS解构赋值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。