摘要:解構賦值允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構。由于和無法轉為對象,所以對它們進行解構賦值,都會報錯。
解構賦值
ES6 允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構(Destructuring)。查看阮老師的原文
一、數組的解構賦值解構賦值的要點:前后結構一致
“模式匹配”,等號兩邊的模式相同,按照對應關系(位置或名稱),左邊的變量被賦予對應的值。
數組:數組的元素是按次序排列的,變量的取值由它的位置決定;
let [a, b, c] = [1, 2, 3];
let [foo] = []; let [bar, foo] = [1];
let [a, [b], d] = [1, [2, 3], 4]; //a b d - 1 2 4
let [x, y = "b"] = ["a"]; // x="a", y="b" let [x, y = "b"] = ["a", undefined]; // x="a", y="b"
ES6 內部使用嚴格相等運算符(===)
let [x = 1] = [undefined]; //x= 1 let [x = 1] = [null]; //x= null
如果默認值是一個表達式,那么這個表達式是惰性求值的, 以下f不會執行
function f() { console.log("aaa"); } let [x = f()] = [1];二、對象的解構賦值
對象:對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值;
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };簡寫為,
let { foo, bar } = { foo: "aaa", bar: "bbb" };
let { foo: baz } = { foo: "aaa", bar: "bbb" };
上面代碼中,foo是匹配的模式,baz才是變量。真正被賦值的是變量baz,而不是模式foo。
可以理解為左側表達式中":"前的都是匹配模式嗎?(暗自這么理解)
let obj = { p: [ "Hello", { y: "World" } ] }; let { p: [x, { y }] } = obj; x // "Hello" y // "World"
注意:這時p是模式,不是變量,因此不會被賦值。如果p也要作為變量賦值,可以寫成下面這樣。
let { p, p: [x, { y }] } = obj;
再一個例子
const node = { loc: { start: { line: 1, column: 5 } } }; let { loc, loc: { start }, loc: { start: { line }} } = node;
let obj = {}; let arr = []; ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
// 報錯 let {foo: {bar}} = {baz: "baz"};
// 錯誤的寫法, SyntaxError: syntax error let x; {x} = {x: 1}; // 正確的寫法 let x; ({x} = {x: 1});
上面代碼的寫法會報錯,因為 JavaScript 引擎會將{x}理解成一個代碼塊,從而發生語法錯誤。只有不將大括號寫在行首,避免 JavaScript 將其解釋為代碼塊,才能解決這個問題。
({} = [true, false]); ({} = "abc"); ({} = []);
let arr = [1, 2, 3]; let {0 : first, [arr.length - 1] : last} = arr;三、Set
四、Iterator對于 Set 結構,也可以使用數組的解構賦值
let [x, y, z] = new Set(["a", "b", "b"]); //重復的會先被去掉,z等于undefined
function* fibs() { let a = 0; let b = 1; while (true) { yield a; [a, b] = [b, a + b]; } } let [first, second, third, fourth, fifth, sixth] = fibs(); sixth // 5
// 報錯 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {};五、字符串的解構賦值
const [a, b, c, d, e] = "hello"; let {length : len} = "hello"; //len=5六、數值和布爾值的解構賦值
let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true let { prop: x } = undefined; // TypeError let { prop: y } = null; // TypeError
解構賦值的規則是,只要等號右邊的值不是對象或數組,就先將其轉為對象。由于undefined和null無法轉為對象,所以對它們進行解構賦值,都會報錯。
七、函數參數的解構賦值function add([x, y]){ return x + y; } add([1, 2]); // 3
[[1, 2], [3, 4]].map(([a, b]) => a + b); // [ 3, 7 ]
區別以下兩組
function move({x = 0, y = 0} = {}) { return [x, y]; } move({}); // [0, 0] function move({x, y} = { x: 0, y: 0 }) { return [x, y]; } move({}); // [undefined, undefined], 為函數move的參數指定默認值,而不是為變量x和y指定默認值八、圓括號問題
ES6 的規則是,只要有可能導致解構的歧義,就不得使用圓括號
不能使用圓括號的情況:
(1)變量聲明語句
(2)函數參數
(3)賦值語句的模式
可以使用圓括號的情況只有一種:賦值語句的非模式部分,可以使用圓括號。
九、用法總結提取 JSON 數據
let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; // id, status, number
交換變量的值
let x = 1; let y = 2; [x, y] = [y, x];
從函數返回多個值
// 返回一個數組 function example() { return [1, 2, 3]; } let [a, b, c] = example(); // 返回一個對象 function example() { return { foo: 1, bar: 2 }; } let { foo, bar } = example();
函數參數的定義
// 參數是一組有次序的值 function f([x, y, z]) { ... } f([1, 2, 3]); // 參數是一組無次序的值 function f({x, y, z}) { ... } f({z: 3, y: 2, x: 1});
函數參數的默認值
jQuery.ajax = function (url, { async = true, beforeSend = function () {}, cache = true, complete = function () {}, crossDomain = false, global = true, // ... more config } = {}) { // ... do stuff };
就避免了在函數體內部再寫var foo = config.foo || "default foo";這樣的語句
遍歷 Map 結構
// 獲取鍵名 for (let [key] of map) { // ... } // 獲取鍵值 for (let [,value] of map) { // ... }
輸入模塊的指定方法
const { SourceMapConsumer, SourceNode } = require("source-map");
與ES6...語法一起用
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98087.html
摘要:另外對于已經聲明的變量進行解構賦值時,要非常小心。因此在行首加,將其強制轉化為表達式執行。由于和無法轉為對象,所以對它們進行解構賦值,都會報錯。 let和const let和const是es6新增的兩個變量聲明關鍵字,與var的不同點在于: (1)let和const都是塊級作用域,在{}內有效,這點在for循環中非常有用,只在循環體內有效。var為函數作用域。 (2)使用let和con...
摘要:比如上面展示的情況都是可以聯合使用的比如對象的解構賦值對象的解構賦值是基于屬性的。當給已存在的變量解構賦值時,注意加這是由于如果不加會把左邊看成一個代碼塊,會報錯。注意事項數組的解構賦值中,使用的變量必須放在最后。 解構賦值 解構賦值是一個聽起來比較高大上的特性,但按我的理解,它就是一種語法糖。它并沒有賦予js更強大的能力,只是讓賦值操作更加的靈活,效率。 在es6之前,賦值操作需要=...
摘要:前言前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值解構賦值允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇 變量的解構賦值。這一章原文鏈接: 變量的解構賦值解構賦值ES6 允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構(Destructuring)。解構賦值是對賦值運...
摘要:前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構。對象的解構賦值是根據對象值進行匹配。 前言該篇筆記是第二篇 變量的解構賦值。 這一章原文鏈接: 變量的解構賦值解構賦值ES6 允許按照一定模式,從數組和對象中提取值,對...
摘要:數組的解構賦值特點根據數據的下標來賦值的,有次序。模式能夠匹配起來,如長度為數值和布爾值的解構賦值解構賦值的規則是只要等號右邊的值不是對象或數組,就先將其轉為對象。布爾值解構賦值為字符串的一種。在很多獨立細小的方面,解構賦值都非常有用。 1、解構賦值簡介 官方解釋:按照一定的模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構(Destructuring)。 舉個例子,想獲取數組中...
摘要:解構賦值的分類數組解構賦值對象解構賦值字符串解構賦值數值解構賦值布爾值解構賦值函數參數解構賦值。嵌套情況默認值解構賦值允許設置默認值,當數組成員嚴格等于,默認值將生效。報錯報錯函數參數的解構賦值函數的參數也可以使用解構賦值和指定默認值 ES6可以從數組和對象中提取值,然后對變量進行賦值。解構賦值的分類:數組解構賦值、對象解構賦值 、字符串解構賦值、數值解構賦值、布爾值解構賦值、 函數參...
閱讀 2882·2021-09-28 09:36
閱讀 3608·2021-09-27 13:59
閱讀 2484·2021-08-31 09:44
閱讀 2278·2019-08-30 15:54
閱讀 2352·2019-08-30 15:44
閱讀 1180·2019-08-30 13:45
閱讀 1223·2019-08-29 18:38
閱讀 1207·2019-08-29 18:37