js数组(列表)的基本操作
本文主要介绍JS对数组(列表)的基本操作。习惯了用数据库的操作顺序来说明:增、删、改、查;合并,裁剪,排序,格式化。
一.数组元素的添加(增加)
增加数组元素有三种方法:unshift() push() splice()
1、arrayObj.
unshift
([item1 [item2 [. . . [itemN ]]]]);
//
将一个或多个新元素添加到数组开始位置(即头部),数组中的原元素自动后移;并返回数组新长度。
2、arrayObj.
push
([item1 [item2 [. . . [itemN ]]]]);
//
将一个或多个新元素添加到数组结尾;并返回数组新长度。
3
、
arrayObj.
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数组(列表)的基本操作相关推荐
- php 转化js数组字符串,js数组怎么转为字符串
js数组转字符串的方法:1.使用toString()函数,语法"Array.toString()":2.使用join()函数,将数组元素连接起来以构建一个字符串,语法"a ...
- js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip
js 的数组怎么push一个对象. Js数组的操作push,pop,shift,unshift JavaScrip push()函数用于向当前数组的添加一个或多个元素,并返回新的数组长度.新的元素将会 ...
- vue表格刷新数据_Vue.js的列表数据的同步更新方法
这次给大家带来Vue.js的列表数据的同步更新方法,Vue.js列表数据同步更新方法的注意事项有哪些,下面就是实战案例,一起来看一下. 数组的 push(),pop(),shift(),unshift ...
- js数组与字符串的相互转化
数组与字符串的相互转化 <script type="text/javascript"> var obj="new1abcdefg".replace( ...
- 【微信小程序】二维数组列表渲染
微信小程序官方文档主要是一维数组列表渲染的案例: Page({items: [{message: 'foo',},{message: 'bar'}] }) <view wx:for=" ...
- 自学js第六天:JS数组和算法
JS数组 PS; 数组下标,超过内容实际长度, 则返回undefined 从数组中pop/shift删除的元素(当数组删光了,则返回undefined). function函数没有return返回值时 ...
- JS数组转字符串(3种方法) arrays.join(“-“)把数组使用-分割为字符串
JS数组转字符串(3种方法) JavaScript 允许数组与字符串之间相互转换.其中 Array 方法对象定义了 3 个方法,可以把数组转换为字符串,如表所示. Array 对象的数组与字符串相互转 ...
- JS数组添加元素的三种方法
JS数组添加元素的三种方法 1.push() 方法可以向数组末尾添加一个或多个元素,并且返回新的长度 语法:arr.push(element1,element2,element3,····) 参数 概 ...
- JS数组、对象、字符串常用方法汇总
JS数组.对象.字符串常用方法汇总 前言 数组常用方法 Array.prototype.slice(start, end) Array.prototype.map() Array.prototype. ...
- html js 数组添加,js数组添加数据
我们在学习python的过程中,会对列表.字符串添加数据.在Javascript中,我们也会对数组添加数据.在不同的位置添加数据有着不同的方法.本文介绍js数组添加数据的三种方法:1.结尾添加push ...
最新文章
- 二叉树的建立与遍历_51、二叉树遍历-重建二叉树JZ4
- NUMTRYE - Number Theory (Easy)
- email邮件中 内嵌iframe_Python+Selenium执行结果,封装函数,用Python自动发送SMTP邮件...
- openvswitch patch port使用方法
- 【Python3网络爬虫开发实战】1.4.2-MongoDB安装
- 数字int转换成文字string形式的方法
- 嵌入式系统开发之中断控制的实现
- 计算机exsl表f4代表锁定,Excel中F4技巧,相对引用、绝对引用和混合引用
- KDD CUP 99 数据集解析、挖掘与下载
- 网页计算机谈音乐,如何用windows电脑录制网页上或电脑中自己的音乐
- Sping IOC 理解(转)
- rtsp 华为_【V哥漫画安防】华为摄像机RTSP流常见问题解答
- 收楼了心情忐忑不安,该花钱请验房师来验房吗?找一个验房师需要多少钱,验房标准价格是多少,验房师现场验收出二百多个问题值不值
- mysql update set_mysql update语句的用法详解
- “一键GHOST”系统备份与恢复 一键GHOST使用方法 - 绿色软件联盟 - 绿色免费共享
- 1.HTML+CSS3 —— To:Kobe——彩虹渐变
- 钙钛矿量子点异质CdSe/CdS/核-壳结构和MAPbI3/PbS晶体结构
- 联想财报里的伏笔:智能化制造迎来新一轮发展契机
- AMC8-2020pronlem25矩形正方形拼接问题
- 我的硬盘居然被win10安装工具_云骑士新版硬盘安装win10系统