734 字
4 分钟
JS中类数组和数组对象比较
类数组对象
:::tip 定义
拥有一个length属性，和若干索引属性的对象
例如:
:::
var array = ['name', 'age', 'sex'];var arrayLike = { 0: 'name', 1: 'age', 2: 'sex', length: 3}WARNING 既然被称作
类数组对象，肯定和普通数组对象有区别，下面从读写、获取长度和遍历三个方面进行对比
读写
console.log(array[0]); // nameconsole.log(arrayLike[0]); // name
array[0] = 'new name';arrayLike[0] = 'new name';长度
console.log(array.length); // 3console.log(arrayLike.length); // 3遍历
for(var i = 0, len = array.length; i < len; i++) { ……}for(var i = 0, len = arrayLike.length; i < len; i++) { ……}WARNING以上三个方面，类数组和数组似乎没有什么不同，那么类数组对象可以使用数组的方法吗？
arrayLike.push('4'); //error: arrayLike.push is not a functionCAUTION所以类数组不能直接使用数组的方法
类数组如何调用数组方法
// 既然无法直接调用，我们可以通过call来间接调用var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }
Array.prototype.join.call(arrayLike, '&'); // name&age&sex
// slice可以做到类数组转数组Array.prototype.slice.call(arrayLike, 0); // ["name", "age", "sex"]
Array.prototype.map.call(arrayLike, function(item){ return item.toUpperCase();});// ["NAME", "AGE", "SEX"]类数组转数组的常用方法
var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }// 1. sliceArray.prototype.slice.call(arrayLike); // ["name", "age", "sex"]// 2. spliceArray.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"]// 3. ES6 Array.fromArray.from(arrayLike); // ["name", "age", "sex"]// 4. applyArray.prototype.concat.apply([], arrayLike)类数组有哪些应用
TIP说到类数组对象，Arguments 对象就是一个类数组对象。在客户端 JavaScript 中，一些 DOM 方法(
document.getElementsByTagName()等)也返回类数组对象。
Arguments对象🏷
:::tip 定义
Arguments 对象只定义在函数体中，包括了函数的参数和其他属性。在函数体中，arguments 指代该函数的 Arguments 对象。
:::
function foo(name, age, sex) { console.log(arguments);}
foo('name', 'age', 'sex')/* Arguments(3) ['name', 'age', 'sex', callee: ƒ, Symbol(Symbol.iterator): ƒ] 0: "name" 1: "age" 2: "sex" callee: ƒ foo(name, age, sex) length: 3 Symbol(Symbol.iterator): ƒ values() [[Prototype]]: Object*/①length属性
TIP表示实参的长度
②callee属性
TIP通过callee可以调用函数自身
讲个闭包使用callee的解决办法:
var data = [];
for (var i = 0; i < 3; i++) { (data[i] = function () { console.log(arguments.callee.i) }).i = i;}
data[0]();data[1]();data[2]();
// 0// 1// 2arguments对象的注意点
①arguments 和对应参数的绑定
WARNING传入的参数，实参和 arguments 的值会共享，当没有传入时，实参与 arguments 值不会共享
除此之外，以上是在非严格模式下，如果是在严格模式下，实参和 arguments 是不会共享的。
function foo(name, age, sex, hobbit) {
console.log(name, arguments[0]); // name name
// 改变形参 name = 'new name';
console.log(name, arguments[0]); // new name new name
// 改变arguments arguments[1] = 'new age';
console.log(age, arguments[1]); // new age new age
// 测试未传入的是否会绑定 console.log(sex); // undefined
sex = 'new sex';
console.log(sex, arguments[2]); // new sex undefined
arguments[3] = 'new hobbit';
console.log(hobbit, arguments[3]); // undefined new hobbit
}
foo('name', 'age')②传递参数
// 使用 apply 将 foo 的参数传递给 barfunction foo() { bar.apply(this, arguments);}function bar(a, b, c) {
console.log(a, b, c);}
foo(1, 2, 3)③利用...
function func(...arguments) { console.log(arguments); // [1, 2, 3]}
func(1, 2, 3); JS中类数组和数组对象比较
https://blog.oceanh.top/posts/frontend/类数组对象相关/