ES5和ES6新增的数组方法

2021-07-08 18:55:57 阅读：150 来源： 互联网

标签：ES6 ES5 console log iterator value next 数组

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]。

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

标签：ES6,ES5,console,log,iterator,value,next,数组
来源： https://blog.51cto.com/u_15295488/3018842

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9