ES6--数组

写在前面： 我本前端小汪一枚，本着对前端知识的无比热爱的心情（其实最近比较闲~），工作之余整理了一些ES6的要点内容，特此分享与君共勉，会持续更新欢迎各路大神批评指正~

今个儿头一天咱们来扯一扯数组的八卦：
对于前端的程序旺来说数组再熟悉不过了，不过最新的ES6规范中对数组进行了很多的扩展和改进，闲话不多说进入主题。

/*
    Array.from()用于把类数组对象或可遍历的对象转化为真正的数组.并返回一个新的数组，不会修改原对象!
*/
/*
画外音： 什么是类数组对象？
    类数组对象可以简单的这么理解： 一个对象的属性都是正整数而且有一个length属性来表示属相的个数。 正整数属性对应的是转换后数组的下标。
    数组的长度由对象的length属性决定并从0开始计数，数组各个索引对应的值等于和对象的属性相匹配的值，匹配不到的就赋值为undefined
*/
let likeArray = {
    '1' : 'a',
    '2' : 'b',
    '3' : 'c',
    length : 3
};
//转换后的数组长度为3（由length属性决定） array[0] = undefined (likeArray没有属性0)，array[1] = a array[2]=b
/*es5的写法*/
//var newArray = [].slice.apply(likeArray);
/*es6写法 Array.from()*/
let newArray = Array.from(likeArray);
console.log(newArray); //[undefined,a,b]
likeArray[0] = 'z';    //修改原对象
console.log(likeArray);
console.log(newArray);  //[undefined,a,b]

/*应用场景：
    常用于对DOM操作返回的NodeList以及函数内部的arguments对象
*/
let nodeLIst = document.querySelectorAll('p');
Array.from(nodeLIst).forEach(function(item){
    console.log(item);
});

/*第二个参数：
    Array.from()还接受第二个参数（function） 类似于map方法 对每个元素进行处理 然后把处理过的值放入到返回的数组中。
* */
let newArray2 = Array.from(likeArray,(item)=>{
    return item + 'A'
});
console.log(newArray2);


/*
    Array.of() 将一组值转换为数组。它的行为非常统一，传入的参数是什么就把它放入数组中，没有参数时就返回空数组。
*/

Array.of();  // []
Array.of(3); // [3]
Array.of(1,3,8);  // [1,3,8]

/*
小小的扩展：
    ES5 中 用Array()定义数组时 当参数不少于2个时才会返回由参数组成的数组，参数为一个时实际指定的是数组的长度。
    Array(3) // [,,,]    Array(1,3,8)  // [1,3,8]
*/


/*
   find((value,index,arr)=>{}) 方法. 它的参数是一个回调函数，所有数组成员以此执行该回调函数，直到返回 第一个 符合条件的值，如果没有符合的数组成员则返回undefined
   回调函数可以接受三个参数，value为当前值，index为当前索引，arr为原数组
*/
let lessZero = [1,2,-3,10];
console.log(lessZero.find((v)=>{return v<0}));

/*  findIndex() 用法和find()类似，参数也相同，它返回符合条件的第一个元素的位置，没有符合的元素则返回-1 功能类似于indexOf()    */

//indexOf无法识别数组中的NAN 而findIndex可以借助Object.is()实现
[NaN].findIndex(y => Object.is(NaN,y));

/*
数组的空位：
    ES6中不会“忽略”空位 所有的空位都会被统一的转化为undefined 并且遍历的时候也不会忽略空位
*/
Array.from([1,,3]);  // [1,undefined,3]