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 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
jQuery参数列表集合
Apr 06 Javascript
js限制文本框只能输入数字(正则表达式)
Jul 15 Javascript
ie下jquery.getJSON的缓存问题的处理方法
Mar 29 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 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 字符转义 注意事项
2009/05/27 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
用PHP的超级变量$_GET获取HTML表单(Form) 数据
2011/05/07 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP实现递归的三种方法
2020/07/04 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
DOM 事件的深入浅出(二)
2016/12/05 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
微信小程序 本地数据读取实例
2017/04/27 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
详解Django中的权限和组以及消息
2015/07/23 Python
python微信公众号开发简单流程
2018/03/23 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
.net工程师笔试题
2012/06/09 面试题
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
模具设计与制造专业应届生求职信
2013/10/18 职场文书
货代行业个人求职简历的自我评价
2013/10/22 职场文书
用Python提取PDF表格的方法
2021/04/11 Python