软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> JavaScript常用对象Array(2) -> 正文阅读

[Web前端]JavaScript常用对象Array(2)


  • 数组的join方法
  • 数组拼接concat方法
  • 数组切分slice方法
  • 强大的splice方法
  • indexOf以及lastIndexOf方法
  • 几种常用的迭代方法

数组的join方法


我们知道,数组的toString()以及toLocaleString()方法会返回以逗号分隔的数组字符串。但是如果我们希望分隔符不是单一的逗号,我们可以选择使用join()方法。join()方法可以接受一个参数,这个参数就是我们希望的分隔符,例如:
var colors = ["red", "blue", "white"];
alert(colors.join("?"));

会得到:
red?blue?white

如果你没有指定join()方法的参数:
alert(colors.join());

此时会默认使用逗号作为分隔符:
red,blue,white

数组拼接concat方法


我们知道在字符串的操作方法中,有用于字符串拼接的concat()方法,在数组中同样有该方法用于数组的拼接。
JS与Java等语言一个显著的不同在于,Java等语言在调用一个函数的时候,传入函数的参数必须严格与事先创建的函数签名一致。而在JS中,解析器不仅不会去查验传入参数的数据类型,甚至连传进来参数有几个都不管。在使用concat()方法的时候,我们可以:
传入一个或多个数组作为参数,concat()方法会首先创建一个原数组的副本,然后将作为参数传入的数组依次添加在新数组末尾,最后返回该副本。
传入一个或多个非数组值作为参数,concat()方法同样会首先创建一个原数组的副本,然后对该副本进行操作,依次将传入的值添加在该副本末尾然后返回。
传入一个或多个数组、值的组合,操作方法同上。
实际上,JS并不要求传入参数的数据类型、参数个数,同时JS中数组间的元素可以不同。concat()方法其实可以接受一个或多个任意类型的参数实现数组的拼接,虽然很多时候没太大必要这样做。个人认为这是JS赋予我们的自由,但是如何利用好这一点并不容易。
需要注意的是,concat()方法不会修改原始数组,而是创建一个原始数组的副本,对副本进行操作,然后将新的数组作为返回值返回。举个比较极端的例子:
function test() {
  var arr = [];
  var colors = ["red", "blue", "white"];

  var hello = function() {
    alert("hello world!");
  }

  arr = arr.concat(colors, false, 1, undefined, "yellow", ["gray", "black"], hello);
  alert(arr);

}   

以上代码我们使用数组的concat()方法,在空数组arr后面依次拼接了数组colorsBoolean型false数值型1Undefined型,String型yellow数组["gray, "black"]以及一个函数。
以上代码输出如下:
[img]http://7xroh5.com1.z0.glb.clouddn.com/jsArray2-pic1.jpg

数组切分slice方法


slice()方法用于切分出数组指定区间。它可以接受1个或2个参数。这两个参数指定切分的起止位置。
当只传入一个参数时,返回该位置到数组结尾的数组。
当传入两个参数时,放回第一个到第二个参数区间的子数组。(不包含第二个参数位置的元素)
比如说:
function test() {
  var colors = ["red", "blue", "white", "gray", "green", "gold", "orange"];
  var col1 = colors.slice(2);
  var col2 = colors.slice(1, 4);
  alert(colors + "\n" + col1 + "\n" + col2);
}   

输出:
[img]http://7xroh5.com1.z0.glb.clouddn.com/jsArray2-pic2.jpg
我们可以看到,slice()方法并没有改变原colors数组的值,同时切分出来的数组不包含第二个参数对应的项。
slice()方法传入的参数可以为负数,负数的含义是从末尾开始的偏移量。位置确定的方法是用数组长度和该参数相加。比如当数组长度length为10的情况下,slice(-3,-1)和slice(7, 9)是等价的。
另外需要说明的是,当第二个参数小于第一个参数的时候,该方法将返回一个空数组。

强大的splice方法


splice()方法可以删除数组中指定项,在数组指定位置插入指定项。或者结合删除和插入操作演变为在指定位置替换指定项。

删除指定项


此时splice()方法接受两个参数,第一个参数制定删除的起始位置,第二个参数指定需要删除的项数。该方法返回被删除项组成的数组。如果没有被删除项则返回空数组。
function test() {
  var colors = ["red", "blue", "white", "gray", "green", "gold", "orange"];
  var col1 = colors.splice(1, 3);
  alert(colors + "\n" + col1);
}

输出:
[img]http://7xroh5.com1.z0.glb.clouddn.com/jsArray2-pic3.jpg

插入指定项


要在数组中插入指定项,splice()方法需要接受3个参数,第一个参数指定插入的起始位置,第二个为要删除的个数(我们在这里设为0,即不删除任何项),第三个参数为要插入的项。例如:
function test() {
  var colors = ["red", "blue", "white", "gray", "green"];
  var col1 = colors.splice(1, 0, "brown", "orange");
  alert(colors + "\n" + col1);
}

输出:
[img]http://7xroh5.com1.z0.glb.clouddn.com/jsArray2-pic4.jpg
此时col1为一个空数组。

替换指定项


实际上,在插入指定项的操作中,第二个参数设为非零值即可删除某些项再在该处插入指定项,由此完成替换的功能。

indexOf以及lastIndexOf方法


这两个方法的功能均为在数组中查找指定项的位置。它们都接受1~2个参数。第二个参数是可选的。
其中第一个参数指定需要查找的项,第二个参数指定查找的起始位置。只不过indexOf方法从数组的头向后查找,lastIndexOf方法从数组的尾向前查找。当查找成功时,返回匹配的位置,否则返回-1。
需要强调的是,这里查找成功需要和指定项全等(===)而不是”==”。
举一个简单的例子:
  var colors = ["red", "blue", "gray", "white", "gray", "blue", "red"];
  var ind1 = colors.indexOf("gray");
  var ind2 = colors.indexOf("gray", 3);
  var ind3 = colors.lastIndexOf("gray");
  var ind4 = colors.lastIndexOf("gray", 3);

以上代码,ind1等于2,ind2等于4,ind3等于4,ind4等于2。

几种常用的迭代方法


JS中,有比较方便地实现数组迭代的方法。以下介绍的5种迭代方法均接收1~2个参数。第一个参数指定要在数组每一项上执行的函数,第二个参数非必需,指定运行该函数的作用域对象。其中要作用于数组每一项的函数需要接收3个参数:数组项的值,该项在数组中的位置以及数组本身。说起来很抽象,看下里的例子:
  • 最基本的对数组每一项遍历进行某种操作,我们可以用forEach()方法(类似于很多其他语言中的for循环),该方法没有返回值。如将数组每一项都加1:
var num = [1, 2, 3, 4, 5, 6, 7];
var forfun = function(item, ind, array) {
  array[ind] += 1;
}
var rst = num.forEach(forfun);
alert(num);

得到以下输出:
[img]http://7xroh5.com1.z0.glb.clouddn.com/jaArray2-pic5.jpg
  • 如果我们要检测是否数组的每一项都满足某种条件可以使用every()方法,只有当数组中所有项都满足条件时才会返回ture,否则返回false。
var num = [1, 2, 3, 4, 5, 6, 7];
var everfun = function(item, ind, array) {
  return (item > 3);
}
var rst = num.every(everfun);

以上代码会检测是否数组中每一项都大于3,只有当数组每一项都满足条件时,every()方法才会返回true。显然上例返回false。
  • 如果我们要检测数组中是否存在某些项满足某种条件可以使用some()方法,与every()不同,当数组中存在某些项满足条件时,就会返回true。
var num = [1, 2, 3, 4, 5, 6, 7];
var somefun = function(item, ind, array) {
  return (item > 3);
}
var rst = num.some(somefun);

数组中存在大于3的项,rst值返回true。
  • 如果我们希望过滤出数组中满足某种条件的项,可以使用filter()方法,该方法会返回数组中满足条件的项(返回true的项)组成的新数组。
var num = [1, 2, 3, 4, 5, 6, 7];
var filterfun = function(item, ind, array) {
  return (item > 3);
}
var rst = num.filter(filterfun);
alert(num + "\n" + rst);

会得到以下输出:
1,2,3,4,5,6,7
4,5,6,7
  • 如果我们希望对数组进行某种映射操作,即对数组每一项进行某总操作并返回操作结果,可以使用map()方法。比如我们可以将一个数组映射到是否大于3的真值表中:
var num = [1, 2, 3, 4, 5, 6, 7];
var mapfun = function(item, ind, array) {
  return (item > 3);
}
var rst = num.map(mapfun);
alert(num + "\n" + rst);

得到以下输出:
[img]http://7xroh5.com1.z0.glb.clouddn.com/jsArray2-pic6.jpg
......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-04-03 20:42:32  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture
生肖星座 三丰软件 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-7-24 22:34:15
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --