JavaScript中常用的数组方法总结

2023-10-14 09:13:42 浏览数 (1)

forEach()函数

forEach()函数是JavaScript数组提供的一个用于遍历数组的方法。它接受一个回调函数作为参数,并且对数组中的每个元素依次调用该回调函数。

forEach()函数的语法如下:

代码语言:javascript复制
array.forEach(callback(currentValue, index, array), thisArg)

参数说明:

  • callback: 必须,表示在每个数组元素上执行的回调函数。
  • currentValue: 必须,表示当前遍历到的元素的值。
  • index: 可选,表示当前遍历到的元素的索引。
  • array: 可选,表示正在被遍历的数组。
  • thisArg: 可选,表示在执行回调函数时使用的this值。

在回调函数中,我们可以对每个数组元素进行任何操作,例如打印元素的值、修改元素的值等。 比如下面的这段代码就使用forEach()函数来遍历数组:

代码语言:javascript复制
const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number, index) {
  console.log(`第 ${index} 个元素的值是:${number}`);
});

运行程序,控制台输出结果如下:

代码语言:javascript复制
第 0 个元素的值是:1
第 1 个元素的值是:2
第 2 个元素的值是:3
第 3 个元素的值是:4
第 4 个元素的值是:5

注意,forEach()函数在遍历数组时会按照数组的顺序依次调用回调函数,但并不保证回调函数的执行顺序。如果需要按照特定的顺序执行操作,可以使用其他方法,如for循环。

map()函数

map()函数用于对数组中的每个元素执行指定的操作,并返回一个新的数组,新数组的元素由原数组的每个元素经过操作得到。

当我们想要对数组中的每个元素执行相同的操作,并返回一个新的数组时,可以使用map()函数。它会遍历数组中的每个元素,并将每个元素传递给回调函数进行处理,最后将处理后的结果组成一个新的数组返回。

map()函数接受一个回调函数作为参数,回调函数可以接受三个参数:当前元素的值、当前元素的索引和数组本身。回调函数对每个元素执行操作,并将返回的值添加到新数组中。

map()函数的语法如下:

代码语言:javascript复制
array.map(callback(currentValue[, index[, array]])[, thisArg])

参数说明:

  • callback:一个函数,用于对每个元素进行处理。接受三个参数:
    • currentValue:当前正在处理的元素。
    • index(可选):当前元素的索引。
    • array(可选):原始数组。
  • thisArg(可选):执行回调函数时使用的this值。

下面是的这段代码使用map()函数将数组中的每个元素都转换成大写:

代码语言:javascript复制
const fruits = ['apple', 'banana', 'orange'];

const upperCaseFruits = fruits.map((fruit) => fruit.toUpperCase());

console.log(upperCaseFruits); // 输出: ['APPLE', 'BANANA', 'ORANGE']

filter()函数

filter()函数用于筛选数组中满足指定条件的元素,并返回一个新的数组。该方法不会改变原始数组,而是根据条件创建一个新的数组。

filter()函数接受一个回调函数作为参数,回调函数用于定义筛选条件。回调函数可以接受三个参数:当前元素、当前索引和原始数组。它应该返回一个布尔值,true表示该元素满足条件,将会被包含在新的数组中,false表示不满足条件,将会被过滤掉。

filter()函数的语法如下:

代码语言:javascript复制
array.filter(callback(element[, index[, array]])[, thisArg])

其中,array是要进行过滤的数组,callback是一个回调函数,在每个数组元素上被调用。回调函数接受三个参数:element表示当前正在被处理的数组元素,index表示当前元素的索引(可选),array表示正在被处理的数组(可选)。

回调函数返回一个布尔值,如果返回true,则表示当前元素符合条件,将被包含在新数组中。如果返回false,则表示当前元素不符合条件,将被过滤掉。

thisArg参数是可选的,用于指定回调函数中的this值。

下面这段代码我们使用filter()函数来筛选数组元素:

