【JavaScript】常见数组函数解释及示例汇总

---

前言

本文主要面向前端网页开发的用户和读者，详细介绍了JavaScript中数组函数的应用。

---

一、JavaScript是什么？

简称：JS，是一门动态的编程语言。主要应用于前端网页开发，增强网页的交互性和动态性。包括事件处理、表单验证、动画创建等多种功能。
基于JS的流行框架有：Vue.js、Bootstrap、React…

二、常见数组函数解释及语法

1.push()

释义：用于将新元素添加到数组的末尾，并返回新的数组长度。

语法：

array.push(element1, ..., elementN)

• array 是要添加元素的数组。
• element1, …, elementN 是要添加到数组末尾的元素。
• 可以添加多个元素。

示例：

let fruits = ['Apple', 'Banana'];  
  
// 添加一个元素  
fruits.push('Cherry');  
console.log(fruits); // 输出: ['Apple', 'Banana', 'Cherry']  
  
// 添加多个元素  
fruits.push('Date', 'Elderberry');  
console.log(fruits); // 输出: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']  
  
// 获取新数组的长度  
let newLength = fruits.push('Fig');  
console.log(newLength); // 输出: 6  
console.log(fruits); // 输出: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig']

2.pop()

释义：用于移除数组中的最后一个元素，并返回该元素的值。

语法：

array.pop()

示例：

let fruits = ['Apple', 'Banana', 'Cherry'];  
  
// 移除并返回最后一个元素  
let lastFruit = fruits.pop();  
console.log(lastFruit); // 输出: 'Cherry'  
console.log(fruits);    // 输出: ['Apple', 'Banana']  
  
// 尝试从一个空数组中移除元素  
let emptyArray = [];  
let result = emptyArray.pop();  
console.log(result);    // 输出: undefined  
console.log(emptyArray);// 输出: []

应用场景：pop() 方法通常用于需要从数组末尾移除元素的场景，例如实现一个栈（后进先出）数据结构时。在栈的实现中，push() 方法用于添加元素到栈顶，而 pop() 方法则用于移除并返回栈顶的元素。

3.shift()

释义：用于移除数组中的第一个元素，并返回该元素的值。同时，数组的长度会相应减少1，其余元素会向前移动一位以填补被移除元素的位置。

语法：

array.shift()

示例：

let fruits = ['Banana', 'Orange', 'Apple', 'Mango'];  
  
// 移除第一个元素 'Banana'  
let removedFruit = fruits.shift();  
  
console.log(fruits); // 输出: ['Orange', 'Apple', 'Mango']  
console.log(removedFruit); // 输出: 'Banana'  
  
// 尝试在空数组上使用 shift()  
let emptyArray = [];  
let result = emptyArray.shift();  
  
console.log(emptyArray); // 输出: []  
console.log(result); // 输出: undefined

应用场景：shift() 方法常用于需要按先进先出（FIFO）顺序处理元素的场景，例如任务队列、消息队列等。然而，在性能敏感的场合，应考虑使用更适合这种操作的数据结构。

4.unshift()

释义： 用于在数组的开头添加一个或多个元素，并返回新的数组长度。

语法：

array.unshift(element1, ..., elementN)

• element1, …, elementN：这些参数代表要添加到数组开头的元素。你可以一次性添加多个元素。

示例：

let numbers = [2, 3, 4];  
  
// 在数组开头添加元素1  
let newLength = numbers.unshift(1);  
  
console.log(numbers); // 输出结果: [1, 2, 3, 4]  
console.log(newLength); // 输出结果: 4，表示新数组的长度  
  
// 一次性在数组开头添加多个元素  
numbers.unshift(-2, -1);  
  
console.log(numbers); // 输出结果: [-2, -1, 1, 2, 3, 4]

5.every()

释义：用于测试数组的所有元素是否都通过了指定函数的测试。如果数组中每个元素都执行了提供的函数，并且都返回 true，则 every() 方法返回 true；否则，它返回 false。

语法：

array.every(function(currentValue, index, arr), thisValue)

• currentValue：数组中当前正在处理的元素。
• index（可选）：当前元素的索引。
• arr（可选）：调用 every()方法的数组对象。
• thisValue（可选）：当执行回调函数时，用作 this 的值。如果省略了这个参数，this 的值在非严格模式下将是全局对象（在浏览器中通常是 window），而在严格模式（‘use strict’;）下将是 undefined。

示例：

// 检查数组中的所有元素是否都大于10  
let numbers = [12, 5, 8, 130, 44];  
  
let allGreaterThanTen = numbers.every(function(item) {  
  return item > 10;  
});  
  
console.log(allGreaterThanTen); // 输出: false  
  
