汇总 数组方法
es5
concat() 衔接数组(原数组不变)
将参数衔接到数组中,并返回衔接后新的数组
概要:arr.concat(value,...) or arr.concat(arr2,...)
例:
var a = [ 1 , 2 , 3];
a.concat(4,5); // [1,2,3,4,5]
a.concat([4,5]); //[1,2,3,4,5]
a.concat([4,5],[6,7]); //[1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]]); //[1,2,3,4,5,[6,7]]
every() 测试数组中是否每个元素都为真(符合函数的条件)
例:
将每个数组元素代入函数中判断,并返回布尔值,若都为真,返回true,只要一个不为真则返回false
概要:arr.every(function(arr[i],i,arr){return 判断条件 });
例:
var a = [ 1 , 2 , 3];
a.every(function(x){return x<5}); // true
a.every(function(x){return x<3}); //false
注:空数组总返回true;
some() 测试数组中是否某个元素都为真(符合函数的条件)
例:
将每个数组元素代入函数中判断,并返回布尔值,若某个元素为真,返回true,若都不为真则返回false
概要:arr.some(function(arr[i],i,arr){return 判断条件 });
例:
var a = [ 1 , 2 , 3];
a.every(function(x){return x>5}); // false
a.every(function(x){return x<3}); //true
注:空数组总返回false;
filter() 测试数组中是否每个元素为真(符合函数的条件),并返回为真的元素的数组
将数组元素带入函数中判断,若为真则放入一个新的数组,循环结束后返回这个新的数组
概要:arr.filter(function(arr[i],i,arr){return 判断条件 });
例:
var a = [ 1 , 2 , 3];
a.filter(function(x){return x<3}); //[1,2]
forEach() 让每一个数组元素都调用一次函数(f(arr[i],i,arr))(改变原数组)
将每个数组元素分别代入函数中(无返回值)
概要:arr.forEach(function(arr[i],i,arr){ });
例:
var a = [ 1 , 2 , 3];
a.forEach(function(x,i,a){a[i]++}); // a变成[2,3,4]
indexOf() 查找数组中是否含有查找的这个值
对数组进行查找,有则返回元素位置,无返回-1
概要:arr.indexOf(value,start);(start 不填默认为0)
例:
var a = [ 1 , 2 , 3];
a.indexOf(1); // 0
a.indexOf(4); // -1
a.indexOf(1,1); // -1
lastIndexOf() 从数组最后开始查找数组中是否含有查找的这个值
对数组进行反向查找,有则返回元素位置,无返回-1
概要:arr.lastIndexOf(value,start);(start 不填默认为最后一个数组元素)
例:
var a = [ 1 , 2 , 3];
a.indexOf(1);
a.indexOf(4); // -1
a.indexOf(3,1); // -1
a.indexOf(1,1); // 0
join() 将数组元素衔接为字符串(与string.split()相反)
将数组元素通过特定字符(不填默认为“ , ”)衔接为字符串
概要:arr.join(sep);(sep不填默认为英文逗号 ,)
例:
var a = [ 1 , 2 , 3];
a.join("+"); // "1+2+3"
a.join(); // "1,2,3"
map() 从数组元素中计算新值 (原数组不变)
将数组元素通过函数运算得到新的数组,并返回这个新数组
概要:arr.map(function(arr[i],i,arr){ return ? })
例:
var a = [ 1 , 2 , 3];
a.map(function(x){return x*x}); // [1,4,9]
a.map(function(x){if(x>1){return x;}}); // [undefined, 2, 3]
pop() 删除并返回数组最后一个元素 (改变原数组)
将数组最后一个元素删除并返回这个元素
概要:arr.pop( )
例:
var a = [ 1 , 2 , 3];
a.pop(); // 3
push() 给数组追加元素 (改变原数组)
在数组最后添加元素返回组合后数组的长度
概要:arr.push( value,... )
例:
var a = [ 1 , 2 , 3];
a.push(4); // 4
shift() 删除并返回数组第一个元素 (改变原数组)
将数组第一个元素删除并返回这个元素
概要:arr.shift( )
例:
var a = [ 1 , 2 , 3];
a.shift(); // 1
unshift() 在数组头部插入元素 (改变原数组)
将数组第一个元素前插入并返回这个新数组的长度
概要:arr.unshift(value,... )
例:
var a = [ 1 , 2 , 3];
a.unshift(4); // 4....a=[4,1,2,3]
reduce() 从数组中计算出一个值 (原数组不变)
从数组中计算出一个值
概要:arr.reduce( func(preV,curV,index,arr){return ?;} )
例:
var a = [ 1 , 2 , 3];
a.reduce(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
}); // 6
reduceRight() 从数组右侧开始计算出一个值 (原数组不变)
在从数组右侧开始计算出一个值
概要:arr.reduceRight( func(preV,curV,index,arr){return ?;} )
例:
var a = [ 1 , 2 , 3];
a.reduceRight(function(previousValue, currentValue, index, array){
return previousValue + currentValue;
}); // 6
reverse() 数组倒序 (改变原数组)
把数组元素倒序
概要:arr.reverse( )
例:
var a = [ 1 , 2 , 3];
a.reverse(); // [3,2,1]
slice() 返回数组一部分 (原数组不变)
返回数组的一部分
概要:arr.slice( start,end )
例:
var a = [ 1 , 2 , 3];
a.slice(0,1); // [1]
sort() 数组排序 (改变原数组)
把数组元素排序
概要:arr.sort() arr.sort( func )
例:
var a = [ 1 , 3 , 2];
a.sort(function(a,b){return a- b}); // [1,2,3]
splice() 插入、删除、替换数组元素 (改变原数组)
把数组元素删除,返回删除的元素,若删除个数为0,val有值,则插入val元素,若删除个数不为0且val有值,则先删除再插入元素
概要:arr.splice( start,deleteCount,val,...)
例:
var a = [ 1 , 2 , 3,4,5];
a.splice(1,2); // [2,3] ; a=[1,4,5]
es6
from() 转换数组
用于将两类对象转换成真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括ES6新增的数据结构Set和Map)。
let arrayLike ={'0':'a','1':'b','2':'c',
length:3};
// ES5的写法
var arr1 =[].slice.call(arrayLike); // ['a', 'b', 'c']
// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
实际应用中,常见的类似数组的对象是DOM操作返回的NodeList集合,以及函数内部的arguments
对象。Array.from
都可以将它们转为真正的数组。
// NodeList对象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function(p){
console.log(p);});
// arguments对象
functionfoo(){var args = Array.from(arguments); // ...
}
上面代码中,querySelectorAll
方法返回的是一个类似数组的对象,只有将这个对象转为真正的数组,才能使用forEach
方法。
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet =newSet(['a','b'])
Array.from(namesSet) // ['a', 'b']
字符串和Set结构都具有Iterator接口,因此可以被Array.from
转为真正的数组。
扩展运算符(...
)也可以将某些数据结构转为数组。
// arguments对象
functionfoo(){var args =[...arguments];}
// NodeList对象
[...document.querySelectorAll('div')]