ES6数组新增方法详解：Array.from、of、find、fill及遍历

本文通过具体实例总结ES6中数组相关的新增知识，供读者参考学习。

JSON数组格式转换与Array.from

1. JSON数组格式转换

JSON数组格式是一种便于前端快速将JSON数据转换为数组的结构，其典型特征如下：

let json = {
  '0': '男',
  '1': '女',
  length:3
}

这是一个标准的JSON数组格式。与普通JSON对象相比，其区别在于末尾多出了一个length属性。凡是符合这种特殊格式的JSON数据，均可利用ES6语法轻松转换为数组。

使用Array.from(xxx)方法可将上述JSON代码转换为数组，具体实现代码如下：

let json = {
  '0': '男',
  '1': '女',
  length: 2
}

let arr = Array.from(json)
console.log(arr)

运行结果如下：

["男", "女"]

上述示例中，length属性的值等于JSON中除length:2以外的键值对总数。若length的值大于实际元素数量，数组中多余的位置将填充为undefined。示例如下：

运行结果如下：

Array.of方法转换数组

2. Array.of()方法

该方法用于将一组文本或变量转换为数组。在开发过程中，若获取到类似数组的字符串，传统做法是使用eval进行转换，这会降低程序性能。此时，使用Array.of方法更为合适。例如：

let arr =Array.of(3,4,5,6);
console.log(arr);

运行结果如下：

此外，该方法不仅支持数字转换，同样适用于字符串。

let arr =Array.of('es6',1,'开发');
console.log(arr);

运行结果如下：

find实例方法查找元素

3. find()实例方法

所谓实例方法，是指该方法并非直接挂载在Array构造函数上，而是必须作用于一个已存在的数组对象。换言之，实例方法是针对已有数组的操作。

在find方法中，需要传入一个匿名函数，该函数接收三个参数：

• value：表示当前正在查找的元素值。
• index：表示当前元素在数组中的索引。
• arr：表示当前被遍历的数组对象。

当函数体内找到符合条件的数组元素时，执行return语句并终止查找。相关代码如下：

let arr=[0,1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
  return value > 6;
}))

返回结果为7，表明成功找到符合条件的值并返回。若未找到匹配项，则返回undefined。

fill实例方法填充数组

4. fill()实例方法

fill()同样是一个实例方法，用于对数组进行填充操作。它接收三个参数：第一个参数为填充的值，第二个参数为开始填充的索引位置，第三个参数为结束填充的索引位置（不包含该位置）。

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('es',2,5);
console.log(arr);

运行结果如下：

上述代码演示了如何将数组从第2位到第5位（索引2至4）填充为字符串'es'。

for...of循环与entries遍历

5. 数组遍历：for...of循环

(1) 输出数组内容

let arr=['男','女']
for (let item of arr){
  console.log(item);
}

运行结果：男、女。

(2) 输出数组索引

let arr=['男','女']
for (let index of arr.keys()){
  console.log(index);
}

输出值为：

0、1

(3) 同时输出数组内容和索引：entries()方法

let arr=['男','女']
for (let [index,val] of arr.entries()){
  console.log(index+":"+val);
}

运行结果如下：

6. entries()实例方法

entries()实例方法生成的是Iterator（迭代器）形式的数组。这种形式的优势在于，允许开发者在需要时通过next()方法手动跳转到下一个值。代码如下：

let arr=['男','女']
let list=arr.entries();
console.log(list.next().value);
console.log(list.next().value);

运行结果如下：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码的运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文所述内容对大家进行JavaScript程序设计有所帮助。