理解javascript类数组

yzzz 发布于2019-08-22 15:01 / 2276人阅读

摘要：也就是说，为一些常规对象增加一些属性可以使其变成类数组对象。实际上，类数组的定义只有一条，具有属性。在中，所有的数组方法都是通用的。

什么是类数组

javascript中一些看起来像却不是数组的对象，叫做类数组。也就是说，为一些常规对象增加一些属性可以使其变成类数组对象。

类数组的特征：

有索引（数字）属性和length属性的对象

不具有数组的方法。间接调用数组的一些方法，比如push()可以动态的增长length的值。

实际上，类数组的定义只有一条，具有 length属性。

举个例子：

var array = ["name", "age", "sex"];//数组

var arrayLike = {
    0: "name",
    1: "age",
    2: "sex",
    length: 3
}//类数组

javascript中常见的比较典型的类数组有两个：arguments对象和一些DOM方法的返回值（如document.getElementsByTagName()）

类数组使用数组方法的两种方式

类数组虽然和数组类似，但是不能直接使用数组的方法，可以像使用数组一样，使用类数组。

在ECMAScript5中，所有的数组方法都是通用的。既然类数组对象没有继承Array.prototype，当然不能再类数组对象上直接调用数组方法。尽管如此，可以使用Function.call方法间接调用；或者在类数组中自定义数组方法，使函数体指向Array.prototype中对应的方法体。

使用Function.call方法间接使用数组的方法

var a = {
   "0": "a",
   "1": "b",
   "2": "c",
   "3": "d",
   "length": 4
}//类数组对象

Array.prototype.join.call(a, "-") //"a-b-c-d"
Array.prototype.slice.call(a, 0) //["a", "b", "c", "d"] 真正的数组
Array.prototype.map.call(a, function(item){
   return item.toUpperCase()
}) //["A", "B", "C", "D"]

Array.prototype.push.call(a, "1","23")
console.log(a) //{0: "a", 1: "b", 2: "c", 3: "d", 4: "1", 5: "1", 6: "23", length: 7}

在类数组对象中添加数组的方法。通过对象的属性名模拟数组的特性。

一道题目：

var obj = {
    "2": "a",
    "3": "d",
    "length": 2,
    "push": Array.prototype.push
}
obj.push("c");
obj.push("d");
console.log(obj)//{"2": "c", "3": "d", length: 2, push: f}

首先一定要明白push()方法的实现原理。在这里，如果让类数组强行调用push方法，则会根据length属性值的位置进行属性的扩充。

//push()`方法的实现原理
Array.prototype.push = function () {
  for(var i = 0; i < arguments.length; i++) {
    this[this.length] = arguments[i];
  }
  return this.length;
}

//类数组使用push方法, length属性值设为3
var arrayLike = {
    haha: "2rr",
    hehe: "enen",
    length: 3,
    push : Array.prototype.push
}
arrayLike.push(34);
console.log(arrayLike);

//改变length属性值
var arrayLike = {
    haha: "2rr",
    hehe: "enen",
    length: 6,
    push : Array.prototype.push
}
arrayLike.push(34, "hobby");
console.log(arrayLike);

打印结果：

将类数组转化为真正的数组

有时候处理类数组最好的办法是将其转换成真正的数组。

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)

GPU云服务器云服务器 javascript理解如何理解javascript 深入理解javascript 数组排序类

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

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

深入理解JavaScript类数组

摘要：但是，我们可以借用类数组方法不难看出，此时的在调用数组原型方法时，返回值已经转化成数组了。很多时候，深入看看源代码也会让你对这个理解的更透彻。的前端乐园原文链接深入理解类数组起因写这篇博客的起因，是我在知乎上回答一个问题时，说自己在学前端时把《JavaScript高级程序设计》看了好几遍。于是在评论区中，出现了如下的对话：showImg(https://segmentfault.c...

Towers 2019-08-19 18:16 评论0 收藏0
类数组对象转换为数组对象的简单理解

摘要：将对象转换为数组对象的限制不知道现在还是否需要考虑这一点之前的版本将实现为对象而非对象，对象不能直接调用方法，因此需要采取其他方式转化。关于类数组对象 JavaScript中有一些著名的类数组对象，它们看起来很像数组：拥有length属性元素按序保存在对象中，可以通过索引访问但实际和数组又不是一回事：没有数组的很多方法也会有数组没有的方法 (e.g. NodeLis...

wayneli 2019-08-19 18:39 评论0 收藏0
JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
理解数组，对象，类数组对象

摘要：角度实例对象没有属性，只有构造函数才有属性，也就是说构造函数本身保存了对属性的引用。。的属性变量和属性对象将会被该对象引用的构造函数所创建的对象继承那么将会继承属性函数。本文章旨在讲解数组，对象，类数组对象之间的联系。但会穿插一些其他的相关知识。首先理解它们的概念：1、数组（1）什么是数组：简而言之就是一组有序的数据集合。它的定义方法有三种。 var arr=[值1,值2,值3]; ...

wangshijun 2019-08-21 17:47 评论0 收藏0
通俗的方式理解动态类型，静态类型；强类型，弱类型

摘要：不允许隐式转换的是强类型，允许隐式转换的是弱类型。拿一段代码举例在使用调用函数的时候会先生成一个类模板运行时生成，执行的时候会生成类模板，执行的时候会生成类模板。 0 x 01 引言今天和一个朋友讨论 C++ 是强类型还是弱类型的时候，他告诉我 C++ 是强类型的，他和我说因为 C++ 在写的时候需要 int，float 等等关键字去定义变量，因此 C++ 是强类型的，我告诉他 C+...

周国辉 2019-08-22 13:40 评论0 收藏0