變量的解構賦值

harriszh 發布于2019-08-20 18:34 / 2843人閱讀

摘要：數組的解構賦值基本用法允許按照一定模式從數組和對象中提取值對變量進行賦值這被稱為解構可以從數組中提取值按照位置的對應關系對變量賦值本質上這種寫法屬于模式匹配只要等號兩邊的模式相同左邊的變量就會被賦予對應的值如果結構不成功變量的值就等于另一種

數組的解構賦值

1.基本用法
ES6允許按照一定模式,從數組和對象中提取值,對變量進行賦值,這被稱為解構.
可以從數組中提取值,按照位置的對應關系對變量賦值.
本質上,這種寫法屬于模式匹配,只要等號兩邊的模式相同,左邊的變量就會被賦予對應的值.

var [a, b, c] = [1, 2, 3];
var [d, ...array] = [1, 2, 3];
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(array); // [2, 3]

let [foo, [[bar], baz]] = [1, [[2], 3]];
console.log(foo);
console.log(bar);
console.log(baz);

let [, , third] = [1, 2, 3];
console.log(third); // 3

2.如果結構不成功,變量的值就等于undefined.
另一種情況是不完全解構,即等號左邊的模式只匹配等號右邊數組的一部分,
這種情況下,解構依然可以成功.
如果等號的右邊不是數組(或者嚴格的說,不是可遍歷的結構),那么將會報錯.

let [bar1, foo1] = [1];
console.log(bar1);  // 1
console.log(foo1);  // undefined

3.默認值
解構賦值允許指定默認值
注意,ES6內部使用嚴格相等運算符(===)判斷一個位置是否有值,所以,如果一個數組成員
不嚴格等于undefined,默認值是不會生效的.

var [foo = true] = [];
console.log(foo); // true
var [x, y = "b"] = ["a"];
console.log(x); // "a"
console.log(y); // "b"

var [xx, yy = "b"] = ["a", undefined];
console.log(xx);    // "a"
console.log(yy);    // "b"

// 如果一個數組成員是null,默認值就不會生效,因為null不嚴格等于undefined
var [xxx = 1] = [undefined];
var [yyy = 1] = [null];
console.log(xxx);   // 1
console.log(yyy);   // null

// 如果默認值是一個表達式,那么這個表達式是惰性求值的,即只有在用到的時候才會求值
// 因為x能取到值,所以函數f根本不會執行
function f() {
    console.log("aaa");
}
let [xxxx = f()] = [1];

// 默認值可以引用解構賦值的其他變量,但該變量必須已經聲明
let [x = 1, y = x] = [];
console.log(x); // 1
console.log(y); // 1

let [xx = 1, yy = xx] = [2];
console.log(xx);    // 2
console.log(yy);    // 2

let [xxx = 1, yyy = xxx] = [1, 2];
console.log(xxx);   // 1
console.log(yyy);   // 2

let [xxxx = yyyy, yyyy = 1] = []; // ReferenceError
console.log(xxxx);  // undefined
console.log(yyyy);  // 1

對象的解構賦值

1.解構不僅可以用于數組,還可以用于對象.
對象的解構與數組有一個重要的不同,數組的元素是按次序排列的,變量的取值由它的位置決定.
而對象的屬性沒有次序,變量必須與屬性同名,才能取到正確的值.
也就是說,對象的解構賦值的內部機制,是先找到同名屬性,然后再賦給對應的變量.
真正被賦值的是后者,而不是前者.
這實際上說明,對象的解構賦值是以下形式的簡寫.

var { foo: foo, bar: bar } = {
    foo: "aaa",
    bar: "bbb"
};

var { foo, bar } = {
    foo: "aaa",
    bar: "bbb"
};
console.log(foo);   // "aaa"
console.log(bar);   // "bbb"

// 如果變量名與屬性名不一致,必須寫成下面這樣
var { foo1: baz1 } = {
    foo1: "aaa",
    bar: "bbb"
};
// console.log(foo1);   // Uncaught ReferenceError: foo1 is not defined
console.log(baz1);  // "aaa"

