ES5 和 ES6 数组遍历方法的使用与实现

常见的数组遍历方法

普通 for 语句
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.some
Array.prototype.every
Array.prototype.indexOf
Array.prototype.lastIndexOf
find，findIndex()
for...of 语句
entries()，keys() 和 values()

普通 for 语句

var a = [1, 2, 3];
for (var i = 0; i < a.length; i++) {
  console.log(a[i]);
}
// 输出
// 1,2,3

// 普通for语句倒着遍历
var a = [1, 2, 3];
for (var i = a.length; i--; ) {
  console.log(a[i]);
}
// 输出
// 3,2,1

// 普通for语句性能优化
// 只获取数组长度一次
// 所以a.push(2)不会影响遍历时的数组长度，相反如果用第一个for循环，每次都要获取到数组长度
var a = [1, 2, 3];
for (var i = 0, len = a.length; i < len; i++) {
  console.log(a[i]);
  a.push(2);
}

forEach

可以看出，forEach 的本质还是普通 for 循环，value,key,arr 三个值是由回调函数提供的，forEach 是无法 return 的，因为是回调函数，就只在回调函数中 return 了

forEach 如何使用

var a = [1, 2, 3];
a.forEach(function(value, key, arr) {
  console.log(value);
  console.log(key);
  console.log(arr);
});
// 输出
// 1,2,3
// 0,1,2
// [1, 2, 3]

forEach 的实现

Array.prototype.forEachCopy = function(callback) {
  var arr = this;
  for (var i = 0; i < arr.length; i++) {
    callback(arr[i], i, this);
  }
};
var a = [1, 2, 3];
a.forEachCopy(function(value, key, arr) {
  console.log(value);
  console.log(key);
  console.log(arr);
});
// 输出
// 1,2,3
// 0,1,2
// [1, 2, 3]

map

map 与 forEach 的区别是：map 可以改变当前循环的值，最终返回一个改变过值的数组，所以 map 用来处理修改数组中每一个元素的值

map 的使用

var a = [1, 2, 3];
var b = a.map(function(value, key, arr) {
  console.log(value);
  console.log(key);
  console.log(arr);
  return value + 1;
});
console.log(a);
console.log(b);
// 输出
// 1,2,3
// 0,1,2
// [1, 2, 3]
// [1, 2, 3]
// [ 2, 3, 4 ]

map 的实现

Array.prototype.mapCopy = function(callback) {
  var arr = this;
  var arrCopy = [];
  for (var i = 0; i < arr.length; i++) {
    var cbValue = callback(arr[i], i, this);
    arrCopy.push(cbValue);
  }
  return arrCopy;
};
var a = [1, 2, 3];
var b = a.mapCopy(function(value, key, arr) {
  console.log(value);
  console.log(key);
  console.log(arr);
  return value + 1;
});
// console.log(a);
// console.log(b);

filter

filter 目的是为了过滤值，retrun false 是为了过滤值

filter 的使用

var a = [1, 2, 3];
var b = a.filter(function(value, key, arr) {
  console.log(value);
  console.log(key);
  console.log(arr);
  if (value === 3) {
    return false;
  }
  return true;
});
console.log(a);
console.log(b);
// 输出
// 1,2,3
// 0,1,2
// [1, 2, 3]
// [1, 2, 3]
// [2,3]

filter 的实现

Array.prototype.filterCopy = function(callback) {
  var arr = this;
  var arrCopy = [];
  for (var i = 0; i < arr.length; i++) {
    var cbValue = callback(arr[i], i, this);
    if (cbValue) {
      arrCopy.push(arr[i]);
    }
  }
  return arrCopy;
};
var a = [1, 2, 3];
var b = a.filterCopy(function(value, key, arr) {
  console.log(value);
  console.log(key);
  console.log(arr);
  if (value === 3) {
    return false;
  }
  return true;
});
console.log(a);
console.log(b);
// 输出
// 1,2,3
// 0,1,2
// [1, 2, 3]
// [1, 2, 3]
// [2,3]

