ES5 的数组常用方法

• map
• some
• every
• filter
• forEach

ES6 新的数组方法

• find
• findIndex
• reduce （收敛 叠加）
• for of

ES7 新的数组方法

• includes 包含

reduce() 使用

• 求数组中的数据之和

/**
 * @reduce 收敛|叠加
 * @prev 当前数据
 * @next 下一个数据
 * @currentIndex 当前执行的下标位置
 * @array 整个数组
 */
let res = [1, 2, 3, 4, 5].reduce((prev, next, currentIndex, array) => {
  return prev + next;
});
console.log(res);
// 15

• 求数组中的所有数据的平均数

/**
 * @reduce 收敛|叠加
 * @prev 当前数据
 * @next 下一个数据
 * @currentIndex 当前执行的下标位置
 * @array 整个数组
 */
let res = [1, 2, 3, 4, 5].reduce((prev, next, currentIndex, array) => {
  console.log(prev, next, currentIndex, array);
  if (array.length - 1 == currentIndex) {
    return (prev + next) / array.length;
  }
  return prev + next;
});
console.log(res);
// 3

• 求对象数组的中某个属性值的和

let total = [{ price: 1000 }, { price: 2000 }, { price: 3000 }].reduce(
  (prev, next, currentIndex, array) => {
    return prev + next.price; //prev 代表每次求和完成之后的数值  next.price 取出下一个元素的price属性的值
  },
  0
); //加一个0 每次取值为数字并且给prev赋值一个默认值为0
console.log(total);
//6000

• 多维数组展平

let res = [
  [2, 3, 6, 48, 6],
  [666, 444, 8788, 4554, 65],
].reduce((prev, next, currentIndex, array) => {
  return [...prev, ...next];
});
console.log(res);
//[ 2, 3, 6, 48, 6, 666, 444, 8788, 4554, 65 ]

reduce() 原理实现

Array.prototype.myReduce = function(fn, prev) {
  //this 代表的是正在进行处理的数组 [1,2,3,4,5]
  for (let i = 0; i < this.length; i++) {
    if (typeof prev === "undefined") {
      //如果初始状态没有prev 就先拿到数组的第一个与第二个元素进行计算
      prev = fn(this[i], this[i + 1], i + 1, this);
      //第一个元素与第二个元素计算完成之后 再将位置后移一位（因为i==0 现在第1个与第2个已经进行了运算，需要跳过第二个）
      ++i;
    } else {
      //如果第一次计算时没有prev，i的值应该为 2（数组的下标位置为2）
      //如果第一次计算有prev，i的值为0，prev直接传到回调方法中进行运算，完成后更新prev的值
      prev = fn(prev, this[i], i, this);
    }
  }
  //所有的计算完成后将最终值返回给myReduce方法
  return prev;
};
let res = [1, 2, 3, 4, 5].myReduce((prev, next, currentIndex, array) => {
  return prev + next;
});
console.log(res);

forEach()使用

let arr = [1, 2, 3, 4];
arr.forEach(item, (index) => {
  console.log(item);
});

forEach() 原理实现

let arr = [1, 2, 3, 4];
Array.prototype.myForEach = function(fn) {
  for (let i = 0; i < this.length; i++) {
    fn(this[i], i);
  }
};
arr.myForEach((item, index) => {
  console.log(item, index);
});

map() 使用

let arr = [1, 2, 3, 4];
// 有返回值 返回值为一个新的数组
let arr1 = arr.map((item, index) => {
  return item * 2;
});
console.log(arr1);

map() 原理实现

let arr = [1, 2, 3, 4];
Array.prototype.myMap = function(fn) {
  let array = [];
  for (let i = 0; i < this.length; i++) {
    array[i] = fn(this[i], i);
  }
  return array;
};
let arr1 = arr.myMap((item, index) => {
  return item * 2;
});
console.log(arr1);

filter() 使用

let arr = [1, 2, 3, 4];
// 有返回值,返回值为一个新的数组  条件为true时留下 条件为false时过滤
let arr1 = arr.filter((item, index) => {
  return item > 2;
});
console.log(arr1);
// [3,4]

filter() 原理实现

let arr = [1, 2, 3, 4];
Array.prototype.myFilter = function(fn) {
  let array = [];
  for (let i = 0; i < this.length; i++) {
    if (fn(this[i], i)) {
      array.push(this[i]);
    }
  }
  return array;
};
let arr1 = arr.myFilter((item, index) => {
  return item > 2;
});
console.log(arr1);
// [3,4]

find() 使用

//有返回值，如果找到对应条件的那个元素直接返回那个元素，如果没有找到就返回 undefined,找到一个满足条件的就不会继续查找了
let arr = [1, 2, 3, 4];
let data = arr.find((item, index) => {
  return item === 2;
});
console.log(data);
// 2

find() 实现原理

let arr = [1, 2, 3, 2];
Array.prototype.myFind = function(fn) {
  let data = undefined;
  for (let i = 0; i < this.length; i++) {
    if (fn(this[i], i)) {
      data = this[i];
      break;
    }
  }
  return data;
};
let data = arr.myFind((item, index) => {
  return item === 3;
});
console.log(data);

some()使用

//有返回值(布尔型 true false)，如果找到对应条件的那个元素直接返回true，如果没有找到就返回 false,找到一个满足条件的就不会继续查找了
let arr = [1, 2, 3, 2];
let data = arr.some((item, index) => {
  return item === 3;
});
console.log(data);
// true

some() 实现原理

let arr = [1, 2, 3, 2];
Array.prototype.mySome = function(fn) {
  let data = false;
  for (let i = 0; i < this.length; i++) {
    if (fn(this[i], i)) {
      data = true;
      break;
    }
  }
  return data;
};
let data = arr.mySome((item, index) => {
  return item === 2;
});
console.log(data);

every() 使用

• every 的结果刚号和 some 相反，找到一个条件不满足的马上返回一个 false,且不继续往后面找

//有返回值(布尔型 true false)，如果找到 不满足条件的那个元素直接返回false，且不继续往后执行，如果一直找不到不满足条件的元素 最终返回true;
let arr = [2, 2, 2, 3]; //  这里数组改为[2,2,2,2]  最后的返回结果为 true
let data = arr.every((item, index) => {
  return item === 2;
});
console.log(data);
// false

every() 原理实现

let arr = [2, 2, 2, 3];
Array.prototype.myEvery = function(fn) {
  let data = true;
  for (let i = 0; i < this.length; i++) {
    if (!fn(this[i], i)) {
      data = false;
      break;
    }
  }
  return data;
};
let data = arr.myEvery((item, index) => {
  return item === 2;
});
console.log(data);

includes() 使用

// 数组是否包含某个值 是包含的就返回true 没有包含就返回false
let arr = [1,2,3,4]
let res = arr.includes(2);
console.log(res)

from()使用

• 将类数组转换为数组
• 常见类数组：htmlCollection (获取Dom节点) arguments[{0:1,1:'xxx'}] 手写定义的类数组： [{0:1,1:2,2:3,length:3}]

function a(){
    console.log(arguments);  //{ '0': 1, '1': 2, '2': 3, '3': 6, '4': 4, '5': 5 }
    console.log(Array.from(arguments));  //[ 1, 2, 3, 6, 4, 5 ]
     console.log(...arguments); //  1 2 3 6 4 5
}
a(1,2,3,6,4,5);