软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> JavaScript常用对象Array(2) -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

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

  2016-04-03 20:42:45

  • 数组的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"]以及一个函数。
以上代码输出如下:

数组切分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);
}   

输出:

我们可以看到,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);
}

输出:

插入指定项


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

输出:

此时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);

得到以下输出:

  • 如果我们要检测是否数组的每一项都满足某种条件可以使用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);

得到以下输出:

上一篇文章      下一篇文章      查看所有文章
2016-04-03 20:42:32  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 人民的名义 人民的名义在线看 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图
中国文化英文 多播视频 装修知识库
2017-4-25 3:06:46
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --