ES6 中 Array对象的几个可用新方法forEach,map,isArray等的介绍
2017-01-08 01:25

 ES6中对Array增添了一些新方法,便于我们对一些功能的开发。这些方法中有一些兼容性不错的方法已经可以用了。但是应用率还比较低。今天整理了一些这些兼容性尚可的Array新方法,以及其作用和使用方法。对于一些目前支持性差的方法撇去没有列出来。内容是从MDN官网翻译过来,并自己进行实验验证后整理出来的。英文好的童鞋有兴趣的话可以去MDN查看完整的英文文档。只是MDN属于国外网址,访问起来速度有点慢,为什么慢你懂得。

     

@1:Array.forEach()

     forEach()方法对Array数组对象的每一个元素执行给定的回调函数

var arr=["a","b","c"];
arr.forEach(function(val){
    console.log(val);
});
//a
//b
//c
forEach函数的定义是
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);

运行结果如下:

forEach.png

如果没有传入arg参数,那么this对象是undefined。

这里顺道提一句ES6的两个变量定义:let,const:

let定义一个局部变量,const定义一个局部常量。

let str="mooshine";
const name="sunshine";

//常量不能改变,会报错。
name="stars";

let,const在PC端的IE11+的兼容性可以,但是在移动端目前兼容性不咋地,不建议使用,还是使用我们可爱的“var”变量吧。知道有两个新变量定义,以后见了能认识就行。

forEach的兼容性如下图:

forecah.png

并且移动端都支持,在移动端开发或者不考虑IE8的基础上可以放心使用该方法。

@2:Array.isArray()

  Array.isArray()方法判断一个对象是否是Array。

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray("foobar");   // false
Array.isArray(undefined);  // false

兼容性如下:

isArray.png

@3:Array.filter().

 通过给定的函数过滤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()方法,兼容良好,可以使用。


@4:Array.map()

  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的参数一样。


@5:Array.reduce()

  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对象进行作用。

兼容性同上。


@6:Array.every()

   遍历判断数组中的每一个元素是否都符合给定的测试回调函数。

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]);

参数意思同上个方法。

兼容性同上个方法。


@7:Array.reduceRight()

   遍历数组中的元素,并且使用累加器进行计算。功能,参数同Array.reduce()方法。只是遍历方向是从右向左遍历,方向正好相反。

   兼容性同上。


@8:Array.indexOf() , Array.lastIndexOf();

   两个方法用来判断一个元素在数组中的位置。如果没有匹配上,则返回-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

此方法兼容性同上。也可以酌情使用。


@9:Array.some();

   判断数组中是否有元素能满足给定回调函数的测试条件。跟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。

兼容性同上。


@10:Array.sort();此方法属于老方法,但使用的较少,所以列一下使用方法。

  数组排序,会改变原数组内容。

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在前面。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(2464)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1