JS数组操作之增删改查的简单实现


Posted in Javascript onAugust 21, 2017

JS提供了很多方便操作数组的方法,本文所要分享的就是如何快速对数组进行增、删、改、查。

一、增

1、push()

可接收任意数量的参数,把它们逐个添加至数组末尾,并返回修改后数组的长度。例如:

var arr = [];
var len = arr.push(1);
console.log(arr); // [1]
console.log(len); // 1
len = arr.push(2,3);
console.log(arr); // [1,2,3]
console.log(len); // 3

2、unshift()

该方法与push()类似,也可接收任意数量的参数,只不过是将参数逐个添加至数组前端而已,同样返回新数组长度。咱们接着上面的例子:

var len = arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
console.log(len); // 4
len = arr.unshift(-2,-1);
console.log(arr);  // [-2, -1, 0, 1, 2, 3]
console.log(len);  // 6

3、concat()

该方法与push()方法有点类似,同样是将元素添加至数组末尾,只不过这个数组已经不是原来的那个数组了,而是其副本,所以concat()操作数组后会返回一个新的数组。具体用法如下:

① 不传参数,返回当前数组副本

② 传递一或多个数组,则该方法会将这些数组中的每一项都添加到结果数组中

③ 传递非数组参数,这些参数就会被直接添加到结果数组的末尾

继续接着上面的栗子:

var arr1 = arr.concat(4,[5,6]);
console.log(arr);  // [-2, -1, 0, 1, 2, 3]
console.log(arr1);  // [-2, -1, 0, 1, 2, 3, 4, 5, 6]

例子中一目了然,原数组保持不变,新数组后面添加了4、5、6三个元素。

4、splice()

前面的三个方法都具有很大局限性,因为不是添加到数组前就是数组后,而splice()就不一样了,它非常灵活和强大。灵活是因为它可以添加元素到数组的任意位置,强大是因为它除了可以添加元素之外还具有删除和替换元素的功能(这个后面会陆续讲到)。

splice()可以向数组指定位置添加任意数量的元素,需要传入至少3个参数: 起始位置、0(要删除的元素个数)和要添加的元素。

依然接着上面的例子继续:

arr.splice(3,0,0.2,0.4,0.6,0.8);
console.log(arr); // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2, 3]

可以看出,splice()与push()和unshift()一样是直接在原数组上修改的。

二、删

1、pop()

与push()方法配合使用可以构成后进先出的栈,该方法可从数组末尾删除最后一项并返回该项。

接着上例:

var item = arr.pop();
console.log(item);  // 3
console.log(arr);  // [-2, -1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]

2、shift()

与push()方法配合使用可以构成先进先出的队列,该方法可删除数组第一项并返回该项。

继续接着上例:

var item = arr.shift();
console.log(item); // -2
console.log(arr); // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]

3、slice()

该方法同concat()一样是返回一个新数组,不会影响原数组,只不过slice()是用来裁剪数组的,返回裁剪下来的数组,具体用法如下:

slice()方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,该方法返回起始和结束位置之间的项——但不包括结束位置的项。

咱们还是继续接着上面例子吧~~

var arr2 = arr.slice(2,6);
console.log(arr); // [-1, 0, 0.2, 0.4, 0.6, 0.8, 1, 2]
console.log(arr2); // [0.2, 0.4, 0.6, 0.8]

4、splice()

好,继续讲这个“万能”的方法。

上面讲到,该方法在添加数组元素的时候需要传入3个以上参数,而其中第2个参数就是用于指定要删除元素的个数的,那时我们传的是数字0。那么,如果单单只需删除元素,我们就只需给splice()传入两个参数,第1个参数用于指定要删除的第一项的位置,第2个参数用于指定要删除元素的个数。

继续上例~~

arr.splice(2,4);
console.log(arr); // [-1, 0, 1, 2]

从索引项为2的位置开始删除4个元素,所以结果为 [-1, 0, 1, 2]。

三、改

这个其实最灵活的方式就是直接使用splice()这个强大的方法了,其实通过以上对该方法的了解,我们大致就能知道使用该方法修改数组元素的基本原理。

原理很简单,就是向指定位置插入任意数量的元素,且同时删除任意数量的元素。

依然继续上例~~

arr.splice(2,1,0.5,1,1.5);
console.log(arr);  // [-1, 0, 0.5, 1, 1.5, 2]

四、查

indexOf()和lastIndexOf()

这两个方法都接收两个参数:要查找的项和(可选的)表示查找起点位置的索引。其中,indexOf()从数组的开头(位置0)开始向后查找,lastIndexOf()方法则从数组的末尾开始向前查找。

例如:

var index = arr.indexOf(0);
console.log(index);  // 1
index = arr.indexOf(3,0);
console.log(index);  // -1

当找不到该元素时,返回 -1 ,lastIndexOf()方法同理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
运用Windows XP附带的Msicuu.exe、Msizap.exe来彻底卸载顽固程序
Apr 21 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
JavaScript数据推送Comet技术详解
Apr 07 Javascript
Vue通过input筛选数据
Oct 26 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
详解vue或uni-app的跨域问题解决方案
Feb 21 Javascript
JS实现评价的星星功能
Aug 20 #Javascript
详解A标签中href=""的几种用法
Aug 20 #Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 #Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 #Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 #Javascript
ES6扩展运算符的用途实例详解
Aug 20 #Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 #Javascript
You might like
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
自动最大化窗口的Javascript代码
2013/05/22 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
整理关于Bootstrap过渡动画的慕课笔记
2017/03/29 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
详解Python当中的字符串和编码
2015/04/25 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
python requests指定出口ip的例子
2019/07/25 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
Mamaearth官方网站:印度母婴护理产品公司
2019/10/06 全球购物
博士学位自我鉴定范文
2013/12/26 职场文书
入股合作协议书
2014/10/12 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
python实现简单石头剪刀布游戏
2021/10/24 Python