热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

js数组(列表)的基本操作

本文主要介绍JS对数组(列表)的基本操作。习惯了用数据库的操作顺序来说明:增、删、改、查;合并,裁剪,排序,格式化。一.数组元素的添加(增加)增加数组元素有三种方法:unshift()pu

  本文主要介绍JS对数组(列表)的基本操作。习惯了用数据库的操作顺序来说明:增、删、改、查;合并,裁剪,排序,格式化。

一.数组元素的添加(增加)

  增加数组元素有三种方法:unshift()  push()  splice()

  1、arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始位置(即头部),数组中的原元素自动后移;并返回数组新长度。

  2、arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾;并返回数组新长度。

  3arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置,插入位置的元素自动后移,返回""。

  举例说明:

unshift()
var a = [1,2.5,"a","yes"];
var temp = a.unshift(-1,-2.2);
console.log(a); //[-1, -2.2, 1, 2.5, "a", "yes"]
console.log(temp); //6 数组的长度

push()
var a = [1,2.5,"a","yes"];
var temp = a.push(-1,-2.2);
console.log(a); //[1, 2.5, "a", "yes", -1, -2.2]
console.log(temp); //6 数组的长度

splice() 将数据添加到原数组结尾
var a = [1,2.5,"a","yes"];
var temp = a.splice(a.length,0, -1,-2.2); //此将数据添加到原数组结尾,同push()
console.log(a); //a: [1, 2.5, "a", "yes", -1, -2.2]
console.log(temp); //[] 空数组

splice() 将数据添加到原数组开头
var a = [1,2.5,"a","yes"];
var temp = a.splice(0,0, -1,-2.2); //此将数据添加到原数组开头,同unshift()
console.log(a); //a: [-1, -2.2, 1, 2.5, "a", "yes"]
console.log(temp); //[] 空数组

splice() 将数据添加到具体位置
var a = [1,2.5,"a","yes"];
var temp = a.splice(2,0, -1,-2.2); //此将数据添加到第三个位置
console.log(a); //a: [1, 2.5, -1, -2.2, "a", "yes"]
console.log(temp); //[] 空数组

 

二.数组元素的删除

  删除数组元素有三种方法:shift()  pop()  splice()

  1、  arayObj.shift();//删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined 

  2、  arrayObj.pop();//删除原数组最后一项,并返回删除元素的值;如果数组为空则返回undefined

  3、  arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素,以数组形式返回所移除的元素

  举例说明:

shift()
var a = [1,2.5,"a","yes"];
var temp = a.shift();
console.log(a); //[2.5, "a", "yes"]
console.log(temp); // 1 原数组第一项

pop()
var a = [1,2.5,"a","yes"];
var temp = a.pop();
console.log(a); // [1, 2.5, "a"]
console.log(temp); // yes 原数组最后一项

splice() 删除指定位置开始的数据。第一个参数是指定位置,第二个参数是删除从指定位置开始的数据个数
var a = [1,2.5,"a","yes"];
var temp = a.splice(1,1); //删除第2个位置开始的1个数据,
console.log(a); // [1, "a", "yes"]
console.log(temp); // [2.5] 以数组形式返回移除的元素

var temp = a.splice(1,2); //删除第2个位置开始的2个数据,
console.log(a); // [1, "yes"]
console.log(temp); // [2.5, "a"] 以数组形式返回移除的元素

 

三.数组元素的修改

  数组元素值的修改:先按元素的索引查找到需要修改的元素; 然后进行元素值的修改。

  举例说明:

var a = [1,2.5,"a","yes"];
a[2] = "IT";
console.log(a); // [1, 2.5, "IT", "yes"]

  还可以通过splice()函数进行修改。splice(start,delCount,val1,val2,...):从start位置开始删除delCount项后,并从该开始位置起插入val1,val2,...  当然删除的元素个数和添加的元素个数必须相等。 