reduce

reduce 目的是累加

arr.reduce(callback,[initialValue])

callback：执行数组中每个值的函数，包含四个参数

previousValue：上一次调用回调返回的值，或者是提供的初始值（initialValue）

currentValue：数组中当前被处理的元素

index：当前元素在数组中的索引

array：调用 reduce 的数组

initialValue：作为第一次调用 callback 的第一个参数

reduce 的使用

var a = [1, 2, 3];
var b = a.reduce(function(count, value, key, arry) {
  console.log(count);
  console.log(value);
  console.log(key);
  console.log(arry);
  return count + value;
}, 0);
console.log(a);
console.log(b);
// 输出
// 0，1，3
// 1，2，3
// 0，1，2
// [1,2,3]

reduce 的实现

Array.prototype.reduceCopy = function(callback, countInit) {
  var arr = this;
  for (var i = 0; i < arr.length; i++) {
    var cbValue = callback(countInit, arr[i], i, this);
    countInit = cbValue;
  }
  return countInit;
};
var a = [1, 2, 3];
var b = a.reduceCopy(function(count, value, key, arry) {
  console.log(count);
  console.log(value);
  console.log(key);
  console.log(arry);
  return count + value;
}, 0);
console.log(a);
console.log(b);
// 输出
// 0，1，3
// 1，2，3
// 0，1，2
// [1,2,3]

使用 reduce 将数组转换成对象，并将数组对象的 id 作为新对象的 key

let list = [
  {
    id: 1000,
    name: "koa"
  },
  {
    id: 5,
    name: "express"
  },
  {
    id: 20,
    name: "egg"
  }
];
function spreadArray(arr, isSort, sortName, sortType) {
  if (isSort && sortName && sortType) {
    // 默认是升序
    var sortBy = function(propery, type) {
      type = type ? type : 1;
      var fn = function(obj1, obj2) {
        if (obj1[propery] > obj2[propery]) {
          return 1 * type;
        } else if (obj1[propery] === obj2[propery]) {
          return 0 * type;
        } else {
          return -1 * type;
        }
      };
      return fn;
    };
    arr = arr.sort(sortBy(sortName, sortType));
  }
  // reduce的第二个参数初始了回调函数第一个参数的类型和值
  // 因为chrome自己会对key升序，所以加一个'*',最后显示的时候记着split掉就行
  let res = arr.reduce(function(res, cur) {
    return Object.assign({ ...res }, { [cur.id + "*"]: cur });
  }, {});
  return res;
}
var result = spreadArray(list, true, "id", -1);
console.log(result);
// 不排序结果
// 1000*: {id: 1000, name: "koa"}
// 5*: {id: 5, name: "express"}
// 20*: {id: 20, name: "egg"}
// 排序结果
// 1000*: {id: 1000, name: "koa"}
// 20*: {id: 20, name: "egg"}
// 5*: {id: 5, name: "express"}

some

返回有满足条件的元素之前的元素

some 的使用

var a = [1, 2, 3];
var b = a.some(function(value, key, arry) {
  console.log(value);
  console.log(key);
  console.log(arry);
  return value === 2;
});
console.log(a);
console.log(b);
// 输出
// 1，2
// 0，1
// [1,2,3]
// [1,2,3]
// true

some 的实现

Array.prototype.someCopy = function(callback, countInit) {
  var arr = this;
  var isBool = false;
  for (var i = 0; i < arr.length; i++) {
    var cbValue = callback(arr[i], i, this);
    if (cbValue) {
      isBool = true;
      return isBool;
    }
  }
  return isBool;
};
var a = [1, 2, 3];
var b = a.someCopy(function(value, key, arry) {
  console.log(value);
  console.log(key);
  console.log(arry);
  return value === 2;
});
console.log(a);
console.log(b);
// 输出
// 1，2
// 0，1
// [1,2,3]
// [1,2,3]
// true

every

