回到顶部

「 初音未来：歌姬计划 Mega39's+\游戏档案馆 」2023-06-07 「 戴拿&盖亚奥特曼\皮套摄影 」2024-08-02 「 宝可梦：白金\游戏档案馆 」2023-08-06 「 闪焰王牌/模玩摄影 」2024-08-06 「 多龙巴鲁托\模玩摄影 」2023-06-05 「 泽塔奥特曼\皮套摄影 」2023-06-07 「 阿尔宙斯\模玩摄影 」2023-06-07

类数组对象和arguments #94

Anuluca Date : 2021-01-14 Tags : 2

类数组对象

拥有一个length属性和其他若干键值对的对象。

var exeggutor = ['tamako1', 'tamako2', 'tamako3'];  //数组

var exeggutor_alolan = {
    0: 'tamako1',
    1: 'tamako2',
    2: 'tamako3',
    length: 3
} //类数组对象

类数组对象和数组的相似之处

读写：

console.log(exeggutor[0]); // tamako1
console.log(exeggutor_alolan[0]); // tamako2

exeggutor[0] = 'ditto';
exeggutor_alolan[0] = 'ditto';

长度：

1 2	console.log(exeggutor.length); // 3 console.log(exeggutor_alolan.length); // 3

遍历：

for(var i = 0, len = exeggutor.length; i < len; i++) {
  ……
}
for(var i = 0, len = exeggutor_alolan.length; i < len; i++) {
  ……
}

可以看到，在读写、获取长度、遍历，数组的使用方法和类数组对象的使用方法完全一样。
但数组可以使用的其他方法，类数组对象不能使用

1 2	exeggutor.push('4'); exeggutor_alolan.push('4'); //错误代码

类数组调用数组方法

如果类数组一定要用数组方法，可以使用Function.call()间接调用

var exeggutor_alolan = {0: 'tamako1', 1: 'tamako2', 2: 'tamako3', length: 3 }

Array.prototype.join.call(exeggutor_alolan, '&'); // tamako1&tamako2&tamako3

Array.prototype.slice.call(exeggutor_alolan, 0); // ["tamako1", "tamako2", "tamako3"] 
// slice可以做到类数组转数组

Array.prototype.map.call(exeggutor_alolan, function(item){
    return item.toUpperCase();
}); 
// ["TAMAKO1", "TAMAKO2", "TAMAKO3"]

类数组转数组

在上面的例子中已经提到了一种类数组转数组的方法，这里再补充三个：

var exeggutor_alolan = {0: 'tamako1', 1: 'tamako2', 2: 'tamako3', length: 3 }
// 1. ES6中强烈建议使用 Array.from
Array.from(exeggutor_alolan); // ["tamako1", "tamako2", "tamako3"] 
// 2. slice
Array.prototype.slice.call(exeggutor_alolan); // ["tamako1", "tamako2", "tamako3"] 
// 3. splice
Array.prototype.splice.call(exeggutor_alolan, 0); // ["tamako1", "tamako2", "tamako3"] 
// 4. apply
Array.prototype.concat.apply([], exeggutor_alolan)

Arguments对象

Arguments对象定义在函数体中，包括函数的参数和其他属性，在函数体本身，arguments指代Arguments对象。

function trigger(name, age, sex) {
    console.log(arguments);
}
trigger('name', 'age', 'sex')

控制台输出：

可以看到除了类数组的索引属性和length属性之外，还有一个callee属性

length属性

length属性表示实参的长度：

function foo(b, c, d){
    console.log("实参的长度为：" + arguments.length)
}

console.log("形参的长度为：" + foo.length)

foo(1)

// 形参的长度为：3
// 实参的长度为：1

callee属性

Arguments对象的callee属性，通过它可以调用函数自身

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')

传递arguments

在严格模式下，实参和 arguments 不会共享。

// 使用 apply 将 foo 的参数传递给 bar
function foo() {
    bar.apply(this, arguments);
}
function bar(a, b, c) {
   console.log(a, b, c);
}

foo(1, 2, 3)

将arguments转为数组

使用 …运算符，将arguments转为数组

function func(...arguments) {
    console.log(arguments); // [1, 2, 3]
}

func(1, 2, 3);

由于某些原因，博客图床于5月26日惨遭爆破，目前正在整理需要的图片并迁移存活的图片到新图床,预计6月10日重新上线网站

THE END

讨论

Anuluca

Update:2021-01-14

JS web前端

...

推特 ( 𝕏 )

Bilibili

微博

Github

裏

表

笔记

Javascript/CSS

Vue/React

其它

杂物室

杂谈

工具

影像

类数组对象和arguments #94