js--处理数组时常用的函数（some、map、filter、find、reduce、every)

some

some被调用时不会改变数组。 如果用一个空数组进行测试，在任何情况下它返回的都是false。

some()方法适用于判断数据中是否至少有一个元素满足某条件（回调函数），有至少一个元素通过回调函数的测试就会返回 true；所有元素都没有通过回调函数的测试返回值才会为 false。如果找到了这样一个值，some() 将会立即返回 true。

// 箭头函数
some((element) => { /* … */ } )
some((element, index) => { /* … */ } )
some((element, index, array) => { /* … */ } )

// 回调函数
some(callbackFn)
some(callbackFn, thisArg)

// 内联回调函数
some(function(element) { /* … */ })
some(function(element, index) { /* … */ })
some(function(element, index, array){ /* … */ })
some(function(element, index, array) { /* … */ }, thisArg)

callback
用来测试每个元素的函数，接受三个参数：
element
数组中正在处理的元素。
index 可选
数组中正在处理的元素的索引值。
array可选
some()被调用的数组。
thisArg可选
执行 callback 时使用的 this 值。
[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

map

map()方法创建一个新数组：对原数组中的每个元素调用一次回调函数，由每次调用后回调函数的返回值组成新数组。 如果使用场景上不打算使用返回的新数组时，不应使用map。 map不修改原数组本身 （如要需要可在回调函数中修改）

语法
// 箭头函数
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// 回调函数
map(callbackFn)
map(callbackFn, thisArg)

// 内联回调函数
map(function(element) { /* … */ })
map(function(element, index) { /* … */ })
map(function(element, index, array){ /* … */ })
map(function(element, index, array) { /* … */ }, thisArg)

参数
callbackFn
生成新数组元素的函数，使用三个参数：

currentValue
callbackFn 数组中正在处理的当前元素。

index
callbackFn 数组中正在处理的当前元素的索引。

array
map 方法调用的数组。

thisArg 可选
执行 callbackFn 函数时被用作 this 的值。

返回值
一个新数组，每个元素都是回调函数的返回值。

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2); [2, 8, 18, 32]


const numbers = [1, 2, 3, 4];
const filteredNumbers = numbers.map((num, index) => {
  if (index < 3) {
    return num;
  }
});

// index 从 0 开始，因此 filterNumbers 为 1、2、3 和 undefined。
// filteredNumbers 是 [1, 2, 3, undefined]
// numbers 依旧是 [1, 2, 3, 4]

filter

筛选出数组中符合条件（callback)的所有元素

// 箭头函数
filter((element) => { /* … */ } )
filter((element, index) => { /* … */ } )
filter((element, index, array) => { /* … */ } )

// 回调函数
filter(callbackFn)
filter(callbackFn, thisArg)

// 内联回调函数
filter(function(element) { /* … */ })
filter(function(element, index) { /* … */ })
filter(function(element, index, array){ /* … */ })
filter(function(element, index, array) { /* … */ }, thisArg)
参数
callbackFn
用来测试数组中每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：

element
数组中当前正在处理的元素。

index
正在处理的元素在数组中的索引。

array
调用了 filter() 的数组本身。

thisArg可选
执行 callbackFn 时，用于 this 的值。

返回值
一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

filter() 不会改变原数组

find

find()方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined

findIndex() ---- 在数组中找到对应元素的索引 indexOf()----需要查找某个值的索引

// 箭头函数
find((element) => { /* … */ } )
find((element, index) => { /* … */ } )
find((element, index, array) => { /* … */ } )

// 回调函数
find(callbackFn)
find(callbackFn, thisArg)

// 内联回调函数
find(function(element) { /* … */ })
find(function(element, index) { /* … */ })
find(function(element, index, array){ /* … */ })
find(function(element, index, array) { /* … */ }, thisArg)

参数
callbackFn
在数组每一项上执行的函数，接收 3 个参数：

element
当前遍历到的元素。

index
当前遍历到的索引。

array
数组本身。

回调函数必须返回一个真值来表示找到了匹配的元素。

thisArg 可选
执行回调时用作 this 的对象。

返回值
数组中第一个满足所提供测试函数的元素的值，否则返回 undefined

find()方法不会改变数组 eg:

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

function isCherries(fruit) {
  return fruit.name === 'cherries';
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }

find+箭头函数+结构赋值

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

const result = inventory.find(({ name }) => name === 'cherries');

console.log(result) // { name: 'cherries', quantity: 5 }

reduce

reduce()方法会对数组中的每个元素按顺序执行一个reducer函数（使用时定义），每一次运行reducer会将之前元素的计算结果作为参数传入，最后将结果汇总为单个返回值。

**在第一个执行回调函数时，不会有“上一次的计算结果”这个概念。如果需要回调函数从数组索引为0的地方开始执行，则需要传递初始值。否则，数组索引为0的元素将被作为初始值initialValue。迭代器将从第二个元素开始执行 （index是1而不是0）

// 箭头函数
reduce((previousValue, currentValue) => { /* … */ } )
reduce((previousValue, currentValue, currentIndex) => { /* … */ } )
reduce((previousValue, currentValue, currentIndex, array) => { /* … */ } )

reduce((previousValue, currentValue) => { /* … */ } , initialValue)
reduce((previousValue, currentValue, currentIndex) => { /* … */ } , initialValue)
reduce((previousValue, currentValue, currentIndex, array) => { /* … */ }, initialValue)

// 回调函数
reduce(callbackFn)
reduce(callbackFn, initialValue)

