淘先锋技术网

首页 1 2 3 4 5 6 7

js 数组常用方法

  • join()  --  数组转字符串

        join() 方法用于把数组中的所有元素放入一个字符串，默认逗号为分隔符。

  语法：

arr.join(separator);
//可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

<script type="text/javascript">

var arr = [1,2,3];

document.write(arr.join());//1,2,3
document.write(arr.join(":"));//1:2:3
document.write(arr.join("-"));//1-2-3
//重复字符串
function repeatstr(str,n){
 return new Array(n + 1).join(str);//新建数组，[ , , ],把 “，” 替换成str
}
document.write(repeatStr("ti",2));//titi
</script>
  • push()和pop()

push()：方法可向数组的末尾添加一个或多个元素，并返回新的长度。

pop()：方法用于删除并返回数组的最后一个元素。

var arr = ["1","2","3"];
var newCount = arr.push("4","5");
console.log(newCount);//5 
console.log(arr);//[1,2,3,4,5]
var new2 = arr.pop();
console.log(arr);//[1,2,3,4] 　
console.log(new2);//4 　　　　　　　　　
  • shift() 和 unshift()

shift()：方法用于把数组的第一个元素从其中删除，并返回删除元素的值；如果数组为空则返回undefined

unshift()：方法可向数组的开头添加一个或更多元素，并返回新的长度。

 let arr = [100, 2, 3, 4, 5]
 console.log(arr.shift()) //100
 console.log(arr) //[2, 3, 4, 5] 
 let arr2=[1,2,3,4,5];
 console.log(arr2.unshift(1,2,2));//8
 console.log(arr2);//[1, 2, 2, 1, 2, 3, 4, 5]
  • sort()

sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面，默认排序顺序是根据字符串UniCode码。

  let arr3=[2,3,1,4,1,5];
  console.log(arr3.sort());//[1, 1, 2, 3, 4, 5]
  console.log(arr3);//[1, 1, 2, 3, 4, 5]

说明:

如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。

若 a 等于 b，则返回 0。

若 a 大于 b，则返回一个大于 0 的值。

  var arr4 =[10,5,40,25,1000,1];
  console.log(arr4.sort());//[1, 10, 1000, 25, 40, 5]

上面的代码没有按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数

 function sortNumber(a,b)
 {
  return a - b
 }

var arr5 = [10,5,40,25,1000,1];
console.log(arr5.sort(sortNumber));//[1, 5, 10, 25, 40, 1000]

如果需要通过比较函数产生降序排序的结果，只要交换比较函数返回的值即可：  return b - a

  • reverse()

reverse()：反转数组项的顺序,颠倒数组中元素的顺序(直接改变原数组)。

var arr6=[5,7,3,7,2,8];
console.log(arr6.reverse());//[8, 2, 7, 3, 7, 5]
console.log(arr6);//[8, 2, 7, 3, 7, 5]
  • concat()

concat()：方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

var arr7=[1,3,5,7,9];
console.log(arr7.concat(4,5));//[1, 3, 5, 7, 9, 4, 5]
console.log(arr7);//[1, 3, 5, 7, 9]
var arr8=[6,8];
var arr9=[2,4];
console.log(arr7.concat(arr8,arr9));//[1, 3, 5, 7, 9, 6, 8, 2, 4]
  • slice()

 slice() ：从已有的数组中返回选定的元素，不改变原数组

 slice(start，end) 取数组下标 >=start <end 的数据赋值

start必需。规定从何处开始选取（下标）。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
var arr10 = [1,4,6,8,12];
 console.log(arr10.slice(1)); //[4,6,8,12]
 console.log(arr10);//[1,4,6,8,12] 原数组不变 
 console.log(arr10.slice(0,4)); //[1, 4, 6, 8]
 console.log(arr10.slice(1,-2));// [4, 6]
 console.log(arr10.slice(-5,4));//[1, 4, 6, 8]
 console.log(arr10.slice(-4,-1));//[4, 6, 8]
  • splice()

splice():向/从数组中添加/删除项目，然后返回被删除的项目。

splice(index,howmany,item1,.....,itemX)

参数描述
index必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX可选。向数组添加的新项目。
 var arr11=[1,2,3,4,5,6];
 console.log(arr11.splice(0,1,"tt"));//[1]
 console.log(arr11);//["tt", 2, 3, 4, 5, 6]
 console.log(arr11.splice(2,0,''));//[]
 console.log(arr11);//["tt", 2, "",3, 4, 5, 6]
  • toString()

toString() :把数组转换为字符串，并返回结果。返回值与没有参数的 join() 方法返回的字符串相同

 var arr12=[1,2,3,4,5,6];
 console.log(arr12.toString());//1,2,3,4,5,6
 console.log(arr12);// [1, 2, 3, 4, 5, 6]
  • valueOf()

