es6學(xué)習(xí)筆記-變量析構(gòu)_v1.0_byKL

Aldous 發(fā)布于2019-08-21 11:32 / 1928人閱讀

摘要：學(xué)習(xí)筆記變量析構(gòu)允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。有一個(gè)屬性用屬性來獲取字符串長(zhǎng)度數(shù)值和布爾值的解構(gòu)賦值解構(gòu)賦值時(shí)，如果等號(hào)右邊是數(shù)值和布爾值，則會(huì)先轉(zhuǎn)為對(duì)象。

es6學(xué)習(xí)筆記-變量析構(gòu)_v1.0

ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。

如果解構(gòu)失敗，變量的值等于undefined。

數(shù)組的解構(gòu)賦值

"模式匹配"，只要等號(hào)兩邊的模式相同，左邊的變量就會(huì)被賦予對(duì)應(yīng)的值。

let [a, b, c] = [1, 2, 3]; //相當(dāng)于對(duì)號(hào)入座,一個(gè)蘿卜一個(gè)坑

let [foo, [[bar], baz]] = [1, [[2], 3]]; //本質(zhì)上也是對(duì)號(hào)入座了
console.log(foo) // 1
console.log(bar) // 2
console.log(baz) // 3

let [ , , third] = ["foo", "bar", "baz"];
console.log(third) // "baz"

let [x, , y] = [1, 2, 3]; //中間的變量空了,也自然跳過了中間的,然后直接賦值后面的
console.log(x) // 1
console.log(y) // 3

let [head, ...tail] = [1, 2, 3, 4]; //三個(gè)點(diǎn)號(hào)是用來擴(kuò)展為一個(gè)數(shù)組序列的
console.log(head) // 1
console.log(tail) // [2, 3, 4],可以看到這里也是一個(gè)數(shù)組

let [x, y, ...z] = ["a"]; //因?yàn)槠渌麤]有值,所以都會(huì)變成undefined或者空數(shù)組,沒辦法對(duì)號(hào)入座
console.log(x); //a
console.log(y); // undefined
console.log(z);//[]

let [bar, foo] = [1]; //解構(gòu)不成功的的值就是undefined
console.log(bar); //1
console.log(foo); // undefined

擴(kuò)展運(yùn)算符（ spread ）是三個(gè)點(diǎn)（...）。它好比 rest 參數(shù)的逆運(yùn)算，將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列,即把數(shù)組或類數(shù)組對(duì)象展開成一系列用逗號(hào)隔開的值,看解釋以為是變成了值,其實(shí)不然,看輸出就知道,其實(shí)也是一個(gè)數(shù)組

事實(shí)上，只要某種數(shù)據(jù)結(jié)構(gòu)具有 Iterator 接口，都可以采用數(shù)組形式的解構(gòu)賦值。

function * fibs() { //函數(shù)有* 是因?yàn)樗且粋€(gè)Generator,暫時(shí)忽略
    let a = 0;
    let b = 1;
    while (true) {
        yield a;
        [a, b] = [b, a + b];
    }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(sixth) // 5

fibs是一個(gè) Generator 函數(shù)（參見《Generator 函數(shù)》一章），原生具有 Iterator 接口。解構(gòu)賦值會(huì)依次從這個(gè)接口獲取值。

其實(shí)在這里只要大概理解他們的數(shù)據(jù)結(jié)構(gòu)差不多是上面那種類型的時(shí)候,就能時(shí)候數(shù)組結(jié)構(gòu)方式

數(shù)組解構(gòu)默認(rèn)值

默認(rèn)值,主要是看左邊是否能取到右邊的值

let [foo = true] = []; //空數(shù)組,觸發(fā)默認(rèn)值
console.log(foo) // true

let [x, y = "b"] = ["a"]; //因?yàn)樯倭艘粋€(gè)值,所以也觸發(fā)默認(rèn)值
console.log(x);
console.log(y);// x="a", y="b"

let [x, y = "b"] = ["a", undefined]; //這里也觸發(fā)了,即使是undefined的值
console.log(x);
console.log(y);// x="a", y="b"

let [x = 1] = [undefined];
console.log(x) // 1

let [y = 1] = [null]; //正如下面提到,數(shù)組成員null的不觸發(fā)默認(rèn)值
console.log(y) // null

function f() {
    console.log("aaa");
}
//這里主要是看x能取值,右邊的值是很正常能取到的,所以不會(huì)觸發(fā)默認(rèn)值
let [x = f()] = [1]; 
console.log(x);//1

let [x = 1, y = x] = [];//因?yàn)闆]有值,所以觸發(fā)默認(rèn)值,然后x先于y聲明,所以y也可以使用x的值
console.log(x)
console.log(y)// x=1; y=1

let [x = 1, y = x] = [2]; //因?yàn)橛兄?并且能對(duì)應(yīng)到x,并且先于y聲明
console.log(x)
console.log(y)// x=2; y=2

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


ES6 內(nèi)部使用嚴(yán)格相等運(yùn)算符（===），判斷一個(gè)位置是否有值。

如果一個(gè)數(shù)組成員是null，默認(rèn)值就不會(huì)生效，因?yàn)閚ull不嚴(yán)格等于undefined。

