当前位置：首页 > news >正文

ES6的数组方法详解（ES5新增）

news 来源：原创 2024/4/28 21:02:53

ES6的数组方法

ES5定义了六个新的数组方法来遍历，映射，过滤，简化和搜宿舍数组

1.forEach()

forEach()方法从头至尾遍历数组，为每个元素调用指定的函数，它有三个参数：数组元素、元素的索、数组本身

var data = [1,2,3,4,5]
var sum = 0
data.forEach(function(val){
	sum += value
})
sum //15
data.forEach(function(v,i,a){
	a[i] = v + 1
})
data // [2,3,4,5,6]

2.map（）

map()方法将调用的数组的每个元素传递给指定的函数，并返回一个数组，它包含该返回值【传递给map的函数应该有返回值。map返回的新数组，他不修改调用的数组】

var a = [1,2,3]
var b = a.map(function(j){
	return x*x
})
data //[1,4,9]

3.filter（）

filter()返回的数组元素是调用数组的一个子集。传递的函数是用来逻辑判定的：该函数的返回true或false。如果返回值是true,那么传递给判定函数的元素就是个子集的成员，它将被叫到一个返回值的数组中

var a = [5,4,3,2,1]
var arr  = a.filter(function(x){
	return x < 3
)
arr //[2,1]
var array  = a.filter(function(x.j){
	//x为每个元素
	//i为该元素的下标
	return i % 2 == 0
})
array //[5,3,1]

4.every()

是对数组元素应用指定的函数进行判断，返回true或false
every()针对所有的意思吧，当且仅当针对数组所有元素调用判定函数都返回true，它才返回true

var a = [1,2,3,4,5]
a.every(function(x){return x < 10}) // true
a.every(function(j){return x % 2 ==== 0}) //false

5.some()

和every()一样是对数组元素应用指定的函数进行判断，返回true或false
"存在"的意思，当数组中至少有一个元素调用判断返回true，他就返回true；当且仅当数值中所有元素中所有的元素调用判断函数都返回false，它才返回false

var a = [1,2,3,4,5]
a.some(funciton(x){return x % 2 === 0}) //true
a.some(isNaN) //false:a不包含非数值元素

注意：一旦every()和some()确认范围什么值他们就会停止遍历数组元素。
some()在判断函数第一次返回true后就返回true，但如果判断函数一直返回false，他将会遍历整个数组
every()恰好相反：他在判断函数第一次返回falsej就会返回false,但如果判断函数一直返回true，他将会遍历整个数组

6.indexOf()和lastIndexOf()

他们搜索整个数组中具有给定值得元素，返回找到的第一个元素的索引或者没有找到就返回-1。indexOf()从头至尾搜索，而lastIndexOf()则反向搜索。
它们不接受一个函数作为其参数。第一个参数是需要搜索的值。第二个参数是可选的的：它指定数组中的一个索引，从哪里开始搜索，第二个参数，可以为负数，它代表相对数组末尾的偏移量。

a = [0,1,2,1,0]
a.indexOf(1) //1
a.lastIndexOf(1) //3
a.indexOf(3) // -1

兼容旧环境（Polyfill）

map 是在最近的 ECMA-262 标准中新添加的方法；所以一些旧版本的浏览器可能没有实现该方法。在那些没有原生支持 map 方法的浏览器中，你可以使用下面的 Javascript 代码来实现它。所使用的算法正是 ECMA-262，第 5 版规定的。假定Object, TypeError, 和 Array 有他们的原始值。而且 callback.call 的原始值也是 Function.prototype.call

// 实现 ECMA-262, Edition 5, 15.4.4.19
// 参考: http://es5.github.com/#x15.4.4.19
if (!Array.prototype.map) {
  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(" this is null or not defined");
    }

    // 1. 将O赋值为调用map方法的数组.
    var O = Object(this);

    // 2.将len赋值为数组O的长度.
    var len = O.length >>> 0;

    // 3.如果callback不是函数,则抛出TypeError异常.
    if (Object.prototype.toString.call(callback) != "[object Function]") {
      throw new TypeError(callback + " is not a function");
    }

    // 4. 如果参数thisArg有值,则将T赋值为thisArg;否则T为undefined.
    if (thisArg) {
      T = thisArg;
    }

    // 5. 创建新数组A,长度为原数组O长度len
    A = new Array(len);

    // 6. 将k赋值为0
    k = 0;

    // 7. 当 k < len 时,执行循环.
    while(k < len) {

      var kValue, mappedValue;

      //遍历O,k为原数组索引
      if (k in O) {

        //kValue为索引k对应的值.
        kValue = O[ k ];

        // 执行callback,this指向T,参数有三个.分别是kValue:值,k:索引,O:原数组.
        mappedValue = callback.call(T, kValue, k, O);

        // 返回值添加到新数组A中.
        A[ k ] = mappedValue;
      }
      // k自增1
      k++;
    }

    // 8. 返回新数组A
    return A;
  };      
}