// 使用箭头函数检查数组中的所有元素是否都是偶数（推荐）
let evens = [2, 4, 6, 8];  
  
let allEven = evens.every(item => item % 2 === 0);  
  
console.log(allEven); // 输出: true

// 使用thisValue
let person = {  
  age: 20,  
  isAdult: function(age) {  
    return age >= 18;  
  }  
};  
  
let ages = [19, 22, 25];  
  
// 使用 every() 方法和 thisValue  
let allAdults = ages.every(function(age) {  
  // 在这里，this 指向 person 对象  
  return this.isAdult(age);  
}, person); // 注意这里传递了 person 作为 thisValue  
  
console.log(allAdults); // 输出: true

6.slice()

释义：用于从一个已有的数组中返回一个浅拷贝的新数组对象，该新数组对象包含从原数组中选定的元素。这个方法不会修改原数组，而是返回一个新数组。

语法：

array.slice([begin[, end]])

• begin（可选）：指定从哪个索引位置开始提取。如果该参数为负数，则表示从数组末尾开始的第几个元素开始提取。如果省略该参数，则默认从索引0开始。
• end（可选）：指定提取到哪个索引位置结束（不包括该索引位置的元素）。如果该参数为负数，则表示提取到数组末尾倒数第几个元素之前。如果省略该参数，则默认提取到数组末尾。

示例：

let fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];  
  
// 提取从索引1到索引3（不包括索引3）的元素  
let slicedFruits = fruits.slice(1, 3);  
  
console.log(slicedFruits); // 输出: ['Banana', 'Cherry']  
console.log(fruits); // 输出: ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']（原数组未被修改）  
  
// 省略end参数，提取从索引2到数组末尾的所有元素  
let slicedFruits2 = fruits.slice(2);  
  
console.log(slicedFruits2); // 输出: ['Cherry', 'Date', 'Elderberry']  
  
// 使用负数索引  
let slicedFruits3 = fruits.slice(-3, -1);  
  
console.log(slicedFruits3); // 输出: ['Cherry', 'Date']（从倒数第三个元素开始，到倒数第一个元素之前结束）

7.splice()

释义：允许在数组中添加、删除或替换现有元素。与 slice() 方法不同，splice() 会直接修改原数组，并返回由被删除元素组成的新数组（如果没有删除元素，则返回空数组）。

语法：

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

• start：指定修改的开始位置（索引）。如果该索引为负，则表示从数组末尾开始的第几个位置。
• deleteCount（可选）：一个整数，表示要移除的数组元素的个数。如果 deleteCount 是 0 或省略，则不会移除元素。在这种情况下，你至少应该指定一个要添加的新元素。如果 deleteCount 大于实际要删除的元素个数，则所有从 start 位置开始的元素都会被删除。
• item1, item2, …（可选）：要添加进数组的元素，从 start 位置开始。如果不指定，则 splice() 将只删除数组元素。

示例：

let myFish = ['angel', 'clown', 'mandarin', 'surgeon'];  
  
// 从索引2的位置开始删除0个元素，并添加'drum'  
let removed = myFish.splice(2, 0, 'drum');  
  
console.log(myFish); // ['angel', 'clown', 'drum', 'mandarin', 'surgeon']  
console.log(removed); // []（没有元素被删除）  
  
// 从索引3的位置开始删除1个元素  
removed = myFish.splice(3, 1);  
  
console.log(myFish); // ['angel', 'clown', 'drum', 'surgeon']  
console.log(removed); // ['mandarin']（被删除的元素）  
  
// 从索引2的位置开始删除2个元素，并添加'trumpet'和'parrot'  
removed = myFish.splice(2, 2, 'trumpet', 'parrot');  
  
console.log(myFish); // ['angel', 'clown', 'trumpet', 'parrot', 'surgeon']  
console.log(removed); // ['drum', 'surgeon']（被删除的元素）  
  
// 使用负数索引  
removed = myFish.splice(-3, 1);  
  
console.log(myFish); // ['angel', 'clown', 'parrot', 'surgeon']  
console.log(removed); // ['trumpet']（被删除的元素）

应用场景：splice() 方法非常适用于需要在数组中间添加、删除或替换元素的场景。由于它会直接修改原数组，因此在使用时需要注意这一点，以避免对原始数据造成意外的修改。

8.map()

释义：是一个高阶函数，它创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。map() 方法不会改变原始数组，而是返回一个新数组。（常用）

语法：

array.map(callback(currentValue[, index[, array]])[, thisArg])

• callback：生成新数组元素的回调函数，该函数可以接收三个参数：
• currentValue：数组中正在处理的当前元素。
• index（可选）：数组中正在处理的当前元素的索引。
• array（可选）：调用 map() 方法的数组。
• thisArg（可选）：执行 callback 函数时 this 关键字被设置的的值。如果没有提供此参数，则 this 的值在非严格模式下将是全局对象，而在严格模式(use strict)下将是 undefined。（不常用）

