JavaScript ES6 Object Destructuration

Posted on Edited on In Views: Disqus: Symbols count in article: 3.2k Reading time ≈ 6 mins.

JavaScript-ES6-ObjectDestructuration

這篇簡介JavaScript-ES6 Object Destructuration。

Object Destructuration

1
2
3
4
5
Destructuration不僅可以用在array，也可以用在object
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

array Destructuration versus object Destructuration

1
2
3
4
5
6
7
8
9
10
11
12
array Destructuration -> 有順序性Destructuration
object Destructuration -> 不存在順序性，variable必須對應屬性名才能取值

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };  --> 順序並不影響
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };  --> 沒有對應的同名屬性故取不到值，Destructuration失敗故undefined
baz // undefined

let { foo } = { bar: 'baz' }; --> = 右邊的object沒有foo屬性，所以variable foo 取不到值，故undefined
foo // undefined

Object Destructuration default value

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

object Destructuration的內部機制是先找到同名屬性後，將值assign給對應的variable
故真正被assign的是後者(baz)，不是前者(foo)
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

default value 生效條件 : object 屬性值 === undefined
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"

屬性x 等於 null，因為null !=== undefined，導致default value 不會生效
var {x = 3} = {x: undefined};
x // 3

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

Destructuration用途

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
1. swap variable value:
let x = 1;
let y = 2;

[x, y] = [y, x];

2. return multiple values:
return array:
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
return object:
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

3. define function parameters:
parameters 有順序性 -> array
-----------------------------
function f([x, y, z]) { ... }
f([1, 2, 3]);
parameters 無順序性 -> object
-----------------------------
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

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

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

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

5. function default parameters:
jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

6. for loop -> Map
任何有實作Iterator interface的結構，都可以用for
const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

get key:
for (let [key] of map) {
  // ...
}

get value:
for (let [,value] of map) {
  // ...
}

7. 指定import module
const { SourceMapConsumer, SourceNode } = require("source-map");