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

Elle 發(fā)布于2019-08-20 14:51 / 2321人閱讀

摘要：變量的解構(gòu)賦值的用途交換變量的值從函數(shù)中返回多個(gè)值返回一個(gè)數(shù)組返回一個(gè)對(duì)象函數(shù)參數(shù)的賦值提取數(shù)據(jù)函數(shù)參數(shù)的默認(rèn)值。

解構(gòu)賦值

解構(gòu)賦值是ES6允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值；

解構(gòu)賦值主要有一下幾種

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

let [a,b,c] = [1,2,3];

允許有默認(rèn)值

let [foo = true] = [];
foo//true

let [x,y="b"] = ["a"]; //x="a";y="b";

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

對(duì)象的解構(gòu)和數(shù)組不同的地方是，數(shù)組的元素必須是按次序排列的，變量的值由它的位置決定；對(duì)象的屬性是無(wú)序的，變量名與屬性名相同就可以了。

let {foo, bar} = {foo: "aaa", bar: "bbb"};
foo//"aaa"
bar//"bbb"

如果變量名和屬性名不一致，或者想要給這個(gè)變量名和屬性名不一樣，可以這樣使用。

var {foo: baz} = {foo: "aaa", bar:"bbb"}
bar//"aaa"

這相當(dāng)于給給變量賦值，而且變量名不需要和屬性名一樣。

如果對(duì)一個(gè)已經(jīng)聲明的變量，需要謹(jǐn)慎

let x;
{x} = {x: 1};//SyntaxError

因?yàn)镴avascript引擎會(huì)將{x}理解成一個(gè)代碼塊，從而發(fā)生語(yǔ)法錯(cuò)誤。

({x} = {x:1})

字符串解構(gòu)賦值

let [a,b,c,d,e] = "hello";
a//"h"
b//"e"

類似數(shù)組的對(duì)象都有一個(gè)length屬性，因此可以對(duì)這個(gè)屬性解構(gòu)賦值

let {length: len} = "hello";
len//5

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

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true

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

function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

ES6內(nèi)部使用的是嚴(yán)格相等運(yùn)算符（===），判斷一個(gè)位置是否有值。如果一個(gè)組員不嚴(yán)格等于undefined,默認(rèn)值是不會(huì)生效的。

let [x=1] = [undefined];
x//1

let [x=1] = [null];
x//null

let {x=3} = {x: undefined};
x//3

let {x=3} = {x:null};
x//null;

變量的解構(gòu)賦值的用途

交換變量的值

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

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

// 返回一個(gè)數(shù)組

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一個(gè)對(duì)象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

函數(shù)參數(shù)的賦值

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

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

   指定了默認(rèn)值，就可以避免在函數(shù)體內(nèi)寫(xiě)var foo = foo || "init".

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

   任何部署了Iterator接口的對(duì)象，都可以用for...of循環(huán)遍歷。

GPU云服務(wù)器云服務(wù)器解構(gòu)賦值 php的變量賦值 php 賦值類的變量外部變量賦值

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

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

相關(guān)文章

ES6學(xué)習(xí) 第二章變量的解構(gòu)賦值

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

番茄西紅柿 2021-11-24 09:38 評(píng)論0 收藏2637
ES6學(xué)習(xí) 第二章變量的解構(gòu)賦值

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

番茄西紅柿 2021-11-24 09:38 評(píng)論0 收藏2637
es6 - 解構(gòu)賦值

摘要：比如上面展示的情況都是可以聯(lián)合使用的比如對(duì)象的解構(gòu)賦值對(duì)象的解構(gòu)賦值是基于屬性的。當(dāng)給已存在的變量解構(gòu)賦值時(shí)，注意加這是由于如果不加會(huì)把左邊看成一個(gè)代碼塊，會(huì)報(bào)錯(cuò)。注意事項(xiàng)數(shù)組的解構(gòu)賦值中，使用的變量必須放在最后。解構(gòu)賦值解構(gòu)賦值是一個(gè)聽(tīng)起來(lái)比較高大上的特性，但按我的理解，它就是一種語(yǔ)法糖。它并沒(méi)有賦予js更強(qiáng)大的能力，只是讓賦值操作更加的靈活，效率。在es6之前，賦值操作需要=...

DirtyMind 2019-08-26 11:45 評(píng)論0 收藏0
ES6 學(xué)習(xí)筆記（一）let，const和解構(gòu)賦值

摘要：另外對(duì)于已經(jīng)聲明的變量進(jìn)行解構(gòu)賦值時(shí)，要非常小心。因此在行首加，將其強(qiáng)制轉(zhuǎn)化為表達(dá)式執(zhí)行。由于和無(wú)法轉(zhuǎn)為對(duì)象，所以對(duì)它們進(jìn)行解構(gòu)賦值，都會(huì)報(bào)錯(cuò)。 let和const let和const是es6新增的兩個(gè)變量聲明關(guān)鍵字，與var的不同點(diǎn)在于：（1）let和const都是塊級(jí)作用域，在{}內(nèi)有效，這點(diǎn)在for循環(huán)中非常有用，只在循環(huán)體內(nèi)有效。var為函數(shù)作用域。（2）使用let和con...

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

摘要：數(shù)組的解構(gòu)賦值特點(diǎn)根據(jù)數(shù)據(jù)的下標(biāo)來(lái)賦值的，有次序。模式能夠匹配起來(lái)，如長(zhǎng)度為數(shù)值和布爾值的解構(gòu)賦值解構(gòu)賦值的規(guī)則是只要等號(hào)右邊的值不是對(duì)象或數(shù)組，就先將其轉(zhuǎn)為對(duì)象。布爾值解構(gòu)賦值為字符串的一種。在很多獨(dú)立細(xì)小的方面，解構(gòu)賦值都非常有用。 1、解構(gòu)賦值簡(jiǎn)介官方解釋：按照一定的模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。舉個(gè)例子，想獲取數(shù)組中...

Jason_Geng 2019-08-23 16:46 評(píng)論0 收藏0
《ES6學(xué)習(xí)2》變量的解構(gòu)賦值

摘要：解構(gòu)賦值的分類數(shù)組解構(gòu)賦值對(duì)象解構(gòu)賦值字符串解構(gòu)賦值數(shù)值解構(gòu)賦值布爾值解構(gòu)賦值函數(shù)參數(shù)解構(gòu)賦值。嵌套情況默認(rèn)值解構(gòu)賦值允許設(shè)置默認(rèn)值，當(dāng)數(shù)組成員嚴(yán)格等于，默認(rèn)值將生效。報(bào)錯(cuò)報(bào)錯(cuò)函數(shù)參數(shù)的解構(gòu)賦值函數(shù)的參數(shù)也可以使用解構(gòu)賦值和指定默認(rèn)值 ES6可以從數(shù)組和對(duì)象中提取值，然后對(duì)變量進(jìn)行賦值。解構(gòu)賦值的分類：數(shù)組解構(gòu)賦值、對(duì)象解構(gòu)賦值、字符串解構(gòu)賦值、數(shù)值解構(gòu)賦值、布爾值解構(gòu)賦值、函數(shù)參...

mist14 2019-08-26 13:52 評(píng)論0 收藏0