ES5和ES6新增的数组方法

2024-02-08 16:33:10

let numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]

使用for…of循环迭代

你已经学过用for循环和forEach方法迭代数组。ES2015还引入了迭代数组值的for...of循环，下面来看看它的用法。

for(const n of numbers){
	console.log(n % 2 === 0 ? 'even' : 'odd');

使用@@iterator对象

ES2015还为Array类增加了一个@@iterator属性，需要通过Symbol.iterator来访问。代码如下：

let iterator = numbers[Symbol.iterator]();
console.log(iterator.next().value);	// 1
console.log(iterator.next().value);	// 2
console.log(iterator.next().value);	// 3
console.log(iterator.next().value);	// 4
console.log(iterator.next().value);	// 5

然后，不断调用迭代器的next方法，就能依次得到数组中的值。numbers数组中有15个值，因此需要调用15次iterator.next().value。

我们可以用下面的代码来输出numbers数组中的15个值。

iterator = numbers[Symbol.iterator]();
for(const n of iterator) {
	cosole.log(n);
}

数组中的所有的值都迭代完之后，iterator.next().value会返回undefined。

数组的entries、keys和values方法

ES2015还增加了三种从数组中得到迭代器的方法。我们首先要学习的是entries方法。

entries方法返回包含键值对的@@iterator，下面是使用该方法的代码示例。

let aEntries = numbers.entries();   //得到键值对的迭代器
console.log(aEntries.next().value); // [0,1]
console.log(aEntries.next().value); // [1,2]
console.log(aEntries.next().value); // [2,3]

numbers数组中都是数，key是数组中的位置，value是保存在数组索引的值。我们也可以使用下面的代码。

aEntries = numbers.entries();
for(const n of aEntries) {
    console.log(n);
}

使用集合、字典、散列表等数据结构时，都够取出键值对是很有用的。

keys方法返回包含数组索引的@@iterator，下面是使用该方法的代码示例。

const aKeys = numbers.keys();      //得到数组索引的迭代器
console.log(aKeys.next());      // {value: 0, done: false}
console.log(aKeys.next());      // {value: 1, done: false}
console.log(aKeys.next());      // {value: 2, done: false}

keys方法会返回numbers数组的索引。一旦没有可迭代的值。aKeys.next()就会返回一个value属性为undefined、done属性为true的对象。如果done属性的值为false，就意味着还有可迭代的值。

values方法返回的@@iterator则包含数组的值。使用这个方法的代码示例如下：

const aValues = numbers.values();
console.log(aValues.next());    // {value: 1, done:false}
console.log(aValues.next());    // {value: 2, done:false}
console.log(aValues.next());    // {Value: 3, done:false}

使用from方法

Array.from方法根据已有的数组创建一个新的数组。比如，要复制numbers数组，可以如下这样做。

	let  numbers = Array.from(numbers)

还可以传入一个用来过滤的函数，例子如下：

	let evens = Array.from(numbers,x => (x % 2 == 0));

上面的代码会创建一个evens数组，以及值true( 如果在原数组中为偶数)或false(如果在原数组中为奇数)。

使用Array.of方法

Array.of方法根据传入的参数创建一个新数组。以下面的代码为例

	let numbers3 = Array.of(1);
	let nnumbers4 = Array.of(1,2,3,4,5,6);

它和下面这段代码的效果一样。

	let numbers3 = [1];
	let numbers4 = [1,2,3,4,5,6];

我们也可以用该方法复制已有的数组，如下所示。

	let numbersCopy = Array.of(...numbers4);

上面的代码和Array.from(numbers4)的效果是一样的，区别只是用到了展开运算符。展开运算符(…)会把numbers4数组里的值都展开成参数。

使用fill方法

fill方法用静态值填充数组。以下面的代码为例。

	let numbersCopy = Array.of(1,2,3,4,5,6);

numbersCopy数组的length是6，也就是有6个位置，再看下面的代码。

	numbersCopy.fill(0);

numbersCopy数组所有位置上的值都会变成0 ([0,0,0,0,0,0])。我们还可以指定开始填充的索引，如下所示。

	numbersCopy.fill(2,1);

上面的例子里，数组中从1开始的所有位置上的值都是2([0,2,2,2,2,2])。

同样，我们也可以指定结束填充的索引。

	numbersCopy.fill(1,3,5);

在上面的例子里，我们会把1填充到数组索引3到5的位置，得到的数组为([0,2,2,1,1,2]);

创建数组并初始化值得时候，fill方法非常好用，就像下面这样。

	let ones = Array(6).fill(1);

上面的代码创建了一个长度为6，所有的值都是1的数组([1,1,1,1,1,1])。

使用copyWithin方法

copyWithin方法复制数组中的一系列元素到同一数组指定的起始位置。看看下面这个例子。

	let copyArray = [1,2,3,4,5,6];

假如我们想把4、5、6三个值复制到数组前三个位置，得到[4,5,6,4,5,6]这个数组，可以把下面的代码达到目的。

	copyArray.copyWithin(0,3);

假如我们想把4、5两个值(在位置3和4上)复制到位置1和2，可以这样做:

	copyArray = [1,2,3,4,5,6];
	copyArray.copyWithin(1,3,5);

这种情况下，会把位置3开始到位置5结束的元素复制到位置1，结果是得到数组[1,4,5,4,5,6]。

有任何问题都可以加我联系方式沟通交流。我最近在找实习，有渠道的也可以联系我。

码农公寓