ES6 變數的解構賦值詳解

2021-10-10 19:30:53 字數 4562 閱讀 6890

es6允許按照一定規則，從陣列和物件中提取值，對變數進行賦值，這被稱為解構賦值(destructuring)

基本用法
let [a,b,c]=[1,'3',]  //a=1,b='3',c=;
上述**表示，可以從陣列中提取值，並且按照對應的位置，對變數賦值。

本質上，這種寫法屬於模式匹配，只要等號兩邊的模式相同，左邊的變數就會被賦予相應的值。

let[a]=;  //a=undefined 


let[a,b]=[3]; //b=undefined
let [a, ,c]=[1,2,3]; // a=1,c=3;
上述**中，右邊的值將會根據陣列中的位置賦到左邊的變數當中。

let [x,y]=[1,3,4];  //x=1   y=3


let[a,[b],c]=[1,[2,3],[4]];  //a=1  b=2  c=[4];


let[a,b,c]=[1,[2,3],4]; //a=1  b=[2,3] c=4;
上述**即為不完全解構。

如果等號的右邊是不可遍歷的解構，那麼在使用解構語法賦值時將會報錯

//以下**均會報錯


let [foo] = 1;


let [foo] = false;


let [foo] = nan;


let [foo] = undefined;


let [foo] = null;


let [foo] = {};
屬性名賦值
let  = ;


foo // "aaa"


bar // "bbb"


let  = ;


kkk // undefined
上述**表明，物件的解構賦值不是依賴順序，而是依賴屬性名。kkk之所以賦值失敗，是因為等號右邊沒有與之匹配的屬性名。

小技巧

const =math;


const =console;


log("正常輸出"); //等效於console.log("正常輸出")
上述**表示，可以利用解構賦值將物件的屬性值賦給某一變數，從而提高開發效率.

物件的賦值機制

let =;


//one is not defined;


//two=2;
上述**表示，物件的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變數。真正被賦值的是後者，而不是前者。

one只是用於匹配，而two才是真正用於賦值的變數。

可繼承性

物件的解構賦值可以取到繼承的屬性

const son={};


const father=;


object.setprototypeof(son, father);


const =son;


//name="ff";
上述**表示，father是son的原型，name不是son自身的屬性，而是繼承於father，解構物件可以取到這個值。

由於陣列本質是特殊的物件，因此可以對陣列進行物件屬性的解構。

let arr = [1, 2, 3];


let  = arr;


first // 1


last // 3
上面**對陣列進行物件解構。陣列arr的0鍵對應的值是1，[arr.length - 1]就是2鍵，對應的值是3。

const="hello";


a='h';


b='e';


c='l';


d='l';


e='o';
const temp="hello";


const =temp;


//len=5;
數值與布林值在進行解構賦值時，會先轉換成物件
const=123;


//s=number.prototype.tostring


const=true;


//b=boolean.prototype.tostring
上面**中，數值和布林值的包裝物件都有tostring屬性，因此變數s,k都能取到值。

如果目標無法轉換成物件或陣列，則會發生語法錯誤

let =null; 


let =undefined;


//error
由於null與undefined型別均不能轉換為物件或陣列，程式將丟擲乙個錯誤。

函式的引數也可以使用解構賦值。

function add([x, y])


add([1, 2]); // 3
上面**中，函式add的引數表面上是乙個陣列，但在傳入引數的那一刻，陣列引數就被解構成變數x和y。對於函式內部的**來說，它們能感受到的引數就是x和y。

以下內容引用自阮一峰《es6入門教程》

用途

（1）交換變數的值
let x = 1;


let y = 2;


[x, y] = [y, x];
上面**交換變數x和y的值，這樣的寫法不僅簡潔，而且易讀，語義非常清晰。

（2）從函式返回多個值

函式只能返回乙個值，如果要返回多個值，只能將它們放在陣列或物件裡返回。有了解構賦值，取出這些值就非常方便。

// 返回乙個陣列


function example() 


let [a, b, c] = example();


// 返回乙個物件


function example() ;


}let  = example();
（3）函式引數的定義

解構賦值可以方便地將一組引數與變數名對應起來。

// 引數是一組有次序的值


function f([x, y, z]) 


f([1, 2, 3]);


// 引數是一組無次序的值


function f() 


f();
（4）提取 json 資料

解構賦值對提取 json 物件中的資料，尤其有用。

let jsondata = ;


let  = jsondata;


console.log(id, status, number);


// 42, "ok", [867, 5309]


上面**可以快速提取 json 資料的值。
（5）函式引數的預設值
jquery.ajax = function (url, ,


cache = true,


complete = function () {},


crossdomain = false,


global = true,


// ... more config


} = {}) ;
指定引數的預設值，就避免了在函式體內部再寫var foo = config.foo || 'default foo';這樣的語句。

（6）遍歷 map 結構

任何部署了 iterator 介面的物件，都可以用for…of迴圈遍歷。map 結構原生支援 iterator 介面，配合變數的解構賦值，獲取鍵名和鍵值就非常方便。

const map = new map();


map.set('first', 'hello');


map.set('second', 'world');


for (let [key, value] of map) 


// first is hello


// second is world
如果只想獲取鍵名，或者只想獲取鍵值，可以寫成下面這樣。

// 獲取鍵名


for (let [key] of map) 


// 獲取鍵值


for (let [,value] of map)
（7）輸入模組的指定方法

載入模組時，往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。

const = require("source-map");

最後，感謝阮一峰老師的傾囊相助

ES6 變數的解構賦值詳解

2.0 物件的解構賦值 2.1 物件的巢狀解構 3.0 字串的解構賦值 4.0 函式引數的解構賦值 5.0 解構賦值的用途 summary es 6 允許按照一定模式,從陣列和物件中提取值,對變數進行複製,這被稱為解構賦值 destructuring 事實上，只要某種資料結構具有 iterator ...

es6變數解構賦值

es6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。解構賦值在實際開發中可以大量減少我們的 量，並且讓我們的程式結構更清晰。陣列的解構賦值 let a,b 1 2 console.log a 1 console.log b 2 上面的 表示，可以從陣列中提取值，按照位置的物件...

ES6變數解構賦值

es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構 es6之前我們申明多個變數需要按照下面的方法 let l a 1 let b 2 let c 3 let d 4 或者 let a 1,b 2,c 3,d 4 現在我們可以更加簡便 let a,b,c,d 1,2,3,4 ...