ES6學習歷程 19 — 陣列語法擴展

ES6 Array extensions

Photo by Carl Heyerdahl on Unsplash

Array.of(element)

會把無論什麼型態、個數的參數element建立成一組新的array。

範例1:

let chars = Array.of('A', 'B', 'C');
console.log(chars.length);   // 3
console.log(chars);         // ['A','B','C']

範例2:

let chars2 = Array.of('A', 123, true, {a:1, b:2});
console.log(chars2.length);  // 4
console.log(chars2);         // ['A', 123, true, {a: 1, b: 2}]

Array.from()

可將array-object跟可遍歷對象-iterable object (for loop / Set / Map) 轉換為array。

array-object

var jsObjects = [
    {a: 1, b: 2},
    {a: 3, b: 4},
    {a: 5, b: 6},
    {a: 7, b: 8} 
];
var result = Array.from(jsObjects , el => el.a )
console.log(result)        // [1, 3, 5, 7]
console.log(result.length) // 4
var result2 = Array.from(jsObjects , el => el.a === 1 )
console.log(result2)      // [true, false, false, false]

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'];

Array find()

找到第一個符合條件的值並返回那個值，若找不到則回傳undefined

let customers = [{
    name: 'ABC Inc',
    credit: 100
}, {
    name: 'ACME Corp',
    credit: 200
}, {
    name: 'IoT AG',
    credit: 300
}];
console.log(customers.find(c => c.credit > 100)); 
// { name: 'ACME Corp', credit: 200 }

Array findIndex()

找到第一個符合條件的值並返回其所在索引位置，若找不到則回傳 -1

let ranks = [1, 5, 7, 8, 10, 7];
let index = ranks.findIndex( (rank, index) => rank === 7 && index > 2);
console.log(index);   // 5