JavaScript学习笔记之数组的增、删、改、查


Posted in Javascript onMarch 23, 2016

在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活、强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改。

数组是JavaScript中常见的一个对象,它有一些经典的操作,比如数组的增、删、改、查。在这篇文章中主要整理这方面的相关操作方法。

增加数组项

首先来看如何给一个数组增加数组项。假设有一个数组:

var arr = [];

上面声明了一个数组,但这个数组是一个空数组 [] ,其 length 的值为 0 。接下来我们看如何给数组 arr 增加数组项。最简单的方法可以通过索引值方式,给数组增加数组项:

var arr = [];
arr[0] = 'a';
arr[1] = 'b';
arr[2] = 1;
arr[3] = 2;
console.log(arr); // ["a", "b", 1, 2]
console.log(arr.length); // 4

另外也可以通过改为数组的 length 值给数组增加数组项,不过这种方法给数组增加的数组项都是 undefined :

var arr = [];
arr[0] = 'a'; // 给数组arr添加一个`a`数组项
arr.length = 5; // 改变数组的`length`值为`5`
console.log(arr); // ["a", undefined × 4]

虽然这种方法也给数组增加了数组项,但相对来说都较为麻烦。其实给数组添加数组项,没有这么麻烦,可以通过数组提供的原生方法给数组添加数组项。

push()

使用 push() 方法可以给数组末尾添加一个或多个数组项。

var arr = [];
arr.push('a','b');
console.log(arr); // ['a','b']
unshift()

使用 push() 方法可以给数组末尾添加一个或多个数组项,那么使用 unshift() 方法可以在数组的前面添加一个或多个数组项:

var arr = ['a','b'];
arr.unshift(1,2);
console.log(arr); // [1, 2, "a", "b"]

除了这两种方法之外,还可以使用 splice() 方法给数组添加数组项:

var arr = ['a','b','c',1,2];
arr.splice(2,0,'d','c','e');
console.log(arr); // ["a", "b", "d", "c", "e", "c", 1, 2]

另外除了 splice() 方法之外还可以使用 concat() 方法可以给数组添加数组项,只不过使用这种方法不会改变原数组,会在原数组中创建一个新数组:

var arr = ['a','b','c'];
var arr2 = arr.concat('d',1,2,['e',3]);
console.log(arr); // ["a", "b", "c"]
console.log(arr2); // ["a", "b", "c", "d", 1, 2, "e", 3]

删除数组项

对于数组的操作,除了增加数组项,很多时候还需要对数组进行删除操作。删除数组项常用的方法有 pop() 和 shift() 两种方法。

pop()

pop() 方法可以从数组的末尾删除一个数组项:

var arr = ['a','b','c','d',1,2];
arr.pop();
console.log(arr); // ["a", "b", "c", "d", 1]

shift()

shift() 方法和 pop() 方法刚好相反,它可以删除数组的第一项:

var arr = ['a','b','c','d',1,2];
arr.shift();
console.log(arr); // ["b", "c", "d", 1, 2]

不管是 pop() 或 shift() 方法每次只能给数组删除一个数组项,但很多时候这样删除数组项相对来说是比较麻烦的。在数组的操作中,除了这两种方法之外,还可以通过 slice() 和 splice() 方法来删除数组项。

slice()

slice() 方法可以给一个数组中删除多个数组项,只不过不同的是, slice() 不会影响原数组,只是会在原数组基础上创建一个数组副本:

var arr = [1,2,3,4,'a','b'];
var arr2 = arr.slice(2);
console.log(arr); // [1, 2, 3, 4, "a", "b"]
console.log(arr2); // [3, 4, "a", "b"]
console.log(arr3); // ["a", "b"]

splice()

splice() 方法除了能给数组添加数组项之外,还可以给数组删除数组项:

var arr = [1,2,3,4,'a','b','c'];
var arr2 = arr.splice(2,2);
console.log(arr); // [1, 2, "a", "b", "c"]
console.log(arr2); // [3, 4]

改变数组

数组中 splice() 方法是数组中一个强大的方法,其除了可以给数组添加数组项、删除数组项之外,还可以改变一个数组:

var arr = [1,2,3,4,5,6];
var arr2 = arr.splice(2,3,'a','b','c');
console.log(arr); // [1, 2, "a", "b", "c", 6]
console.log(arr2); // [3, 4, 5]

数组的查询

这里所说的数组查询其实指的是数组的查询提取。其使用的方法是 slice() 方法:

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

总结

这里简单的整理了一个数组的增、删、改、查的相关方法。简单的总结一下:

增加数组项方法:除了直接改变数组项的值和修改数组的 length 给数组添加数组项方法之外,还可以使用 push() 、 unshift() 、 concat() 和 splice() 添加数组项

删除数组项方法:删除数组项方法有 pop() 、 shift() 、 slice() 和 splice() 方法

改变数组项方法:在数组中主要通过 splice() 方法来改变数组项

查询数组项方法: 查询数组项方法其实就是对数组做查询提取功能,主要使用的方法是 slice() 方法

有关于 pop() 、 push() 、 shift() 和 unshift() 操作方法可以点击这里;关于 concat() 、 slice() 和 splice() 方法的相关介绍可以点击这里。

有关JavaScript学习笔记之数组的增、删、改、查小编就给大家介绍到这里,希望对大家有所帮助!更多有关javascript知识请登陆三水点靠木网站官网了解详情!

Javascript 相关文章推荐
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 #Javascript
BootStrap实用代码片段之一
Mar 22 #Javascript
Javascript中的几种继承方式对比分析
Mar 22 #Javascript
JS函数定义方式的区别介绍
Mar 22 #Javascript
基于javascript制作经典传统的拼图游戏
Mar 22 #Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 #Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 #Javascript
You might like
php防盗链的常用方法小结
2010/07/02 PHP
深入理解PHP中的Session和Cookie
2013/06/21 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
python批量生成本地ip地址的方法
2015/03/23 Python
python中循环语句while用法实例
2015/05/16 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
django 读取图片到页面实例
2020/03/27 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
毕业生的自我评价分享
2013/12/18 职场文书
上班睡觉检讨书
2014/01/09 职场文书
主管会计岗位责任制
2014/02/10 职场文书
物流专业求职信
2014/06/30 职场文书
Python中如何处理常见报错
2022/01/18 Python