摘要:這種模式相當于數組結構適用于具有接口的數據哪里可以用到解構賦值聲明變量賦值參數定義還可以在的循環過程中使用背景構造數據和解析數據通過一些操作來新建一個對象同時通過其他的一些操作來解析這個數據我們可以通過對象字面量去新建一個對象在中,解構允
Object desctructing
const obj = {first: "jane", last: "Doe"}; const {first: f, last: l} = obj; // f = "jane" l = "Doe" // {prop}這種模式相當于 {prop: prop} const {first, last} = obj; // first = "jane" last = "Doe"Array desctructing
數組結構適用于具有Iterator接口的數據:
const iterable = ["a", "b"]; const [x, y] = iterable; // x = "a"; y = "b"哪里可以用到解構賦值?
//聲明變量 const [x] = ["a"]; let [x] = ["a"]; var [x] = ["a"]; //賦值 [x] = ["a"]; //參數定義 function f([x]) {...} f(["a"]);
還可以在for-of的循環過程中使用
const arr1 = ["a", "b"]; for(const [index, element] of arr1.entries()) { console.log(index, element); } //0 a //1 b const arr2 = [ {name: "Jane", age: 41}, {name: "John", age: 40} ]; for(const {name, age} of arr2) { console.log(name, age); } //Jane 41 //John 40背景:構造數據和解析數據
js通過一些操作來新建一個對象
const obj = {}; obj.first = "Jane"; obj.last = "Doe";
同時通過其他的一些操作來解析這個數據
const f = obj.first; const l = obj.last;
我們可以通過對象字面量去新建一個對象:
const obj = {first: "Jane", last: "Doe"};
在ES6中,解構允許使用相同的語法形式去獲取數據,這種方式被稱為對象模式
const {first: f, last: l} = obj;
就像使用對象字面量創建一個有多個屬性的對象那樣,對象模式允許我們去獲取對象的不同的屬性。
模式需要被解構的目標可以是以下三種中的一種:
給目標對象進行賦值
對象 {first: pattern, last: pattern}
數組模式 [pattern, pattern]
如下:
const obj = {a: [{foo: 123, bar: "abc"}, {}], b: true}; const {a: [{foo: f}]} = obj; //f = 123
當然你可以解構你所需要的屬性值,例如:
const {x: x} = {x: 7, y: 3}; //x = 7 const [x, y] = ["a", "b", "c"]; //x = "a" , y = "b"模式是如何獲取內部的值?
在一次賦值過程中 pattern = someValue, pattern是如何獲取到someValue內部的值的?
對象模式強制將需要被解構的值轉化為object(對象)const {length: len} = "abc"; // th = 3 const {toString: s} = 123; //s = Number.prototype.toString
但是將需要被解構的值轉化為object(對象)所調用的方法并非Object(); 而是內置方法ToObject;而這個內置的方法去轉化undefined和null時或拋出TypeError的錯誤.因此當被解構的對象是undefined或null時,在發生解構前就會拋出錯誤。
數組模式 默認值默認值是模式的一個特性: 如果對象的一個屬性或者數組的一個元素沒有在需要被結構的值中找到對應的屬性或值,那么最后這個屬性或者數組的元素的值將可能會是:
默認值(如果進行設置過)
undefiend(沒有設置默認值)
來看下下面的例子:
const [x = 3, y] = []; //x = 3, y = undefined const {foo: x = 3, y} = {}; //x = 3, y = undefined
undefined將會觸發默認值.例如:
const [x = 1] = [undefined]; //x = 1 const {prop: y = 2} = {prop: undefined}; //y = 2
默認值可以在需要的情況進行計算后賦值,例如:
const {prop: y = someFunc()} = someValue;
它事實上就相當于:
let y; if(someValue.prop === undefined) { y = someFunc(); } else { y = someValue.prop; }
默認值還可以通過任意的變量去設定:
const [x = 3, y = x] = []; //x = 3; y = 3 const [x = 3, y = x] = [7]; //x = 7; y = 7 const [x = 3, y = x] = [7, 2]; // x = 7, y = 2
但是要注意聲明的順序,
const [x = y, y = 3] = []; //ReferenceError
這種情況下是還未聲明變量y,就將變量y賦值給變量x。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/80276.html
閱讀 2502·2021-11-24 10:29
閱讀 2641·2021-09-24 09:48
閱讀 5747·2021-09-22 15:56
閱讀 3161·2021-09-06 15:00
閱讀 2675·2019-08-30 15:54
閱讀 747·2019-08-30 13:48
閱讀 2919·2019-08-30 11:17
閱讀 3425·2019-08-29 11:20