随着 JavaScript 的不断发展，ES7 中新增了一些非常实用的方法，其中之一就是 Array.from() 方法。这个方法可以将类数组对象或可迭代对象转换成一个真正的数组。本文将介绍 Array.from() 方法的使用及注意事项，并提供一些示例代码，帮助读者更好地理解和掌握该方法。
Array.from() 方法的基本用法
Array.from() 方法接收两个参数：第一个参数是要转换的对象，第二个参数是一个可选的映射函数，用于对数组中的每个元素进行处理。下面是一个基本的用法示例：
const obj = { length: 3, 0: 'a', 1: 'b', 2: 'c' };
const arr = Array.from(obj);
console.log(arr); // ['a', 'b', 'c']在上面的示例中，我们将一个类数组对象 obj 转换成了一个真正的数组 arr。由于 obj 没有数组的方法，因此我们无法直接调用数组的方法，比如 push() 和 pop()。但是，一旦我们将其转换成真正的数组，就可以随意使用数组的方法了。
使用映射函数对数组元素进行处理
Array.from() 方法的第二个参数是一个可选的映射函数，用于对数组中的每个元素进行处理。下面是一个基本的用法示例：
const arr = [1, 2, 3]; const newArr = Array.from(arr, x => x * 2); console.log(newArr); // [2, 4, 6]
在上面的示例中，我们对原数组 arr 中的每个元素都乘以了 2，得到了一个新的数组 newArr。
使用 Array.from() 方法实现类数组对象的转换
除了转换普通的数组外，Array.from() 方法还可以将一些类数组对象转换成真正的数组。比如，我们可以将一个 NodeList 对象转换成一个数组：
const nodeList = document.querySelectorAll('p');
const arr = Array.from(nodeList);
console.log(arr); // [p, p, p, p]在上面的示例中，我们使用了 document.querySelectorAll() 方法获取了页面中所有的 p 元素，然后使用 Array.from() 方法将其转换成了一个真正的数组。
注意事项
虽然 Array.from() 方法非常实用，但是在使用时需要注意以下几点：
- Array.from() 方法只能转换类数组对象或可迭代对象，如果传入的参数不是这两种类型，将会抛出 TypeError 错误。
- 映射函数中的 this 值默认指向 undefined，如果需要指定 this 值，需要在 Array.from() 方法的第三个参数中指定。
- 在使用 Array.from() 方法时，需要注意兼容性问题。虽然 ES7 中已经原生支持该方法，但是在一些老旧的浏览器中可能不支持该方法，需要使用 polyfill 进行兼容。
总结
本文介绍了 ES7 中新增的 Array.from() 方法的使用及注意事项。Array.from() 方法可以将类数组对象或可迭代对象转换成一个真正的数组，非常实用。在使用 Array.from() 方法时，需要注意参数的类型、映射函数的 this 值以及兼容性问题。希望本文能够帮助读者更好地理解和掌握该方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650ba15295b1f8cacd5b1755