ES6學習筆記二(變數結構賦值)

劍繪驚鴻發表於2019-03-05
筆記變數賦值
參考ES6標準入門書籍

陣列的結構賦值

     首頁我們來說一說什麼是解構賦值，ES6允許按照一定模式從陣列和物件中提取值，然後對變數進行賦值，這被稱為解構(Destructuting）

     多的不說我們直接來看幾個解構的例子，想象你很快就能理解。

//以前的賦值寫法
例1
var a = 1;
var b = 2;
var c = 3;
//ES6使用解構賦值
例2
var [a, b, c] = [1, 2, 3];
//複雜巢狀陣列解構
例3let [a, [[b], c]] = [1, [[2], 3]];
a// 1
b// 2
c// 3
例4
let [ ,b, c] = ["1", "2"];
c// undefined 
b// "2"
a// a is not defined
例5
let [a, b] = [1, 2, 3];a// 1b// 2
例6let [a, ...b] = [1, 2, 3, 4];a//1b//[2, 3, 4]例7
//報錯
let [a]=1;
例8
function* fibs() {    var a = 0;    var b = 1;    while (true) {      yield a;      [a, b] = [b, a + b];    }}var [first, second, third, fourth, fifth, sixth] = fibs();sixth // 5複製程式碼

我們可以清楚的發現只要等號兩邊的模式相同，左邊的變數就會被賦予對應的值。

  1. 如果解構不成功變數的值就會變成undefined。（例4）
  2. 如果解構不完成，左邊會匹配能夠解構的那一部分，並不會出現錯誤。（例5）
  3. 如果解構的不是陣列那麼就會報錯（例7）
  4. 解構可以配合...運算子一起使用（例6）
  5. 特殊情況，只要某種資料結構具有Iterator介面，都可以採用陣列形式的解構賦值。(例8)

設定預設值

解構賦值是可以設定預設值的我們來看一段程式碼

例1
let [a=1,b]=[];
a//1
b//undefined
例2
let [a=1]=[undefined];
a//1
例3
let [a=1,b]=[2,3]
a//2
b//3
例4
let [a=1,b=a]=[2]a//2b//2
例5let [a=b,b=1]=[]ReferenceError: b is not defined複製程式碼

  1. 我們可以發現等號左邊的變數是可以設定預設值的，而且當右邊匹配的值是undefined,左邊的值還是預設值，如果不是undefined,則覆蓋預設值。（例1例2例3）
  2. 預設值可以用用解構賦值的其他變數，但是這個變數必須已經宣告。（例4例5）

其他型別的解構賦值

物件的解構賦值和陣列有一個重要的不同，陣列是按次序排列的，變數取值是由它的位置決定的；但是物件沒有次序，物件是按照屬性名取值的。我們看看例子。

例1
let {b,a}={a:1，b:2}
a//1
b//2
例2
let{b:first,a:last}={a:1，b:2}first//2
last//1
a//ReferenceError: a is not defined
b//ReferenceError: b is not defined
複製程式碼

var obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};

var { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ReferenceError: p is not defined複製程式碼
  1. 第一段程式碼我們可以看出物件的解構賦值和陣列的區別，而且我們看到等號左邊的變數名和屬性名不一致時，必須按例2那樣書寫，其例項1的寫法只是一種簡寫他和例2是一樣的。

    let {b:b,a:a}={a:1，b:2}
a//1
b//2複製程式碼

  2. 第二段程式碼是複雜的物件的解構賦值，一眼看去你可能會覺得p也是變數，其實p這裡只是一種模式，不會被賦值，如果我們要取p只能另外加一個變數。

    var { p,p: [x, { y }] } = obj;複製程式碼

字串，數值和布林值的解構賦值其實都差不多我們來看幾個例子。

//字串被轉化成了一個類似陣列的物件
const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
//這個陣列物件有一個length屬性
let {length : len} = 'hello';len // 5

//解構賦值時，如果等號右邊是數值和布林值，則會先轉為物件。
//數值
let {toString: s} = 123;s === Number.prototype.toString // true//布林值let {toString: s} = true;s === Boolean.prototype.toString // true複製程式碼

函式引數的解構賦值

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

add([1, 2]); // 3複製程式碼
上面程式碼中，函式的參數列面上是一個陣列，但在傳入引數的那一刻，陣列引數就被解構成變數x和y。對於函式內部的程式碼來說，它們能感受到的引數就是x和y。

應用

  1. 交換變數的值
  2. 函式返回多個值
  3. 函式引數自定義
  4. 提取Json資料
  5. 函式引數的預設值
  6. 遍歷Map解構
  7. 輸入模組的指定方法
一、首頁我們來看第一個其實很簡單

let a=1,b=2;
[a,b]=[b,a];複製程式碼

簡簡單單的程式碼實現了交換a和b的值

二、函式返回資料的時候，有時候會出現需要返回多個值的情況，這時候使用解構賦值就十分的合適了。

function f() {
  return [1, 2];
}
var [a, b] = f();
a//1
b//2複製程式碼

三、函式引數定義的時候使用解構賦值，可以讓我們傳如引數的時候變得十分方便

// 引數是一組有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);

// 引數是一組無次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});複製程式碼

四、作為一個前端開發者我相信我們和json直接一定都有著很密切的關係，玩轉json是我們必經之路。那麼我們來看看解構賦值在提取json資料的時候帶給我們的方便。

var jsonData = {
  id: 1,
  read: true,
};

let { id, read } = jsonData;
console.log(id, read);// 1, true複製程式碼

五、函式引數的預設值

指定引數的預設值，就避免了在函式體內部再寫var foo = config.foo || 'default foo';這樣的語句。

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};複製程式碼

六、遍歷Map解構

在使用for...of迴圈遍歷的時候，配合變數的解構賦值獲取鍵名和鍵值變的十分方便

var map = new Map();
map.set('f', 'hello');
map.set('s', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
//f is hello
//s is world複製程式碼

七、輸入模組的指定方法

載入模組時，往往需要指定輸入那些方法。解構賦值使得輸入語句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");複製程式碼


相關文章