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

在程序语言中数组的重要性不言而喻,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知识请登陆我们网站官网了解详情!

(0)

相关推荐

  • javascript js 操作数组 增删改查的简单实现

    函数定义 Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } }

  • javascript Xml增删改查(IE下)操作实现代码

    html文件: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>j

  • 浅谈JavaScript中数组的增删改查

    数组的增加 •ary.push()   向数组末尾添加元素,返回的是添加后新数组的长度,原有数组改变 •ary.unshift()  向数组开头添加元素,返回的是添加后新数组的长度,原有数组改变 • var ary=[1,2,3,4];   var res=ary.unshift(6);   console.log(res); ---->5 返回的是新数组的长度•ary.splice(n,m,x)从索引n开始删除m个元素,把新增的元素X放在索引n的前面,把删除的元素当成一个新数组返回,原有数组改

  • javascript实现信息增删改查的方法

    本文实例讲述了javascript实现信息增删改查的方法.分享给大家供大家参考.具体实现方法如下: <body> <div align="center"> <h1>显示所有的用户界面</h1> <div style="border: 1px red solid; margin-bottom: 100px; padding: 10px 10%;"> <table border="1px&quo

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

    在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. 数组是JavaScript中常见的一个对象,它有一些经典的操作,比如数组的增.删.改.查.在这篇文章中主要整理这方面的相关操作方法. 增

  • JavaScript学习笔记之数组去重

    推荐阅读:JavaScript学习笔记之数组的增.删.改.查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 话说面试常会碰到面试官会问JavaScript实现数组去重的问题,最近刚好在学习有关于JavaScript数组相关的知识,趁此机会整理了一些有关于JavaScript数组去重的方法. 下面这些数组去重的方法是自己收集和整理的,如有不对希望指正文中不对之处. 双重循环去重 这个方法使用了两个for循环做遍历.整个思路是: 构建一个空数组用来存放去重后

  • JavaScript学习笔记之数组随机排序

    推荐阅读:JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组的增.删.改.查 JavaScript中提供了sort()和reverse()方法对数组项重新排序.但很多时候这两个方法无法满足我们实际业务的需求,比如说扑克牌游戏中的随机洗牌. 在这篇文章一起来学习如何完成上面这个示例的效果,以及一些有关于数组随机排序的相关知识. 在网上查了一下有关于数组随机排序的相关资料,都看到了Math.random()的身影.打开浏览器控制器,输入: Math.random() 从图

  • JavaScript学习笔记之数组求和方法

    推荐阅读:JavaScript学习笔记之数组的增.删.改.查 通过最近学习,越来越感觉JavaScript的强大与魅力之处,仅数组一个知识点就让我这样的初学者折腾了很久.折腾是折腾,但还是很有效果的,这几天的学习到的一些基本知识,就在自己的业务就用到了.顿感自信心爆棚,我也有一天能学会JavaScript. 别的不多说了,咱们今天一起来玩数组的求和,看看有哪些方法可以实现数组的求和. 数组方法 JavaScript中数组有很多种方法,下图能更好的向你阐述JavaScript有多少种方法,作用是啥

  • JavaScript学习笔记之数组基本操作示例

    本文实例讲述了JavaScript学习笔记之数组基本操作.分享给大家供大家参考,具体如下: 一.数组定义 1.定义 vara=[1,2,3] vara=newArray(1,2,3); 2.长度 返回长度 <script> vara=[1,2,3,4,5,6]; alert(a.length); </script> 设置长度 <script> vara=[1,2,3,4,5,6]; a.length=2; alert(a); </script> 二.数组连接

  • Javascript学习笔记之数组的遍历和 length 属性

    尽管数组在 Javascript 中是对象,但是不建议使用 for in 循环来遍历数组,实际上,有很多理由来阻止我们对数组使用 for in 循环. 因为 for in 循环将会枚举原型链上的所有属性,并且唯一阻止的方法是使用 hasOwnProperty 来判断,这将比普通的 for 循环要慢不少. 遍历 为了达到最佳性能来遍历一个数组,最好的方式就是使用经典的 for 循环. 复制代码 代码如下: var list = [1, 2, 3, 4, 5, ...... 100000000];

  • Javascript学习笔记之数组的构造函数

    数组的构造函数 由于数组的构造函数在处理参数时的不确定性,因此强烈建议使用 [] 符号来创建一个新数组. [1, 2, 3]; // Result: [1, 2, 3]new Array(1, 2, 3); // Result: [1, 2, 3][3]; // Result: [3]new Array(3); // Result: []new Array('3') // Result: ['3'] 当只有一个参数被传递到数组的构造函数中,并且这个参数还是一个数字时,构造函数将会返回一个元素值为

  • 简单的php数据库操作类代码(增,删,改,查)

    数据库操纵基本流程为: 1.连接数据库服务器 2.选择数据库 3.执行SQL语句 4.处理结果集 5.打印操作信息 其中用到的相关函数有 •resource mysql_connect ( [string server [, string username [, string password [, bool new_link [, int client_flags]]]]] ) 连接数据库服务器•resource mysql_pconnect ( [string server [, strin

  • Struts2实现CRUD(增 删 改 查)功能实例代码

    CRUD是Create(创建).Read(读取).Update(更新)和Delete(删除)的缩写,它是普通应用程序的缩影.如果您掌握了某框架的CRUD编写,那么意味可以使用该框架创建普通应用程序了,所以大家使用新框架开发OLTP(Online Transaction Processing)应用程序时,首先会研究一下如何编写CRUD.这类似于大家在学习新编程语言时喜欢编写"Hello World". 本文旨在讲述Struts 2上的CRUD开发,所以为了例子的简单易懂,我不会花时间在数

  • JavaScript学习笔记之取数组中最大值和最小值

    推荐阅读:JavaScript学习笔记之数组的增.删.改.查 JavaScript学习笔记之数组求和方法 JavaScript学习笔记之数组随机排序 在实际业务中有的时候要取出数组中的最大值或最小值.但在数组中并没有提供arr.max()和arr.min()这样的方法.那么是不是可以通过别的方式实现类似这样的方法呢?那么今天我们就来整理取出数组中最大值和最小值的一些方法. 取数组中最大值 可以先把思路理一下: 将数组中第一个元素赋值给一个变量,并且把这个变量作为最大值: 开始遍历数组,从第二个元

随机推荐