對(duì)象的解構(gòu)賦值

對(duì)象的解構(gòu)與數(shù)組有一個(gè)重要的不同。數(shù)組的元素是按次序排列的，變量的取值由它的位置決定；而對(duì)象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

如果變量名與屬性名不一致,需要利用原來的屬性(鍵)來中轉(zhuǎn),對(duì)象的解構(gòu)賦值的內(nèi)部機(jī)制，是先找到同名屬性，然后再賦給對(duì)應(yīng)的變量。

let { bar, foo } = { foo: "aaa", bar: "bbb" };
console.log(foo) // "aaa"
console.log(bar) // "bbb"
console.log(baz) // undefined,并且報(bào)錯(cuò),這里沒對(duì)應(yīng)上對(duì)象的鍵,所以沒有取到值

let obj = { first: "hello", last: "world" };
let { first: f, last: l } = obj; //這里的first就是原來的屬性,現(xiàn)在要提取值到新的變量f,要這樣寫
console.log(f) // "hello"
console.log(l) // "world"

let obj = {
    p: [ //真正對(duì)應(yīng)的是p里面的東西,因?yàn)橄旅鎝只是作為模式使用
        "Hello", //對(duì)應(yīng)x
        { y: "World" } //對(duì)應(yīng){y}
    ]
};

let { p: [x, { y }] } = obj; //這里需要注意,p是模式,因?yàn)橛忻疤?hào),而且位于左邊
console.log(x) // "Hello"
console.log(y) // "World"
console.log(p) // p is not defined,這里p沒有定義


let obj = {};
let arr = [];
//對(duì)于obj,這里直接對(duì)應(yīng)的是obj的屬性prop,而bar是對(duì)應(yīng)arr的第一個(gè)元素的值
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
//很方便的直接賦值給對(duì)象屬性和數(shù)組的元素的值
console.log(obj) // {prop:123}
console.log(arr) // [true],因?yàn)檫@個(gè)數(shù)組只有一個(gè)值

對(duì)象解構(gòu)的默認(rèn)值

大部分情況跟數(shù)組的結(jié)構(gòu)默認(rèn)值類似,也是通過判斷是否undefined

let {x = 3} = {}; 
console.log(x) // 3

let {x, y = 5} = {x: 1};
console.log(x) // 1
console.log(y) // 5

//如果解構(gòu)模式是嵌套的對(duì)象，而且子對(duì)象所在的父屬性不存在，那么將會(huì)報(bào)錯(cuò)。
//等號(hào)左邊對(duì)象的foo屬性，對(duì)應(yīng)一個(gè)子對(duì)象。該子對(duì)象的bar屬性，解構(gòu)時(shí)會(huì)報(bào)錯(cuò)。
//因?yàn)閒oo這時(shí)等于undefined，(沒有對(duì)象然后直接去對(duì)象屬性)再取子屬性就會(huì)報(bào)錯(cuò)，請(qǐng)看下面的代碼。
let {foo: {bar}} = {baz: "baz"};// 報(bào)錯(cuò)

對(duì)象的結(jié)構(gòu)的方便用法

對(duì)象的解構(gòu)賦值，可以很方便地將現(xiàn)有對(duì)象的方法，賦值到某個(gè)變量。

let { log, sin, cos } = Math; //這里直接使用了log和sin方法了
console.log(log(10));//2.302585092994046
console.log(sin(10));//-0.5440211108893698

對(duì)數(shù)組進(jìn)行對(duì)象屬性結(jié)構(gòu)

let arr = [1, 2, 3];
//并且能夠使用數(shù)組的基本數(shù)字鍵來做匹配,0,1,2的數(shù)組索引數(shù)字鍵
let {0 : first, [arr.length - 1] : last} = arr; //這里支持一些方法,例如length,需要用[]括起來
console.log(first) // 1
console.log(last) // 3

字符串的結(jié)構(gòu)賦值

字符串被轉(zhuǎn)換成了一個(gè)類似數(shù)組的對(duì)象。

有一個(gè)length屬性

const [a, b, c, d, e] = "hello";
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

