ES6中对Array增添了一些新方法,便于我们对一些功能的开发。这些方法中有一些兼容性不错的方法已经可以用了。但是应用率还比较低。今天整理了一些这些兼容性尚可的Array新方法,以及其作用和使用方法。对于一些目前支持性差的方法撇去没有列出来。内容是从MDN官网翻译过来,并自己进行实验验证后整理出来的。英文好的童鞋有兴趣的话可以去MDN查看完整的英文文档。只是MDN属于国外网址,访问起来速度有点慢,为什么慢你懂得。
forEach()方法对Array数组对象的每一个元素执行给定的回调函数
var arr=["a","b","c"]; arr.forEach(function(val){ console.log(val); }); //a //b //c
forEach(callbck(val,index),[thisArg]);
forEach接受两个参数,第一个是回调函数,第二个是将作为回调中this对象的对象。有点拗口,写个例子看一下就明白了。
var arr=["a","b","c"]; var arg="mooshine"; arr.forEach(function(val,index){ console.log(this+":"+val+":"+index); },arg);
运行结果如下:
如果没有传入arg参数,那么this对象是undefined。
这里顺道提一句ES6的两个变量定义:let,const:
let定义一个局部变量,const定义一个局部常量。
let str="mooshine"; const name="sunshine"; //常量不能改变,会报错。 name="stars";
let,const在PC端的IE11+的兼容性可以,但是在移动端目前兼容性不咋地,不建议使用,还是使用我们可爱的“var”变量吧。知道有两个新变量定义,以后见了能认识就行。
forEach的兼容性如下图:
并且移动端都支持,在移动端开发或者不考虑IE8的基础上可以放心使用该方法。
Array.isArray()方法判断一个对象是否是Array。
Array.isArray([1, 2, 3]); // true Array.isArray({foo: 123}); // false Array.isArray("foobar"); // false Array.isArray(undefined); // false
兼容性如下:
通过给定的函数过滤array对象,返回过滤后的数组。
function isBigEnough(value) { return value >= 10; } var filtered = [12, 5, 8, 130, 44].filter(isBigEnough); // filtered is [12, 130, 44]
filter()方法的回调函数接受三个参数:
element:数组过滤中的对象。
index:数组过滤中的序号。
Array:过滤的数组对象。
filter()方法跟forEach一样也可以传递第二个参数作为回调的this对象。
filter()方法兼容性同isArray()方法,兼容良好,可以使用。
map()方法通过给定的回调函数对每个数组元素进行处理后的新数组。
var numbers = [1, 5, 10, 15]; var roots = numbers.map(function(x){ return x * 2; }); // roots is now [2, 10, 20, 30] // numbers is still [1, 5, 10, 15]
map方法定义为:
Array.map(callback(element,index,array),[thisArg]);
callback回调接收三个参数,分别是元素,序号,数组。thisArg是回调函数中的this对象。跟forEach的参数一样。
reduce方法通过累加器处理数组中的每一个元素。(从左向右遍历)
Array.reduce(callback(accumulator,value,index,array),initialvalue);
参数解释:
accumulator:累加器对象或者由initialvalue初始化的值。
value:数组元素的值。
index:数组元素的序号。
array:数组对象。
initialvalue:用来初始化累加器的对象。
示例:
var sum = [0, 1, 2, 3] sum.reduce(function(a, b) { return a + b; }, 0); // sum is 6 var flattened = [[0, 1], [2, 3], [4, 5]]; flattened .reduce(function(a, b) { return a.concat(b); }, []); // flattened is [0, 1, 2, 3, 4, 5]
此方法用于把数组的元素对一个initialvalue对象进行作用。
兼容性同上。
遍历判断数组中的每一个元素是否都符合给定的测试回调函数。
function isBigEnough(element, index, array) { return element >= 10; } [12, 5, 8, 130, 44].every(isBigEnough); // false [12, 54, 18, 130, 44].every(isBigEnough); // true
返回结果为true 或者false,用于判断数组中每一个元素是否都符合某个条件。
方法参数声明:
Array.every(callback(element,index,array,),[thisArg]);
参数意思同上个方法。
兼容性同上个方法。
遍历数组中的元素,并且使用累加器进行计算。功能,参数同Array.reduce()方法。只是遍历方向是从右向左遍历,方向正好相反。
兼容性同上。
两个方法用来判断一个元素在数组中的位置。如果没有匹配上,则返回-1.
indexOf()是第一次出现的序号,
lastIndexOf()是最后一次出现的序号。
跟String方法中的indexOf,lastIndexOf方法类似。
var a = [2, 9, 9]; a.indexOf(2); // 0 a.indexOf(7); // -1 var numbers = [2, 5, 9, 2]; numbers.lastIndexOf(2); // 3 numbers.lastIndexOf(7); // -1
此方法兼容性同上。也可以酌情使用。
判断数组中是否有元素能满足给定回调函数的测试条件。跟every()方法呼应。
function isBiggerThan10(element, index, array) { return element > 10; } [2, 5, 8, 1, 4].some(isBiggerThan10); // false [12, 5, 8, 1, 4].some(isBiggerThan10); // true
every方法是所有元素都满足测试条件才返回true,some方法是只要有一个元素满足测试条件就返回true。
兼容性同上。
数组排序,会改变原数组内容。
Array.sort([compareFunction]);
sort()方法可以接受一个比较函数,如果没有比较函数,那么会按照unicode编码从小到大排序。
var numbers = [4, 2, 5, 1, 3]; numbers.sort(function(a, b) { return a - b; }); console.log(numbers); // [1, 2, 3, 4, 5]
其中a,b是两个要比较的元素。
如果返回值<0,则a在前面,
如果返回=0,不变化。
如果返回>0,则b在前面。