JavaScript的数组有什么特别的地方吗?

更新日期: 2019-07-12阅读: 2.7k标签: 数组

数组是前端开发者最常用的数据结构了,我们在项目中无时不刻在操作着数组,例如将列表组件的数据储存在数组里、将需要渲染成条形图的数据同样储存在一个数组里,虽然我们经常使用数组,但是很多人并不了解JavaScript数组的本质。

本节我们将从JavaScript数组的使用、内存模型两大部分进行讲解,希望通过这个小节,让大家对JavaScript的数组有更深的认识。

在正是开始这节之前,请大家思考一个问题,JavaScript的数组有什么特殊之处?


数组的使用

数组是我们最常用的数据结构,很多基于数组的操作大家也足够熟悉了,我们不会在这里罗列数组的api,因为MDN数组这一部分足够权威也足够全面,我们会简单介绍下重点的数组方法,为接下来的内容做铺垫。


数组的创建与初始化

如果你之前学过其它语言类似于c++/java等,你可能会用一下方法创建并初始化一个数组:

const appleMac = new Array('Mac Book Air', 'iMac', 'Mac Book Pro', 'Mac pro')

当然这在JavaScript中是可以的,但并不主流方法,通常人们创建并初始化数组用的是字面量的方式:

const appleMac = ['Mac Book Air', 'iMac', 'Mac Book Pro', 'Mac pro']

在es6中引入了两个新方法,同样可以创建数组:

  • Array.of() 返回由所有参数组成的数组,不考虑参数的数量或类型,如果没有参数就返回一个空数组

  • Array.from()从一个类数组或可迭代对象中创建一个新的数组

这两个方法分别解决了两个问题, Array.of() 解决了构造函数方法创建数组时单个数字引起了怪异行为。

const a = new Array(3);   // (3) [empty × 3] 构造函数方法单个数组会被用于数组长度
const b = Array.of(3); // [3]

Array.from() 解决了『类数组』的转化问题,之前我们将类数组转化为数组的方法普遍用的是 Array.prototype.slice.call(arguments) 这种偏Hack的方法, Array.from() 的出现将其规范化,在以后的转化中我们最好按照标准的 Array.from() 方法进行转化。


数组的操作

数组的操作有数十种之多,我们不可能一一讲到,具体使用也可以看MDN,我们只讲两个对本节比较重要的api。

向头部插入元素

unshift操作是最常见的向数组头部添加元素的操作

const arr = [1, 2, 3]

arr.unshift(0) // arr = [0, 1, 2, 3,]

向尾部插入元素

push操作是最常见的向数组尾部添加元素的操作

const arr = [1, 2, 3]

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


内存模型

编程语言的内存通常要经历三个阶段

  1. 分配内存

  2. 对内存进行读、写

  3. 释放内存(垃圾回收)

数组的创建对应着第一阶段,数组的操作对应着第二阶段。

因此,现在有一个问题,我们分别用push和unshift往数组的尾部和头部添加元素,谁的速度更快?


连续内存

如果你比较了解相关数据结构内存的话应该会知道,数组是会被分配一段连续的内存,如图:


内存分布

那么当我们向这个数组最后 push 元素6的时候,只需要将后面的一块内存分配给6即可。

而unshift则不同,因为是向数组头部添加元素,数组为了保证连续性,头部之后的元素需要依次向后移动。

unshift的本质类似于下面的代码:

for (var i=numbers.length; i>=0; i--){
numbers[i] = numbers[i-1];
}
numbers[0] = -1;

内存分布

由于unshift出发了所有元素内存后移,导致性能远比push要差。

我在node10.x版本下作了一个实验:

function unshiftFn() {
const a = []

console.time('unshift')
for (var i=0;i<100000;i++) {
a.unshift(1);
}

console.timeEnd('unshift')
}

function pushFn() {
const a = []

console.time('push')
for (var i=0;i<100000;i++) {
a.push(1);
}

console.timeEnd('push')
}

unshiftFn() // unshift: 2297.383ms
pushFn() // push: 3.760ms

我们看见两者的速度差了非常多,而且如果你不断调整for循环的次数,会发现当次数越多的时候,unshift操作就越慢,因为需要往后移的元素也就越多。

而造成这个差异的正是因为数组是被储存为一块连续内存导致的,这就造成了数组的『插入』『删除』的性能都很差,因为我们一旦删除或者插入元素,其他元素为了保持一块连续的内存都不得不产生大量元素位移,这是性能的杀手。


非连续内存

我们开头就有一个问题:JavaScript的数组有什么特殊之处?

当然我们会说很多JavaScript的特殊之处,什么支持字面量声明创建,支持储存不同类型数据、动态性等等。

而本质上JavaScript数组的特殊之处在于JavaScript的数组不一定是连续内存。

而维基百科关于数组的定义:

在计算机科学中,数组数据结构(英语:array data structure),简称数组(英语:Array),是由相同类型的元素(element)的集合所组成的数据结构,分配一块连续的内存来存储。

如果是这样的话,JavaScript的数组似乎并不是严格意义上的数组,那么为什么上一小节说数组是分配了连续内存呢?这不是自相矛盾了吗?

JavaScript的数组是否分配连续内存取决于数组成员的类型,如果统一是单一类型的数组那么会分配连续内存,如果数组内包括了各种各样的不同类型,那么则是非连续内存。

非连续内存的数组用的是类似哈希映射的方式存在,比如声明了一个数组,他被分配给了1001、2011、1088、1077四个非连续的内存地址,通过指针连接起来形成一个线性结构,那么当我们查询某元素的时候其实是需要遍历这个线性链表结构的,这十分消耗性能。


数组地址

而线性储存的数组只需要遵循这个寻址公式,进行数学上的计算就可以找到对应元素的内存地址。

a[k]_address = base_address + k * type_size

我们做一个简单的实验,我们不断向数组插入元素,但对比的双方是非线性储存的数组和线性储存的同构数组:

const total = 1000000

function unshiftContinuity() {
const arr = new Array(total)
arr.push({name: 'xiaomuzhu'});
console.time('unshiftContinuity')
for(let i=0;i<total; i++){
arr[i]=i
}
console.timeEnd('unshiftContinuity')
}

function unshiftUncontinuity() {
const arr = new Array(total)
console.time('unshiftUncontinuity')
for (let i=0;i<total;i++) {
arr[i]=i
}

console.timeEnd('unshiftUncontinuity')
}

unshiftContinuity() // unshiftContinuity: 71.050ms
unshiftUncontinuity() // unshiftUncontinuity: 1.691ms

我们看到,非线性储存的数组其速度比线性储存的数组要慢得多。

由于作者并没有阅读过JavaScript引擎的源码,所以这并不是一手资料,如果有错误非常欢迎指出来,我会及时更正。

参考:How are JavaScript arrays represented in physical memory?
转载自公众号 :程序员面试官, 作者 蓝哥 


链接: https://www.fly63.com/article/detial/4155

探索JavaScript数组奥秘

avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

JavaScript 数组方法

数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

如何删除JavaScript 数组中的虚值

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。

JS数组的几个经典api

本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!