代码语言:javascript复制
const numbers = [1, 2, 3, 4, 5, 6];

// 使用filter()函数筛选出所有大于3的元素
const filteredNumbers = numbers.filter(function(number) {
  return number > 3;
});

console.log(filteredNumbers); // 输出 [4, 5, 6]

除了使用匿名函数作为回调函数,我们还可以使用箭头函数来简化代码。

代码语言:javascript复制
const numbers = [1, 2, 3, 4, 5, 6];

// 使用箭头函数筛选出所有大于3的元素
const filteredNumbers = numbers.filter(number => number > 3);

console.log(filteredNumbers); // 输出 [4, 5, 6]

reduce()函数

reduce()函数是JavaScript数组的一个强大的方法,它可以对数组中的元素进行累加、累乘、字符串连接等操作。它接收一个回调函数作为参数,并且可以传递一个初始值。回调函数接受四个参数:累加器(accumulator)、当前值(current value)、当前索引(current index)和原始数组(array)。

reduce()函数的语法如下: array.reduce(callback[, initialValue])

其中,callback是回调函数,它可以接受四个参数:accumulator、currentValue、currentIndex和array。initialValue是可选的,用于设置初始值。

下面这段代码使用reduce()函数对数组进行累加操作:

代码语言:javascript复制
const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator   currentValue;
}, 0);

console.log(sum); // 输出:15

除了累加,reduce()函数还可以用于累乘、字符串连接等操作。

代码语言:javascript复制
const numbers = [1, 2, 3, 4, 5];

const product = numbers.reduce((accumulator, currentValue) => {
  return accumulator * currentValue;
}, 1);

console.log(product); // 输出:120

find()函数

find()函数会遍历数组中的每个元素,并返回第一个满足给定条件的元素。如果没有找到满足条件的元素,则返回undefined。当我们想要在一个数组中查找满足特定条件的第一个元素时,可以使用JavaScript的find()函数。

find()函数的语法如下:

代码语言:javascript复制
array.find(callback(element[, index[, array]])[, thisArg])

参数说明:

  • array:要在其中查找元素的数组。
  • callback:回调函数,接收三个参数:
    • element:当前正在被处理的数组元素。
    • index(可选):当前正在被处理的元素的索引。
    • array(可选):调用find()函数的数组。
  • thisArg(可选):在执行回调函数时,用作this关键字的对象。

find()函数的工作原理是,它会从数组的第一个元素开始依次遍历,当找到第一个满足条件的元素时,就会停止遍历并返回该元素。如果没有找到满足条件的元素,则返回undefined

下面的代码使用find()函数查找数组中第一个大于10的元素:

代码语言:javascript复制
const numbers = [5, 8, 12, 3, 15, 7];
const foundNumber = numbers.find(function(element) {
  return element > 10;
});

console.log(foundNumber); // 输出:12

注意,回调函数中的条件可以是任何JavaScript表达式。根据需要,您可以根据元素的属性、索引或其他条件来定义自己的条件。

some()和every()

some()every()函数是用于判断数组中的元素是否满足特定条件的方法。

some()函数用于判断数组中是否存在满足给定条件的元素。它会遍历数组中的每个元素,当有任意一个元素满足条件时,即返回true。如果没有找到满足条件的元素,则返回false

some()函数的语法如下:

代码语言:javascript复制
array.some(callback(element[, index[, array]])[, thisArg])

参数说明:

  • array:要在其中进行元素检查的数组。
  • callback:回调函数,接收三个参数:
    • element:当前正在被处理的数组元素。
    • index(可选):当前正在被处理的元素的索引。
    • array(可选):调用some()函数的数组。
  • thisArg(可选):在执行回调函数时,用作this关键字的对象。

some()函数的工作原理是,它会从数组的第一个元素开始依次遍历,当找到满足条件的元素时,就会停止遍历并返回true。如果数组中所有元素都不满足条件,则返回false

