📕 重学JavaScript：请你列举一些常用的数组高阶函数
嗨，大家好！这里是道长王jj~ 🎩🧙♂️
我们学习 JavaScript 不得不面对的一个知识点就是高阶函数的使用。
我们要学习 JavaScript 高阶函数的原因有很多😊。高阶函数是一种特殊的函数，它可以接受其他函数作为参数，或者返回一个函数作为结果👌。
数组函数就是 JavaScript 高阶函数的一类，它的出现不仅可以帮助我们学习使用高阶函数，更重要的是它们可以让我们更方便地处理数组😊。这样的函数可以让我们的代码更加抽象、灵活和可复用😎。
接下来我就常规地介绍一小部分数组的高阶函数的例子👇：
map
它可以创建一个新数组，并且对原数组中的每个元素进行一个转换。
参数
map 接受两个参数，一个是回调函数，一个是回调函数的 this 值（可选）。
其中，回调函数被默认传入三个值，依次为当前元素、当前索引、整个数组。
作用
map 的作用是根据回调函数的返回值来创建一个新数组，并且不影响原来的数组。
示例
let nums = [1, 2, 3];
let obj = {
val: 5};
let newNums = nums.map(function(item,index,array) {
return item + index + array[index] + this.val;
//对第一个元素，1 + 0 + 1 + 5 = 7
//对第二个元素，2 + 1 + 2 + 5 = 10
//对第三个元素，3 + 2 + 3 + 5 = 13
}, obj);
console.log(newNums);//[7, 10, 13]
我们使用了 map 方法来对 nums 数组中的每个元素进行一个复杂的计算，并且指定了回调函数的 this 值为 obj 对象。最后我们得到了一个新数组 newNums ，它包含了计算后的结果。
其他的示例如下：
// 把一个字符串数组转换成大写：
let words = ["hello", "world", "javascript"];
let upperWords = words.map((word) => word.toUpperCase());
console.log(upperWords); // ["HELLO", "WORLD", "JAVASCRIPT"]
// 把一个对象数组提取出某个属性：
let users = [
{
name: "Alice", age: 20},
{
name: "Bob", age: 21},
{
name: "Charlie", age: 22}
];
let names = users.map((user) => user.name);
console.log(names); // ["Alice", "Bob", "Charlie"]
reduce
它可以对数组中的每个元素进行一个累计操作，并且返回最终的累计结果。
参数
reduce 接受两个参数，一个是回调函数，一个是初始值（可选）。
其中，回调函数被默认传入四个值，依次为累计值、当前值、当前索引、整个数组。
作用
reduce 的作用是根据回调函数的返回值来更新累计值，并且在遍历完整个数组后返回最终的累计值。
示例
let nums = [1, 2, 3];
// 多个数的加和
let newNums = nums.reduce(function(preSum,curVal,array) {
return preSum + curVal;
}, 0);
console.log(newNums);//6
我们使用了 reduce 方法来对nums 数组中的每个元素进行加和，并且指定了初始值为 0 。最后我们得到了一个新的数字newNums ，它是数组中所有元素的和。
其他的示例如下：
// 计算一个数组中的最大值
let nums = [1, 2, 3, 4, 5];
let maxNum = nums.reduce(function(max, cur) {
return Math.max(max, cur);
});
console.log(maxNum); // 5
// 把一个数组中的对象合并成一个对象
let users = [
{
name: "Alice", age: 20},
{
name: "Bob", age: 21},
{
name: "Charlie", age: 22}
];
let userObj = users.reduce(function(obj, user) {
obj[user.name] = user.age;
return obj;
}, {
});
console.log(userObj); // {Alice: 20, Bob: 21, Charlie: 22}
filter
它可以创建一个新数组，并且只保留原数组中满足某个条件的元素。
参数
filter 接受一个函数作为参数。
这个函数被默认传入三个值，依次为当前元素、当前索引、整个数组。
这个函数的返回值是一个布尔类型，决定元素是否保留。
作用
filter 的作用是根据函数的返回值来创建一个新数组，并且不影响原来的数组。
示例
let nums = [1, 2, 3];
// 保留奇数项
let oddNums = nums.filter(item => item % 2);
console.log(oddNums); // [1, 3]
我们使用了 filter 方法来对 nums 数组中的每个元素进行判断，并且只保留奇数项。最后我们得到了一个新数组 oddNums ，它包含了原数组中所有的奇数。
其他的示例如下：
// 筛选出一个数组中的偶数
let nums = [1, 2, 3, 4, 5];
let evenNums = nums.filter(item => item % 2 === 0);
console.log(evenNums); // [2, 4]
// 筛选出一个数组中的对象中满足某个条件的对象
let users = [
{
name: "Alice", age: 20},
{
name: "Bob", age: 21},
{
name: "Charlie", age: 22}
];
let youngUsers = users.filter(user => user.age < 22);
console.log(youngUsers); // [{name: "Alice", age: 20}, {name: "Bob", age: 21}]
sort
它可以对数组中的元素进行排序，并且返回排序后的数组。
参数
sort 接受一个函数作为参数（可选）。
这个函数被默认传入两个值，分别是代表比较的两个元素。
这个函数的返回值是一个数字，决定元素的顺序。
作用
sort 的作用是根据函数的返回值来对数组中的元素进行排序，并且改变原来的数组。
示例
let nums = [2, 3, 1];
//两个比较的元素分别为a, b
nums.sort(function(a, b) {
if(a > b) return 1;
else if(a < b) return -1;
else if(a == b) return 0;
});
console.log(nums); // [1, 2, 3]
我们使用了 sort 方法来对 nums 数组中的每个元素进行升序排序，并且指定了一个比较函数。最后我们得到了一个新数组 nums ，它包含了原数组中所有元素按照从小到大的顺序。
其他的示例如下：
// 对一个数组中的字符串进行降序排序
let words = ["hello", "world", "javascript"];
words.sort(function(a, b) {
if(a > b) return -1;
else if(a < b) return 1;
else if(a == b) return 0;
});
console.log(words); // ["world", "javascript", "hello"]
// 对一个数组中的对象进行自定义排序
let users = [
{
name: "Alice", age: 20},
{
name: "Bob", age: 21},
{
name: "Charlie", age: 22}
];
users.sort(function(a, b) {
return a.age - b.age; // 按照年龄升序排序
});
console.log(users); // [{name: "Alice", age: 20}, {name: "Bob", age: 21}, {name: "Charlie", age: 22}]
👩🦰 想要了解更多
列Api的东西其实没什么好写的。
如果你想了解更多关于 array 方法的信息，你可以查看 MDN 的文档：
🎉 你觉得怎么样？这篇文章可以给你带来帮助吗？如果你有任何疑问或者想进一步讨论相关话题，请随时发表评论分享您的想法，让其他人从中受益。🚀✨
