前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript中常用的数组方法总结

JavaScript中常用的数组方法总结

作者头像
九仞山
发布2023-10-14 09:13:42
2150
发布2023-10-14 09:13:42
举报
文章被收录于专栏:前端漫步前端漫步

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()函数不会修改原始数组,而是返回一个新的字符串。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2023-10-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • forEach()函数
  • map()函数
  • filter()函数
  • reduce()函数
  • find()函数
  • some()和every()
  • sort()函数
  • includes()和indexOf()函数
  • slice()和splice()函数
  • concat()和join()函数
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档