写在前面: 我本前端小汪一枚,本着对前端知识的无比热爱的心情(其实最近比较闲~),工作之余整理了一些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]