filter

filter() 方法是 JavaScript 中數(shù)組的一個方法，用于篩選數(shù)組中符合指定條件的元素，并返回一個新的數(shù)組，新數(shù)組中包含篩選出的元素。

filter() 方法語法如下：

arr.filter(callback(element[, index[, array]])[, thisArg])

其中，參數(shù) callback 是一個回調(diào)函數(shù)，用于定義篩選規(guī)則，該函數(shù)接收三個參數(shù) element、index、array，分別代表當前正在被處理的元素、該元素的索引和數(shù)組本身。函數(shù)返回 true 時，當前元素被保留到新數(shù)組中；返回 false 時，當前元素被過濾掉，不會出現(xiàn)在新數(shù)組中。

除了 callback 參數(shù)之外，filter() 方法還支持一個可選參數(shù) thisArg，用于指定回調(diào)函數(shù)中的 this 指向，這個參數(shù)可以省略。如果指定了 thisArg 參數(shù)，則 callback 中的 this 指向該參數(shù)的值。

下面是一些 filter() 方法的例子：

// 過濾一個數(shù)組中的奇數(shù)，返回一個新的數(shù)組
const nums = [1, 2, 3, 4, 5, 6];
const odds = nums.filter(num => num % 2 !== 0);
console.log(odds); // [1, 3, 5]

// 針對數(shù)組對象進行篩選，返回一個新的對象數(shù)組
const users = [
  { name: 'Jack', age: 24 },
  { name: 'Peter', age: 30 },
  { name: 'Mary', age: 26 }
];
const adults = users.filter(user => user.age >= 18);
console.log(adults); // [{ name: 'Jack', age: 24 }, { name: 'Peter', age: 30 }, { name: 'Mary', age: 26 }]

// 根據(jù)數(shù)組對象進行篩選，返回一個新的對象數(shù)組
const users = [
  { name: 'Jack', age: 24 },
  { name: 'Peter', age: 30 },
  { name: 'Mary', age: 26 }
];
const jack = users.filter(user => user.name === 'Jack');
console.log(jack); // [{ name: 'Jack', age: 24 }]

map

map() 方法是 JavaScript 中數(shù)組的一個方法，用于對數(shù)組中的每個元素進行轉(zhuǎn)換，并將轉(zhuǎn)換后的元素存儲到一個新的數(shù)組中，最終返回這個新數(shù)組。

map() 方法語法如下：

arr.map(callback(element[, index[, array]])[, thisArg])

其中，參數(shù) callback 是一個回調(diào)函數(shù)，用于定義轉(zhuǎn)換規(guī)則，該函數(shù)接收三個參數(shù) element、index、array，分別代表當前正在被處理的元素、該元素的索引和數(shù)組本身。函數(shù)返回的值將被存儲到新數(shù)組中。

除了 callback 參數(shù)之外，map() 方法還支持一個可選參數(shù) thisArg，用于指定回調(diào)函數(shù)中的 this 指向，這個參數(shù)可以省略。如果指定了 thisArg 參數(shù)，則 callback 中的 this 指向該參數(shù)的值。

下面是一些 map() 方法的例子：

// 將一個數(shù)組中的所有元素乘以 2，返回一個新的數(shù)組
const nums = [1, 2, 3, 4, 5];
const doubles = nums.map(num => num * 2);
console.log(doubles); // [2, 4, 6, 8, 10]

// 對數(shù)組對象中的某個屬性進行操作，返回一個新的對象數(shù)組
const users = [
  { name: 'Jack', age: 24 },
  { name: 'Peter', age: 30 },
  { name: 'Mary', age: 26 }
];
const userNames = users.map(user => user.name);
console.log(userNames); // ['Jack', 'Peter', 'Mary']

// 根據(jù)數(shù)組對象進行轉(zhuǎn)換，返回一個新的對象數(shù)組
const users = [
  { name: 'Jack', age: 24 },
  { name: 'Peter', age: 30 },
  { name: 'Mary', age: 26 }
];
const newUsers = users.map(user => ({ ...user, gender: 'unknown' }));
console.log(newUsers); // [{ name: 'Jack', age: 24, gender: 'unknown' }, { name: 'Peter', age: 30, gender: 'unknown' }, { name: 'Mary', age: 26, gender: 'unknown' }]

map和filter的區(qū)別是什么

map() 和 filter() 方法都是 JavaScript 數(shù)組的方法，它們的作用不同。

map() 方法用于對數(shù)組中的每個元素進行轉(zhuǎn)換，并將轉(zhuǎn)換后的元素存儲到一個新的數(shù)組中，最終返回這個新數(shù)組。該方法不會改變原來的數(shù)組。通常情況下，使用 map() 方法可以簡化代碼，并提升程序的可讀性和可維護性。

filter() 方法用于對數(shù)組中的元素進行過濾，并將符合條件的元素存儲到一個新的數(shù)組中，最終返回這個新數(shù)組。該方法不會改變原來的數(shù)組。通常情況下，使用 filter() 方法可以輕松地從大量數(shù)據(jù)中篩選出需要的數(shù)據(jù)，同時也可以提高程序的可讀性和可維護性。

可以總結(jié)出 map() 與 filter() 的區(qū)別：

• map() 方法會將數(shù)組中的每個元素進行轉(zhuǎn)換，并返回一個新數(shù)組；而 filter()方法會根據(jù)指定的條件篩選數(shù)組中的元素，并返回一個新數(shù)組。
• map() 方法沒有改變原數(shù)組的內(nèi)容，而 filter() 方法也沒有改變原數(shù)組的內(nèi)容。
• map() 方法會保留原數(shù)組中的每個元素，只是將其轉(zhuǎn)化為另一種形式，即新數(shù)組的長度與原數(shù)組的長度相等；而 filter()方法將會根據(jù)篩選條件保留或排除原數(shù)組中的各個元素，使得返回的新數(shù)組長度可能小于原數(shù)組長度。

因此，如果想要對數(shù)組中的元素進行轉(zhuǎn)換操作，則應(yīng)使用 map() 方法；如果想要根據(jù)某個條件篩選出符合條件的元素，則應(yīng)使用 filter() 方法

reduce

reduce() 是 JavaScript 數(shù)組的一個方法，它可以用于對數(shù)組元素執(zhí)行一個歸并操作，并將最終結(jié)果返回。通常情況下，reduce() 可以用來進行累加、求和、求平均值等操作。下面是 reduce() 方法的詳細使用方法：

Array.prototype.reduce(callback[, initialValue]) 方法接受一個回調(diào)函數(shù) callback 和一個可選的初始值 initialValue 作為參數(shù)。其中，callback 函數(shù)接受四個參數(shù)：累計器（也就是上一次回調(diào)返回的值或者初始值），當前元素，當前索引和原始數(shù)組。

具體使用時，reduce() 方法從數(shù)組的第一個元素開始遍歷，每次將遍歷到的元素傳入回調(diào)函數(shù)中進行處理，并將處理結(jié)果作為下一次遍歷的初始值傳入回調(diào)函數(shù)中。最后，返回的結(jié)果即為最終的累積值。

如果沒有指定初始值 initialValue，則 reduce() 方法會從數(shù)組的第二個元素開始遍歷，將第一個元素作為初始值傳入回調(diào)函數(shù)中。如果數(shù)組為空且沒有提供初始值，則 reduce() 方法會拋出一個 TypeError 異常。

下面是一些 reduce() 方法的例子：文章來源地址http://www.zghlxwxcb.cn/news/detail-455118.html

// 求數(shù)組所有元素的和
const nums = [1, 2, 3, 4, 5];
const sum = nums.reduce((acc, curr) => acc + curr);
console.log(sum); // 15

// 使用初始值計算數(shù)組所有元素的和
const sumWithInit = nums.reduce((acc, curr) => acc + curr, 10);
console.log(sumWithInit); // 25

// 求數(shù)組所有元素的平均值
const avg = nums.reduce((acc, curr, index, array) => {
  acc += curr;
  if (index === array.length - 1) {
    return acc / array.length;
  } else {
    return acc;
  }
});
console.log(avg); // 3

// 對一個對象數(shù)組中的某個屬性求和
const users = [
  { name: 'Jack', score: 92 },
  { name: 'Peter', score: 85 },
  { name: 'Mary', score: 88 }
];
const totalScore = users.reduce((acc, curr) => acc + curr.score, 0);
console.log(totalScore); // 265

到了這里，關(guān)于filter、map、reduce 一次性說清楚的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！