本文主要介绍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< b.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()

返回数组对象的原始值

转载于:https://www.cnblogs.com/donghuang/p/6195766.html

js数组(列表)的基本操作相关推荐

  1. php 转化js数组字符串,js数组怎么转为字符串

    js数组转字符串的方法:1.使用toString()函数,语法"Array.toString()":2.使用join()函数,将数组元素连接起来以构建一个字符串,语法"a ...

  2. js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip

    js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip push()函数用于向当前数组的添加一个或多个元素,并返回新的数组长度.新的元素将会 ...

  3. vue表格刷新数据_Vue.js的列表数据的同步更新方法

    这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...

  4. js数组与字符串的相互转化

    数组与字符串的相互转化 <script type="text/javascript"> var obj="new1abcdefg".replace( ...

  5. 【微信小程序】二维数组列表渲染

    微信小程序官方文档主要是一维数组列表渲染的案例: Page({items: [{message: 'foo',},{message: 'bar'}] }) <view wx:for=" ...

  6. 自学js第六天:JS数组和算法

    JS数组 PS; 数组下标,超过内容实际长度, 则返回undefined 从数组中pop/shift删除的元素(当数组删光了,则返回undefined). function函数没有return返回值时 ...

  7. JS数组转字符串(3种方法) arrays.join(“-“)把数组使用-分割为字符串

    JS数组转字符串(3种方法) JavaScript 允许数组与字符串之间相互转换.其中 Array 方法对象定义了 3 个方法,可以把数组转换为字符串,如表所示. Array 对象的数组与字符串相互转 ...

  8. JS数组添加元素的三种方法

    JS数组添加元素的三种方法 1.push() 方法可以向数组末尾添加一个或多个元素,并且返回新的长度 语法:arr.push(element1,element2,element3,····) 参数 概 ...

  9. JS数组、对象、字符串常用方法汇总

    JS数组.对象.字符串常用方法汇总 前言 数组常用方法 Array.prototype.slice(start, end) Array.prototype.map() Array.prototype. ...

  10. html js 数组添加,js数组添加数据

    我们在学习python的过程中,会对列表.字符串添加数据.在Javascript中,我们也会对数组添加数据.在不同的位置添加数据有着不同的方法.本文介绍js数组添加数据的三种方法:1.结尾添加push ...

最新文章

  1. 二叉树的建立与遍历_51、二叉树遍历-重建二叉树JZ4
  2. NUMTRYE - Number Theory (Easy)
  3. email邮件中 内嵌iframe_Python+Selenium执行结果,封装函数,用Python自动发送SMTP邮件...
  4. openvswitch patch port使用方法
  5. 【Python3网络爬虫开发实战】1.4.2-MongoDB安装
  6. 数字int转换成文字string形式的方法
  7. 嵌入式系统开发之中断控制的实现
  8. 计算机exsl表f4代表锁定,Excel中F4技巧,相对引用、绝对引用和混合引用
  9. KDD CUP 99 数据集解析、挖掘与下载
  10. 网页计算机谈音乐,如何用windows电脑录制网页上或电脑中自己的音乐
  11. Sping IOC 理解(转)
  12. rtsp 华为_【V哥漫画安防】华为摄像机RTSP流常见问题解答
  13. 收楼了心情忐忑不安,该花钱请验房师来验房吗?找一个验房师需要多少钱,验房标准价格是多少,验房师现场验收出二百多个问题值不值
  14. mysql update set_mysql update语句的用法详解
  15. “一键GHOST”系统备份与恢复 一键GHOST使用方法 - 绿色软件联盟 - 绿色免费共享
  16. 1.HTML+CSS3 —— To:Kobe——彩虹渐变
  17. 钙钛矿量子点异质CdSe/CdS/核-壳结构和MAPbI3/PbS晶体结构
  18. 联想财报里的伏笔:智能化制造迎来新一轮发展契机
  19. AMC8-2020pronlem25矩形正方形拼接问题
  20. 我的硬盘居然被win10安装工具_云骑士新版硬盘安装win10系统

热门文章

  1. ExtJs + Struts2 + JSON 程序总结
  2. zz Oracle存储过程总结
  3. 没有什么不可能!郴州女孩江梦南,从双耳失聪到清华博士!
  4. 【微软ALUM】当语言模型遇到对抗训练
  5. pytorch 实现半圆数据分类
  6. leetcode—8.同向双指针—滑动窗口题型python解答
  7. 我用过了TensorFlow、PyTorch等好几种框架,为什么还是吃不透深度学习算法?
  8. 《Effective STL中文版》前言
  9. Gallery和BaseAdapter容器
  10. 博文视点大讲堂第33期