JS数组在内存中的效率问题浅析
JS数组
我们所熟知的JS数组的结构和其他语言数组结构类似，即物理内存是连续的，所以这也就导致了数组成员移动次数越少，其效率越高，一般数组会被分配到一段连续的内存中，像这样
大家可能会疑问，你为啥要给画一个边框呢，其实我们的数组在定义的时候默认了它的长度，即当我们像要在数组中添加元素的时候，就需要对它的长度做出改变。
效率比较
JS提供了几个api来让我们便捷地向数组中添加元素，比如说push，unshift
push()是添加一个元素在数组的末尾，这里我们无需操作其他的元素，只需要this,length+=1即可
unshift()是在数组的头部添加一个元素，我们看到的仅仅只要其表面数组的头部增加了一个元素，其实底层数组的中的所有成员都需要向后移动，从尾到头的顺序，如下所示，其就会凸显出性能差的特点。
举个栗子🌰
我们下面写个栗子来清晰得比较一下两者所耗费的时间，我们的unshift耗费了0.24毫秒，push耗费了0.8毫秒，当然所耗费的时间还是根据所移动的元素数量来以指数倍提高的。
function _shift() {
var arr = []
console.time('_shift')
for (let i = 0; i < 1000; i++) {
arr.unshift(1)
}
console.timeEnd('_shift')
}
_shift()
function _push() {
var arr = []
console.time('_push')
for (let i = 0; i < 1000; i++) {
arr.push(1)
}
console.timeEnd('_push')
}
_push()
非连续内存问题
除此之外我们都知道JS数组是可以在同一数组中存储不同数据类型的数据的，所以就造成了JS的数组是否分配连续内存，是要看我们的数组成员类型的，当数组内成员为同一类，则为连续内存，当数组成员存在数组，字符串，那么就会分配非连续的内存，多个非连续内存会形成一个链表，当存储数据数量级庞大的时候，就会造成效率低下的问题。下面我们针对数组成员相同和数组成员不同进行一次耗时比较，为了凸显效果我将次数提高到了10的7次幂
function _diff() {
var arr = new Array(10000000)
arr.push({ name: "cxy" })
console.time('_diff')
for (let i = 0; i < 10000000; i++) {
arr[i] = i
}
console.timeEnd('_diff')
}
_diff()
function _same() {
var arr = new Array(10000000)
console.time('_same')
for (let i = 0; i < 10000000; i++) {
arr[i] = i
}
console.timeEnd('_same')
}
_same()
最后可以清楚地比较出两者的差距，非连续内存的数组操作耗时是连续内存的数组的几倍。
总结
到此这篇关于JS数组在内存中的效率问题的文章就介绍到这了,更多相关JS数组在内存的效率内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于ES6的异步终极解决方案，文中通过示例代码介绍的非常详细，对大家学习或者使用ES6具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
大家在写div+css的时候经常会用到弹出层，由于IE6的bug，所以当使用多个标签重复写弹出层的时候会遇到后面的层压在了弹出层的上面;用Jquery给弹出层的z轴依次增加高度可解决.代码很简单，效果很显著,需要了解的朋友可以参考下2012-12-12
这篇文章主要为大家详细介绍了JavaScript单例模式实现自定义弹框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
本文介绍如何使用JavaScript原生代码实现文本折叠展开效果,并提供方法指导如何在Vue或React等框架中修改实现,详细介绍了创建整体框架、设置样式及利用JS控制元素的步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了微信小程序和H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了JavaScript构建自己的对象,结合实例形式分析了javascript自定义类的定义与对象的实例化相关操作技巧,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了基于百度地图实现产品销售的单位位置查看功能设计与实现的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-10-10
才发现的超链接js导致网页中GIF动画停止的解决方法...2007-11-11
Bootstrap标签页（Tab）插件切换echarts不显示问题的解决
这篇文章主要给大家介绍了关于Bootstrap标签页（Tab）插件切换echarts不显示问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
这篇文章主要为大家详细介绍了Ionic3 UI组件之autocomplete的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
最新评论