JS解構賦值

EastWoodYang 發布于2019-08-23 14:20 / 1933人閱讀

摘要：從開始，引入了解構賦值，可以同時對一組變量進行賦值。。基本類型結果注意，對數組元素進行解構賦值時，多個變量要用括起來。

從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 (中國標準時間)

云服務器 GPU云服務器解構賦值 js 數據賦值 js 拖動賦值 js中賦值

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100448.html

ECMASCRIPT 6 實戰之解構賦值

摘要：相信解構賦值自以下簡稱面世以來被大家快速地熟悉并運用到實際開發中了這是一種能有效減少代碼量，使代碼邏輯更簡單優雅的技術下面我們就再來回顧總結一下解構賦值的種種用法吧基本用法從對象解構假設有一個對象，它的結構為以對稱的形式從從邊的對象中匹配與相信解構賦值(Destructuring)自 ECMASCRIPT 6(以下簡稱 ES 6) 面世以來被大家快速地熟悉并運用到實際開發中了, 這是...

yangrd 2019-08-26 13:54 評論0 收藏0
es6 - 解構賦值

摘要：比如上面展示的情況都是可以聯合使用的比如對象的解構賦值對象的解構賦值是基于屬性的。當給已存在的變量解構賦值時，注意加這是由于如果不加會把左邊看成一個代碼塊，會報錯。注意事項數組的解構賦值中，使用的變量必須放在最后。解構賦值解構賦值是一個聽起來比較高大上的特性，但按我的理解，它就是一種語法糖。它并沒有賦予js更強大的能力，只是讓賦值操作更加的靈活，效率。在es6之前，賦值操作需要=...

DirtyMind 2019-08-26 11:45 評論0 收藏0
ES6解構賦值原理詳解

摘要：中還存在字符串數組布爾值等各種解構賦值，基本概念和原理都和對象的解構賦值類似，這里就不在全部列舉了。 ES6解構賦值 ES6變量的解構賦值本質上是模式匹配,只要等號兩邊的模式相同，左邊的變量就會被賦予匹配的右邊的值，如果匹配不成功變量的值就等于undefined 數組的解構賦值 ES6中只要某種數據有Iterator接口（也就是可以循環迭代），都可以進行數組的解構賦值。Example1...

wing324 2019-08-20 17:59 評論0 收藏0
ES6系列---解構

摘要：的解構特性，可以簡化這項工作。必須傳值的解構參數如果調用函數時不提供被解構的參數會導致程序拋出錯誤程序報錯缺失的第三個參數，其值為。在編碼過程中，我們經常定義許多對象和數組，然后有組織地從中提取相關的信息片段。ES6的解構特性，可以簡化這項工作。解構是一種打破數據結構，將其拆分為更小部分的過程。未使用解構的做法 let options = { repeat: true, ...

baoxl 2019-08-20 18:52 評論0 收藏0