// 内联回调函数
reduce(function(previousValue, currentValue) { /* … */ })
reduce(function(previousValue, currentValue, currentIndex) { /* … */ })
reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ })

reduce(function(previousValue, currentValue) { /* … */ }, initialValue)
reduce(function(previousValue, currentValue, currentIndex) { /* … */ }, initialValue)
reduce(function(previousValue, currentValue, currentIndex, array) { /* … */ }, initialValue)



参数
callbackFn
一个“reducer”函数，包含四个参数：

previousValue：上一次调用 callbackFn 时的返回值。在第一次调用时，若指定了初始值 initialValue，其值则为 initialValue，否则为数组索引为 0 的元素 array[0]。
currentValue：数组中正在处理的元素。在第一次调用时，若指定了初始值 initialValue，其值则为数组索引为 0 的元素 array[0]，否则为 array[1]。
currentIndex：数组中正在处理的元素的索引。若指定了初始值 initialValue，则起始索引号为 0，否则从索引 1 起始。
array：用于遍历的数组。
initialValue 可选
作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue，则 currentValue 则将使用数组第一个元素；否则 previousValue 将使用数组第一个元素，而 currentValue 将使用数组第二个元素。

返回值
使用“reducer”回调函数遍历整个数组后的结果。

eg

const getMax = (a, b) => Math.max(a, b);

// callback is invoked for each element in the array starting at index 0
[1, 100].reduce(getMax, 50); // 100
[    50].reduce(getMax, 10); // 50

// callback is invoked once for element at index 1
[1, 100].reduce(getMax);     // 100

// callback is not invoked
[    50].reduce(getMax);     // 50
[      ].reduce(getMax, 1);  // 1

[      ].reduce(getMax);     // TypeError

无初始值和有初始值时的reduce()运行的对比

无初始值
const array = [15, 16, 17, 18, 19];

function reducer(previous, current, index, array) {
  const returns = previous + current;
  console.log(`previous: ${previous}, current: ${current}, index: ${index}, returns: ${returns}`);
  return returns;
}

array.reduce(reducer);      // 85


有初始值
[15, 16, 17, 18, 19].reduce( (previousValue, currentValue, currentIndex, array) => previousValue + currentValue, 10 )   // 95

求和----数组求和 累加对象数组里的值 比较

数组求和
let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) {
  return previousValue + currentValue
}, 0)
// sum is 6

数组求和-箭头函数
let total = [ 0, 1, 2, 3 ].reduce(
  ( previousValue, currentValue ) => previousValue + currentValue,
  0
)


累加对象数组里的值
-----要累加对象数组中包含的值，必须提供initialValue，以便各个item可以正确读取到值
let initialValue = 0
let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(function (previousValue, currentValue) {
    return previousValue + currentValue.x
}, initialValue)

console.log(sum) // logs 6


箭头函数
let initialValue = 0
let sum = [{x: 1}, {x: 2}, {x: 3}].reduce(
    (previousValue, currentValue) => previousValue + currentValue.x
    , initialValue
)

console.log(sum) // logs 6

every

every方法测试一个数组内的所有元素是否只能通过某个指定函数的测试。返回一个布尔值 所有元素都符合条件才会返回true。 如果传入一个空数组：无论如何都是返回true

// 箭头函数
every((element) => { /* … */ } )
every((element, index) => { /* … */ } )
every((element, index, array) => { /* … */ } )

// 回调函数
every(callbackFn)
every(callbackFn, thisArg)

// 内联回调函数
every(function(element) { /* … */ })
every(function(element, index) { /* … */ })
every(function(element, index, array){ /* … */ })
every(function(element, index, array) { /* … */ }, thisArg)
参数
callback
用来测试每个元素的函数，它可以接收三个参数：

element
用于测试的当前值。

index
用于测试的当前值的索引。

array
调用 every 的当前数组。

thisArg可选
执行 callback 时使用的 this 值。

返回值
如果回调函数的每一次返回都为 truthy 值，返回 true，否则返回 false。

eg:

function isBigEnough(element, index, array) {
    return element >= 10;
  }
  [12, 5, 8, 130, 44].every(isBigEnough);   // false
  [12, 54, 18, 130, 44].every(isBigEnough); // true
  const flag = [].every(isBigEnough); // true 


  箭头函数
  [12, 5, 8, 130, 44].every(x => x >= 10); // false
  [12, 54, 18, 130, 44].every(x => x >= 10); // true

includes

includes()方法用来判断一个数组是否包含一个指定的值。 包含则返回true 否则返回false

includes(searchElement)
includes(searchElement, fromIndex)

参数 searchElement 需要查找的元素值。 使用 includes() 比较字符串和字符时是区分大小写的。 fromIndex 可选 从fromIndex 索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜（即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。 返回值 返回一个布尔值 Boolean 。 如果在数组中（或 fromIndex 指定的范围中）找到了 searchElement，则返回 true，否则返回 false。 如果 fromIndex 大于等于数组的长度，则将直接返回 false，且不搜索该数组。 如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

var arr = ['a', 'b', 'c'];

arr.includes('c', 3);   // false
arr.includes('c', 100); // false


// array length is 3
// fromIndex is -100
// computed index is 3 + (-100) = -97

var arr = ['a', 'b', 'c'];

arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true
arr.includes('a', -2); // false

entires

entries() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键/值对。

const a = ["a", "b", "c"];

for (const [index, element] of a.entries()) {
  console.log(index, element);
}

// 0 'a'
// 1 'b'
// 2 'c'