JS类数组对象

发表于 更新于 分类于

类数组对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 属性要为索引 (数字) 属性，必须有length属性，最好加上push

Array.prototype.push = function (target) {
    obj[obj.length] = target;
    obj.length ++;
}

let obj = {
    "0" : 'a',
    "1" : 'b',
    "2" : 'c',
    "length" : 3,
    "push" : Array.prototype.push,
    "splice" : Array.prototype.splice
}
1
2
3
4
5
6
7
8
9
10
11
let obj = {			
    "2" : 'a',
    "3" : 'b',
    "length" : 2,
    "push" : Array.prototype.push
}
obj.push('c');
obj.push('d');

console.log(obj);
// {2: "c", 3: "d", length: 4, push: ƒ}

调用数组方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3
}

Array.prototype.join.call(arrayLike, '&'); // name&age&sex

Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"]
// slice可以做到类数组转数组

Array.prototype.map.call(arrayLike, (item) => {
    return item.toUpperCase();
});
// ["NAME", "AGE", "SEX"]

类数组转对象

1
2
3
4
5
6
7
8
9
10
11
let arrayLike = {
    0: 'name',
    1: 'age',
    2: 'sex',
    length: 3,
    "push" : Array.prototype.push
}
// 1. slice
Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"]
// 2. splice
Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"]

Use Array.from for converting an array-like object to an array.

用 Array.from 去将一个类数组对象转成一个数组。

1
2
3
4
5
6
7
const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
const arr = Array.prototype.slice.call(arrLike);

// good
const arr = Array.from(arrLike);

arguments

说到类数组对象，arguments对象就是一个类数组对象。在客户端 JavaScript 中，一些 DOM 方法document.getElementsByTagName()等也返回类数组对象。

To convert an iterable object to an array, use spreads ... instead of Array.from.

用 ... 运算符而不是Array.from来将一个可迭代的对象转换成数组。

1
2
3
4
5
6
7
const foo = document.querySelectorAll('.foo');

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];

参考

JavaScript 深入之类数组对象与 arguments

https://github.com/airbnb/javascript