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游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
javascript时间函数大全
Jun 30 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
Jun 30 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
Mar 09 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
jquery html添加元素/删除元素操作实例详解
May 20 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
高效利用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基于cookie实现统计在线人数功能示例
2019/01/16 PHP
显示、隐藏密码
2006/07/01 Javascript
Prototype 学习 Prototype对象
2009/07/12 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
2014/03/26 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
2016/04/06 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
JavaScript中绑定事件的三种方式及去除绑定
2016/11/05 Javascript
JS前端加密算法示例
2016/12/22 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
详解Js中的模块化是如何实现的
2017/10/18 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
Vue数据双向绑定的深入探究
2018/11/27 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
跟老齐学Python之print详解
2014/09/28 Python
Python with用法实例
2015/04/14 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Django的models模型的具体使用
2019/07/15 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
出售房屋协议书范本
2014/10/06 职场文书
2015团员个人年度总结
2015/11/24 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
利用JavaScript写一个简单计算器
2021/11/27 Javascript