ES6學習筆記（二）--------------------------------------變量

silencezwm 發布于2019-08-29 13:23 / 3577人閱讀

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

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

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

現在我們可以更加簡便

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

這種方法需要連邊結構完全對上，左邊有多余變量，會給多余變量賦值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

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

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

解構賦值允許給變量默認值,如果后面給變量賦值undefined，系統會自動采用默認值

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

默認值可以引用解構賦值的其他變量，但該變量必須已經聲明。

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

解構賦值還可以用于對象的屬性賦值

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

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

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

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"

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

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

與數組一樣，解構也可以用于嵌套結構的對象。

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

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

一定要看清楚他的左右對應關系

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}

對象解構賦值也可以設置默認值

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"

字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象。

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

類似數組的對象都有一個length屬性，因此還可以對這個屬性解構賦值。

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

數字和布爾的解構賦值，解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象。(這個給我搞的有點懵逼，數字與布爾的這個例子大家可以看這個網址大家的討論：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屬性，所以解構成功，然后將toStirng變量用新的變量s代替

let { a : s } = 123 是因為解構失敗，所以是undefined

變量解構賦值的用途
一.交換變量的值

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

二.從函數返回多個值，用來接收返回值

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

解構賦值可以方便地將一組參數與變量名對應起來。

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

參數也可以是無序的
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

解構賦值對提取JSON對象中的數據，可以快速提取

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

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

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

....

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

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

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

ES6學習筆記（二）--------------------------------------變量

摘要：如果變量名與屬性名不一致，必須寫成下面這樣。這是因為此時，字符串被轉換成了一個類似數組的對象。數字和布爾的解構賦值，解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象。參數也可以是無序的解構賦值對提取對象中的數據，可以快速提取 ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構ES6之前我們申明多個變量需要按照下面的方法： let a=1; let b=2...

王笑朝 2019-08-01 17:34 評論0 收藏0
ES6學習筆記（二）--------------------------------------變量

摘要：如果變量名與屬性名不一致，必須寫成下面這樣。這是因為此時，字符串被轉換成了一個類似數組的對象。數字和布爾的解構賦值，解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象。參數也可以是無序的解構賦值對提取對象中的數據，可以快速提取 ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構ES6之前我們申明多個變量需要按照下面的方法： let a=1; let b=2...

geekidentity 2019-08-21 16:18 評論0 收藏0
es6學習筆記-頂層對象_v1.0_byKL

摘要：學習筆記頂層對象雖然是筆記但是基本是抄了一次大師的文章了頂層對象頂層對象，在瀏覽器環境指的是對象，在指的是對象。之中，頂層對象的屬性與全局變量是等價的。的寫法模塊的寫法上面代碼將頂層對象放入變量。參考引用頂層對象實戰 es6學習筆記-頂層對象_v1.0 (雖然是筆記,但是基本是抄了一次ruan大師的文章了) 頂層對象頂層對象，在瀏覽器環境指的是window對象，在Node指的是gl...

Meils 2019-08-21 11:31 評論0 收藏0
ES6學習筆記一：let、const、塊級作用域

摘要：一新增了命令和一樣都是用來聲明標量，但所聲明的變量只在聲明的代碼塊內及聲明之后有效命令適合在循環中使用在循環內有效在全局內有效命令暫時性死區大括號中的使用了聲明，所以在大括號中暫時只能在聲明之后有效不允許在同一作用域內重復聲明變量，因此不能一、ES6新增了let命令 let 和 var 一樣都是用來聲明標量，但let所聲明的變量只在【聲明的代碼塊內】及【聲明之后】有效 { c...

YuboonaZhang 2019-08-20 12:08 評論0 收藏0
ES6學習筆記

摘要：所以，如果一個數組成員不嚴格等于，默認值是不會生效的因為不嚴格等于對象解構對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。 http://es6.ruanyifeng.com/?se... 一、作用域 let //i作用域在全局，每次循環i都被重新賦值了而覆蓋了之前的值 var a = []...

Gu_Yan 2019-08-20 14:34 評論0 收藏0