var a = [1,2.5,10,"No","a","yes"];      通过指定位置先删除再插入,达到修改数组的目的
var temp = a.splice(2,2,"You",0.1);
console.log(a); // [1, 2.5, "You", 0.1, "a", "yes"]
console.log(temp); // [10, "No"] 其实就是删除项,用数组形式返回

 

四.数组元素的查询(访问)

    获取数组元素值通用的一个方法:按元素的索引获取元素值; 返回改索引下的元素值

      注:一次只能返回一个元素值,不能切片分块返回,也不能从数组末尾以负数形式返回

  举例说明:

var a = [1,2.5,"a","yes"];
var temp = a[1];
console.log(temp); // 2.5 返回数组索引为1的元素值
var temp = a[1,2]; var temp = a[-1];  //这两种都是错误的,无法获取想要的数据

 

五.数组元素的合并

   将两个以上数组合并为一个数组,常用的方法是concat()此方法返回一个新的数组,而参与合并的原数组不变

  举例说明:

var a = [1,5,2,15,6];
var b = ["You","No","a","yes"];
var temp = a.concat(b); //将b合并到a后面
var tempdata = b.concat(a); //将a合并到b后面
console.log(temp); // [1, 5, 2, 15, 6, "You", "No", "a", "yes"]
console.log(tempdata); //["You", "No", "a", "yes", 1, 5, 2, 15, 6]

  通过concat()函数实现两个以上数组的合并,其实通过循环使用unshift()和push()也可以做到。

  比如将b加在a后面/前面,可以循环使用push()/unshift()函数。

var a = [1,5,2,15,6];
var b = ["You","No","a","yes"];
for(var i=0; i.length; i++){
a.push(b[i])
//将b加在a后面;如果希望将b加在a前面,则改用unshift()
}
console.log(a);
// [1, 5, 2, 15, 6, "You", "No", "a", "yes"]
console.log(b); // ["You", "No", "a", "yes"]

  这样做将会改变宿主数组,如果不希望改变原数组的话,则新建一个新的空数组,将宿主数组(载体数组)拷贝给新数组,这样原数组就可以不改变。注:这里的拷贝是深拷贝,而不是直接将a赋值给新数组,那样的话新数组其实只是保存了原数组的一个地址,新数组被修改,则原数组一样会被修改。

六.数组元素裁剪

    数组的裁剪:是在原数组基础上截取出一个小的数组,以便于使用和存放。截取的元素组成一个新的数组副本,而原数组不发生改变。

  数组的裁剪一般使用slice()函数,slice(start,end):返回从原数组中指定开始下标到结束下标之间的元素组成新的数组 ,若结束下标超出原数组总长,则以原数组结尾处下标为结束下标

  举例说明:

var a = [1,2.5,"a","yes",12,23];
var temp = a.slice(2,5); //裁剪下标为2到下标为5的元素;结束下标未超出数组总长
console.log(temp); // ["a", "yes", 12]
console.log(a); // [1, 2.5, "a", "yes", 12, 23] 原数组不发生改变

var temp = a.slice(2,15); //裁剪下标为2到下标为15的元素;结束下标超出数组总长
console.log(temp); // ["a", "yes", 12, 23] 结束下标自动以原数组结尾下标为结束下标
console.log(a); // [1, 2.5, "a", "yes", 12, 23]

 

七.数组元素排序

     数组的排序:是在原数组的基础上对数组元素进行整理,使得元素按照一定顺序排列,不会生成副本

     数组排序一般使用数组对象内置方法sort()。sort()方法用于对数组的元素进行排序。

   如果调用该方法时没有传入参数,将按字母顺序对数组中的元素进行默认排序,是按照字符编码的顺序进行排序。如果想按其他标准进行排序,则需要提供比较函数,该函数比较两个值,然后返回一个数字来说明这两个值的大小。比较函数具有两个参数 a 和 b,其返回值如下:

  若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值(-1)。

  若 a 等于 b,则返回 0。

  若 a 大于 b,则返回一个大于 0 的值。

  举例说明:

1、纯字符串排序
var a = ["zhao","qian","sun","li","zhou","wu","zheng"];
var temp = a.sort();
console.log(a); // ["li", "qian", "sun", "wu", "zhao", "zheng", "zhou"]
console.log(temp); // ["li", "qian", "sun", "wu", "zhao", "zheng", "zhou"] 返回排好序的原数组 先按第一个字母排序,第一个相同则按第二个排序,以此类推。

2、字符串和数字混杂
var a = ["zhao","qian",1,"li","zhou","wu",2];
var temp = a.sort();
console.log(a); //[1, 2, "li", "qian", "wu", "zhao", "zhou"]
先排数字,后排字符串,其实这的1,2排序看似正确,其实不是按照他们的大小排的,而是按照1和2的编码顺序排的。从下面这个例子可以看出。

3、 纯数字排序(但不提供比较函数)
var a = [11,5,1,13,20,-1,2];
var temp = a.sort();
console.log(a); // [-1, 1, 11, 13, 2, 20, 5]
从这就可以看出默认排序是按照字符编码顺序排的,而不是大小

4、 纯数字正确排序(需要提供排序函数)
var a = [11,5,1,13,20,-1,2];
var temp = a.sort(sortNumber);
console.log(a); // [-1, 1, 2, 5, 11, 13, 20] 这才是正确的从小到大排序
function sortNumber(a,b) 这是从小到大排序{
return a - b
}
function sortNumber(a,b) 这是从大到小排序
{
return b – a
}
console.log(a); // [20, 13, 11, 5, 2, 1, -1] 这是从大到小排序结果

 

八.数组的格式化

  数组也有尴尬的时候,有时候我们需要将数组转化为字符串进行传参,或者进行数据存储等,那么这时候就需要将数组转化成字符串。

  join() 方法用于把数组中的所有元素放入一个字符串,元素通过指定的分隔符进行分隔。Join方法返回一个新的字符串副本,不会对原数组进行修改。

  语法格式:arrayObject.join(separator)     返回一个字符串,该字符串是通过把 arrayObject 的每个元素转换为字符串,然后将这些字符串连接起来,在两个元素之间插入separator 字符而生成。

  举例说明:

var a = [1,2.5,"a","yes",12,23];
var temp = a.join(); //默认格式化,不提供连接字符
console.log(temp); //1,2.5,a,yes,12,23
console.log(a);  // [1, 2.5, "a", "yes", 12, 23]

var a = [1,2.5,"a","yes",12,23];
var temp = a.join(“|”); //提供连接字符,但连接字符必须是字符(“x”)形式
console.log(temp); // 1|2.5|a|yes|12|23
console.log(a);  // [1, 2.5, "a", "yes", 12, 23]

 

九.数组的建立

  var arrayObj = new Array(); //创建一个数组 通过内置对象Array()进行创建

  var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限,是长度

  var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); //创建一个数组并初始化赋值

  var arrayObj = [];    //也可以创建一个数组,并已完成初始化,只不过是个空的,没有实际元素

  注:需要说明的是,虽然第二种方法创建数组指定了长度,但实际上所有情况下数组都是变长的,也就是说即使指定了长度为5,仍然可以将元素存储在规定长度以外的,注意:这时长度会随之改变。

  数组是Javascript提供的一个内部对象,它是一个标准的集合,我们可以添加(push)、删除(shift)里面元素,还可以通过for循环遍历里面的元素。

附件:数组对象内置操作方法

Array 对象方法

方法

描述

concat()

连接两个或更多的数组,并返回结果。

join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

pop()

删除并返回数组的最后一个元素

push()

向数组的末尾添加一个或更多元素,并返回新的长度。

reverse()

颠倒数组中元素的顺序。

shift()

删除并返回数组的第一个元素

slice()

从某个已有的数组返回选定的元素

sort()

对数组的元素进行排序

splice()

删除元素,并向数组添加新元素。

toSource()

返回该对象的源代码。

toString()

把数组转换为字符串,并返回结果。

toLocaleString()

把数组转换为本地数组,并返回结果。

unshift()

向数组的开头添加一个或更多元素,并返回新的长度。