every 测试数组中所有元素是否都满足 retrun 的条件,如果不满足，就返回不满足之前的元素，包括这个不满足的元素

every 的使用

var a = [1, 2, 3];
var b = a.every(function(value, key, arry) {
  console.log(value);
  console.log(key);
  console.log(arry);
  return value === 1;
});
console.log(a);
console.log(b);
// 输出
// 1,2
// 0,1
// [1,2,3]
// [1,2,3]
// false

every 的实现

Array.prototype.everyCopy = function(callback) {
  var arr = this;
  var isBool = true;
  for (var i = 0; i < arr.length; i++) {
    var cbValue = callback(arr[i], i, this);
    if (cbValue) {
      isBool = false;
      return isBool;
    }
  }
  return isBool;
};
var a = [1, 2, 3];
var b = a.everyCopy(function(value, key, arry) {
  console.log(value);
  console.log(key);
  console.log(arry);
  return value === 1;
});
console.log(a);
console.log(b);
// 输出
// 1,2
// 0,1
// [1,2,3]
// [1,2,3]
// false

indexOf

indexOf 是从前往后找

indexOf 的使用

var a = [1, 2, 3];
var b = a.indexOf(2);
console.log(a);
console.log(b);
// 输出
// [1,2,3]
// 1

indexOf 的实现

Array.prototype.indexOfCopy = function(value) {
  var arr = this;
  var index = -1;
  for (var i = 0; i < arr.length; i++) {
    if (arr[i] === value) {
      index = i;
      return index;
    }
  }
  return index;
};
var a = [1, 2, 3];
var b = a.indexOfCopy(2);
console.log(a);
console.log(b);
// 输出
// [1,2,3]
// 1

lastIndexOf

lastIndexOf 是从后往前找

lastIndexOf 的使用

var a = [1, 2, 3, 1];
var b = a.lastIndexOf(1);
console.log(a);
console.log(b);
// 输出
// [1, 2, 3, 1]
// 3

lastIndexOf 的实现

lastIndexOf 是从后往前找

Array.prototype.lastIndexOf = function(value) {
  var arr = this;
  var index = -1;
  for (var i = arr.length; i--; ) {
    if (arr[i] === value) {
      index = i;
      return index;
    }
  }
  return index;
};
var a = [1, 2, 3, 1];
var b = a.lastIndexOf(1);
console.log(a);
console.log(b);
// 输出
// [1, 2, 3, 1]
// 3

find

find 返回第一个满足指定条件的值

find 的使用

console.log([1, 4, -5, 10].find((n) => n < 0));
// 输出
// -5

find 的实现

Array.prototype.findCopy = function(callback) {
  for (var i = 0; i < this.length; i++) {
    if (callback(this[i])) {
      return this[i];
    }
  }
  return null;
};

findIndex 的使用

find 返回第一个满足指定条件的值的索引

findIndex 的使用

console.log([1, 4, -5, 10].findIndex((n) => n < 0));
// 输出
// 2

findIndex 的实现

Array.prototype.findIndexCopy = function(callback) {
  for (var i = 0; i < this.length; i++) {
    if (callback(this[i])) {
      return i;
    }
  }
  return null;
};

for...of 语句

for...of 语句是 es6 的遍历数组的新方法

// for of普通遍历
var a = [1, 2, 3];
for (var value of a) {
  // console.log(value) // 结果依次为1，2，3
}
// for of获取key值
for (let [index, value] of arr.entries()) {
  console.log(index, value);
}

keys()、values()和 entries()

keys()

var a = [1, 2, 3];
for (let index of ["a", "b"].keys()) {
  console.log(index);
}
// 输出
// 0
// 1

values()

var a = [1, 2, 3];
for (let elem of ["a", "b"].values()) {
  console.log(elem);
}
// 输出
// 'a'
// 'b'

entries()

var a = [1, 2, 3];
for (let [index, elem] of ["a", "b"].entries()) {
  console.log(index, elem);
}
// 输出
// 0 "a"
// 1 "b"