将类数组 (array-like) 对象转化为数组

[AymaxLi]

Background

What is Array-Like Object

JavaScript 中常见的类数组有:

• xxx.childNodes 返回的 NodeList
• xxx.children 和 node.getElementsByXXX 返回 HTMLCollection
• function 的 arguements 对象

  Situation

  类数组是没有 Array.prototye 上的方法的，但是很多时候我们需要使用一些常用的数组 api， 就可以用下面方法将就转化为数组 ~

Solutions

使用 Array.prototype.slice 进行转化

;(function sum (a, b, c) {
    let args = Array.prototype.slice.call(arguments)

    console.log(args.reduce((pre, cur) => pre + cur))  // 6
})(1, 2, 3)

使用 ES6 新增的 Array.from 进行转化

;(function sum (a, b, c) {
    let args = Array.from(arguments)

    console.log(args.reduce((pre, cur) => pre + cur))  // 6
})(1, 2, 3)

使用 ES6 的 ... 拓展运算符

;(function sum (a, b, c) {
    let args = [...arguments]

    console.log(args.reduce((pre, cur) => pre + cur))  // 6
})(1, 2, 3)

Reference

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
• https://www.zhihu.com/question/31576889

[AymaxLi]

补充

用 Object.keys 取得类数组的可枚举属性，再用 map 返回内容组成数组

 ;(function sum (a, b, c) {
    let args = Object.keys(arguments).map(key => arguments[key])

    console.log(args.reduce((pre, cur) => pre + cur))  // 6
})(1, 2, 3)

Reference

创建长度为 100 的数组 - 掘金