valueOf()

返回数组对象的原始值

 


推荐阅读
  • 本文详细介绍了Java中vector的使用方法和相关知识,包括vector类的功能、构造方法和使用注意事项。通过使用vector类,可以方便地实现动态数组的功能,并且可以随意插入不同类型的对象,进行查找、插入和删除操作。这篇文章对于需要频繁进行查找、插入和删除操作的情况下,使用vector类是一个很好的选择。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 本文介绍了iOS数据库Sqlite的SQL语句分类和常见约束关键字。SQL语句分为DDL、DML和DQL三种类型,其中DDL语句用于定义、删除和修改数据表,关键字包括create、drop和alter。常见约束关键字包括if not exists、if exists、primary key、autoincrement、not null和default。此外,还介绍了常见的数据库数据类型,包括integer、text和real。 ... [详细]
  • Python SQLAlchemy库的使用方法详解
    本文详细介绍了Python中使用SQLAlchemy库的方法。首先对SQLAlchemy进行了简介,包括其定义、适用的数据库类型等。然后讨论了SQLAlchemy提供的两种主要使用模式,即SQL表达式语言和ORM。针对不同的需求,给出了选择哪种模式的建议。最后,介绍了连接数据库的方法,包括创建SQLAlchemy引擎和执行SQL语句的接口。 ... [详细]
  • Oracle优化新常态的五大禁止及其性能隐患
    本文介绍了Oracle优化新常态中的五大禁止措施,包括禁止外键、禁止视图、禁止触发器、禁止存储过程和禁止JOB,并分析了这些禁止措施可能带来的性能隐患。文章还讨论了这些禁止措施在C/S架构和B/S架构中的不同应用情况,并提出了解决方案。 ... [详细]
  • 模板引擎StringTemplate的使用方法和特点
    本文介绍了模板引擎StringTemplate的使用方法和特点,包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时,还介绍了StringTemplate语法中的属性和普通字符的使用方法,并提供了向模板填充属性的示例代码。 ... [详细]
  • Java学习笔记之使用反射+泛型构建通用DAO
    本文介绍了使用反射和泛型构建通用DAO的方法,通过减少代码冗余度来提高开发效率。通过示例说明了如何使用反射和泛型来实现对不同表的相同操作,从而避免重复编写相似的代码。该方法可以在Java学习中起到较大的帮助作用。 ... [详细]
  • 本文详细解析了JavaScript中相称性推断的知识点,包括严厉相称和宽松相称的区别,以及范例转换的规则。针对不同类型的范例值,如差别范例值、统一类的原始范例值和统一类的复合范例值,都给出了具体的比较方法。对于宽松相称的情况,也解释了原始范例值和对象之间的比较规则。通过本文的学习,读者可以更好地理解JavaScript中相称性推断的概念和应用。 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • Java容器中的compareto方法排序原理解析
    本文从源码解析Java容器中的compareto方法的排序原理,讲解了在使用数组存储数据时的限制以及存储效率的问题。同时提到了Redis的五大数据结构和list、set等知识点,回忆了作者大学时代的Java学习经历。文章以作者做的思维导图作为目录,展示了整个讲解过程。 ... [详细]
  • 本文讨论了一个关于cuowu类的问题,作者在使用cuowu类时遇到了错误提示和使用AdjustmentListener的问题。文章提供了16个解决方案,并给出了两个可能导致错误的原因。 ... [详细]
  • Redis底层数据结构之压缩列表的介绍及实现原理
    本文介绍了Redis底层数据结构之压缩列表的概念、实现原理以及使用场景。压缩列表是Redis为了节约内存而开发的一种顺序数据结构,由特殊编码的连续内存块组成。文章详细解释了压缩列表的构成和各个属性的含义,以及如何通过指针来计算表尾节点的地址。压缩列表适用于列表键和哈希键中只包含少量小整数值和短字符串的情况。通过使用压缩列表,可以有效减少内存占用,提升Redis的性能。 ... [详细]
author-avatar
手机用户2502931101
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有