前言

在 JavaScript 中，数组是一种非常常用的数据结构，它提供了丰富的方法来操作数组元素。下面我为小伙伴们介绍一些常用的数组方法及其使用示例。

1. length

作用： length 方法返回一个数组的长度，即数组中元素的个数。

示例 :

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

console.log(numbers.length); // 5

2. `concat()`

作用 : concat() 方法用于将两个或多个数组合并成一个新数组，不会影响原数组。

示例 :

let numbers1 = [1, 2];
let numbers2 = [3, 4];
let newarr = numbers1.concat(numbers2);

console.log(newarr); // [1, 2, 3, 4]

3. `push()`

作用 : push() 方法在数组的末尾添加一个或多个元素，并返回新数组的长度。

示例 :

let numbers = [1, 2, 3];
let len = numbers.push(4, 5);

console.log(len); // 5
console.log(numbers); // [1, 2, 3, 4, 5]

4. `pop()`

作用 : pop() 方法从数组的末尾移除最后一个元素，并返回被移除的元素。

示例 :


let numbers = [1, 2, 3, 4];
let lastNumber = numbers.pop();

console.log(lastNumber); // 4
console.log(numbers); // [1, 2, 3]

5. `shift()`

作用 : shift() 方法从数组的头部移除第一个元素，并返回被移除的元素。

示例 :

let numbers = [1, 2, 3, 4];
let firstNumber = numbers.shift();

console.log(firstNumber); // 1
console.log(numbers); // [2, 3, 4]

6. `unshift()`

作用 : unshift() 方法在数组的头部添加一个或多个元素，并返回新数组的长度。

示例 :

let numbers = [3, 4];
let len = numbers.unshift(1, 2);

console.log(len); // 4
console.log(numbers); // [1, 2, 3, 4]

7. `slice()`

作用 : slice() 方法返回一个从原数组中指定开始下标到结束下标之间的新数组，不会影响原数组。

示例 :

let numbers = [1, 2, 3, 4, 5];
let selectedNumbers = numbers.slice(1, 3);

console.log(selectedNumbers); // [2, 3]
console.log(numbers); // [1, 2, 3, 4, 5]

8. `splice()`

作用 : splice() 方法可以从数组中删除元素或向数组中添加元素，并返回被删除的元素。

删除元素：splice(startIndex, deleteCount)，从 startIndex 开始删除 deleteCount 个元素。

let numbers = [1, 2, 3, 4, 5];
let removedElements = numbers.splice(2, 2); // 从索引为2的位置开始删除2个元素

console.log(removedElements); // [3, 4]
console.log(numbers); // [1, 2, 5]

添加元素：splice(startIndex, 0, item1, item2, ...)，从 startIndex 开始添加 item1、item2 等元素。

let numbers = [1, 2, 3, 4, 5];
numbers.splice(2, 0, 6, 7); // 从索引为2的位置开始插入元素6和7

console.log(numbers); // [1, 2, 6, 7, 3, 4, 5]

补充

splice() 和 slice() 是 JavaScript 中数组的两个常用方法，它们有不同的作用和用法：

splice() 方法：
- 作用：splice() 方法可用于向数组中添加或删除元素，并返回被删除的元素组成的数组。
- 用法：splice() 方法可以接受多个参数，主要包括：
  - 起始索引（必需）：指定修改的起始位置。
  - 删除的元素个数（可选）：指定要删除的元素个数。
  - 要添加的元素（可选）：指定要添加到数组的新元素。
- 示例：
```
let arr = [1, 2, 3, 4, 5];
let removed = arr.splice(1, 2, 'a', 'b');

console.log(arr); // 输出：[1, 'a', 'b', 4, 5]
console.log(removed); // 输出：[2, 3]
```
slice() 方法：
- 作用：slice() 方法返回数组的一个浅拷贝部分，不会改变原数组。
- 用法：slice() 方法可以接受两个参数，分别是要拷贝的起始和结束位置（不包括结束位置）。
- 示例：
```
let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);

console.log(sliced); // 输出：[2, 3]
console.log(arr); // 输出：[1, 2, 3, 4, 5]
```

总结：

splice() 方法用于修改原数组，可删除元素、添加元素，返回被删除的元素组成的数组。
slice() 方法用于创建原数组的浅拷贝，不会修改原数组。

9. `indexOf()`

作用 : indexOf() 方法返回一个指定元素在数组中首次出现的索引，如果不存在则返回 -1。

示例 :


