前端常用数组方法以及示例

简介

常用的数组处理方法很多这里整理了一些给大家参考

示例

1.push()

向数组末尾添加一个或多个元素，并返回新的长度

var fruits = ['apple', 'banana'];
fruits.push('orange'); // 返回3
console.log(fruits); // 输出['apple', 'banana', 'orange']
 

2.pop()

从数组末尾移除一个元素，并返回被移除的元素。

var fruits = ['apple', 'banana', 'orange'];
var removedFruit = fruits.pop(); // 返回'orange'
console.log(fruits); // 输出['apple', 'banana']
 

3.shift()

从数组开头移除一个元素，并返回被移除的元素。

var fruits = ['apple', 'banana', 'orange'];
var removedFruit = fruits.shift(); // 返回'apple'
console.log(fruits); // 输出['banana', 'orange']
 

4.unshift()

向数组开头添加一个或多个元素，并返回新的长度。

var fruits = ['banana', 'orange'];
fruits.unshift('apple'); // 返回3
console.log(fruits); // 输出['apple', 'banana', 'orange']
 

5.concat()

将两个或多个数组合并成一个新数组。

var fruits1 = ['apple', 'banana'];
var fruits2 = ['orange', 'grape'];
var combinedFruits = fruits1.concat(fruits2);
console.log(combinedFruits); // 输出['apple', 'banana', 'orange', 'grape']
 

6.slice()

返回数组的一部分，不会修改原数组。

var fruits = ['apple', 'banana', 'orange', 'grape'];
var slicedFruits = fruits.slice(1, 3);
console.log(slicedFruits); // 输出['banana', 'orange']
 

7.indexOf()

返回指定元素在数组中首次出现的索引，如果未找到则返回-1。

var fruits = ['apple', 'banana', 'orange', 'grape'];
var indexOfOrange = fruits.indexOf('orange');
console.log(indexOfOrange); // 输出2
 

8.join()

将数组的所有元素放入一个字符串，并用指定的分隔符分隔。

var fruits = ['apple', 'banana', 'orange'];
var joinedString = fruits.join(', ');
console.log(joinedString); // 输出'apple, banana, orange'
 

9.reverse()

将数组中的元素顺序反转。

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

10.sort()

对数组元素进行排序，默认是按照 Unicode 编码进行排序，如果提供 compareFunction，则按照指定的比较规则进行排序。

const numbers = [5, 2, 4, 1, 3];
numbers.sort();
console.log(numbers); // 输出 [1, 2, 3, 4, 5]

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

11.splice()

• 语法：array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
• 功能：从数组中添加、删除或替换元素，具体操作取决于参数的不同。

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

// 删除元素
numbers.splice(2, 1);
console.log(numbers); // 输出 [1, 2, 4, 5]

// 插入元素
numbers.splice(2, 0, 3);
console.log(numbers); // 输出 [1, 2, 3, 4, 5]

// 替换元素
numbers.splice(2, 1, 'a', 'b');
console.log(numbers); // 输出 [1, 2, 'a', 'b', 4, 5]

常用的遍历数组的方法：

forEach

• 语法：array.forEach(callback(currentValue[, index[, array]])[, thisArg])
• 功能：对数组中的每个元素执行一次回调函数。

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

numbers.forEach(number => {
  console.log(number); // 输出每个元素的值
});

map

• 语法：array.map(callback(currentValue[, index[, array]])[, thisArg])
• 功能：创建一个新数组，其中的元素是通过调用回调函数对原始数组中的每个元素进行处理得到的。

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

const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // 输出 [2, 4, 6, 8, 10]

filter

• 语法：array.filter(callback(element[, index[, array]])[, thisArg])
• 功能：创建一个新数组，其中包含满足指定条件的原始数组中的元素。

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

const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // 输出 [2, 4]

reduce

• 语法：array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
• 功能：对数组中的所有元素进行累积运算，返回一个最终的结果。

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

const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出 15

some

• 语法：array.some(callback(element[, index[, array]])[, thisArg])
• 功能：检查数组中是否至少有一个元素满足指定条件。
• 返回值：如果至少有一个元素满足条件，则返回true；否则返回false。

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

// 检查数组中是否存在偶数
const hasEvenNumber = numbers.some(number => number % 2 === 0);
console.log(hasEvenNumber); // 输出 true

// 检查数组中是否存在负数
const hasNegativeNumber = numbers.some(number => number < 0);
console.log(hasNegativeNumber); // 输出 false

every

• 语法：array.every(callback(element[, index[, array]])[, thisArg])
• 功能：检查数组中的所有元素是否都满足指定条件。
• 返回值：如果所有元素都满足条件，则返回true；否则返回false。

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

// 检查数组中的所有元素是否为正数
const allPositiveNumbers = numbers.every(number => number > 0);
console.log(allPositiveNumbers); // 输出 true

// 检查数组中的所有元素是否为偶数
const allEvenNumbers = numbers.every(number => number % 2 === 0);
console.log(allEvenNumbers); // 输出 false

1. 使用some()方法可以检查数组中是否至少有一个元素满足条件；
2. 使用every()方法可以检查数组中的所有元素是否都满足条件；
3. 这两个方法都接受一个回调函数作为参数，该回调函数定义了满足条件的规则；
4. 返回值为布尔值，表示是否满足条件。

总结

原数组改变的方法有：push pop shift unshift reverse sort splice
不改变原数组的方法有：concat map filter join every some indexOf slice forEach...