类数组

作者: 逆风飘游的鱼 | 来源:发表于2019-08-13 21:38 被阅读0次

https://juejin.im/post/590fd5de44d904007bed2e0c

类数组对象

所谓的类数组对象:拥有一个 length 属性和若干索引属性的对象

var array = ['name', 'age', 'sex'];

var arrayLike = {    0: 'name',    1: 'age',    2: 'sex',    length: 3}

读写

console.log(array[0]); // name    console.log(arrayLike[0]); // name

array[0] = 'new name';       arrayLike[0] = 'new name';

长度

console.log(array.length); // 3    console.log(arrayLike.length); // 3

遍历

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

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

那类数组对象使用数组的方法吗?比如:arrayLike.push('4');然而上述代码会报错: arrayLike.push is not a function

调用数组方法

既然无法直接调用,我们可以用 Function.call 间接调用:

var 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, function(item){

    return item.toUpperCase();

});// ["NAME", "AGE", "SEX"]复制代码

类数组转对象

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

var arrayLike = {0: 'name', 1: 'age', 2: 'sex', length: 3 }

// 1. slice

Array.prototype.slice.call(arrayLike); // ["name", "age", "sex"]

// 2. splice

Array.prototype.splice.call(arrayLike, 0); // ["name", "age", "sex"]

// 3. ES6 Array.from

Array.from(arrayLike); // ["name", "age", "sex"]

// 4. apply

Array.prototype.concat.apply([ ], arrayLike)复制代码

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

Arguments对象

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()           __proto__: Object

我们可以看到除了类数组的索引属性和length属性之外,还有一个callee属性,接下来我们一个一个介绍。

length属性

Arguments对象的length属性,表示实参的长度,举个例子:

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

console.log("形参的长度为:" + foo.length)// 形参的长度为:3 

foo(1) // 实参的长度为:1

callee属性

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

讲个闭包经典面试题使用 callee 的解决方法:

var data = [];

for (var i = 0; i < 3; i++) {

    (data[i] = function () {

      console.log(arguments.callee.i)

    }).i = i;

}

data[0]();// 0

data[1]();// 1

data[2]();// 2复制代码

接下来讲讲 arguments 对象的几个注意要点:

arguments 和对应参数的绑定

传入的参数,实参和 arguments 的值会共享,当没有传入时,实参与 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)复制代码

强大的ES6

使用ES6的 ... 运算符,我们可以轻松转成数组。

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

func(1, 2, 3);复制代码

应用

参数不定长

函数柯里化

递归调用

函数重载

相关文章

  • json : 类数组转数组+ajax请求数据

    类数组转数组 类数组:arguments: 用来接收实参的HTMLcollection: 获取元素集合 类数组转数...

  • JS 数组 和 类数组

    类数组是一个普通对象,而真实的数组是 Array 类型 arguments 也是类数组 类数组转换为数组

  • 类数组->数组

    Array.prototype.slice.call(arrayLike) 首先Array.prototype.s...

  • 类数组、arguments

    arguments为一个类数组的对象;类数组对象即为:有length属性和索引的对象。一、类数组===》数组var...

  • js类数组转数组的方法

    一、什么是类数组 类数组是一种类似数组的对象,类数组并不是数组,不具有数组所具有的方法;调用Array.isArr...

  • 类数组与数组

    数组和类数组对象有什么区别数组和类数组对象都可以用索引访问,并具有length属性,不同是类数组不能调用数组的方法...

  • 对Javascript 类数组对象的理解与应用 | Argume

    这篇文章将要告诉你: 什么是类数组对象 类数组对象是如何出现的 如何避免使用类数组对象的常见问题 将类数组对象转换...

  • 类数组问题

    类数组长什么样子? 类数组怎么转化为数组呢? 1.使用 Array.prototype.slice.call(【类...

  • 2018年9月29日.NET笔试面试题

    数组列表和数组有什么区别? 数组即Array类,数组列表即ArrayList类,两者非常相似,不过Array类在S...

  • 解开那一层面纱,js类数组的小秘密(下篇)

    前言: 在 解开那一层面纱,js类数组的小秘密(上篇)里面,已经提到类数组的定义,以及常见的类数组类型,类数组的转...

网友评论

      本文标题:类数组

      本文链接:https://www.haomeiwen.com/subject/tadcjctx.html