let {length : len} = "hello"; //用length屬性來獲取字符串長(zhǎng)度
len // 5

數(shù)值和布爾值的解構(gòu)賦值

解構(gòu)賦值時(shí)，如果等號(hào)右邊是數(shù)值和布爾值，則會(huì)先轉(zhuǎn)為對(duì)象。

數(shù)值和布爾值的包裝對(duì)象都有toString屬性

let {toString: s} = 123;
//全等證明有這個(gè)toString屬性
console.log(s === Number.prototype.toString )// true
console.log(s) //[Function: toString]

let {toString: s} = true;
console.log(s === Boolean.prototype.toString) // true
console.log(s) //[Function: toString]

函數(shù)參數(shù)的解構(gòu)賦值

function add([x, y]){ //直接解析參數(shù),相當(dāng)于傳參(x,y)
    return x + y;
}
console.log(add([1, 2])); // 3

//這里需要拆開來看
let test = [[1, 2], [3, 4]].map(([a, b]) => a + b);
console.log(test) // [ 3, 7 ]

[//這里只是普通的嵌套數(shù)組
    [1, 2], //每個(gè)子數(shù)組元素都是一個(gè)數(shù)組
    [3, 4] 
].map(//對(duì)他們使用map函數(shù)
    //這里傳入了一個(gè)函數(shù),并且參數(shù)是自動(dòng)解析參數(shù)數(shù)組的,相當(dāng)于每次處理都是一整個(gè)子數(shù)組
    ([a, b]) => a + b //并且因?yàn)槟軌驅(qū)?yīng)得到析構(gòu)模式,所以直接解析這個(gè)子數(shù)組
);

函數(shù)參數(shù)的解構(gòu)的默認(rèn)值

undefined就會(huì)觸發(fā)函數(shù)參數(shù)的默認(rèn)值

可以當(dāng)做一個(gè)對(duì)象析構(gòu)來看,只是這個(gè)對(duì)象是被放到函數(shù)參數(shù)里面去而已

//這里是為變量x,y指定默認(rèn)值
function move({x = 0, y = 0} = {}) { 
    return [x, y];
}

console.log(move({x: 3, y: 8})); // [3, 8]
//參數(shù)對(duì)象的y析構(gòu)失敗,所以是0,而x成功,所以能夠使用新的值
console.log(move({x: 3})); // [3, 0]
//參數(shù)對(duì)象析構(gòu)都失敗,因?yàn)槭强諏?duì)象
console.log(move({})); // [0, 0]
//參數(shù)對(duì)象析構(gòu)都失敗,因?yàn)槭裁炊紱]有
console.log(move()); // [0, 0]


//這里是為函數(shù)move的參數(shù)指定默認(rèn)值，而不是為變量x和y指定默認(rèn)值
function move({x, y} = { x: 0, y: 0 }) {
    return [x, y];
}

console.log(move({x: 3, y: 8})); // [3, 8]
//因?yàn)閥析構(gòu)失敗,所以y是undefined,但是沒有觸發(fā)外面參數(shù)對(duì)象的undefined,所以直接返回x,y的值
console.log(move({x: 3})); // [3, undefined]
//因?yàn)閭魅氲氖强諏?duì)象,也不算是undefined,沒觸發(fā)到默認(rèn)值,所以直接返回x,y的值
console.log(move({})); // [undefined, undefined]
//觸發(fā)到默認(rèn)值了,因?yàn)槭裁炊紱]有傳,被判定為參數(shù)對(duì)象的undefined
console.log(move()); // [0, 0]

變量析構(gòu)的一些使用情況

交換變量的值

主要是為了簡(jiǎn)潔,易讀

let x = 1;
let y = 2;

[x, y] = [y, x]; //交換變量x和y的值

從函數(shù)返回多個(gè)值

函數(shù)只能返回一個(gè)值，如果要返回多個(gè)值，只能將它們放在數(shù)組或?qū)ο罄锓祷?所以需要從里面取出來

// 返回一個(gè)數(shù)組
function example() {
    return [1, 2, 3];
}
let [a, b, c] = example();//直接取出數(shù)組內(nèi)容,賦值到變量或者數(shù)組
console.log([a, b, c]); //[ 1, 2, 3 ]

// 返回一個(gè)對(duì)象
function example1() {
    return {
        foo: 1,
        bar: 2
    };
}
let { foo, bar } = example1();//直接取出對(duì)象內(nèi)容
console.log({ foo, bar }) //{ foo: 1, bar: 2 }

函數(shù)參數(shù)的定義

解構(gòu)賦值可以方便地將一組參數(shù)與變量名對(duì)應(yīng)起來。

