0%

ECMAScript6学习简记(二)- 数组扩展

Array.from()

将类数组或可迭代对象转换为真正的数组。

可转换的类别

Dom集合

let ps = document.querySelectAll('p');          //通过Array.from 转换后可以使用forEach方法
Array.from(ps).forEach(function(p,index){
"use strict";
trueconsole.log(p,index)
});

arguments对象

function foo() {
"use strict";
truevar args = Array.from(arguments); //可以替代以前下面这种方式来转换
truevar argvs = Array.prototype.slice.call(arguments);
trueconsole.log(argvs, args);
}
foo(1, 2, 3, 4); //[ 1, 2, 3, 4 ] [ 1, 2, 3, 4 ]

拥有length属性的对象

var obj = {
true0: 'a',
true1: 'b',
true2: 'c',
truelength: 3
};
var obj1 = {
true0: 'a',
true1: 'b',
true2: 'c'
};
console.log(Array.from(obj)); //['a','b','c']
console.log(Array.from(obj1)); //[] 没有length属性,无法转换

注意,对象的属性值必须是数字,否则转换的数组内容都是undefined

let obj2={
true'a':1,
true'b':2,
true'c':3,
truelength:3
};
console.log(Array.from(obj2)); //[ undefined, undefined, undefined ]

同时Array.from()接受第二个参数,作用类似于map方法

console.log(Array.from(obj, x=>x + '1'));  		//[ 'a1', 'b1', 'c1' ]  类似于map方法

#Array.of()
可将一组值转换为数组

Array.of(3, 12, 2, 3, 24, 2);                //[ 3, 12, 2, 3, 24, 2 ]    将一组值转换为数组
Array.of(3, '12', [2], 3, 24, 2); //[ 3, '12', [ 2 ], 3, 24, 2 ]

这个方法的目的是为了弥补数组构造函数的Array()的不足,因为当参数个数不同时,它会产生不同的效果

Array(8) // [ , , , , , , ,  ]
Array(3,11) // [3, 11]

find()和findIndex()

数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。

var found = [1, 2, 3, 4, -1].find(n=>n < 0);          //find 找出第一个返回值为true的成员
var founded = [1, 2, 3, 4, -1].find(function (b) {
truereturn b > 3
});
console.log('result:', found, founded); //result: -1 4

findIndex返回第一个符合条件的值的index,如果没找到则返回 -1.

var foundIndex = [1,2,324,5,34].findIndex(function(value,index,arr){
"use strict";
truereturn value > 100;
});
console.log(foundIndex); //2

这两个方法都可以发现NaN,而IndexOf是不能发现的。

console.log([2,3,4,NaN].indexOf(NaN));      //-1
console.log([1,2,NaN].find(value=>Object.is(NaN,value))); //NaN
console.log([1,2,3,4,NaN].findIndex(value=>Object.is(NaN,value))); //4

Array.fill()

使用给定值,填充一个数组

[1,2,3,4].fill('a');                //[ 'a', 'a', 'a', 'a' ]
new Array(6).fill(3); //[ 3, 3, 3, 3, 3, 3 ]

fill()还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。

[1,2,3,4].fill(8,1,2)				//[1,8,3,4]
[1,2,3,4].fill(8,1,3) //[ 1, 8, 8, 4 ]

entries(),keys()和values()

这三个方法都是用来遍历数组,可以使用for...of来进行遍历,keys()用来遍历键名,values()用来遍历键值,entries()对键值对遍历。

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

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

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

个人感觉意义不大,和以前的forEach是一样的功能,有个不同的地方是如果不适用for...of遍历的话,可以使用next来手动遍历。

let word = ['h','e','l','l','o'];
let entries = word.entries();
console.log(entries.next().value); [0,'h']
console.log(entries.next().value); [1,'e']

其他方法

这些都属于ES7要实现的内容

include

判断一个数组是否包含给定的值,返回的是一个布尔值。

数组推导

感觉这里跟python越来越像了。

var a1 = [1, 2, 3, 4];
var a2 = [for (i of a1) i * 2];
a2 // [2, 4, 6, 8]

for…of 后面还可以附加if语句,用来设定循环的限制条件。

var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];

[for (year of years) if (year > 2000) year];
// [ 2006, 2010, 2014 ]

[for (year of years) if (year > 2000) if(year < 2010) year];
// [ 2006]

[for (year of years) if (year > 2000 && year < 2010) year];
// [ 2006]

Array.observe(),Array.unobserve()

用于监听和数组的变化,制定回调函数。
比较期待这个方法,作用会很大。

#版权
文章中所有代码皆来自或演变自:

阮一峰-ECMAScript 6 入门,
本文同样遵循署名-非商用许可证.

如果觉得此文章对你有帮助,可以请我喝咖啡O(∩_∩)O
抹桥 微信支付

微信支付

抹桥 支付宝

支付宝

抹桥 比特币

比特币