数组的ES5方法(回顾)

迭代方法

注意：ES5 的数组方法均不改变原数组

arr.forEach(callback(currentValue,index,array), thisArg)

定义：遍历数组中的每一项，返回 undefined

参数1：回调函数
currentValue：当前处理元素的值
index：当前处理元素的索引，可选
array：当前数组，可选

参数2：回调函数的this指向，可选

var arr = [1,2,3];
arr.forEach(function(v,i){console.log(v,i,this)},{a:1});// 1 0 {a:1}

扩展：封装forEach

1. 数组原型上的方法(高阶函数)
2. 关于该方法的传参，回调和所指作用域(this指向)
3. 回调函数的传参

Array.prototype.myForEach = function (callback, ctx) {
  ctx = ctx || window;
  var arr = this;
  for (var i = 0; i < arr.length; i++) {
    callback.call(ctx, arr[i], i, arr);
  }
};

arr.map(callback(currentValue,index,array), thisArg)

定义：数组映射，返回映射后的新数组

var arr = [1,2,3];
var res = arr.map(function(v,i){ console.log(v,i,this); return v+1 },{a:1});//1 0 {a:1}
console.log(res);//[2,3,4]

扩展：封装map

Array.prototype.myMap = function (callback, ctx) {
  ctx = ctx || window;
  var arr = this;
  var res = [];
  for (var i = 0; i < arr.length; i++) {
    res.push(callback.call(ctx, arr[i], i, arr));
  }
  return res;
};

arr.filter(callback(currentValue,index,array), thisArg)

定义：把数组中的不成立项过滤，返回过滤后的新数组

var arr = [1,2,3,4]
var res = arr.filter(function(v,i){console.log(v,i,this); return v%2===0},{a:1})
console.log(res);//[2,4]

扩展：封装filter

Array.prototype.myFilter = function (callback, ctx) {
  ctx = ctx || window;
  var arr = this;
  var res = [];
  for (var i = 0; i < arr.length; i++) {
    if (callback.call(ctx, arr[i], i, arr)) {
      res.push(arr[i]);
    }
  }
 return res;
};

arr.some(callback(currentValue,index,array), thisArg)

定义：判断数组中有没至少一项成立，返回布尔值

var arr = [1,2,3]
var res = arr.some((v) => v === 3)
console.log(res);//true

扩展：封装some

Array.prototype.mySome = function (callback, ctx) {
  ctx = ctx || window;
  var arr = this;
  for (var i = 0; i < arr.length; i++) {
    if (callback.call(ctx, arr[i], i, arr)) {
      return true;
    }
  }
  return false;
};

arr.every(callback(currentValue,index,array), thisArg)

定义：判断数组中是否全部项成立，返回布尔值

var arr = [1,2,3]
var res = arr.every((v) => v === 3)
console.log(res);//false

扩展：封装every

Array.prototype.myEvery = function (callback, ctx) {
  ctx = ctx || window;
  var arr = this;
  for (var i = 0; i < arr.length; i++) {
    if (!callback.call(ctx, arr[i], i, arr)) {
      return false;
    }
  }
  return true;
};

缩减方法

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)

定义：缩减函数，接受一个函数作为累加器，数组每个值从左到右缩姐，返回函数累计处理结果

参数1：回调函数
accumulator:累计器累计回调的返回值
currentValue：当前处理元素的值
index：当前处理元素的索引，可选
array：当前数组，可选

参数2：累计器累计回调的初始值

var arr = [1,2,3]
var res = arr.reduce((sum,v) => sum +v,4);
console.log(res);//10

扩展：封装reduce

1. 数组的原型上的方法(高阶函数)
2. 考虑回调函数的传参
3. 关于回调返回的值实现累加

Array.prototype.myReduce = function (callback, total) {
  var arr = this;
  for (var i = 0; i < arr.length; i++) {
    total = callback(total, arr[i], i, arr);
  }
  return total;
};

some，filter和forEach 的区别

forEach，filter 中，return不会终止迭代
some中，return 会终止迭代，可用于优化性能

var arr = ["red", "green", "blue", "pink"];
arr.some((v) => {
  if (v === "green") {
    console.log(11);
    return 1;
  }
  console.log(v);
});