ES6扩展——数组的新方法(Array.from、Array.of、Array.fill、Array.includes、keys values entries 、find)
1、Array.from(objec,回调函数)将一个ArrayLike对象或者Iterable对象(类数组对象)转换成一个数组
1)该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组 2)该类数组对象的属性名必须为数值型或字符串型的数字
//新的方法 //Array.from可以把一个类数组的对象转成数组 //该类数组对象的属性名必须为数值型或字符串型的数字 const obj = { 0:1, 1:22, 2:false, length:2 //false不在数组中是因为length为2 }; //from()方法的作用是将一个ArrayLike对象或者Iterable对象转换成一个Array //还可以接收第二个参数,是一个回调函数 console.log(Array.from(obj, item => item * 2)); //[2,44] //其他将类数组转换成数组的方法(相对from方法少了第二个参数): Array.prototype.slice.call(); [].slice.call(); [...]
2、Array.of()将传入的参数合并为一个数组
//Array.of把传进去的参数合成一个数组 console.log(Array.of(1,2,'123',false)); //[1,2,'123',false]
3、Array().fill(num,start,end)填充数组并且指定范围
//Array().fill(num,start,end)填充数组并且指定范围,不包括end脚标 //可以很方便的去指定一个数组的默认值 let arr = new Array(5); //[empty * 5] let arr1 = new Array(5).fill(0); //[0,0,0,0,0] //如果数组原先有值,fill会覆盖掉 console.log([1,2,3].fill(0)); //[0,0,0] //指定范围 let arr3 = new Array(5).fill(0,0,3); //[0,0,0,empty*2] //new Array()这个构造函数会根据参数进行重载,只有一个参数的时候就是表示数组的长度,有多个参数就会作为数组的成员
4、Array.includes()返回布尔值,用来判断数组中是否存在某一项
//Array.includes()返回布尔值,用来判断数组中是否存在某一项 var arr = [1,2,3,4]; console.log(arr.includes(1)); //true console.log(arr.includes(55)); //false
5、keys values entries
//keys可以拿到数组中的每一个下标 const arr = [1,2,3,444]; console.log(arr.keys()); //Array Iterator{} 迭代器接口 for(let i of arr.keys()){ console.log(i); //四行的值分别是:0 1 2 3 } //values可以拿到数组中的每一项 for(let v of arr.values()){ console.log(v); //四行的值分别是:1 2 3 444 } //entries可以同时拿到下标和对应的值,返回的是数组 for(let u of arr.entries()){ console.log(u); //四个数组:[0,1] [1,2] [2,3] [3,444] } //可以解构赋值,同时拿到下标跟值 for(let [i,v] of arr.entries()){ console.log(i,v); //四行的值分别是:0 1 1 2 2 3 3 444 }
6、find方法根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的值。这个方法用的比较多
//find 根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的值 const res = [1,7,6,3].find(function(value,index,arr){ console.log('value:',value); console.log('index:',index); console.log('arr',arr); return value % 2 === 0; }); console.log(res); //6 //也可以写成箭头函数 const res1 = [1,7,6,3].find((value,index,arr) => value % 2 === 0 ); console.log(res1); //6
7、findIndex根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的下标。这个方法用的比较多
//findIndex 根据条件(回调)按顺序遍历数组,当回调返回true时,就返回当前遍历到的下标 const res2 = [1,7,6,3].findIndex((value,index,arr) => value % 2 ===0 ); console.log(res2); //返回数值6的脚标:2 //findIndex跟indexOf相似,只是indexOf无法判断有没有NaN,但是findIndex可以判断 const res3 = [1,7,6,3,NaN].findIndex((value,inde,arr) => Number.isNaN(value)); console.log(res3); //4