下面的代码使用some()函数判断数组中是否存在大于10的元素:

代码语言:javascript复制
const numbers = [5, 8, 12, 3, 15, 7];
const hasGreaterThan10 = numbers.some(function(element) {
  return element > 10;
});

console.log(hasGreaterThan10); // 输出:true

every()函数用于判断数组中的所有元素是否都满足给定条件。它会遍历数组中的每个元素,当所有元素都满足条件时,返回true。如果存在不满足条件的元素,则返回false

every()函数的语法如下:

代码语言:javascript复制
array.every(function(currentValue, index, array) {
    // 执行某些操作
}, thisArg);

参数说明:

  • function(currentValue, index, array): 必需。这是一个回调函数,用于指定要对每个元素执行的操作。它接收三个参数:
    • currentValue: 当前元素的值。
    • index: 当前元素的索引。
    • array: 调用every()函数的数组。
  • thisArg(可选):指定在回调函数中使用的this值。

every()函数会对数组中的每个元素都调用一次回调函数,如果回调函数对所有元素都返回true,则every()函数最终返回true。如果回调函数对任何一个元素返回false,则every()函数立即返回false,不再对剩余元素进行检查。

下面的代码使用every()函数判断数组中的所有元素是否都小于20:

代码语言:javascript复制
const numbers = [5, 8, 12, 3, 15, 7];
const allLessThan20 = numbers.every(function(element) {
  return element < 20;
});

console.log(allLessThan20); // 输出:true

sort()函数

sort()函数用于对数组元素进行排序。它会按照默认的排序顺序将数组元素重新排列,并返回排序后的数组。

sort()函数会通过将数组的元素转换为字符串,然后比较字符串的Unicode编码值来进行排序。默认情况下,sort()函数会将元素转换为字符串进行排序,即使数组中的元素是数字类型。

sort()函数的语法如下:

代码语言:javascript复制
array.sort(compareFunction)

参数说明:

compareFunction是一个可选的回调函数,用于定义排序规则。它接收两个参数(通常被称为ab),表示要进行比较的两个元素。compareFunction需要返回一个负数、零或正数,具体取决于ab的相对顺序。

如果返回负数,表示a应该在b之前;如果返回零,表示ab相等;如果返回正数,表示a应该在b之后。

下面的代码使用sort()函数对数组进行排序:

代码语言:javascript复制
// 数字数组排序
const numbers = [5, 1, 3, 2, 4];
numbers.sort();
console.log(numbers); // 输出:[1, 2, 3, 4, 5]

// 字符串数组排序
const fruits = ['banana', 'apple', 'orange', 'grape'];
fruits.sort();
console.log(fruits); // 输出:['apple', 'banana', 'grape', 'orange']

// 对象数组排序
const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];
persons.sort((a, b) => a.age - b.age);
console.log(persons);
// 输出:
// [
//   { name: 'Bob', age: 20 },
//   { name: 'Alice', age: 25 },
//   { name: 'Charlie', age: 30 }
// ]

在以上示例中,我们首先使用sort()函数对数字数组numbers进行排序,由于没有提供比较函数,所以它按照默认的排序顺序(使用字符串比较)进行排序。对于字符串数组fruits,同样也是按照默认的排序顺序进行排序。在最后对象数组的排序中,我们使用比较函数对对象数组persons按照age属性进行排序,从小到大排列。

注意sort()函数会直接修改原始数组,并返回排序后的数组。

includes()和indexOf()函数

当我们需要查找数组中是否包含指定元素时,可以使用JavaScript给我们提供的两个常用的函数:includes()indexOf()

includes()函数用于判断数组中是否包含指定元素,并返回一个布尔值。如果数组中包含指定元素,则返回true;如果数组中不包含指定元素,则返回false

