物件轉換為陣列的方法
阿新 • • 發佈:2018-12-31
Array.from方法用於將兩類物件轉為真正的陣列:類似陣列的物件( array-like object )和可遍歷( iterable )的物件(包括 ES6 新增的資料結構 Set 和Map )。
[javascript] view plain copy- let arrayLike = {
- '0': 'a',
- '1': 'b',
- '2': 'c',
- length: 3
- };
- // ES5 的寫法
- var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
- // ES6 的寫法
-
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
- // NodeList 物件
- let ps = document.querySelectorAll('p');
- Array.from(ps).forEach(function (p) {
- console.log(p);
- });
- // arguments 物件
- function foo() {
- var args = Array.from(arguments);
- // ...
- }
- Array.from('hello')
- // ['h', 'e', 'l', 'l', 'o']
- let namesSet = new Set(['a', 'b'])
-
Array.from(namesSet) // ['a', 'b']
- Array.from({ length: 3 });
- // [ undefined, undefined, undefined ]
Array.from還可以接受第二個引數,作用類似於陣列的map方法,用來對每個元素進行處理,將處理後的值放入返回的陣列。
- Array.from(arrayLike, x => x * x);
- // 等同於
- Array.from(arrayLike).map(x => x * x);
- Array.from([1, 2, 3], (x) => x * x)
-
// [1, 4, 9]
值得提醒的是,擴充套件運算子(...)也可以將某些資料結構轉為陣列。 [javascript] view plain copy
- // arguments 物件
- function foo() {
- var args = [...arguments];
- }
- // NodeList 物件
- [...document.querySelectorAll('div')]