js数组的filter方法和reduce方法filter 1、定义 2、语法 3、参数说明 4、用法 5、注意事项 6、

filter

1、定义

filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

2、语法

array.filter(function(currentValue,index,arr), thisValue);

3、参数说明

4、用法

filter() 方法用于把Array中的某些元素过滤掉，然后返回剩下的未被过滤掉的元素。

5、注意事项

1、filter() 不会对空数组进行检测；

2、filter() 不会改变原始数组。

6、使用实例

1.返回数组array中所有元素都大于等于14的元素、返回等于14、返回大于某个值和小于某个值的元素的元素。

const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14)
console.log(newArr);//打印 [17,18,32,33,16,40]
 
// 查找某个值-------------------------
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num == 14)
console.log(newArr);//打印 [14]
 
//返回大于某个值和小于某个值的元素
const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 14 && num < 33)
console.log(newArr);//打印 [17, 18, 32, 16]

2.数组去重操作：对数组array中所有相同的元素进行去重复操作。

const array = [2, 2, 'a', 'a', true, true, 15, 17]
const newArr = array.filter((item, i, arr) => {
      return arr.indexOf(item) === i
    })
console.log(newArr);//打印 [2, 'a', true, 15, 17]
 
//-------------------------------------------------------------------------
 
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 4, 5, 6, 7, 9,]
const newArr = array.filter((item, i, arr) => {
      return arr.indexOf(item) === i
    })
console.log(newArr);// 打印 [1, 2, 3, 4, 5, 6, 7, 8, 9]

3、数组中保留奇数或者偶数。

//保留偶数----------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = array.filter((item, i, arr) => {
      return item % 2 === 0
    })
console.log(newArr);// 打印 [2, 4, 6, 8, 10]
 
//保留奇数----------------------------------------
const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const newArr = array.filter((item, i, arr) => {
      return item % 2 !== 0
    })
console.log(newArr);// 打印 [1, 3, 5, 7, 9]

4、去掉数组中的假值，比如：空字符串、undefined、null、0、false。

const array = [
      { id: 3 },
      { id: 4 },
      { id: null },
      { id: undefined },
      { id: '' },
      { id: 0 },
      { id: false }
     ]
const newArr = array.filter(({ id }) => id)
console.log(newArr);// 打印 [{ "id": 3 },{ "id": 4 }]
 
//-------------------------------------------------------------------
 
const array = [undefined, null, 3, 5, 'a', false, 0]
const newArr = array.filter(item => item)
console.log(newArr);// 打印 [3, 5, 'a']

5、把对象数组array中的某个属性值取出来存到数组newArr中。

const array = [
  { name: "a", type: "letter" },
  { name: '1', type: "digital" },
  { name: 'c', type: "letter" },
  { name: '2', type: "digital" },
];
const newArr = array.filter((item, i, arr) => {
  return item.type === "letter"
})
console.log(newArr);
// 打印 [{ "name": "a", "type": "letter" }, { "name": "c", "type":"letter" }]

6、filter结合find方法，实现两个数组的补集的解决方法，oldArr的元素newArr中都有，在newArr中去掉所有的oldArr。

find() 方法返回数组中满足提供的测试函数的第一个元素的值。这里有四个元素，那么就会返回两个数组元素相等的值，这里取反就返回不相等的值，不取反的时候因为30的元素不符合，所以不返回30的值。

const array = [32, 4, 11, 55, 46, 99, 104, 54, 16, 33, 78, 43, 40]
const oldArr = [32, 33, 16, 40, 30]
function myfunction() {
  const result = array.filter(item1 => {
    //此处取反去掉，将变换元素状态
    return !oldArr.find(item2 => {
      return item1 === item2
    })
  })
  return result
}
const newArr = myfunction()
console.log(newArr);
// 取反打印 [4, 11, 55, 46, 99, 104, 54, 78, 43]
// 不取反打印 [32, 16, 33, 40]   此处30的元素不符合，所以不返回30的值

reduce

