常用的Javascrip操作数组

2018-08-14 admin

前言

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

首项相关操作

首项插入: unshift

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

clipboard.png


首项删除: shift

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

clipboard.png


末项相关操作

末项插入: push

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

clipboard.png


末项删除: pop

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

clipboard.png

中间项相关操作

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

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

clipboard.png

解释下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

clipboard.png

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


只保留第i到j项: slice

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

clipboard.png

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

总结

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

  • splice会改变原数组,而slice不会,因此在用slice操作完了之后要做一次重新赋值.
  • slice的接收的两个参数分别为24的时候, 最后得到的是下标为2到下标为3的元素(不包括4)
  • 将slice理解为滑动,就不会记混了。

原文链接:https://segmentfault.com/a/1190000016003109

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37944.html

文章标题:常用的Javascrip操作数组

相关文章
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 <span id=“mt9” class=“sent...
2015-11-12
jQuery中DOM树操作之使用反向插入方法实例分析
本文实例讲述了jQuery中DOM树操作之使用反向插入方法。分享给大家供大家参考。具体分析如下: 使用反向插入方法 这里我们先把创建的内容插人到元素前面,然后再把同一个元素插人到文档 中的另一个位置。通常,当在jQuery中操作元素时,利用...
2015-11-13
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
7个让JavaScript变得更好的注意事项
随着浏览器性能提高,伴随着新的HTML5的编程接口的稳步采用,网页上的JavaScript的音量在逐渐增加。然而,一个写得不好的程序编码却拥有着打破整个网站,让用户为之沮丧和驱赶潜在客户的潜力。 开发人员必须使用所有供他们任意使用的工具和技...
2015-11-12
JavaScript短路原理精简代码
js中||和&&的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、""、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
JavaScript游戏之连连看源码分享
JavaScript游戏之连连看源码 下载地址:JavaScript游戏之连连看源码 解压密码:www.javascriptcn.com ...
2015-11-12
回到顶部