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

// Array.from(arrayLike)
Array.from('foo'); // ['f', 'o', 'o']


// Array.from(arrayLike, mapFn(element, index))
// 相等 Array.from().map()
Array.from([1, 2, 3], (x) => x + x) // [2, 4, 6]
Array.from([1, 2, 3]).map((x) => x + x);


const someNumbers = { '0': 10, '1': 15, length: 2 };
Array.from(someNumbers, value => value * 2); // => [20, 30]

// 轉換 Set
const set = new Set(["foo", "bar", "baz", "foo"]);
Array.from(set); // ['foo', 'bar', 'baz']

// 轉換 Map
const map = new Map([
  [1, 2],
  [2, 4],
  [4, 8],
]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([
  ["1", "a"],
  ["2", "b"],
]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// 生成一个数字序列。因为数组在每个位置都使用 `undefined` 初始化，下面的 `_` 值将是 `undefined`
function range(end) {
    return Array.from({ length: end }, (_, index) => index);
}

range(4); // [0, 1, 2, 3]

// 生成一個包含十個空陣列的陣列
// [Array(0), Array(0), Array(0)]
Array.from({length: 3}, () => []);

// 與Array.fill差異
// Array.from的mapFn會返回新的Object
// Array.fill指向相同的ref
const arrObj1 = Array.from({length: 2}, () => ({}));
const arrObj2 = Array(2).fill({});

arrObj1[0] === arrObj1[1]; // false
arrObj2[0] === arrObj2[0]; // true

1
2
3
4
5
6
7

// 透過Array和map生成數字0的陣列，會變成undefined
Array(3).map(() => 0); // [undefined, undefined, undefined]
// 但是一般陣列的map不會
[1, 2, 3].map(() => 0); // [0, 0, 0]

// Array.from的mapFn也不會
Array.from({length: 3}, () => 0);

1
2
3
4
5
6
7

const array = [1, 1];

const aSet = new Set(array);

console.log(Array.from(aSet));

console.log([...aSet]);