解構小結

denson 發布于2019-08-22 13:53 / 2565人閱讀

摘要：基本概念作用解構是有組織的從對象或數組中提取信息片段條件明確從哪提取信息片段，即信息來源于哪個對象或數組明確提取什么信息片段，即對象的哪個屬性或數組的第幾個元素其他解構除了提取信息片段之外，還有一些輔助的功能為可能提取不到的信息設置默認值為

基本概念 作用

解構是有組織的從對象或數組中提取信息片段

條件

明確從哪提取信息片段，即信息來源于哪個對象或數組

明確提取什么信息片段，即對象的哪個屬性或數組的第幾個元素

其他

解構除了提取信息片段之外，還有一些輔助的功能

為可能提取不到的信息設置默認值

為提取到的信息重新命名

場景

解構的使用場景不僅在聲明變量賦值階段，也可以單純地給以有的變量重新賦值

在函數參數中使用解構

舉例

let node = {
    type: "Identify",
    name: "foo",
    subNode: {
        name: "subFoo"
    }
}

let {
    type, // 獲得node的type信息
    name: myname, // 獲得node的name信息，并重命名為myname
    text, // 獲得node的text信息，若不存在且不設置默認值，則為undefined
    value: myvalue = "gaga", // 獲得node的value信息，并重命名為myvalue，若不存在，則為"gaga"
    subNode: { // 獲得node的subNode中的name信息，并重命名為subName，嵌套解構
        name: subName
    }
} = node // 從node中獲得信息來源

type // "Identify"
text // undefined
value // ReferenceError
myvalue // "gaga"
subName // "subFoo"

上面的代碼與下面的代碼輸出相同

let node = {
    type: "Identify",
    name: "foo",
    subNode: {
        name: "subFoo"
    }
}

let type,
    myname,
    text,
    myvalue = "hehe",
    subName

({
    type,
    name: myname,
    text,
    value: myvalue = "gaga",
    subNode: {
        name: subName
    }
} = node)

數組解構 與對象解構的不同之處

對象通過屬性名來標示信息片段，數組通過位置來標示信息

對象解構默認將提取到的信息賦給與屬性名相同的變量中，數組需要給提取出的信息命名

可用于交換變量

舉例

let colors = ["red", "green", "blue"]
let [,,thirdColor] = colors // 從colors數組中提取下標為2的元素
let [firstColor] = colors // 從colors數組中提取下標為0的元素
let [,secondColor,,fourthColor] = colors 
// 從colors數組中提取下標為1和3的元素，若元素不存在則為undefined
let [,secondColor,,fourthColor = "yellow"] = colors // 設置默認值
// 嵌套解構
let colors = ["red", ["green", "lightgreen"], "blue"]
let [, [,subColor],] = colors
// 不定元素
let colors = ["red", "green", "lightgreen", "blue"]
let [first, ...others] = colors
others // ["green", "lightgreen", "blue"]
// 交換變量
let a = 1,
    b = 2;
[a, b] = [b, a]

GPU云服務器云服務器對象解構解構函數解構賦值設計小結

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

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

ES6: 解構賦值（Destructuring）

摘要：一概念對象是屬性的集合，從對象里取值，只能逐個取，而解構賦值表達式可以實現批量取值，賦值。賦值操作符等號兩邊的解構要一致才能正確賦值解構賦值表達式是賦值表達式的語法糖。三數組解構賦值數組的屬性名稱叫索引，表示的是位置。一、概念對象是屬性的集合，從對象里取值，ES3/5只能逐個取，而解構賦值表達式可以實現批量取值，賦值。 // 數據對象person var person = { ...

CODING 2019-08-21 17:58 評論0 收藏0
面試小結（一）

摘要：面試問到的問題繼承的幾種方法，，原形繼承面向對象的幾種方法五種方式對象字面量創建實例對象構造函數工廠模式用一個函數，通過傳遞參數返回對象。打包原理打包原理把所有依賴打包成一個文件，通過代碼分割成單元片段并按需加載。面試問到的問題：1、繼承的幾種方法； Call，apply，原形繼承； 2、面向對象的幾種方法；五種方式： 1）對象字面量：var obj={}; 2）創建實例對象：va...

xiaodao 2019-08-29 15:35 評論0 收藏0
面試小結（一）

摘要：面試問到的問題繼承的幾種方法，，原形繼承面向對象的幾種方法五種方式對象字面量創建實例對象構造函數工廠模式用一個函數，通過傳遞參數返回對象。打包原理打包原理把所有依賴打包成一個文件，通過代碼分割成單元片段并按需加載。面試問到的問題：1、繼承的幾種方法； Call，apply，原形繼承； 2、面向對象的幾種方法；五種方式： 1）對象字面量：var obj={}; 2）創建實例對象：va...

SnaiLiu 2019-08-26 11:57 評論0 收藏0
面試小結（一）

摘要：面試問到的問題繼承的幾種方法，，原形繼承面向對象的幾種方法五種方式對象字面量創建實例對象構造函數工廠模式用一個函數，通過傳遞參數返回對象。打包原理打包原理把所有依賴打包成一個文件，通過代碼分割成單元片段并按需加載。面試問到的問題：1、繼承的幾種方法； Call，apply，原形繼承； 2、面向對象的幾種方法；五種方式： 1）對象字面量：var obj={}; 2）創建實例對象：va...

shmily 2019-08-02 10:36 評論0 收藏0
indexedDB入門

摘要：概述是一個事務型數據庫系統，類似于基于的。然而不同的是它使用固定列表，是一個基于的面向對象的數據庫。參考文檔瀏覽器數據庫入門教程概述 IndexedDB 是一個事務型數據庫系統，類似于基于 SQL 的 RDBMS。然而不同的是它使用固定列表，IndexedDB 是一個基于 JavaScript 的面向對象的數據庫。現有的瀏覽器數據儲存方案，都不適合儲存大量數據：Cookie 的大小...

awesome23 2019-08-23 15:10 評論0 收藏0