继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

阮一峰的ES6---数组的扩展

startitunderground
关注TA
已关注
手记 58
粉丝 98
获赞 931

一,扩展运算符
扩展运算符(spread)是三个点(...)。他好比rest参数的逆运算,讲一个数组转为用都好分隔的参数序列。

console.log(...[1,2,3]);
//1 2 3
console.log(...[1,2,3,[4,5]]);
//1 2 3 [4,5]

扩展运算符的应用
合并数组
[1,2,...more]代替[1,2].concat(more);
字符串:将字符串转换为数组

[..."MGT360124"]
//["M", "G", "T", "3", "6", "0", "1", "2", "4"]

Map和Se结构,Generator函数
扩展运算符内部调用的是数据结构的 Iterator 接口,因此只要具有 Iterator 接口的对象,都可以使用扩展运算符,比如 Map 结构。

let map = new Map([ [1,"one"],[2,"two"],[3,"three"] ]);
 let arr = [...map.keys() ]; //[1,2,3]

generator函数运行之后,返回一个遍历器对象,因此也可以使用扩展运算符

const go = function * (){
 yield 1;
 yield 2;
 yield 3;
};
[...go()];//[1,2,3]

变量go是一个 Generator 函数,执行后返回的是一个遍历器对象,对这个遍历器对象执行扩展运算符,就会将内部遍历得到的值,转为一个数组。
Array.of()将一组值,转换为数组

Array.of(3,12,5) ; //[3,12,5]
Array.of(3).length;//1
Array.of() // []

数据实例的find()和findIndex()
数组实例的find()方法,用于找出第一个符合条件的数组成员,他的参数是一个回调函数,所有数组成员依次执行该函数,知道找出第一个返回值为true的成员,探后返回该成员,如果没有符合条件的成员,则返回undefined。

[1,3,5,10].find( (n) => n>5)
//10

数组实例的findIndex方法的用法与find方法非常相似,返回第一歌符合条件的数组成员的位置,如果所有成员都不符合条件则返回-1;

[1,5,9,16].findIndex(function(value,index,arr){
      return value >9;
})
//三个参数分别为:当前的值,当前的位置,原数组。

数组实例的fill()使用给定值,填充一个数组

["a"."b","c"].fill(5);
//[5,5,5]
new Array.fill(6);
//[6,6,6]
//fill方法还可以接收第二个和第三个参数,用于指定填充的起始位置和结束位置。
['a','b','c'].fill(6,1,2)
//['a',6,'c']

数组实例的entries() ,keys() 和 values()
ES提供了三个新的方法 entries() 和keys() 和values() 用于遍历数组,他们都返回一个遍历器对象,可以使用for ...of 循环进行遍历,唯一的区别是keys()是对键名的遍历,values()是对键值的遍历,entries()是对键值对的遍历。

for (let index of  ['a','b'].keys() ) {
     console.log(index);
}
//0 
//1

for (let elem of ["a","b"].values() ){
    console.log(elem);
}
//'a'
//'b'

for ( let [index,elem] of ['a','b'].entries() ) {
   console.log(index,elem);
}
//0 "a"
// 1 "b"

数组实例的includes()
在没有这个方法之前,通常是用indexOf()检测是否包含某个数组,indexOf方法的缺点是:不够语义化,没有使用 ===严格相等这样会出现NaN的误判。

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

数组的空位
数组的空位指的是:数组的某个位置没有任何值

Array(3)//[,,,]
[,,,] == [undefined,undefined,undefined];//false

ES5中的forEach(),fliter()和every()和some()都会跳过空位
map()会跳过空位,但是会保留这个值
join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。

// forEach方法遍历,循环。
[,"a","b"].forEach( function (value, index ,array){ 
          console.log(index,value,array)
});
// 1 "a"
//2   'b'

// filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
['a', , 'b'].filter( function (x) {
       return true;
})
//["a","b"]

//every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
[,'a'].every(x => x==='a') // true

//some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
[,'a'].some(x => x !== 'a') // false

// map方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
[,'a'].map(x => 1) // [,1]

ES6中entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP