首页 > 代码库 > JavaScript经常使用对象Array(2)

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赋予我们的自由,可是怎样利用好这一点并不easy。

须要注意的是,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);

得到下面输出:

技术分享

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

JavaScript经常使用对象Array(2)