常用的Javascrip操作数组

eechen 发布于2019-08-26 12:10 / 1116人阅读

摘要：前言我们经常需要对数组进行各种各样的操作，比如数组最前面插入一项，最后面插入一项，中间插入一项等等等等。因此翻译出来就是从下标为的元素开始到下标为注意这里是下标为而不是的元素滑出来，作为返回值返回重新赋值给。

前言

我们经常需要对数组进行各种各样的操作，比如数组最前面插入一项，最后面插入一项，中间插入一项等等等等。那就一次性搞定这些操作吧！

首项相关操作

首项插入: unshift

let myArray = [1, 2, 3]
myArray.unshift(0) //插入项的值为0
myArray

首项删除: shift

let myArray = [1, 2, 3]
myArray.shift()
myArray

末项相关操作

末项插入： push

let myArray = [1, 2, 3]
myArray.push(4) // 插入项的值为4
myArray

末项删除: pop

let myArray = [1, 2, 3]
myArray.pop() // 弹出最后一项
myArray

中间项相关操作

第i个位置插入一项或多项: splice

let myArray = ["a", "b", "c"]
myArray.splice(1, 0, "哈哈哈", "嚯嚯嚯", "嘻嘻嘻")
myArray

解释下splice方法就能理解了，splice可用来对数组进行删除或者添加元素，接收两个以上的参数：位置， 删除多少项, 要插入的项。因此，myArray.splice(1, 0, "哈哈哈", "嚯嚯嚯", "嘻嘻嘻")翻译过来就是: 在下标为1的位置，删除0项，并将哈哈哈, 嚯嚯嚯, 嘻嘻嘻插入。这样就可以做到只做添加不做删除。

删除第i到j项: splice

let myArray = ["a", "b", "c", "d", "e"]
myArray.splice(1, 3) // 删除b, c, d
myArray

根据上面对splice的解释，可以知道myArray.splice(1, 3)就是从数组下标为1的位置开始，删除3个元素（并且不做任何插入）

只保留第i到j项: slice

let myArray = ["a", "b", "c", "d", "e"]
myArray = myArray.slice(2, 4)
myArray

对slice的解释：将slice理解为滑动选择，接收两个参数, 开始位置和结束位置, 即将数组中从开始位置到结束位置的元素滑出来（不包括结束位置的元素）,作为返回值返回。因此myArray = myArray.slice(2, 4)翻译出来就是从下标为2的元素开始到下标为3(注意这里是下标为3而不是4)的元素滑出来，作为返回值返回重新赋值给myArray。关于slice和split的比较后面会详细讲。

总结

总结主要讲一下splice和slice的区别，功能上的区别就不说了，就说几个注意的点:

splice会改变原数组，而slice不会，因此在用slice操作完了之后要做一次重新赋值.

slice的接收的两个参数分别为2和4的时候，最后得到的是下标为2到下标为3的元素（不包括4）

将slice理解为滑动,就不会记混了。

GPU云服务器云服务器常用的服务器操作系统 php操作数组的函数 Excel常用操作 linux常用操作

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

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

来聊一聊JavaScrip数组删除特定元素

摘要：序述说到删除数组特定元素你可能不止一种方法可以实现下面且来看看我总结的这几种方法可能会对你有所帮助源数组伪删除什么是伪删除呢就是说将数组元素值设置为删除后的数组是这个样子的不过要注意这意味着数组也就是变量的长度保持不变完全删除是什么是完全删序述说到删除数组特定元素你可能不止一种方法可以实现, 下面且来看看我总结的这几种方法,可能会对你有所帮助！源数组 var arr = [Geo...

he_xd 2019-08-21 16:17 评论0 收藏0
JavaScrip学习之Object(上)

摘要：对象篇简介本身就是一个函数，可用于工具函数，也可以是用于构造对象的函数其次可以添加属性和方法方法又可以分为静态方法定义在自身上的和实例方法定义在原型上的工具函数作为工具函数参数可以是任意数据类型，将其转为对象如果参数是空，，则将其转换为空对对象篇 Object简介 Object本身就是一个函数，可用于工具函数，也可以是用于构造对象的函数；其次Object可以添加属性和方法；方法又可以...

li21 2019-08-23 12:13 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0