资讯专栏INFORMATION COLUMN

译文: JavaScript中类数组对象

lbool / 617人阅读

摘要:所以我说的这些类数组对象是什么它们有一些,其中包括是一个很特殊的变量,你再所有函数体内都可以访问到。让类数组对象成为一个数组当然这个标题是不太准确的,假如我们需要将这些类数组对象变成数组一样,我们需要建立一个新的数组。

它看起来像是一个数组,而且它有一个length属性,然而它并不是一个数组。JavaScript有时候是一门很怪异的语言,因为你很难定义一个数组的概念而没有什么例外的。
所以我说的这些类数组对象是什么?它们有一些,其中包括arguments,arguments是一个很特殊的变量,你再所有函数体内都可以访问到。

1. arguments

假如你在一个工具(firebug)中检查arguments这个变量,你会注意到它打印出来像是一个数组。它有按次序排列的元素,还有一个length属性。

var testFunction = function() {
  console.log(arguments);
  console.log(arguments.length);
};

所以我在抱怨什么?尝试arguments.shift(),报错显示arguments.shift() isn"t a function,但是shift()是数组的一个函数。尝试console.log(arguments.constructor),它会打印Object(),同时假如你输入的是[].constructor,它会打印Array[]。这是不是很奇怪?
这当然不仅局限于arguments,看起来很多DOM集合都会返回这种对象,例如document.getElementsByTagName(), document.images, document.childNodes.在某些情况下,这些类似数组的更适合转变为一个数组。

让类数组对象成为一个数组

当然这个标题是不太准确的,假如我们需要将这些类数组对象变成数组一样,我们需要建立一个新的数组。

var testFunction = function() {
  // Create a new array from the contents of arguments
  var args = Array.prototype.slice.call(arguments);

  var a = args.shift();
  console.log("The first argument is: %s", a);

  // send the remaining arguments to some other function
  someOtherFunction(args);
};

显然,关键的地方在Array.prototype.slice.call(arguments),拆开它仔细每个部分。

Array 这是我们想要的base object的名称

prototype 这可以被认为是一个数组实例方法的命名空间

slice 提取一个数组的一部分,并返回一个新的数组,没有一个开始和结束索引,它只返回数组的副本.

call 这是一个非常有用的函数,允许你在调用一个对象的函数,然后在另一个函数的上下文中使用

另一个方面,如果你曾经使用原型框架,你可以通过$A()转化这些类数组对象成为数组。
谈到$A,如果你不喜欢打上面那么长的字符串代码,并且你不使用Prototype。然后,你可以创建一条捷径,就像Prototype folks:

var $A = function(obj) {
  return Array.prototype.slice.call(obj);
};

// Example usage:
$A(document.getElementsByTagName("li"));

原文地址:Array-like Objects in JavaScript

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86425.html

相关文章

  • [译文] JavaScript工作原理:V8引擎内部+5条优化代码的窍门

    摘要:本文将会深入分析的引擎的内部实现。该引擎使用在谷歌浏览器内部。同其他现代引擎如或所做的一样,通过实现即时编译器在执行时将代码编译成机器代码。这可使正常执行期间只发生相当短的暂停。 原文 How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code 几周前我们开始了一个系列博文旨在深入...

    dreamans 评论0 收藏0
  • JavaScript如何工作:V8引擎深入探究 + 优化代码的5个技巧(译文

    摘要:引擎可以是一个标准的解释器,也可以是一个将编译成某种形式的字节码的即时编译器。和其他引擎最主要的差别在于,不会生成任何字节码或是中间代码。不使用中间字节码的表示方式,就没有必要用解释器了。 原文地址:https://blog.sessionstack.com... showImg(https://segmentfault.com/img/bVVwZ8?w=395&h=395); 数周之...

    William_Sang 评论0 收藏0
  • 不再彷徨:完全弄懂JavaScript中的this(译文总结)

    摘要:至于,其只是以数组的方传入参数,其它部分是一样的,如下它们也可用于在中的类继承中,调用父级构造器。间接调用,调用了父级构造器对比方法和,它俩都立即执行了函数,而函数返回了一个新方法,绑定了预先指定好的,并可以延后调用。 其实this是一个老生常谈的问题了。关于this的文章非常多,其实我本以为自己早弄明白了它,不过昨天在做项目的过程中,还是出现了一丝疑惑,想到大概之前在JavaScri...

    YanceyOfficial 评论0 收藏0
  • [译文] JavaScript工作原理:内存管理+如何处理4种常见的内存泄露

    摘要:本系列的第一篇文章着重提供一个关于引擎运行时和调用栈的概述。在硬件层面,计算机内存由大量的触发器组成。每个触发器包含几个晶体管能够存储一个比特译注位。可以通过唯一标识符来访问单个触发器,所以可以对它们进行读写操作。比特称为个字节。 原文 How JavaScript works: memory management + how to handle 4 common memory lea...

    adam1q84 评论0 收藏0
  • TypeScript入门学习之路

    摘要:学习之路学习之路安装环境起步开发工具自动编译文件中的数据类型中的函数中类的定义继承中的继承中的继承类的静态属性和静态方法类的多态的抽象类中的接口中的泛型学习之路安装环境查看版本起步新建通过命令编译此时路径下 ...

    jemygraw 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<