示例：

const numbers = [1, 2, 3, 4, 5];  
  
// 将数组中的每个元素乘以2  
const doubled = numbers.map(function(number) {  
  return number * 2;  
});  
  
console.log(doubled); // 输出: [2, 4, 6, 8, 10]  
  
// 使用箭头函数 （简化）
const doubledArrow = numbers.map(number => number * 2);  
  
console.log(doubledArrow); // 输出: [2, 4, 6, 8, 10]  
  
// 使用第二个参数（索引）  
const indexed = numbers.map((number, index) => `Number ${index}: ${number}`);  
  
console.log(indexed); // 输出: ["Number 0: 1", "Number 1: 2", "Number 2: 3", "Number 3: 4", "Number 4: 5"]  
  
// 使用thisArg参数（不常见）  
function Prefixer(prefix) {  
  this.prefix = prefix;  
}  
  
Prefixer.prototype.prefixArray = function(arr) {  
  return arr.map(function(x) {  
    return this.prefix + x;  
  }, this); // 注意这里的thisArg  
};  
  
const pre = new Prefixer('Hello, ');  
console.log(pre.prefixArray(['Alice', 'Bob'])); // 输出: ["Hello, Alice", "Hello, Bob"]

应用场景：在实际开发中，需要对对象数组中的属性处理后，输出新的对象数组。

9.filter()

释义：是一个高阶函数，filter() 方法会遍历数组中的每个元素，并对每个元素执行提供的回调函数。如果回调函数返回 true，则该元素会被包含在返回的新数组中；如果返回 false，则该元素会被排除。

语法：

array.filter(callback(currentValue[, index[, array]])[, thisArg])

callback：用来测试每个元素的回调函数，该函数可以接收三个参数：

• currentValue：数组中正在处理的当前元素。
• index（可选）：数组中正在处理的当前元素的索引。
• array（可选）：调用 filter() 方法的数组。

thisArg（可选）：执行 callback 函数时 this 关键字被设置的的值。如果没有提供此参数，则 this 的值在非严格模式下将是全局对象，而在严格模式(use strict)下将是 undefined。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];  
  
// 筛选出数组中的偶数  
const evens = numbers.filter(function(number) {  
  return number % 2 === 0;  
});  
  
console.log(evens); // 输出: [2, 4, 6, 8, 10]  
  
// 使用箭头函数  
const evensArrow = numbers.filter(number => number % 2 === 0);  
  
console.log(evensArrow); // 输出: [2, 4, 6, 8, 10]  
  
// 筛选出数组中大于5的元素  
const greaterThanFive = numbers.filter(number => number > 5);  
  
console.log(greaterThanFive); // 输出: [6, 7, 8, 9, 10]  
  
// 使用thisArg参数（不常见）  
function isEven(element) {  
  // 注意：这里的this.threshold在调用filter时由thisArg提供  
  return element % this.threshold === 0;  
}  
  
const obj = {  
  threshold: 2  
};  
  
const filtered = [1, 2, 3, 4, 5, 6].filter(isEven, obj); // 传入obj作为thisArg  
  
console.log(filtered); // 输出: [2, 4, 6]，因为2, 4, 6都能被obj.threshold（即2）整除

应用场景：filter() 方法非常适合于从数组中筛选出满足特定条件的元素，并返回一个新数组。

10.find()

释义：用于查找数组中满足提供的测试函数的第一个元素。它返回数组中满足提供的测试函数的第一个元素的值。如果没有找到，则返回 undefined。

语法：

array.find(callback(currentValue[, index[, array]])[, thisArg])

callback：在数组每一项上执行的函数，接收三个参数：

• currentValue：数组中正在处理的当前元素。
• index（可选）：数组中正在处理的当前元素的索引。
• array（可选）：调用 find() 方法的数组。

thisArg（可选）：执行 callback 函数时 this 关键字被设置的的值。如果没有提供此参数，则 this 的值在非严格模式下将是全局对象，而在严格模式(use strict)下将是 undefined。

示例：

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];  
  
// 查找数组中第一个大于5的元素  
const firstGreaterThanFive = numbers.find(function(number) {  
  return number > 5;  
});  
  
console.log(firstGreaterThanFive); // 输出: 6  
  
// 使用箭头函数 （简化形式）
const firstGreaterThanFiveArrow = numbers.find(number => number > 5);  
  
console.log(firstGreaterThanFiveArrow); // 输出: 6  
  
// 查找数组中第一个值为偶数的元素  
const firstEven = numbers.find(number => number % 2 === 0);  
  
