正文 

当前位置： 首页 > java > java语法

了解javascript中的伪数组

forceddd      2022-02-11     486

关键词：

1.什么是伪数组

JavaScript中存在有一种类数组，或者说伪数组。经常见到的伪数组有函数的arguments对象、dom.querySelectorAll等获取的NodeList类（NodeList本身具有forEach方法）等。

伪数组并不是数组，它没有继承Array.prototype,但是它“看起来像数组”，它本身没有数组的标准方法，但是它可以复用这些标准方法。

例子

function arrayLike() {
    arguments.forEach(a => console.log(a));//TypeError: arguments.forEach is not a function
}
arrayLike(1, 2, 3);

如上例所示，arguments对象本身并没有forEach方法，但是它可以复用数组的这些标准方法。

例子

function arrayLike() {
    // arguments.forEach(a => console.log(a));
    [].forEach.call(arguments, a => console.log(a));// 1 2 3 通过call改变this指向，调用数组的方法
    [...arguments].forEach(a => console.log(a));// 1 2 3  构建一个真实数组，然后调用数组的方法
}
arrayLike(1, 2, 3);

2.如何创建一个伪数组对象

一个数组对象必然具有两个特点：

  1. 具有一个范围在 0~232-1 的整型length属性
  2. length属性大于该对象的最大索引，索引是一个 0-232 -2 范围内的整数

所以很简单，只要实现这两个特点，一个对象就是伪数组对象了。

例子

const arr = {
    1: 'AAA',
    3: 'CCC',
    length: 8,
};
[].forEach.call(arr, (item, i) => console.log(item, i)); //AAA 1 CCC 3

3.数组的concat方法

对于数组和伪数组，在数组的标准方法中，只有concat方法是不通用的，对于一个伪数组，concat方法会将其作为一个整体连接起来。

例子

console.log([].concat.call(arr, [7, 8]));//[ { '1': 'AAA', '3': 'CCC', length: 8 }, 7, 8 ]
console.log([1, 2].concat([7, 8]));//[ 1, 2, 7, 8 ]

上例展示了数组和伪数组调用concat的不同结果，在遇到这种情况时，我们只有自己对伪数组进行转换，比如：

1.通过slice方法，复制伪数组

console.log([].concat.call([].slice.call(arr), [7, 8]));
//[ <1 empty item>, 'AAA', <1 empty item>, 'CCC', <4 empty items>, 7, 8 ]

2.通过Symbol.isConcatSpreadable改变对伪数组对象进行concat操作时的默认行为

const arr = {
    1: 'AAA',
    3: 'CCC',
    length: 8,
    [Symbol.isConcatSpreadable]: true,
};
console.log([].concat.call(arr, [7, 8]));
//[ <1 empty item>, 'AAA', <1 empty item>, 'CCC', <4 empty items>, 7, 8 ]

javascript如何遍历数组中的每一个元素

javascript如何遍历数组中的每一个元素:遍历数组中的所有元素是一个非常基础简单的操作，可能初学者还不够了解，下面就通过代码实例介绍一下如何实现此功能。代码如下: vartheArray=["蚂蚁部落","青岛市南区","新锐科技",3];fo... 查看详情

从 numpy 数组中删除类似方波的伪影

...40:24【问题描述】：我有一个numpy数组，它基本上是excel表中的一个数据列。该数据是通过低通10Hz滤波器DAS获得的，但由于某些模糊性，它包含类似方波的伪影。现在必须以0.4Hz高通巴特沃斯滤波器过滤数据，我通过scipy.signal进行... 查看详情

javascript需要了解的高级的知识点

  Javascript闭包Javascript原型JavaScript递归Javascript中的装饰器如何Curry函数浅拷贝和深拷贝什么是纯函数?解析JavascriptIIFE函数表达式变量，函数和Javascript箭头函数提升为什么选择组合而不是继承管道函数和组合函数|Javascript函... 查看详情

如何为数组中的每个项目评估包含 settimeout 的函数（Javascript）

】如何为数组中的每个项目评估包含settimeout的函数（Javascript）【英文标题】：Howtoevaluateafunctioncontainingsettimeoutforeachiteminanarray(Javascript)【发布时间】：2017-12-1912:34:42【问题描述】：我对setTimeout以及为什么必须使用立即调用的函... 查看详情