reduce 是 JavaScript 中 Array 对象的一个方法，非常强大且多用途。它可以对数组中的每个元素执行一个提供的回调函数，并且将结果汇总为一个单一的输出值。

1、基本语法

array.reduce(callbackFn, initialValue);

——callbackFn: 一个回调函数，用于计算的每一步，它接收四个参数。

——initialValue (可选): 作为第一次调用 callbackFn 时第一个参数的值。如果没有提供 initialValue，则 reduce 会从数组的第二个元素开始执行 callbackFn，且 accumulator 会被初始化为数组的第一个元素。

callbackFn 的参数:

function callbackFn(accumulator, currentValue, currentIndex, array) {
  // ...
}

accumulator: 累计器，用来累计回调的返回值，是累计的结果。
currentValue: 数组中正在处理的当前元素。
currentIndex (可选): 数组中正在处理的当前元素的索引。
array (可选): 调用 reduce 的数组。

2、例子

1. 数组求和

计算数组中所有元素的和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出: 15

2. 数组求积

计算数组中所有元素的积：

const numbers = [1, 2, 3, 4, 5];
const product = numbers.reduce((accumulator, currentValue) => accumulator * currentValue, 1);
console.log(product); // 输出: 120

3. 扁平化数组

将一个二维数组扁平化为一维数组：

const arrays = [[1, 2], [3, 4], [5, 6]];
const flattened = arrays.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []);
console.log(flattened); // 输出: [1, 2, 3, 4, 5, 6]

4. 数组元素计数

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

const fruits = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple'];
const fruitCount = fruits.reduce((accumulator, currentValue) => {
  if (accumulator[currentValue]) {
    accumulator[currentValue]++;
  } else {
    accumulator[currentValue] = 1;
  }
  return accumulator;
}, {});
console.log(fruitCount); // 输出: { apple: 3, banana: 2, orange: 1 }

5. 使用对象解构和展开运算符合并数组中的对象

假设你有一个包含了一些对象的数组，现在你想合并这些对象：

const objects = [{ a: 1 }, { b: 2 }, { c: 3 }];
const mergedObject = objects.reduce((accumulator, currentValue) => {
  return { ...accumulator, ...currentValue };
}, {});
console.log(mergedObject); // 输出: { a: 1, b: 2, c: 3 }

6. 求最大值和最小值

在数组中找出最大值和最小值：

const numbers = [1, 2, 3, 4, 5];

// 最大值
const max = numbers.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue));
console.log(max); // 输出: 5

// 最小值
const min = numbers.reduce((accumulator, currentValue) => Math.min(accumulator, currentValue));
console.log(min); // 输出: 1

函数组合

通过 reduce 实现函数组合（compose pattern）：

const compose = (...funcs) => initialValue =>
  funcs.reduceRight((accumulator, func) => func(accumulator), initialValue);

// 示例函数
const add5 = x => x + 5;
const multiply = x => x * 2;

const composedFunc = compose(multiply, add5);
console.log(composedFunc(10)); // 输出: 30 (首先 add5(10) 得到 15，然后 multiply(15) 得到 30)

异步操作中的 `reduce`

虽然 reduce 本身是同步的，但你也可以在异步场景中结合 async/await 使用：

const urls = ['url1', 'url2', 'url3'];

async function fetchUrl(url) {
  // 模拟异步 fetch 操作
  return new Promise((resolve) => setTimeout(() => resolve(`Data from ${url}`), 1000));
}

async function fetchData() {
  const results = await urls.reduce(async (accumulatorPromise, url) => {
    const accumulator = await accumulatorPromise;
    const data = await fetchUrl(url);
    accumulator.push(data);
    return accumulator;
  }, Promise.resolve([]));

  console.log(results); // ["Data from url1", "Data from url2", "Data from url3"]
}

fetchData();

3、总结

reduce 是一个功能非常强大的高阶函数，可以用来解决各种数组操作和数据处理问题。通过理解它的工作原理和灵活运用 callback 函数，你可以编写出简洁高效且具有高度表达力的代码.

js数组的filter方法和reduce方法