let { first: f, last: l } = { first: "hello", last: "world" };
console.log(f); // "hello"
console.log(l); // "world"

2.和數組一樣,解構也可以用于嵌套解構的對象

// 注意,這時p是模式,不是變量,因此不會被賦值
var obj = {
    p: [
        "hello",
        { y: "wrold" }
    ]
};
var { p: [x, { y }] } = obj;
console.log(x); // "hello"
console.log(y); // "world"

// 只有line是變量,loc和start都是模式,不會被賦值
var node = {
    loc: {
        start: {
            line: 1,
            column: 5
        }
    }
};
var { loc: { start: { line } } } = node;
console.log(line);

// 嵌套賦值
let obj1 = {};
let arr = [];
({ foo: obj1.prop, bar: arr[0] } = { foo: 123, bar: true });
console.log(obj1);  // {prop:123}, obj1.prop被賦值123,所以obj1是一個對象
console.log(arr);   // [true], arr[0]被賦值為true,所以arr是一個數組

云服務器 GPU云服務器解構賦值 php的變量賦值 php 賦值類的變量外部變量賦值

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

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

ES6學習第二章變量的解構賦值

摘要：前言前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。解構賦值是對賦值運...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
ES6學習第二章變量的解構賦值

摘要：前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接變量的解構賦值解構賦值允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構。對象的解構賦值是根據對象值進行匹配。前言該篇筆記是第二篇變量的解構賦值。這一章原文鏈接：變量的解構賦值解構賦值ES6 允許按照一定模式，從數組和對象中提取值，對...

番茄西紅柿 2021-11-24 09:38 評論0 收藏2637
es6 - 解構賦值

摘要：比如上面展示的情況都是可以聯合使用的比如對象的解構賦值對象的解構賦值是基于屬性的。當給已存在的變量解構賦值時，注意加這是由于如果不加會把左邊看成一個代碼塊，會報錯。注意事項數組的解構賦值中，使用的變量必須放在最后。解構賦值解構賦值是一個聽起來比較高大上的特性，但按我的理解，它就是一種語法糖。它并沒有賦予js更強大的能力，只是讓賦值操作更加的靈活，效率。在es6之前，賦值操作需要=...

DirtyMind 2019-08-26 11:45 評論0 收藏0
ES6 學習筆記（一）let，const和解構賦值

摘要：另外對于已經聲明的變量進行解構賦值時，要非常小心。因此在行首加，將其強制轉化為表達式執行。由于和無法轉為對象，所以對它們進行解構賦值，都會報錯。 let和const let和const是es6新增的兩個變量聲明關鍵字，與var的不同點在于：（1）let和const都是塊級作用域，在{}內有效，這點在for循環中非常有用，只在循環體內有效。var為函數作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 評論0 收藏0
ES6-變量的解構賦值(3)

摘要：數組的解構賦值特點根據數據的下標來賦值的，有次序。模式能夠匹配起來，如長度為數值和布爾值的解構賦值解構賦值的規則是只要等號右邊的值不是對象或數組，就先將其轉為對象。布爾值解構賦值為字符串的一種。在很多獨立細小的方面，解構賦值都非常有用。 1、解構賦值簡介官方解釋：按照一定的模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。舉個例子，想獲取數組中...

Jason_Geng 2019-08-23 16:46 評論0 收藏0
《ES6學習2》變量的解構賦值

摘要：解構賦值的分類數組解構賦值對象解構賦值字符串解構賦值數值解構賦值布爾值解構賦值函數參數解構賦值。嵌套情況默認值解構賦值允許設置默認值，當數組成員嚴格等于，默認值將生效。報錯報錯函數參數的解構賦值函數的參數也可以使用解構賦值和指定默認值 ES6可以從數組和對象中提取值，然后對變量進行賦值。解構賦值的分類：數組解構賦值、對象解構賦值、字符串解構賦值、數值解構賦值、布爾值解構賦值、函數參...

mist14 2019-08-26 13:52 評論0 收藏0