indexOf()函数用于查找指定元素在数组中的索引位置,并返回该索引值。如果数组中包含指定元素,则返回该元素的第一次出现的索引;如果数组中不包含指定元素,则返回-1。

下面的代码使用includes()indexOf()函数查找数组中是否包含指定的元素:

代码语言:javascript复制
const fruits = ['apple', 'banana', 'orange', 'grape'];

// 使用includes()函数判断数组中是否包含指定元素
console.log(fruits.includes('apple')); // 输出: true
console.log(fruits.includes('mango')); // 输出: false

// 使用indexOf()函数查找指定元素在数组中的索引位置
console.log(fruits.indexOf('banana')); // 输出: 1
console.log(fruits.indexOf('watermelon')); // 输出: -1

在上面的代码中,我们使用includes()函数判断数组中是否包含'apple''mango'两个元素,分别返回了truefalse。然后使用indexOf()函数查找'banana''watermelon'两个元素在数组中的索引位置,分别返回了1-1

需要注意的是,includes()函数和indexOf()函数都是区分大小写的,即'apple''Apple'是不同的元素。如果需要忽略大小写进行查找,可以先将数组中的元素转换为小写或大写,然后再进行查找。

slice()和splice()函数

slice()splice()都可以用于截取和删除数组的元素,但有一些重要的区别。

slice()函数用于从数组中截取出指定范围的元素,并返回一个新数组,原数组不会被修改。slice()函数接受两个参数,即开始截取的索引和结束截取的索引(不包含在截取范围内)。如果只传递一个参数,则从该索引开始截取到数组的末尾。

下面的代码使用slice()函数来截取数组:

代码语言:javascript复制
const fruits = ['apple', 'banana', 'orange', 'grape', 'kiwi'];

const slicedFruits = fruits.slice(1, 4);
console.log(slicedFruits); // 输出: ['banana', 'orange', 'grape']

const slicedFruits2 = fruits.slice(2);
console.log(slicedFruits2); // 输出: ['orange', 'grape', 'kiwi']

splice()函数用于删除数组中的元素,并可以在删除的位置插入新的元素。splice()函数接受三个参数,即开始删除的索引、要删除的元素数量和可选的要插入的元素。如果只传递两个参数,则只删除指定数量的元素。

下面的代码使用splice()函数来删除数组元素:

代码语言:javascript复制
const numbers = [1, 2, 3, 4, 5];

numbers.splice(2, 1);
console.log(numbers); // 输出: [1, 2, 4, 5]

numbers.splice(1, 2, 6, 7);
console.log(numbers); // 输出: [1, 6, 7, 5]

注意splice()函数会修改原始数组,而slice()函数不会修改原始数组,而是返回一个新的数组。

slice()函数用于截取数组的元素并返回新数组,而splice()函数用于删除数组的元素并可以插入新元素。

concat()和join()函数

当我们需要合并数组或将数组元素连接为字符串时,可以使用JavaScript中的concat()join()函数。

concat()函数用于合并两个或多个数组,并返回一个新的合并后的数组,而不修改原始数组。它接受任意数量的参数,每个参数可以是数组或值。

下面的代码使用concat()函数来合并数组:

代码语言:javascript复制
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [7, 8, 9];

let mergedArray = arr1.concat(arr2, arr3);
console.log(mergedArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

在上面的代码中,我们使用concat()函数将上面定义的三个数组合并为一个新数组mergedArray

注意concat()函数不会修改原始数组,而是返回一个新的合并后的数组。

join()函数用于将数组的所有元素连接成一个字符串。它接受一个可选的参数separator,用于指定连接元素的分隔符,默认为逗号。join()函数返回一个字符串。

下面的代码使用join()函数将数组元素连接为字符串:

代码语言:javascript复制
let arr = ['Hello', 'World', '!'];

let joinedString = arr.join(' ');
console.log(joinedString); // 'Hello World !'

注意join()函数不会修改原始数组,而是返回一个新的字符串。

0 人点赞