1.Array.of()函数
函数的作用就是将传入的一组参数转换成数组。
console.log(Array.of(1,2,5,8,9))
[1, 2, 5, 8, 9]
2.Array.from()函数
就是将类似数组的对象或者可以遍历的对象转换成真正的数组。
let arr = document.getElementsByTagName('div')
得到的是一个类似数组的对象,但是用Array.from()函数呢就可以将类似数组的对象转换为数组了。
Array.from()函数还可以将字符串转换成数组,只是不能选择用什么字符分隔、
不知道各位是否想起了str.split这个常用的函数了没,这是将字符串转换为数组最常见的方式
var str = 'nishizhutou'
console.log(Array.from(str))
["n", "i", "s", "h", "i", "z", "h", "u", "t", "o", "u"]
除了上面两个静态方法以外,还新增了一些实力方法。
静态方法是什么意思?意思呢就是写在数组的原型链上的方法。
实例是什么意思呢?就是一个具体的数组。
3.find()函数
函数作用:就是找出数组中符合条件的第一个元素。
个人理解:find函数和indexOf以及includes的区别。
首先呢find函数能够确定的让你明白数组中是否含有某个值(也可以是大于某个数或者小于某个数的)并且能够将它返回,是存在的话就返回某个值不存在的话就返回undefine。
indexOf呢也是查找数组中是否存在某个值,但是它返回的是:如果存在的话就返回那个值在数组中的位置,不存在的话就返回-1,但是很多时候我们并不想知道数值在数组中的位置,只想知道数组中是否包含某个数,这种情况下indexOf返回值就不够直观了。
includes的作用呢是判断数组中是否存在某个值,存在的话返回true,不存在的话返回的是false。返回的结果非常的直观,在我们不需要使用那个值的情况下是非常好用的。
还有some(),对数组的每一项运行给定函数,如果该函数对任一项返回true的话结果就返回true。这个方法也是可以判断数组是否存在某一项的。
var someResult = arr.some(function(item,index,array){
return item === flag
})
var arr = [1,2,3,6];
var num = arr.some(item=>{
return item === 6
})
console.log(num) // true
4.findIndex()函数
函数的作用:返回符合条件的第一个数组成员的位置。若是所有的元素都不符合匿名函数的条件的话就会返回-1。
let arr = [7,8,9,10];
let num = arr.findIndex(function(value){
return value>8
})
// 9
5.fill()函数
函数作用:用指定的值,填充到数组。 能否只对一部分的数据进行填充呢,答案是可以的。通过传递参数,可以指定填充的起始位置和结束位置。 需要注意的是,fill函数会直接改变原数组
let arr = [2,3,6];
arr.fill(1);
console.log(arr) //[1,1,1]
var arr1 = [1,1,2,3,6];
console.log(arr1.fill(5,2,10))
//[1, 1, 5, 5, 5]
解释:第一个参数指的是填充的数值,第二个参数是开始填充的位置(包含),第三个参数是填充结束的位置
6.entries()函数
函数作用:对数组的键值对进行遍历,返回一个遍历器,可以用for…of对其进行遍历。
// entries 函数
var bianli = [1,2,5].entries(); // 遍历器
for(let [index,value] of bianli){ // index对应的就是元素在数组中的位置,value就是元素
console.log(index,value) // [index,value]在这为什么使用的是中括号而不是括号呢?那是因为es6变量声明的原因
}
0 1
1 2
2 5
7.keys()函数
函数作用:对数组的索引进行遍历,返回一个遍历器。
var bianli = [1,2,5].keys();
for(let index of bianli){
console.log(index)
}
0
1
2
8.values()函数
函数作用:对数组的元素(值)进行遍历,返回一个遍历器。(兼容性不好)。
// values 函数
var bianli = [1,2].values();
for(let value of bianli){
console.log(value)
}
这个函数在谷歌和火狐当做都会报错,原因是因为浏览器不支持。
除了新增函数以外,es6还为数组带来一个新的概念数组推导。
9.数组推导
数组推导的作用:用简洁的写法,直接通过现有的数组生成新的数组。
比如,有一个数组,我想在这个数组上,每个元素乘以2,得到一个新的数组。
// 传统的写法,我可能会用map,或者是forEach之类的方法
var arr = [1,2,3,5];
var arr1 = arr.map(item => item*2);
console.log(arr1)
[2, 4, 6, 10]
// 需要注意的是,在使用map函数做筛选功能的时候,原函数有多少个元素,返回的新的函数就有多少个元素。也就是他们的长度是相等的,不符合
// 筛选条件的元素就会变成undefined (使用filter函数是更好的选择)
var arr = [1,2,3,5];
var arr1 = arr.map(item =>{
if(item > 2){
return item
}
});
console.log(arr1)
[undefined, undefined, 3, 5]
// 数组推导 需要注意的是,数组推导的方式在谷歌浏览器和360浏览器都是不支持的 在火狐上可以。 至于IE我就呵呵了,压根没试。
var arr = [1,2,3,5];
var arr1 = [for(i of arr)i*2]
console.log(arr1)
[ 2, 4, 6, 10 ]
// 数组推导也同样可以实现筛选功能
var arr = [1,2,3,5];
var arr1 = [for(i of arr)if(i>2)i]
console.log(arr1)
[3,5]
总结:es6为数组带来了很多实用的方法:Array.of(),Array.from(),实例方法:find()、findIndex()、fill()、entries()、keys()、values()。需要注意的是values()方法现在各大浏览器都不大支持(也许是我的浏览器版本太低…)。此外还有一个更简洁的语法:数组推导,能让我们更方便的生成一个数组。
最后附上一句自己很喜欢的话:兴趣遍地都是,专注和持之以恒才是真正稀缺的。