Javascript 解構賦值

2021-08-18 21:04:10 字數 3122 閱讀 3046

本文是ecmascript 6 入門學習筆記：

es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構（destructuring）。

等號的右邊不是陣列必須為可遍歷的結構（具備 iterator 介面）

解構賦值為陣列中提取值，按照對應位置，對變數賦值。

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


let [ , , third] = ["foo", "bar", "baz"];//third=baz


let [a, b] = ["test1"];//y undefined


let [c, d] = [1, 2, 3]; //c=1 d=2
解構不成功，變數的值就等於undefined。(第三種)

不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的陣列這種情況下，解構依然可以成功。（第四種）

物件的屬性沒有次序變數必須與屬性同名，才能取到正確的值。

let  = ;


console.info(test1, test2, test3);//hello world undefined
解構失敗導致取不到值，則該變數等於undefined

如果變數名與屬性名不一致，必須寫成下面這樣。

let  = ;


// console.info(first);  first 會直接報變數未定義


// console.info(last);


console.info(f,l);//hello world
first是匹配的模式，f才是變數。真正被賦值的是變數f，而不是模式first。

物件的解構賦值的內部機制，是先找到同名屬性，然後再賦給對應的變數。真正被賦值的是後者，而不是前者。

解構也可以用於巢狀結構的物件。要注意分清模式和變數，如子物件所在的父屬性不存在，那麼將會報錯。

字串也可以解構賦值。這是因為此時，字串被轉換成了乙個類似陣列的物件。

let [a,b,c,d,e] = "world"


;//類似陣列


let ;//類似陣列的物件一般都有length 屬性


console.info(a,b,c,d,e,len);//w o r l d 5
解構賦值時，如果等號右邊是數值和布林值，則會先轉為物件。（可以用解構賦值提取出某些屬性）

let  = 123;


s === number.prototype.tostring // true


let  = true;


s === boolean.prototype.tostring // true
函式引數需為上訴可以解析賦值型別。（也可以理解為先傳入再解構賦值）

1.5.1 傳入陣列

function


add([x, y])


console.info


(add([1, 2]));


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

1.5.2 傳入物件

function move( = {}) 


move(); // [3, 8]


move(); // [3, 0]


move({}); // [0, 0]


move(); // [0, 0]
上面**中，函式move的引數是乙個物件，通過對這個物件進行解構，得到變數x和y的值。

如果解構失敗，x和y等於預設值。

let x = 1;


let y = 2;


[x, y] = [y, x];
function


example


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


function


example


() ;


}let  = example();
可以直接很方便地取出返回物件和陣列中的值

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

function f() 


f();
id: 42,

status: "ok",

data: [867, 5309]

};let = jsondata;

console.log(id, status, number);

上面**可以快速提取 json 資料的值。

jquery.ajax = function (url, ,


cache = true,


complete = function () {},


crossdomain = false,


global = true,


// ... more config


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

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

const map = new map();


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


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


for (let [key, value] of map)
載入模組時，往往需要指定輸入哪些方法。解構賦值使得輸入語句非常清晰。

const  = require("source-map");

JavaScript 變數的解構賦值 筆記

1.1.陣列形式的解構賦值let foo,bar baz 1,2 3 foo 1 bar 2 baz 3 let third foo bar baz third baz 只要某種資料結構具有 iterator 介面，都可以採用陣列形式的解構賦值 2.1.指定預設值。let x,y b a x a y...

解構賦值 陣列的解構賦值

什麼是解構賦值？es6 允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構 destructuring 我的理解是 允許宣告一種模式 陣列 物件等 裡面包含乙個或多個變數，再分別對這些變數遍歷 按照對應位置 賦值。以前，為變數賦值，只能直接指定值。let a 1 let b 2 通...

物件解構賦值

先賦值看看 script let console log test1 console log test2 script 簡化寫法 script let console log abc console log def script 在物件解構賦值中，順序是沒有影響的，我們修改上面的內容 script ...