let fruits = ['apple', 'banana', 'orange', 'pear'];
let index = fruits.indexOf('orange');
console.log(index); // 2

10. `includes()`

作用： includes() 方法判断一个数组是否包含一个指定的值，返回布尔值。

示例：

let numbers = [1, 2, 3, 4, 5];
let index = numbers.indexOf(3);

console.log(index); // 2 (索引值）

11. `join()`

作用： join() 方法将数组中所有元素转换为一个字符串，并返回这个字符串。可以指定连接符。

示例：

let numbers = [1, 2, 3, 4, 5];
let numberStr = numbers.join(' - ');

console.log(numberStr); // '1 - 2 - 3 - 4 - 5'

12. `reverse()`

作用： reverse() 方法将数组中的元素颠倒顺序，改变原数组。

示例：

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();

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

13. `sort()`

作用： sort() 方法将数组中的元素排序，改变原数组。

可以传入一个函数作为参数，该函数用于指定排序规则。如果不传入参数，则默认按照 Unicode 编码进行排序。

示例：

let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort();

console.log(numbers); // [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

////////////////////

let numbers = [2, 5, 1, 10];
numbers.sort((a, b) => a - b);

console.log(numbers); // [1, 2, 5, 10]

14. `filter()`

作用： filter() 方法根据指定条件筛选数组中的元素，返回一个新数组。

可以传入一个函数作为参数，该函数用于检查每个元素是否符合条件。

示例：

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

console.log(evenNumbers); // [2, 4]

15. `map()`

作用： map() 方法对数组中的每个元素执行指定操作，返回一个新数组。

可以传入一个函数作为参数，该函数用于处理每个元素。

示例

let numbers = [1, 2, 3, 4, 5];
let squaredNumbers = numbers.map(num => num * num);

console.log(squaredNumbers); // [1, 4, 9, 16, 25]

16. `reduce()`

作用： reduce() 方法对数组中的每个元素执行指定归约操作，返回一个累积结果。

可以传入一个函数作为参数，该函数用于处理每个元素和上一个元素的累积值。

示例：

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, cur) => acc + cur);
console.log(sum); // 15

17. `forEach()`

作用： forEach() 方法对数组中的每个元素执行指定操作，没有返回值。

可以传入一个函数作为参数，该函数用于处理每个元素。

示例

let fruits = ['apple', 'banana', 'orange', 'pear'];
fruits.forEach(fruit => {
  console.log(fruit);
});

18. `find`()

作用： find 方法用于在数组中查找符合指定条件的第一个元素，并返回该元素。find 方法接收一个回调函数作为参数，该回调函数用于定义查找条件。

示例：

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

// 查找大于 3 的第一个元素
const foundNumber = numbers.find(num => num > 3);

console.log(foundNumber); // 输出：4

总结

会影响原数组的方法：

push(): 向数组末尾添加一个或多个元素，并返回新的长度。
pop(): 删除数组最后一个元素，并返回该元素的值。
shift(): 删除数组的第一个元素，并返回该元素的值。
unshift(): 向数组的开头添加一个或多个元素，并返回新的长度。
splice(): 从数组中添加/删除项目，然后返回被删除的项目。
reverse(): 颠倒数组中元素的顺序。
sort(): 对数组元素进行排序。

不会影响原数组的方法：

concat(): 连接两个或更多数组，并返回结果。
slice(): 选取数组的一部分，并返回一个新数组。
indexOf(): 返回数组中第一个找到的指定元素的索引。
includes(): 判断一个数组是否包含一个指定的值。
join(): 把数组的所有元素放入一个字符串。
filter(): 创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。
map(): 通过给定函数处理数组的每个元素，返回处理后的数组。
reduce(): 对数组中的每个元素执行一个由您提供的函数，并将其结果汇总为单个返回值。
forEach(): 对数组的每个元素执行一次提供的函数。

速看！JavaScript 中常用数组操作大放送

前言

1. length

2. concat()

3. push()

4. pop()

5. shift()

6. unshift()

7. slice()

8. splice()

补充

9. indexOf()

10. includes()

11. join()

12. reverse()

13. sort()

14. filter()

15. map()

16. reduce()

17. forEach()

18. find()

总结

2. `concat()`

3. `push()`

4. `pop()`

5. `shift()`

6. `unshift()`

7. `slice()`

8. `splice()`

9. `indexOf()`

10. `includes()`

11. `join()`

12. `reverse()`

13. `sort()`

14. `filter()`

15. `map()`

16. `reduce()`

17. `forEach()`

18. `find`()