JavaScript 特殊对象 Array-Like Objects 详解

zhaofeihao 发布于2019-08-19 18:37 / 588人阅读

摘要：很简单，不是数组，但是有属性，且属性值为非负类型即可。至于属性的值，给出了一个上限值，其实是感谢同学指出，因为这是中能精确表示的最大数字。如何将函数的实际参数转换成数组

这篇文章拖了有两周，今天来跟大家聊聊 JavaScript 中一类特殊的对象 -> Array-Like Objects。

（本文节选自 underscore 源码解读系列文章，完整版请关注 https://github.com/hanzichi/underscore-analysis）

Array-Like

JavaScript 中一切皆为对象，那么什么是 Array-Like Objects？顾名思义，就是像数组的对象，当然，数组本身就是对象嘛！稍微有点基础的同学，一定知道 arguments 就是 Array-Like Objects 的一种，能像数组一样用 [] 去访问 arguments 的元素，有 length 属性，但是却不能用一些数组的方法，如 push，pop，等等。

那么，什么样的元素是 Array-Like Objects？我们来看看 underscore 中对其的定义。

var MAX_ARRAY_INDEX = Math.pow(2, 53) - 1;
var getLength = property("length");
var isArrayLike = function(collection) {
  var length = getLength(collection);
  return typeof length == "number" && length >= 0 && length <= MAX_ARRAY_INDEX;
};

很简单，不是数组，但是有 length 属性，且属性值为非负 Number 类型即可。至于 length 属性的值，underscore 给出了一个上限值 MAX_ARRAY_INDEX，其实是 MAX_SAFE_INTEGER（感谢 @HangYang 同学指出），因为这是 JavaScript 中能精确表示的最大数字。

想想还有什么同时能满足以上条件的？NodeList，HTML Collections，仔细想想，甚至还有字符串，或者拥有 length 属性的对象，函数（length 属性值为形参数量），等等。

Array-Like to Array

有的时候，需要将 Array-Like Objects 转为 Array 类型，使之能用数组的一些方法，一个非常简单粗暴并且兼容性良好的方法是新建个数组，然后循环存入数据。

我们以 arguments 为例。

function fn() {
  // Uncaught TypeError: arguments.push is not a function
  // arguments.push(4);

  var arr = [];
  for (var i = 0, len = arguments.length; i < len; i++)
    arr[i] = arguments[i];

  arr.push(4); // [1, 2, 3, 4]
}

fn(1, 2, 3);

但是这不是最优雅的，更优雅的解法大家一定都知道了，use Array.prototype.slice（IE9- 会有问题）。

function fn() {
  var arr = Array.prototype.slice.call(arguments);
  arr.push(4); // arr -> [1, 2, 3, 4]
}

fn(1, 2, 3);

或者可以用 [] 代替 Array.prototype 节省几个字节。

function fn() {
  var arr = [].slice.call(arguments);
  arr.push(4); // arr -> [1, 2, 3, 4]
}

fn(1, 2, 3);

如果非得追求性能，用 [] 会新建个数组，性能肯定不及前者，但是由于引擎的优化，这点差异基本可以忽略不计了（所以很多框架用的就是后者）。

为什么这样可以转换？我们简单了解下，主要的原因是 slice 方法只需要参数有 length 属性即可。首先，slice 方法得到的结果是一个 新的数组，通过 Array.prototype.slice.call 传入的参数（假设为 a），如果没有 length 属性，或者 length 属性值不是 Number 类型，或者为负，那么直接返回一个空数组，否则返回 a[0]-a[length-1] 组成的数组。(具体可以看下 v8 源码 https://github.com/v8/v8/blob/master/src/js/array.js#L621-L660）

当然，ES6 提供了更简便的方法。

var str = "helloworld";
var arr = Array.from(str); 
// ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"]

小结下，如果要把 Array-Like Objects 转为 Array，首选 Array.prototype.slice，但是由于 IE 下 Array.prototype.slice.call(nodes) 会抛出错误（because a DOM NodeList is not a JavaScript object），所以兼容的写法如下。（但还有一点要注意的是，如果是 arguments 转为 Array，最好别用 Array.prototype.slice，V8 下会很慢，具体可以看下避免修改和传递 arguments 给其他方法 — 影响优化）

function nodeListToArray(nodes){
  var arr, length;

  try {
    // works in every browser except IE
    arr = [].slice.call(nodes);
    return arr;
  } catch(err){
    // slower, but works in IE
    arr = [];
    length = nodes.length;

    for(var i = 0; i < length; i++){
       arr.push(nodes[i]);
     }  

    return arr;
  }
}

Others

很多时候，某个方法你以为接收的参数是数组，其实类数组也是可以的。

Function.prototype.apply() 函数接收的第二个参数，其实也可以是类数组。

var obj = {0: 4, length: 2};
var arr = [1, 2, 3];
Array.prototype.push.apply(arr, obj);
console.log(arr); // [1, 2, 3, 4, undefined]

Read More

How to convert a array-like object to array?

Advanced Javascript: Objects, Arrays, and Array-Like objects

JavaScript quirk 8: array-like objects

如何将函数的实际参数转换成数组

how does Array.prototype.slice.call() work?

云服务器 GPU云服务器 javascript对象详解面向对象详解 Hibernate对象详解 javascript详解

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

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

JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
JavaScript arguments 对象全面介绍

摘要：事实上，满足一定条件的对象都能被方法转换成数组。继承于的很大原因是不需要这四个方法。而在非严格模式下，两个会互相影响。数组与类数组对象数组具有一个基本特征索引。这是一般对象所没有的。是利用对象的键值对存取数据，而却是利用数组的索引。 1. 什么是 arguments MDN 上解释： arguments 是一个类数组对象。代表传给一个function的参数列表。我们先用一个例子直观了...

HackerShell 2019-08-22 12:45 评论0 收藏0
译文： JavaScript中类数组对象

摘要：所以我说的这些类数组对象是什么它们有一些，其中包括是一个很特殊的变量，你再所有函数体内都可以访问到。让类数组对象成为一个数组当然这个标题是不太准确的，假如我们需要将这些类数组对象变成数组一样，我们需要建立一个新的数组。它看起来像是一个数组，而且它有一个length属性，然而它并不是一个数组。JavaScript有时候是一门很怪异的语言，因为你很难定义一个数组的概念而没有什么例外的。所...

lbool 2019-08-21 10:55 评论0 收藏0
JavaScript 系列--JavaScript一些奇淫技巧的实现方法（二）数字格式化；类数组转数

摘要：一前言之前写了一篇文章系列一些奇淫技巧的实现方法一简短的函数，获取时间戳介绍了函数和获取时间戳的方法。，和对象的构造函数是对象的属性。缺点低版本，无法处理集合的转数组。一、前言之前写了一篇文章：JavaScript 系列--JavaScript一些奇淫技巧的实现方法（一）简短的sleep函数，获取时间戳 https://www.mwcxs.top/page/74... 介绍了sle...

Jrain 2019-08-23 17:59 评论0 收藏0
ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解

摘要：变量声明与赋值值传递浅拷贝与深拷贝详解归纳于笔者的现代开发语法基础与实践技巧系列文章。变量声明在中，基本的变量声明可以用方式允许省略，直接对未声明的变量赋值。按值传递中函数的形参是被调用时所传实参的副本。 ES6 变量声明与赋值：值传递、浅拷贝与深拷贝详解归纳于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文首先介绍 ES6 中常用的三种变量声明方式，然后讨论了...

snowLu 2019-08-21 11:55 评论0 收藏0