console.log(firstEven); // 输出: 2  
  
// 如果没有找到满足条件的元素，则返回undefined  
const notFound = numbers.find(number => number > 10);  
  
console.log(notFound); // 输出: undefined  
  
// 使用thisArg参数（不常见）  
function findFirstEven(element) {  
  // 注意：这里的this.divisor在调用find时由thisArg提供  
  return element % this.divisor === 0;  
}  
  
const obj = {  
  divisor: 2  
};  
  
const found = [1, 3, 5, 6, 9].find(findFirstEven, obj); // 传入obj作为thisArg  
  
console.log(found); // 输出: 6，因为6能被obj.divisor（即2）整除，并且是第一个满足条件的元素

应用场景：find() 方法非常适合于从数组中查找满足特定条件的第一个元素。

11.reduce()

释义：对数组中的每个元素执行一个提供的函数（升级函数），将其结果汇总为单个值。这个方法非常强大，可以用于执行各种数据转换和汇总操作。

语法：

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

callback：执行数组中每个值的函数，包含四个参数：

• accumulator：累计器累计回调的返回值。它是上一次调用回调时返回的累积值，或者是 initialValue（如果提供了的话）。
• currentValue：数组中正在处理的当前元素。
• index（可选）：数组中正在处理的当前元素的索引。如果提供了 initialValue，则索引从0开始；否则从1开始。
• array（可选）：调用 reduce() 方法的数组。

initialValue（可选）：作为第一次调用 callback 函数时的第一个参数的值。如果没有提供初始值，则将使用数组的第一个元素作为初始值，同时 callback 将从第二个元素开始执行。

示例：

const numbers = [1, 2, 3, 4, 5];  
  
// 计算数组所有元素的总和  
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);  
  
console.log(sum); // 输出: 15  
  
// 计算数组所有元素的乘积  
const product = numbers.reduce((accumulator, currentValue) => accumulator * currentValue, 1);  
  
console.log(product); // 输出: 120  
  
// 将数组元素连接成一个字符串  
const concatenated = ['a', 'b', 'c', 'd'].reduce((accumulator, currentValue) => accumulator + currentValue, '');  
  
console.log(concatenated); // 输出: 'abcd'  
  
// 使用索引来生成一个包含元素和索引的对象数组  
const indexedArray = numbers.reduce((accumulator, currentValue, index) => {  
  accumulator.push({ index, value: currentValue });  
  return accumulator;  
}, []);  
  
console.log(indexedArray); // 输出: [{ index: 0, value: 1 }, { index: 1, value: 2 }, { index: 2, value: 3 }, { index: 3, value: 4 }, { index: 4, value: 5 }]

应用场景：reduce() 方法非常适合于执行数组元素的累积操作，如求和、求积、连接字符串等，以及更复杂的数组转换和汇总操作。

12.forEach()

释义：用于遍历数组中的每一个元素，并对每个元素执行一次提供的函数。这个方法不会改变原始数组，也不会返回新的数组，它只是用于执行副作用（即在函数内部执行某些操作，如打印输出、修改外部变量等）。

语法：

array.forEach(callback(currentValue[, index[, array]])[, thisArg])

callback：为数组中每个元素执行的函数，该函数接收三个参数：

• currentValue：数组中正在处理的当前元素。
• index（可选）：数组中正在处理的当前元素的索引。
• array（可选）：调用 forEach() 方法的数组。

thisArg（可选）：当执行回调函数时，用作 this 的值。如果没有提供此参数，则 this 的值在非严格模式下将是全局对象（在浏览器中通常是 window），而在严格模式(use strict)下将是 undefined。

示例：

const numbers = [1, 2, 3, 4, 5];  
  
// 打印数组中的每个元素  
numbers.forEach(function(number) {  
  console.log(number);  
});  
  
// 使用箭头函数打印数组中的每个元素  
numbers.forEach(number => console.log(number));  
  
// 使用索引和数组对象  
numbers.forEach((number, index, array) => {  
  console.log(`Element at index ${index} is ${number}`);  
  // 注意：不要在这里修改array，因为forEach不会创建新数组  
});  
  
// 使用thisArg参数（不常见）  
function logElement(element) {  
  console.log(this.prefix + ': ' + element);  
}  
  
const obj = {  
  prefix: 'Number'  
};  
  
numbers.forEach(logElement, obj); // 传入obj作为thisArg  
// 输出: Number: 1, Number: 2, Number: 3, Number: 4, Number: 5

总结

JavaScript提供了大量能使我们快速便捷地处理数据的函数和方法，在我们的日常开发中，有时会结合需求和业务场景，组合使用不同的函数来实现复杂的功能逻辑。

以上内容就是这些，如有缺漏或不足欢迎指正和补充。