了解javascript数组对象及其方法

　　数组在我目前学习过的编程语言中都可以见到,形形色色的方法也数不胜数,不过功能都一样,最多也就是方法名稍稍有所不同,老外也没个准啊,如果英语比较好的同学对于学习方法(method)来说是很快的,因为基本都可以翻译出来,... 查看详情

了解 Javascript 中的全局和局部范围

】了解Javascript中的全局和局部范围【英文标题】：UnderstandingGlobal&LocalScopeinJavascript【发布时间】：2012-08-0922:58:29【问题描述】：我一直在使用Object-OrientedJavaScriptbyStoyanStefanov学习Javascript他提供了一个比较全局和本地范围的示... 查看详情

了解 Javascript 中的全局和本地范围

】了解Javascript中的全局和本地范围【英文标题】：UnderstandingGlobal&LocalScopeinJavascript【发布时间】：2012-08-0922:58:29【问题描述】：我一直在使用Object-OrientedJavaScriptbyStoyanStefanov学习Javascript他提供了一个比较全局和本地范围的示... 查看详情

a1—浅谈javascript中的原型

原型是什么？想要了解这个问题，我们就必须要知道对象。对象根据w3cschool上的介绍：对象只是带有属性和方法的特殊数据类型。我们知道，数组是用来描述数据的。其实呢，对象也是用来描述数据的。只不过有一点点的区别，... 查看详情

了解 JavaScript 中的原型继承

】了解JavaScript中的原型继承【英文标题】：UnderstandingprototypalinheritanceinJavaScript【发布时间】：2010-10-2721:57:22【问题描述】：我是JavaScriptOOP的新手。您能解释一下以下代码块之间的区别吗？我测试了两个块都可以工作。最佳做法... 查看详情

了解 javascript 中的事件队列和调用堆栈

】了解javascript中的事件队列和调用堆栈【英文标题】：UnderstandingEventQueueandCallstackinjavascript【发布时间】：2017-01-2010:01:51【问题描述】：我对理解“事件队列”和“调用堆栈”概念的好奇心开始于我解决这个问题时：varlist=readHug... 查看详情

javascript数组中的javascript(代码片段)

查看详情

javascript从javascript中的多个数组中获取单个数组（合并数组）(代码片段)

查看详情

java示例代码_：如何将堆栈的伪代码转换为数组

java示例代码_：如何将堆栈的伪代码转换为数组 查看详情

javascript中的数组创建

JavaScript中的数组创建数组是一个包含了对象或原始类型的有序集合。很难想象一个不使用数组的程序会是什么样。以下是几种操作数组的方式:初始化数组并设置初始值通过索引访问数组元素添加新元素删除现有元素本文涵盖了... 查看详情

深入了解javascript中的for循环

学习前端的同学注意了！！！ 学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入前端学习交流群，群号码：328058344 在ECMAScript5（简称ES5）中，有三种for循环，分别是：简单for循环for-inforEach在2015年6月份发布的E... 查看详情

深入了解javascript中的for循环

学习前端的同学注意了。。！?学习过程中遇到什么问题或者想获取学习资源的话。欢迎加入前端学习交流群。群号码：328058344?在ECMAScript5（简称ES5）中，有三种for循环，各自是：简单for循环for-inforEach在2015年6月份公布的ECMAScript6... 查看详情

Javascript中的数组列表

】Javascript中的数组列表【英文标题】：ListofarraysinJavascript【发布时间】：2016-11-0615:19:47【问题描述】：我正在尝试在JAVASCRIPT中创建一个数组列表，但我的程序没有达到我的预期。我想制作一个这样的数组列表：varmyListofArrays;varf... 查看详情

OpenGL ES 顶点数组对象和奇怪的伪影

】OpenGLES顶点数组对象和奇怪的伪影【英文标题】：OpenGLESVertexArrayObjectandstrangeartifacts【发布时间】：2013-11-0517:33:04【问题描述】：我正在渲染一个场景，只要方向发生变化，就必须重建一个场景，以便适当地填充屏幕。场景渲... 查看详情