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 相关文章推荐
js常用代码段收集
Oct 28 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
详解js闭包
Sep 02 Javascript
js自调用匿名函数的三种写法(推荐)
Aug 19 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
一个可复用的vue分页组件
May 15 Javascript
利用Ionic2 + angular4实现一个地区选择组件
Jul 27 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
vue.config.js常用配置详解
Nov 14 Javascript
5分钟快速看懂ES6中的反射与代理
Dec 19 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
各种战术和打法的原创者
2020/03/04 星际争霸
Sony CFR 320 修复改造
2020/03/14 无线电
php中filter函数验证、过滤用户输入的数据
2014/01/13 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
js获取域名的方法
2015/01/27 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
Python编程中time模块的一些关键用法解析
2016/01/19 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
python实现实时监控文件的方法
2016/08/26 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
移动HTML5前端框架—MUI的使用
2017/12/18 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
夜不归宿检讨书
2014/02/25 职场文书
2014年销售内勤工作总结
2014/12/01 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
电工实训心得体会
2016/01/14 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL