javascript数组里的27个方法总合详解

首先，我们需要了解JavaScript数组的数据结构和一些常用的API。以下是这篇攻略的大纲：

JavaScript数组：数据结构和常用API

1. 数组基础

数组是一种有序的数据集合。它可以存储任何类型的数据，包括数字、字符串、函数、对象等等。一个数组可以包含任意数量的元素，每个元素可以通过一个索引值（从0开始）来访问。

数组的常用操作包括：创建数组、添加元素、删除元素、访问元素、修改元素、排序数组等。

2. 数组API

JavaScript数组有许多可用的API。以下是27个常用的方法：

1. push()

在数组末尾添加一个或多个元素。

const fruits = ['apple', 'orange'];
fruits.push('banana', 'kiwi');
console.log(fruits); // ['apple', 'orange', 'banana', 'kiwi']

2. pop()

删除数组末尾的元素。

const fruits = ['apple', 'orange', 'banana'];
fruits.pop();
console.log(fruits); // ['apple', 'orange']

3. shift()

删除数组开头的元素。

const fruits = ['apple', 'orange', 'banana'];
fruits.shift();
console.log(fruits); // ['orange', 'banana']

4. unshift()

在数组开头添加一个或多个元素。

const fruits = ['apple', 'orange', 'banana'];
fruits.unshift('kiwi', 'lemon');
console.log(fruits); // ['kiwi', 'lemon', 'apple', 'orange', 'banana']

5. slice()

返回一个数组的一部分。

const fruits = ['apple', 'orange', 'banana', 'kiwi', 'lemon'];
const citrus = fruits.slice(1, 3);
console.log(citrus); // ['orange', 'banana']

6. splice()

在数组中添加、删除或替换元素。

const fruits = ['apple', 'orange', 'banana', 'kiwi'];
fruits.splice(2, 1, 'lemon', 'pear');
console.log(fruits); // ['apple', 'orange', 'lemon', 'pear', 'kiwi']

7. concat()

连接两个或多个数组。

const fruits = ['apple', 'orange'];
const veggies = ['carrot', 'celery'];
const food = fruits.concat(veggies);
console.log(food); // ['apple', 'orange', 'carrot', 'celery']

8. join()

将数组的元素连接成一个字符串。

const fruits = ['apple', 'orange', 'banana'];
const fruitString = fruits.join(', ');
console.log(fruitString); // 'apple, orange, banana'

9. indexOf()

返回数组中某个元素第一次出现的索引值。

const fruits = ['apple', 'orange', 'banana'];
const index = fruits.indexOf('orange');
console.log(index); // 1

10. lastIndexOf()

返回数组中某个元素最后一次出现的索引值。

const fruits = ['apple', 'orange', 'banana', 'orange'];
const index = fruits.lastIndexOf('orange');
console.log(index); // 3

11. forEach()

对数组中的每个元素执行一次给定的函数。

const fruits = ['apple', 'orange', 'banana'];
fruits.forEach(function(fruit){
    console.log(fruit);
});
// 'apple'
// 'orange'
// 'banana'

12. map()

返回一个由原数组每个元素执行一次给定的函数后的返回值组成的新数组。

const numbers = [1, 2, 3];
const doubleNumbers = numbers.map(function(num){
    return num * 2;
});
console.log(doubleNumbers); // [2, 4, 6]

13. filter()

返回一个由原数组中所有通过给定函数测试的元素组成的新数组。

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

14. every()

检测数组中所有元素是否都通过指定的测试。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.every(function(num){
    return num % 2 === 0;
});
console.log(evenNumbers); // false

15. some()

检测数组中是否存在至少一个元素通过指定的测试。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.some(function(num){
    return num % 2 === 0;
});
console.log(evenNumbers); // true

16. reduce()

通过函数实现数组元素的累计计算。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(total, num){
    return total + num;
}, 0);
console.log(sum); // 15

17. reduceRight()

和reduce()类似，但是从右到左遍历数组。

const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduceRight(function(previousValue, currentValue){
    return previousValue * currentValue;
});
console.log(result); // 120

18. sort()

排序数组。

const fruits = ['kiwi', 'apple', 'banana', 'orange'];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'kiwi', 'orange']

19. reverse()

反转数组的顺序。

const fruits = ['apple', 'orange', 'banana'];
fruits.reverse();
console.log(fruits); // ['banana', 'orange', 'apple']

20. toString()

将数组转换成字符串。

const fruits = ['apple', 'orange', 'banana'];
const fruitString = fruits.toString();
console.log(fruitString); // 'apple,orange,banana'

21. valueOf()

返回数组对象的原始值。

const fruits = ['apple', 'orange', 'banana'];
const value = fruits.valueOf();
console.log(value); // ['apple', 'orange', 'banana']

22. length

返回数组的长度。

const fruits = ['apple', 'orange', 'banana'];
console.log(fruits.length); // 3

23. fill()

将数组的元素全部填充成指定的值。

const arr = [1, 2, 3];
arr.fill(0);
console.log(arr); // [0, 0, 0]

24. find()

返回数组中第一个符合条件的元素。

const numbers = [2, 3, 4, 5];
const firstEvenNumber = numbers.find(function(num){
    return num % 2 === 0;
});
console.log(firstEvenNumber); // 2

25. findIndex()

返回数组中第一个符合条件的元素的索引值。

const numbers = [2, 3, 4, 5];
const firstEvenNumberIndex = numbers.findIndex(function(num){
    return num % 2 === 0;
});
console.log(firstEvenNumberIndex); // 0

26. includes()

返回数组是否包含某个元素。

const fruits = ['apple', 'orange', 'banana'];
const includesApple = fruits.includes('apple');
console.log(includesApple); // true

27. flat()

将嵌套数组展平。

const arr = [1, 2, [3, 4]];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4]

3. 示例说明

以下是几个数组API的示例代码：

示例1 : 使用map()方法将字符串数组转换为数字数组

const strArr = ['1', '2', '3'];
const numArr = strArr.map(function(str){
    return parseInt(str);
});
console.log(numArr); // [1, 2, 3]

示例2 : 使用filter()方法筛选出数组中的负数

const numbers = [-1, 2, -3, 4, -5];
const negativeNumbers = numbers.filter(function(num){
    return num < 0;
});
console.log(negativeNumbers); // [-1, -3, -5]

以上就是JavaScript数组的数据结构和常用API的详细讲解，希望能对你理解和使用数组有所帮助！