常用的ES6新特性--解構賦值

0x584a 發布于2019-08-26 13:31 / 875人閱讀

摘要：因為先把解構賦給，把值賦給，所以，都為對象的解構賦值數組的解構和對象的解構有一個不同，數組的元素按次序排列，變量的取值由其位置決定而對象的屬性沒有次數，變量必需和屬性同名，才能取得正確的值。

let和const

由于var可以重復聲明，而且無法限制修改，也沒有塊級作用域，在一些時候不是很合適，所以出現了let和const

let：不能重復聲明，可以修改，有塊級作用域，適合for循環等一些場景

const：不能重復聲明，有塊級作用域，不可以修改，比較適合做全局

變量的結構賦值

數組的解構賦值

let [a,b,c] = [1,2,3]
let [d,[[e],f]] = [1,[[2],3]]//d=1,e=2,f=3
let [x,y,...z] =["a"];//x="a",y=undefined,z=[]  結構不成功變量的值就為undefined

不完全解構

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

對于set結構,可以使用數組的解構數組

let [x,y,z] = new Set(["a","b","c"]);//a=a,y=b,z=c

主要數據結構具有Iterator接口，都可以采用數組形式的解構賦值，如下斐波那契數列的例子，利用generator函數

function* fibs(){
    let a = 0 ;
    let b = 1;
    while(true){
        yield a;//利用yield返回中間值
        [a,b] = [b,a+b];
    }
}
let [first,second,third,fourth,fifth,sixth] = fibs();
//first=0,second=1,third=1,fourth=2,fifth=3,sixth=5

默認值

解構賦值允許指定默認值,es6內部使用嚴格相等運算符===判斷一個位置是否有值，所以只有當一個數組成員嚴格等于undefined，默認值才會生效;默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。

let [x,y="b"] = ["a"];//x="a",y="b"
let [x=1] = [undefined];//x=1
let [x=1] = [null];//x=null
let [x=1,y=x] = [2];//x=2,y=2   因為先把2解構賦給x，x把值賦給y，所以x，y都為2
let [x=1,y=x]=[1,2];//x=1,y=2

對象的解構賦值

數組的解構和對象的解構有一個不同，數組的元素按次序排列，變量的取值由其位置決定；而對象的屬性沒有次數，變量必需和屬性同名，才能取得正確的值。

let {foo:foo,bar:bar} = {foo:"qqq",bar:"www"}//foo=qqq,bar=www
//嵌套解構
let obj = {p:["hello",{y:"world"}]};
let {p:[x,{y}]} = obj//x=hello,y=world  此時p作為模式不會被賦值
let {p,p:[x,{y}]} = obj//p=["hello",{y:"world"}]  此時P作為變量賦值

以下實例進行了三次解構，分別是對loc,start,line三個屬性，但是最后解構賦值時，只有line是屬性，start和loc都是模式,而不是變量

const node = {
    loc:{
        start:{
            line:1,
            column:5
        }
    }
};
//第一個參數是對loc進行解構，得到loc = { start: { line: 1, column: 5 } }
//第二個參數對start進行解構，得到start = { line: 1, column: 5 }
//第三個參數對line進行解構，得到 line = 1
let{ loc,loc:{start},loc:{start:{line}}} = node;
console.log(loc);//{ start: { line: 1, column: 5 } }
console.log(start);    //{ line: 1, column: 5 }
console.log(line);//1

嵌套賦值

let obj = {};
let arr = [];
({foo:obj.prop, bar:arr[0]} = {foo:123,bar:true});
console.log(obj);//{prop:123}
console.log(arr);//[true]

對象的默認值,和數組的默認值相似