valueOf() :返回 Array 对象的原始值。

 var arr13=[2,3,4,5,6];
 console.log(arr13.valueOf());// [2, 3, 4, 5, 6]
 console.log(arr13);// [2, 3, 4, 5, 6]
  • indexOf()和 lastIndexOf() （ES5新增）

indexOf(item，start) ：

参数描述
item必须。查找的元素。
start可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。如果在数组中没找到指定元素则返回 -1。

 var arr14=[34,67,77,13,4];
 console.log(arr14.indexOf(13));//3
 console.log(arr14.indexOf(34));//0
 console.log(arr14.indexOf(5));//-1
 console.log(arr14.indexOf('13'));//-1

lastIndexOf() ：返回一个指定的元素在数组中最后出现的位置，从该数组的后面向前查找

 var arr14=[34,67,77,13,4,34];
 console.log(arr14.indexOf(34));//0
 console.log(arr14.lastIndexOf(34));//5
  • forEach() （ES5新增）

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。

注意: forEach() 对于空数组是不会执行回调函数的。

array.forEach(function(currentValue, index, arr), thisValue)
function(currentValue, index, arr)必需。 数组中每个元素需要调用的函数。
函数参数:
参数描述
currentValue必需。当前元素
index可选。当前元素的索引值。
arr可选。当前元素所属的数组对象。
thisValue可选。传递给函数的值一般用 "this" 值。
如果这个参数为空， "undefined" 会传递给 "this" 值
var Arr = [1,4,7,10];
Arr.forEach(function(currentValue, index, arr){
console.log(index+"--"+currentValue+"--"+(arr === Arr));
})
// 输出：
// 0--1--true
// 1--4--true
// 2--7--true
// 3--10--true
  • map() （ES5新增）

map()：指“映射”，方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

语法：array.map(function(currentValue , index , arr){//do something}, thisValue)  

map方法实现数组中每个数求平方：

var arr15 = [1,4,8,10];
var arr16= arr15.map(function(currentValue){
return currentValue*currentValue;
});
console.log(arr16); // [1, 16, 64, 100]
  • filter() （ES5新增）

filter()： “过滤”功能，方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。和filter() 方法类似，jquery中有个 grep()方法也用于数组元素过滤筛选。

语法： array.filter(function(currentValue , index , arr){//do something}, thisValue) 

filter方法实现筛选排除掉所有小于5的元素：

var arr17 = [1,4,6,8,10];
　　var result1 = arr.filter(function(currentValue){
　　　　return currentValue>5;
　　});
　　console.log(result1); // [6, 8, 10]
　　var result2 = arr.filter(function(currentValue){
　　　　return currentValue>"5";
　　});
　　console.log(result2); // [6, 8, 10]

  • every()是对数组中每一项运行给定函数，如果该函数对每一项返回true,则返回true。

    some()是对数组中每一项运行给定函数，如果该函数对任一项返回true，则返回true。

  • every() （ES5新增）

every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

every() 方法使用指定函数检测数组中的所有元素：

  • 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件，则返回 true。

注意： every() 不会对空数组进行检测。

注意： every() 不会改变原始数组。

  • some() （ES5新增）
var arr18 = [ 1, 2, 3, 4, 5, 6 ]; 
console.log( arr18.every( function( item, index, array ){ 
console.log( 'item=' + item + ',index='+index+',array='+array ); 
//item=1,index=0,array=1,2,3,4,5,6
return item > 3; 
}));//false
 
console.log( arr18.some( function( item, index, array ){ 
console.log( 'item=' + item + ',index='+index+',array='+array ); //item=1,index=0,array=1,2,3,4,5,6
//item=2,index=1,array=1,2,3,4,5,6
//item=3,index=2,array=1,2,3,4,5,6
//item=4,index=3,array=1,2,3,4,5,6
    return item > 3; //true
}));

迭代方法

reduce(function(total,currentValue, index,arr){...})和reduceRight(function(total,currentValue, index,arr){....})

参数描述
function(total,currentValue, index,arr)必需。用于执行每个数组元素的函数。
函数参数:
参数描述
total必需。初始值, 或者计算结束后的返回值。
currentValue必需。当前元素
currentIndex可选。当前元素的索引
arr可选。当前元素所属的数组对象。
initialValue可选。传递给函数的初始值
var values=[1,2,3,4,5];
var sum=values.reduce(function(prev,cur,index,array){
 return prev + cur;
//第一次 prev=1，cur=2
//第二次 prev=3，cur=3
//第三次 prev=6，cur=4
//第四次 prev=10，cur=5
})
console.log(sum);//15 
var sum2=values.reduce(function(prev,cur,index,array){
 return prev + cur;
//第一次 prev=5，cur=4
//第二次 prev=9，cur=3
//第三次 prev=12，cur=2
//第四次 prev=14，cur=1
})
console.log(sum2);//15