JavaScript数组常用的方法

总共十九种常用的方法，其中改变原数组方法有七种，不改变原数组方法有五种，ES6新增的数组方法有七种

一、改变原数组的方法

1push()

语法: array.push(element1, ..., elementN)

作用: 向数组的末尾添加一个或多个元素

返回值: 添加后数组的新长度

示例：

let fruits = ['apple', 'banana'];
let length = fruits.push('orange', 'pear');
console.log(fruits); // 输出: ['apple', 'banana', 'orange', 'pear']
console.log(length); // 输出: 4

2pop()

语法:array.pop()

作用: 从数组中删除最后一个元素

返回值: 删除的元素

示例：

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
console.log(lastFruit); // 输出: 'orange'
console.log(fruits); // 输出: ['apple', 'banana']

3unshift()

语法: array.unshift(element1, ..., elementN)

作用: 向数组的开头添加一个或多个元素

返回值: 添加后数组的新长度

示例：

let fruits = ['apple', 'banana'];
fruits.unshift('orange', 'pear');
console.log(fruits); // 输出: ['orange', 'pear', 'apple', 'banana']

4shift()

语法: array.shift()

作用: 从数组中删除第一个元素

返回值: 删除的元素

示例：

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
console.log(firstFruit); // 输出: 'apple'
console.log(fruits); // 输出: ['banana', 'orange']

5reverse()

语法: array.reverse()

作用: 颠倒数组中元素的顺序

返回值: 翻转后的数组，仍是原数组

示例：

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // 输出: [5, 4, 3, 2, 1]

6sort()

语法一: array.sort() 会排序 会按照位排序

语法二: array.sort(function (a,b) {return a-b}) 正序排列

语法三: array.sort(function (a,b) {return b-a}) 倒序排列

**作用：**对数组的元素进行排序

**返回值：**排序后的数组，仍是原数组

示例：

let arr = [2, 63, 48, 5, 4, 75, 69, 11, 23]
arr.sort()
console.log(arr);  // 输出：[11, 2, 23, 4, 48, 5, 63, 69, 75]

arr.sort((a, b) => a - b);
console.log(arr);  // 输出：[2, 4, 5, 11, 23, 48, 63, 69, 75]

7splice()

语法一: array.splice(开始索引,指定要删除的元素的数量)

作用: 向数组中插入、删除或替换元素

返回值: 截取出来的数据,是新数组；同时原数组只剩未截取数据

语法二: array.splice(开始索引,指定要删除的元素的数量,插入的元素)

作用: 删除并插入数据到原数组

返回值: 截取出来的数据组成的新数组；同时原数组只剩未截取数据和插入的数据

示例：

let arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 从索引为 2 的位置开始删除 1 个元素
console.log(arr); // 输出: [1, 2, 4, 5]

arr.splice(2, 0, 6, 7); // 从索引为 2 的位置开始插入 6 和 7
console.log(arr); // 输出: [1, 2, 6, 7, 4, 5]

let deleted = arr.splice(3, 2, 8, 9); // 从索引为 3 的位置开始删除 2 个元素，并插入 8 和 9
console.log(arr); // 输出: [1, 2, 6, 8, 9, 5]
console.log(deleted); // 输出: [7, 4]

二、不改变原数组的方法

1concat()

语法: array.concat(value1,value2,...,valueN)

作用: 将两个或多个数组合并成一个新数组

返回值: 返回合并后的新数组,而不会修改原数组

示例：

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr2);

console.log(arr3); // 输出: [1, 2, 3, 4, 5, 6]

2join()

语法:array.join(separator)

作用: 将数组的所有元素以连接符separator拼接成一个字符串

返回值: 拼接好的字符串

示例：

var fruits = ["apple", "banana", "orange"];
var result = fruits.join(); // 使用默认的逗号作为分隔符
console.log(result); // 输出: "apple,banana,orange"

var result2 = fruits.join(" and "); // 使用 " and " 作为分隔符
console.log(result2); // 输出: "apple and banana and orange"

3slice()

语法: array.slice(开始索引, 结束索引)

作用: 从数组中提取指定位置的元素，并将其放入一个新数组中

返回值: 截取出来的数据，放到一个新数组，原数组不变（注意与splice区分）

注意: 包前不好后，包含开始索引不包含结束索引

示例：

var arr = [1, 2, 3, 4, 5];
var slicedArr = arr.slice(1, 4);
console.log(slicedArr); // 输出: [2, 3, 4]

var slicedArr2 = arr.slice(2);
console.log(slicedArr2); // 输出: [3, 4, 5]

var slicedArr3 = arr.slice(-2);
console.log(slicedArr3); // 输出: [4, 5]

var slicedArr4 = arr.slice(-3, -1);
console.log(slicedArr4); // 输出: [3, 4]

4indexof()

语法一:array.indexOf(查询数据)

语法二:array.indexOf(查询数据,开始索引)

作用: 从左查找数组中指定元素的第一个匹配项

返回值：如果有就返回该数据第一次出现的索引，如果没有返回 -1

示例：

var arr = [1, 2, 3, 4, 5];
var index = arr.indexOf(3);
console.log(index); // 输出: 2

var index2 = arr.indexOf(6);
console.log(index2); // 输出: -1

var index3 = arr.indexOf(2, 2);
console.log(index3); // 输出: -1

5lastIndexOf()

语法一:array.indexOf(查询数据)

语法二:array.lastIndexOf(查询数据,开始索引)

作用: 从数组的末尾开始查找指定元素的最后一个匹配项

返回值：如果有就返回该数据第一次出现的索引，如果没有返回 -1

示例：

var arr = [1, 2, 3, 4, 2, 5];
var lastIndex = arr.lastIndexOf(2);
console.log(lastIndex); // 输出: 4

var lastIndex2 = arr.lastIndexOf(6);
console.log(lastIndex2); // 输出: -1

var lastIndex3 = arr.lastIndexOf(2, 3);
console.log(lastIndex3); // 输出: 1

三、ES6新增的方法

1forEach()

语法: array.forEach(function(currentValue, index, array) {...});

• currentValue: 当前正在处理的元素

• index : 当前元素的索引

• array : 被遍历的数组

作用: 用来循环遍历数组

返回值: 没有返回值 如果真的说要有返回值就是undefined

示例：

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(element, index) {
  console.log('Index ' + index + ': ' + element);
});

2map()

语法: array.map(function(currentValue, index, array) {...});

作用: 用于对数组的每个元素进行遍历和映射

返回值: 一个新数组，新数组中的每个元素都是通过对原数组的每个元素应用指定的回调函数得到的结果

注意: 要以return的形式执行返回条件

示例：

var arr = [1, 2, 3, 4, 5];
var mappedArr = arr.map(function(element) {
  return element * 2;
});
console.log(mappedArr); // 输出: [2, 4, 6, 8, 10]

3filter()

语法: array.filter(function(currentValue, index, array) {...});

作用: 过滤数组,包含原始数组中满足指定函数的所有元素

返回值: 如果有就是过滤(筛选)出来的数据保存在一个新数组中；如果没有返回一个空数组

注意: 要以return的形式执行返回条件

示例：

var arr = [1, 2, 3, 4, 5];
var filteredArr = arr.filter(function(element) {
  return element > 2;
});
console.log(filteredArr); // 输出: [3, 4, 5]

4every()

语法: array.every(function(currentValue, index, array) {...});

作用: 检查数组中的所有元素是否满足指定条件

返回值: 布尔值,只有所有项都满足条件返回的是true。反之，返回的就是false

注意: 要以return的形式执行返回条件

示例：

var arr = [1, 2, 3, 4, 5];
var isAllEven = arr.every(function(element) {
  return element % 2 === 0;
});
console.log(isAllEven); // 输出: false

5some()

语法:array.some(function(currentValue, index, array) {...});

作用: 用于检测数组中是否至少有一个元素满足指定条件

返回值: 布尔值,只要有一个满足条件返回的是true，都不满足返回的就是false

注意: 要以return的形式执行返回条件

示例：

var arr = [1, 2, 3, 4, 5];
var hasEven = arr.some(function(element) {
  return element % 2 === 0;
});
console.log(hasEven); // 输出: true

6find()

语法: :array.find(function(currentValue, index, array) {...});

作用: 查找数组中满足指定条件的第一个元素

返回值: 如果有,返回满足条件的第一个数据；如果没有就是undefined

注意: 要以return的形式执行返回条件

示例：

var arr = [1, 2, 3, 4, 5];
var found = arr.find(function(element) {
  return element > 2;
});
console.log(found); // 输出: 3

7reduce()

语法: array.reduce(function(accumulator, currentValue, index, array) { ... }, initialValue);

• accumulator:累加器，累积回调函数的返回值

• initialValue：可选的初始值，如果提供了初始值，则累加器将从该值开始累积；如果省略了初始值，则累加器将从数组的第一个元素开始累积

作用: 用于对数组中的所有元素执行一个指定的回调函数，并将结果累积为一个值

返回值: 累积后的结果

注意: 以return的形式书写返回条件

示例：

var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 输出: 15