【春节日更】小技巧 — 如何将类数组转成数组

今日分享一个小技巧：

类数组转成数组的方法

下面就来看看吧

01

什么是类数组

（Array-like）

定义：

1. 不是数组
2. 可以利用属性名模拟数组的特性
3. 不具有数组所具有的方法
4. 拥有length属性，可以动态的增长

类数组必须有几个组成部分：

1. 属性要为索引（数字）属性
2. 必须有length属性
3. 最好加上push方法
4. 最好加上splice : Array.prototype.splice

代码如下：

代码语言：javascript复制

var o = {
"0" : "a",
"1" : "b",
"2" : "c",
length : 3,
push : Array.prototype.push,
splice : Array.prototype.splice
}

注：若类数组对象没有写push方法，则调用时即会报错

常见的类数组有 arguments 和 HTMLCollection、NodeList ，《javascript权威指南》里面给出了一个鉴别对象是否是类数组的函数：

代码语言：javascript复制

function isArrayLike(o) {
    if (o &&                                // o is not null, undefined, etc.
        typeof o === 'object' &&            // o is an object
        isFinite(o.length) &&               // o.length is a finite number
        o.length >= 0 &&                    // o.length is non-negative
        o.length===Math.floor(o.length) &&  // o.length is an integer
        o.length < 4294967296)              // o.length < 2^32
        return true;                        // Then o is array-like
    else
        return false;                       // Otherwise it is not
}

类数组与数组的显示区别：

图1

图2

02

类数组转数组的方法

方法一：

使用 Array.prototype.slice.call(arguments)

代码语言：javascript复制

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

你也可以简单的使用 [].slice.call(arguments) 来代替。另外，你可以使用 bind 来简化该过程。

代码语言：javascript复制

var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

function list() {
  return slice(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]

方法二：

Array.from() 是ES6中新增的方法，可以将两类对象转为真正的数组：类数组对象和可遍历（iterable）对象（包括ES6新增的数据结构Set和Map）。

代码语言：javascript复制

// demo1
// 直接类对类对象进行转换
var arrayLike = {
    '0':'a',
    '1':'b',
    '2':'c',
    length:3
};
var arr = Array.from(arrayLike);//['a','b','c']
//demo2 
// 把HTMLCollection对象转换为数组
var pArr = document.getElementsByTagName('p');
console.log(Array.from(pArr))   

// demo3    
//转换arguments对象为数组
function list(){
    return Array.from(arguments);

}

// demo4
// 只要是部署了Iterator接口的数据结构，Array.from都能将其转换为数组
Array.from('hello');            //['h','e','l','l','o']

方法三：

扩展运算符（…）

同样是ES6中新增的内容，扩展运算符（…）也可以将某些数据结构转为数组

代码语言：javascript复制

//arguments对象的转换
function list(){
    return [...arguments];
}

//HTMLCollection对象的转换
[...document.getElementsByTagName('p')]

扩展运算符实际上调用的是遍历器接口，如果一个对象没有部署此接口就无法完成转换

ecmascript 编程算法 数据结构

0 人点赞