[总结]ES6 Array

学习es6时做得小笔记

// Array.from() 将对象(object，Set，Map，iterable)转为真正的数组

let arrayObj = {
    '0': 2,
    length: 1 //必须要
};

// ES5的写法
var arr1 = [].slice.call(arrayObj); // ["a"]
// ES6的写法
let arr2 = Array.from(arrayObj); // ["a"]
// ES6 set
let arr3 = Array.from(new Set([1, 2, 3, 4, 4])); // [1, 2, 3, 4]

// 实际应用
// DOM操作返回的NodeList集合,将它们转为真正的数组
let divDomArray = document.querySelectorAll('div');
Array.from(divDomArray).forEach(function(divDom) {
    //console.log(divDom);
});

// arguments对象
function foo() {
    let args = Array.from(arguments);
}


// 扩展运算符（`...`）也可以将某些数据结构转为数组

function foo() {
    let args = [...arguments];
}

var divDomArray2 = [...divDomArray];

// 应用
Array.from(arrayObj, x => x * x);
// 等同于
Array.from(arrayObj).map(x => x * x);

Array.from([1, , 2, , 3], (n) => n || 0);
// 返回各种数据的类型
function typesOf() {
    return Array.from(arguments, value => typeof value)
}

// Array.of()
// 将一组值，转换为数组。
Array.of(3, 11, 8) // [3,11,8]

// 数组实例的find()和findIndex()
// 用于找出第一个符合条件的数组成员。它的参数是一个回调函数，
// 所有数组成员依次执行该回调函数，直到找出第一个返回值为`true`的成员，
// 然后返回该成员。如果没有符合条件的成员，则返回`undefined`。
[1, 4, -5, 10].find((n) => n < 0)
// -5

// 回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

// 数组实例的fill()
// 填充数组
['a', 'b', 'c'].fill(7)
// [7, 7, 7]


// 数组实例的includes()

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, NaN].includes(NaN); // true

/* 
    另外，Map和Set数据结构有一个`has`方法，需要注意与`includes`区分。
    - Map结构的`has`方法，是用来查找键名的，
    比如`Map.prototype.has(key)`、`WeakMap.prototype.has(key)`、`Reflect.has(target, propertyKey)`。
    - Set结构的`has`方法，是用来查找值的，
    比如`Set.prototype.has(value)`、`WeakSet.prototype.has(value)`。
*/

// 空位转为`undefined`