map、forEach、filter 、reduce

[amandakelake]

初次看到这张图，直接被笑哭 😂 炒鸡形象有木有

map：让数组通过某种计算产生一个新数组，返回修改后的数组
forEach：让数组中的每一项做一件事，返回underfined
filter：筛选出数组中符合条件的项，组成新数组，过滤后的数组
reduce：让数组中的前项和后项做某种计算，并累计最终值，返回值

forEach用于看，map用于改，filter用于删，reduce用于统计

every：检测数组中的每一项是否符合条件，全部满足则返回true
Some：检测数组中是否有某些项符合条件，只要有一个满足则返回true

reduce

MDN -reduce
arr.reduce(callback[, initialValue])
reduce(callback, initialValue)会传入两个变量。回调函数callback和初始值initialValue。

官方写法如下

• accumulator (initialValue ? initialValue : array[0] )装的一首好*
• currentValue
• currentIndex （如果提供了initialValue，从0开始，否则从1开始）
• array

callback 有四个参数：prev、next、index、array
一般来讲prev是从数组中第一个元素开始的，next是第二个元素。
但是当你传入初始值initialValue后，第一个prev将是initivalValue，next将是数组中的第一个元素。

reduce实例

以下例子都是MDN上面的，我稍微改造成了函数形式，可以直接用

累加

function countSum(arr) {
  return arr.reduce((a, b) => {
    return a + b;
  }, 0);
}
var result = countSum([1, 3, 5, 6]);
console.log(result);
// 15

二维数组转化为一维

function combineArr(doubleDimensionArr) {
  return doubleDimensionArr.reduce((prev, next) => {
    return prev.concat(next);
  }, []);
}
var arr = [[0, 1], [2, 3], [4, 5]];
var result = combineArr(arr);
console.log(result);
// [0, 1, 2, 3, 4, 5]

计算数组中每个元素出现的次数

function countedNames(arr) {
  return arr.reduce((allnames, name) => {
    // 如果指定的属性在指定的对象或其原型链中，则in 运算符返回true
    if (name in allnames) {
      allnames[name]++;
    } else {
      allnames[name] = 1;
    }
    return allnames;
  }, {});
}
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var result = countedNames(names);
console.log(result);
// {Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

合并数组中所有对象的某一属性,利用扩展运算符

function combineProperty(arr, property) {
  return arr.reduce((prev, next) => {
    return [...prev, ...next[property]];
  }, []);
}
var friends = [
  {
    name: 'Anna',
    books: ['Bible', 'Harry Potter'],
    age: 21
  },
  {
    name: 'Bob',
    books: ['War and peace', 'Romeo and Juliet'],
    age: 26
  },
  {
    name: 'Alice',
    books: ['The Lord of the Rings', 'The Shining'],
    age: 18
  }
];
var result = combineProperty(friends, 'books');
console.log(result);
// ["Bible", "Harry Potter", "War and peace", "Romeo and Juliet", "The Lord of the Rings", "The Shining"]

数组去重

function initArr(arr) {
  // sort()是不稳定排序，默认排序顺序是根据字符串Unicode码点，如要按照数值大小，则需要compareFunction
  return arr.sort((a, b) => a - b).reduce((init, currentValue) => {
    // 判断新数组的最后一个值是否等于正在判断的当前值currentValue
    if (init.length === 0 || init[init.length - 1] !== currentValue) {
      init.push(currentValue);
    }
    return init;
  }, []);
}
var arr = [1, 2, 10, 20, 3, 5, 4, 5, 3, 4, 4, 4, 4];
var result = initArr(arr);
console.log(result);
// [1, 2, 3, 4, 5, 10, 20]