ES6學(xué)習(xí)筆記（二）--------------------------------------變量

geekidentity 發(fā)布于2019-08-21 16:18 / 1256人閱讀

摘要：如果變量名與屬性名不一致，必須寫成下面這樣。這是因為此時，字符串被轉(zhuǎn)換成了一個類似數(shù)組的對象。數(shù)字和布爾的解構(gòu)賦值，解構(gòu)賦值時，如果等號右邊是數(shù)值和布爾值，則會先轉(zhuǎn)為對象。參數(shù)也可以是無序的解構(gòu)賦值對提取對象中的數(shù)據(jù)，可以快速提取

ES6 允許按照一定模式，從數(shù)組和對象中提取值，對變量進行賦值，這被稱為解構(gòu)
ES6之前我們申明多個變量需要按照下面的方法：

let a=1;
let b=2;
let c=3;
let d=4;
//或者
let a=1,b=2,c=3,d=4;

現(xiàn)在我們可以更加簡便

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

這種方法需要連邊結(jié)構(gòu)完全對上，左邊有多余變量，會給多余變量賦值undefined，右邊有多余的值，多余的自動會被忽略

let[a,[b,c,d],[e,[f,g]]]=[1,[2,3,4],[5,[6,7]]]
console.log(a,b,c,d,e,f,g)//1 2 3 4 5 6 7

let[a,b,c,d]=[1,2,3]
console.log(a,b,c,d)//1 2 3 undefined
let[a,b,c]=[1,2,3,4]
console.log(a,b,c)//1 2 3

如果等號右邊的對象不是數(shù)組，就會無法解析，報錯

//下面的全部報錯
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

解構(gòu)賦值允許給變量默認(rèn)值,如果后面給變量賦值undefined，系統(tǒng)會自動采用默認(rèn)值

let[a=1,b,c,d]=["abort","bar","cancle","dance"]
console.log(a,b,c,d)//abort bar cancle dance

let[a=1,b,c,d]=[undefined,"bar","cancle","dance"]
console.log(a,b,c,d)//1 "bar" "cancle" "dance"

let[a=1,b]=[null,2]
console.log(a,b)//null 2

let[a=1,b]=[NaN,2]
console.log(a,b)//NaN 2

let[a=undefined,b]=[undefined,undefined]
console.log(a,b)//undefined undefined

默認(rèn)值可以引用解構(gòu)賦值的其他變量，但該變量必須已經(jīng)聲明。

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

解構(gòu)賦值還可以用于對象的屬性賦值

let{a,b}={a:1,b:2}
a//1
b//2
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

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

我們從上面的例子可以看出對象的解構(gòu)賦值的內(nèi)部機制，是先找到同名屬性，然后再賦給對應(yīng)的變量。真正被賦值的是后者，而不是前者。

如果變量名與屬性名不一致，必須寫成下面這樣。

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

let obj = { first: "hello", last: "world" };
let { first: f, last: l } = obj;
f // "hello"
l // "world"

上面的例子等價于下面,其實就是個左右一一對應(yīng)的意思

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

與數(shù)組一樣，解構(gòu)也可以用于嵌套結(jié)構(gòu)的對象。

let obj = {
  p: [
    "Hello",
    { y: "World" }
  ]
};

let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

一定要看清楚他的左右對應(yīng)關(guān)系

var node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};

var { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

對象解構(gòu)賦值也可以設(shè)置默認(rèn)值

var {x = 3} = {};
x // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

var {x: y = 3} = {};
y // 3

var {x: y = 3} = {x: 5};
y // 5

var { message: msg = "Something went wrong" } = {};
msg // "Something went wrong"

字符串也可以解構(gòu)賦值。這是因為此時，字符串被轉(zhuǎn)換成了一個類似數(shù)組的對象。

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

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

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

數(shù)字和布爾的解構(gòu)賦值，解構(gòu)賦值時，如果等號右邊是數(shù)值和布爾值，則會先轉(zhuǎn)為對象。(這個給我搞的有點懵逼，數(shù)字與布爾的這個例子大家可以看這個網(wǎng)址大家的討論：https://segmentfault.com/q/10...

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

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

let { toString : s } = 123; 
// 可以換成兩步
let temp = new Number(123);
let { toString : s } = temp;

// temp對象因為有toString屬性，所以解構(gòu)成功，然后將toStirng變量用新的變量s代替

let { a : s } = 123 是因為解構(gòu)失敗，所以是undefined

變量解構(gòu)賦值的用途
一.交換變量的值

let a=1;
let b=2;
[a,b]=[b,a]
console.log(a,b)//2 1

二.從函數(shù)返回多個值，用來接收返回值

function f(a,b){
var num=a+b;
var aver=(a+b)/arguments.length;
return[num,aver,a*b,a*a+b*b]
}
let[x,y,z,p]=f(2,3)
console.log(x,y,z,p)//5 2.5 6 13

function f1(){
return {a:1,b:2}}
let {a,b}=f1()
console.log(a,b)//1 2

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

function f1([x,y,z]){
return x+y+z}
f1([1,2,3])//6

參數(shù)也可以是無序的
function f2({a,c,d,f,b}){
return a+c+d+f+b}
f2({a:1,b:2,c:3,d:4,f:5})//15

解構(gòu)賦值對提取JSON對象中的數(shù)據(jù)，可以快速提取

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

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

....