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 入门,
本文同样遵循署名-非商用许可证.