// 參數(shù)是一組有次序的值
function f([x, y, z]) { ... }//這個(gè)其實(shí)跟普通傳參差不多
f([1, 2, 3]);

// 參數(shù)是一組無次序的值
function f({x, y, z}) { ... } //這里傳參是用對(duì)象的方式就比較方便指定對(duì)象屬性
f({z: 3, y: 2, x: 1});

提取JSON數(shù)據(jù)

解構(gòu)賦值對(duì)提取JSON對(duì)象中的數(shù)據(jù)，尤其有用。

let jsonData = {
    id: 42,
    status: "OK",
    data: [867, 5309]
};
//其實(shí)json對(duì)象也是對(duì)象,所以直接能夠解析對(duì)象的方便性也體現(xiàn)在這里
let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

函數(shù)參數(shù)的默認(rèn)值

指定參數(shù)的默認(rèn)值，就避免了在函數(shù)體內(nèi)部再寫var foo = config.foo || "default foo";這樣的語(yǔ)句。

jQuery.ajax = function (url, {
  async = true, //默認(rèn)值
  beforeSend = function () {}, //默認(rèn)值
  cache = true, //默認(rèn)值
  complete = function () {}, //默認(rèn)值
  crossDomain = false, //默認(rèn)值
  global = true, //默認(rèn)值
  // ... more config
}) {
  // ... do stuff
};

遍歷Map結(jié)構(gòu)

任何部署了Iterator接口的對(duì)象，都可以用for...of循環(huán)遍歷。Map結(jié)構(gòu)原生支持Iterator接口，配合變量的解構(gòu)賦值，獲取鍵名和鍵值就非常方便。

var map = new Map(); //map結(jié)構(gòu)
map.set("first", "hello");//map結(jié)構(gòu)的數(shù)據(jù)格式,本質(zhì)上也是key/value的hash,first是key,hello是value
map.set("second", "world");
//直接解析鍵值
for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

Map 結(jié)構(gòu)提供了“值—值”的對(duì)應(yīng)，是一種更完善的 Hash 結(jié)構(gòu)實(shí)現(xiàn)。參考地址

輸入模塊的指定方法

加載模塊時(shí)，往往需要指定輸入哪些方法。解構(gòu)賦值使得輸入語(yǔ)句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

參考引用:

es6-變量的解構(gòu)賦值

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86824.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Aldous

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

美妝專題研究報(bào)告（合集）

閱讀 1685·2021-11-23 09:51
EasyUi項(xiàng)目《網(wǎng)上書城》之權(quán)限登陸，注冊(cè)，左側(cè)樹形菜單

閱讀 3698·2021-09-26 09:46
當(dāng)過服務(wù)員、快遞員，現(xiàn)在年薪30W，歷盡山河叛逆少年終會(huì)成長(zhǎng)

閱讀 2198·2021-09-22 10:02
前端—初級(jí)階段2(5-8)

閱讀 2002·2019-08-30 15:56
css3 響應(yīng)式神器 calc()

閱讀 3397·2019-08-30 12:51
flex布局的溫故學(xué)習(xí)

閱讀 2288·2019-08-30 11:12
z-index與堆疊上下文

閱讀 2122·2019-08-29 13:23
vue 1.x 組件數(shù)據(jù)傳遞

閱讀 2380·2019-08-29 13:16

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

es6學(xué)習(xí)筆記-變量析構(gòu)_v1.0_byKL

相關(guān)文章

es6學(xué)習(xí)筆記-頂層對(duì)象_v1.0_byKL

es6學(xué)習(xí)筆記-let,const和塊級(jí)作用域_v1.0_byKL

es6學(xué)習(xí)筆記-箭頭函數(shù)_v1.0_byKL

es6學(xué)習(xí)筆記-字符串模板_v1.0_byKL

es6學(xué)習(xí)筆記-函數(shù)擴(kuò)展_v1.0_byKL

發(fā)表評(píng)論

0條評(píng)論

Aldous

男|高級(jí)講師

TA的文章

美妝專題研究報(bào)告（合集）

EasyUi項(xiàng)目《網(wǎng)上書城》之權(quán)限登陸，注冊(cè)，左側(cè)樹形菜單

當(dāng)過服務(wù)員、快遞員，現(xiàn)在年薪30W，歷盡山河叛逆少年終會(huì)成長(zhǎng)

前端—初級(jí)階段2(5-8)

css3 響應(yīng)式神器 calc()

flex布局的溫故學(xué)習(xí)

z-index與堆疊上下文

vue 1.x 組件數(shù)據(jù)傳遞

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

es6學(xué)習(xí)筆記-變量析構(gòu)_v1.0_byKL

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！