filter
filter() 方法是 JavaScript 中数组的一个方法,用于筛选数组中符合指定条件的元素,并返回一个新的数组,新数组中包含筛选出的元素。
filter() 方法语法如下:
arr.filter(callback(element[, index[, array]])[, thisArg])
其中,参数 callback 是一个回调函数,用于定义筛选规则,该函数接收三个参数 element、index、array,分别代表当前正在被处理的元素、该元素的索引和数组本身。函数返回 true 时,当前元素被保留到新数组中;返回 false 时,当前元素被过滤掉,不会出现在新数组中。
除了 callback 参数之外,filter() 方法还支持一个可选参数 thisArg,用于指定回调函数中的 this 指向,这个参数可以省略。如果指定了 thisArg 参数,则 callback 中的 this 指向该参数的值。
下面是一些 filter() 方法的例子:
// 过滤一个数组中的奇数,返回一个新的数组
const nums = [1, 2, 3, 4, 5, 6];
const odds = nums.filter(num => num % 2 !== 0);
console.log(odds); // [1, 3, 5]
// 针对数组对象进行筛选,返回一个新的对象数组
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 }]
// 根据数组对象进行筛选,返回一个新的对象数组
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 中数组的一个方法,用于对数组中的每个元素进行转换,并将转换后的元素存储到一个新的数组中,最终返回这个新数组。
map() 方法语法如下:
arr.map(callback(element[, index[, array]])[, thisArg])
其中,参数 callback 是一个回调函数,用于定义转换规则,该函数接收三个参数 element、index、array,分别代表当前正在被处理的元素、该元素的索引和数组本身。函数返回的值将被存储到新数组中。
除了 callback 参数之外,map() 方法还支持一个可选参数 thisArg,用于指定回调函数中的 this 指向,这个参数可以省略。如果指定了 thisArg 参数,则 callback 中的 this 指向该参数的值。
下面是一些 map() 方法的例子:
// 将一个数组中的所有元素乘以 2,返回一个新的数组
const nums = [1, 2, 3, 4, 5];
const doubles = nums.map(num => num * 2);
console.log(doubles); // [2, 4, 6, 8, 10]
// 对数组对象中的某个属性进行操作,返回一个新的对象数组
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']
// 根据数组对象进行转换,返回一个新的对象数组
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的区别是什么
map() 和 filter() 方法都是 JavaScript 数组的方法,它们的作用不同。
map() 方法用于对数组中的每个元素进行转换,并将转换后的元素存储到一个新的数组中,最终返回这个新数组。该方法不会改变原来的数组。通常情况下,使用 map() 方法可以简化代码,并提升程序的可读性和可维护性。
filter() 方法用于对数组中的元素进行过滤,并将符合条件的元素存储到一个新的数组中,最终返回这个新数组。该方法不会改变原来的数组。通常情况下,使用 filter() 方法可以轻松地从大量数据中筛选出需要的数据,同时也可以提高程序的可读性和可维护性。
可以总结出 map() 与 filter() 的区别:
- map() 方法会将数组中的每个元素进行转换,并返回一个新数组;而 filter()方法会根据指定的条件筛选数组中的元素,并返回一个新数组。
- map() 方法没有改变原数组的内容,而 filter() 方法也没有改变原数组的内容。
- map() 方法会保留原数组中的每个元素,只是将其转化为另一种形式,即新数组的长度与原数组的长度相等;而 filter()方法将会根据筛选条件保留或排除原数组中的各个元素,使得返回的新数组长度可能小于原数组长度。
因此,如果想要对数组中的元素进行转换操作,则应使用 map() 方法;如果想要根据某个条件筛选出符合条件的元素,则应使用 filter() 方法
reduce
reduce() 是 JavaScript 数组的一个方法,它可以用于对数组元素执行一个归并操作,并将最终结果返回。通常情况下,reduce() 可以用来进行累加、求和、求平均值等操作。下面是 reduce() 方法的详细使用方法:
Array.prototype.reduce(callback[, initialValue]) 方法接受一个回调函数 callback 和一个可选的初始值 initialValue 作为参数。其中,callback 函数接受四个参数:累计器(也就是上一次回调返回的值或者初始值),当前元素,当前索引和原始数组。
具体使用时,reduce() 方法从数组的第一个元素开始遍历,每次将遍历到的元素传入回调函数中进行处理,并将处理结果作为下一次遍历的初始值传入回调函数中。最后,返回的结果即为最终的累积值。
如果没有指定初始值 initialValue,则 reduce() 方法会从数组的第二个元素开始遍历,将第一个元素作为初始值传入回调函数中。如果数组为空且没有提供初始值,则 reduce() 方法会抛出一个 TypeError 异常。
下面是一些 reduce() 方法的例子:
// 求数组所有元素的和
const nums = [1, 2, 3, 4, 5];
const sum = nums.reduce((acc, curr) => acc + curr);
console.log(sum); // 15
// 使用初始值计算数组所有元素的和
const sumWithInit = nums.reduce((acc, curr) => acc + curr, 10);
console.log(sumWithInit); // 25
// 求数组所有元素的平均值
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
// 对一个对象数组中的某个属性求和
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