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 相关文章推荐
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
JS实现一个列表中包含上移下移删除等功能
Sep 24 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
javascript事件绑定学习要点
Mar 09 Javascript
jquery插件格式实例分析
Jun 16 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
Aug 09 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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 获得汉字拼音首字母的函数
2009/08/01 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php知道与问问的采集插件代码
2010/10/12 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
配置php网页显示各种语法错误
2013/09/23 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
js创建对象的几种常用方式小结(推荐)
2010/10/24 Javascript
分享20款好玩的jQuery游戏
2011/04/17 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
使用pkg打包Node.js应用的方法步骤
2018/10/19 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
JS实现打字游戏
2019/12/17 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Python中实现对Timestamp和Datetime及UTC时间之间的转换
2015/04/08 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
python实现括号匹配的思路详解
2018/08/23 Python
Python从Excel中读取日期一列的方法
2018/11/28 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
亿企通软件测试面试题
2012/04/10 面试题
一句话工作感言
2014/03/01 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书