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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
自用js开发框架小成 学习js的朋友可以看看
Nov 16 Javascript
javaScript同意等待代码实现心得
Jan 01 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
js常用DOM方法详解
Feb 04 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
Vue 重置组件到初始状态的方法示例
Oct 10 Javascript
js实现时钟定时器
Mar 26 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 的 __FILE__ 常量
2007/01/15 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
Python实现过滤单个Android程序日志脚本分享
2015/01/16 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
Python序列类型的打包和解包实例
2019/12/21 Python
python与idea的集成的实现
2020/11/20 Python
酒店服务实习自我鉴定
2013/09/22 职场文书
法学毕业生自荐信
2013/11/13 职场文书
优秀干部获奖感言
2014/01/31 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
催款函怎么写
2015/06/24 职场文书
新闻稿怎么写
2015/07/18 职场文书
放假通知怎么写
2015/08/18 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis