JavaScript数组高阶函数

爱吃糖的鲸

于 2024-12-10 19:36:19 发布

阅读量913

点赞数 9

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_51323460/article/details/144380403

JavaScript数组提供了一系列的高阶函数，这些函数可以用来处理数组中的数据。下面是一些常用数组高阶函数的用法：

1、..map（）

用于创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

2、.filter()

用于创建一个新数组，包含通过所提供函数实现的测试的所有元素。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

3、.reduce（）

用于将数组中的所有元素通过回调函数的处理，合并成一个值。

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

const sum = numbers.reduce((acc，curr)=>acc+cur,0);

console.log(sum);//15

4、.find()

用于返回数组中满足提供的测试函数的第一个元素的值。如果没有找到符合条件的元素，则返回undefind。

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

const firstEventNumber = numbers.find(num => num%2 ===2);

console.log(firstEvenNumber);//2

5、findIndex()

类似于.find(),但返回的是数组中满足提供的测试函数的第一个元素的索引。如果没有找到符合条件的元素，则返回-1.

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

const firstEventIndex = numbers.findIndex(num => num % 2 === 0 );

console.log(firstEvenIndex);// 1

6、.forEach（）

用于执行数组中的每个元素的回调函数，没有返回值。

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

numbers.forEach(num => console.log(num));

//输出”1 2 3 4 5

7、.some（）

用于测试数组中是否至少有一个元素通过了提供的测试函数。如果有至少一个元素满足条件，则返回true,否则返回false。

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

const hasEvenNumber = numbers.some(num => num %2 === 0)；

console.log(hasEvenNumber);

//输出：true

8、.every()

用于测试数组中的所有元素是否都通过了提供的测试函数。如果所有元素都满足条件，则返回true,否则返回false。

const numbers = [2,4,6,8,10];

const allAreEven = numbers.every(num => num%2 === 0 );

console.log(allAreEven);

//输出：true

9、.sort（）

对数组的元素进行排序

const numbers = [5, 3, 8, 1, 2];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 3, 5, 8]

10、.slice()

用于返回一个新数组对象，这个对象是一个由begin到end（不包括end）的原数组的浅拷贝。

const numbers = [1, 2, 3, 4, 5];
const subArray = numbers.slice(1, 3);
console.log(subArray); // [2, 3]

11、.splice()

用于通过删除或替换现有元素或者添加新元素来修改数组。

const numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 1, 'a', 'b');
console.log(numbers); // [1, 2, 'a', 'b', 4, 5]

12、.concat()

用于合并两个或多个数组。

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = array1.concat(array2);
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

13、.includes()

用于判断一个数组是否包含一个指定的值，根据情况返回true或false。

const numbers = [1, 2, 3, 4, 5];
const includesThree = numbers.includes(3);
console.log(includesThree); // true

14、.indexOf（）

返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

const numbers = [1, 2, 3, 4, 5];
const index = numbers.indexOf(3);
console.log(index); // 2

15、.lastIndexOf()

返回在数组中可以找到一个给定元素的最后一个索引，如果不存在，则返回-1。

const numbers = [1, 2, 3, 2, 5];
const lastIndex = numbers.lastIndexOf(2);
console.log(lastIndex); // 3

这些高阶函数提供了强大的工具来处理数组数据，使得数组操作更加简洁和高效。

另外，sort()函数还可以用来排序字符串：

sort 函数可以用来排序字符串。在JavaScript中，sort 函数默认将数组元素转换为字符串，并按照字符串的Unicode编码顺序进行排序。因此，当你对包含字符串的数组使用 sort 函数时，它会按照字典顺序（即字母顺序）对字符串进行排序。

示例：排序字符串数组

const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
fruits.sort();
console.log(fruits); // 输出: ['Apple', 'Banana', 'Mango', 'Orange']

在这里，sort 函数将字符串数组 fruits 按照字母顺序排序。

注意

大小写敏感：默认的 sort 函数是大小写敏感的，这意味着大写字母会排在小写字母之前。例如

const items = ['banana', 'Orange', 'apple'];
items.sort();
console.log(items); // 输出: ['Orange', 'apple', 'banana']

如果你需要不区分大小写的排序，可以使用自定义的比较函数：

const items = ['banana', 'Orange', 'apple'];
items.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(items); // 输出: ['apple', 'banana', 'Orange']

国际化排序：如果你需要根据特定语言环境进行排序（例如，处理重音字符），可以使用 localeCompare 方法：

const items = ['äpple', 'banana', 'Apple'];
items.sort((a, b) => a.localeCompare(b));
console.log(items); // 输出: ['Apple', 'äpple', 'banana']

自定义排序：可以通过提供自定义的比较函数来控制排序行为。比较函数应该返回一个负数、零或正数，以指示第一个参数是应该排在第二个参数之前、相同位置还是之后
```
const items = ['banana', 'Orange', 'apple'];
items.sort((a, b) => {
  if (a < b) return -1;
  if (a > b) return 1;
  return 0;
});
console.log(items); // 输出: ['apple', 'banana', 'Orange']
```