var {x:y=3}={x:5}//y=5
var {x=3} = {x:undefined}//x=3
var {x=3} = {x:null}//x=null
var {foo} = {bar:"bz}//foo=undefined解構失敗變量的值等于undefined

一些錯誤寫法：

let _tmp = {baz :"bz"};
_tmp.foo.baz;//報錯，因為foo已經是undefined，再取子屬性會報錯
let x；
{x} = {x:1};//會報錯，因為JavaScript引擎會把{x}解釋成代碼塊，只有避免將大括號寫在行首，避免將其解釋成代碼塊，才能避免報錯
let x;
({x} = {x:1});//正確寫法

字符串的解構賦值

const [a,b,c,d,e] = "hello"http://a="h",b="e",....
let {length:len}="hello"http://len=5

數值和布爾值的解構賦值

解構賦值時，如果等號右邊是數值和布爾值，會先轉為對象；而undefined和null無法轉為對象，所以對它們解構賦值會報錯

let {toString:s} = 123;
console.log(s === Number.prototype.toString);//true
let {toString:s} = true;
console.log(s === Boolean.prototype.toString);//true
let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError

函數參數的解構賦值

[[1, 2], [3, 4]].map(([a, b]) => a + b);//[3,7]

函數參數的解構可以使用默認值，但是不同的寫法會有區別，有如下兩種情況，一種是為函數的參數指定默認值，一種是為變量指定默認值

變量的默認值

函數test的參數是一個對象，通過對對象的解構，得到參數x,y，解構失敗，參數為默認值

function test({x=0,y=0} ={}){
    return [x,y];
}
console.log(test({x:2,y:5}));//[2,5]
console.log(test({x:2}));//[2,0]
console.log(test({}));//[0,0]
console.log(test());//[0,0]

函數參數的默認值，下面是為函數的參數指定默認值

function test({x,y} = {x:0,y:0}){
    return [x,y];
}
console.log(test({x:2,y:5}));//[2,5]
console.log(test({x:2}));//[ 2, undefined ]
console.log(test({}));//[ undefined, undefined ]
console.log(test());[0,0]?

變量解構賦值的用途

交換變量的值

從函數返回多個值

函數參數的定義

提取JSON數據

函數參數的默認值

遍歷Map結構

輸入模塊的指定方法

GPU云服務器云服務器 es6新特性 es6的新特性解構賦值新特性

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

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

ES6常用新特性——讀《Understanding ECMAScript 6》總結

摘要：對象解構對象解構語法在賦值語句的左側使用了對象字面量，例如代碼中，的值被存儲到本地變量中，的值則存儲到變量中。當使用解構賦值語句時，如果所指定的本地變量在對象中沒有找到同名屬性，那么該變量會被賦值為。現在ES6在很多項目中大量使用。最近我也花時間看了一下《Understanding ECMAScript6》的中文電子書。在這里總結了一些在實際開發中常用的新特性。塊級作用域在ES6...

jsliang 2019-08-21 11:50 評論0 收藏0
ES6 常用新特性講解

摘要：一共講解了個常用的新特性，講解過程也是由淺入深。最后一個新增的方法主要是為了彌補當做構造函數使用時產生的怪異結果。特性共享父級對象共享父級不能當做構造函數語法最簡表達式前后對比很容易理解，可以明顯看出箭頭函數極大地減少了代碼量。 showImg(https://segmentfault.com/img/bVQ5GW?w=1024&h=675); 上周在公司組織了 ES6 新特性的分享會...

荊兆峰 2019-08-20 18:06 評論0 收藏0
工作中常用es6+特性

摘要：結合工作中使用情況，簡單對進行一些復習總結，包括常用的語法，等，以及短時間內要上手需要重點學習的知識點不同工作環境可能有一些差別，主要參考鏈接是阮一峰的博客以及外文博客阮老師大部分文章是直接翻譯的這個博客簡介先說一下，是一個標準化組織，他們結合工作中使用情況，簡單對es6進行一些復習總結，包括常用的語法，api等，以及短時間內要上手需要重點學習的知識點（不同工作環境可能有一些差別），...

xcold 2019-08-23 18:39 評論0 收藏0
ES6-解構

摘要：對象和數組是中常用的數據解構，由于的普及，二者已經成為語言中特別重要的一個部分。解構是一種打破數據結構，將其拆分成更小部分的過程。數組解構數組解構和對象解構非常相似，只是將對象替換成數組。例這種解構對從配置中抽取數據來說尤為有用。對象和數組是js中常用的數據解構，由于JSON的普及，二者已經成為語言中特別重要的一個部分。ES6中添加了可以簡化解析這種解構的新特性：解構。解構是一種打破...

import. 2019-08-22 17:03 評論0 收藏0
ES6解構賦值運算符

摘要：本次我領到的任務是在中有一個解構賦值運算符，可以大大方便數據字段的獲取。解構賦值運算符配合會比較有用。本次我領到的任務是：在ES6中有一個解構賦值運算符，可以大大方便數據字段的獲取。比如 const [a, b] = [1, 2, 3]; const {name, age} = {name: helijia, age: 3}; 上面的語句是我們常用的，可是你能解釋為什么下面的...

qpal 2019-08-21 17:58 評論0 收藏0