js数组常用的方法汇总-阿里云开发者社区

前言

JS数组常用的方法汇总：

Array 是JavaScript中的一种数据格式，在JavaScript中会经常使用到；

本文将详细介绍Array中常用的一些方法！

push()
pop()
shift()
unshift()
concat()
slice()
splice()
join()
indexOf()
lastIndexOf()
forEach()
map()
filter()
reduce()
sort()
reverse()
includes()
some()
every()

详细介绍使用方法

1、push()

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

示例用法：

1、添加单个元素到数组末尾；

const numbers = [1, 2, 3];
const length = numbers.push(4);
console.log(numbers);  // [1, 2, 3, 4]
console.log(length);   // 4

2、添加多个元素到数组末尾；

const fruits = ['apple', 'banana'];
fruits.push('kiwi', 'orange');
console.log(fruits);  // ['apple', 'banana', 'kiwi', 'orange']

2、pop()

作用：删除并返回数组的最后一个元素

注意：pop() 方法会修改原始数组，将数组的长度减一。

示例用法：

使用 pop方法删除数组最后一个元素；

const fruits = ['apple', 'banana', 'kiwi'];
const removedElement = fruits.pop();
console.log(fruits);          // ['apple', 'banana']
console.log(removedElement);  // 'kiwi'

3、shift()

作用：删除并返回数组的第一个元素

示例用法：

1、使用shift 删除元素，bing返回被删除的元素；

const fruits = ['apple', 'banana', 'kiwi'];
const removedElement = fruits.shift();
console.log(fruits);          // ['banana', 'kiwi']
console.log(removedElement);  // 'apple'

2、如果删除的是空数组，结果将返回 undefined；

const emptyArray = [];
const removedElement = emptyArray.shift();
console.log(emptyArray);     // []
console.log(removedElement);  // undefined

4、unshif()

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

示例用法：

1、基础用法，添加单个元素；

const numbers = [2, 3, 4];
const length = numbers.unshift(1);
console.log(numbers);  // [1, 2, 3, 4]
console.log(length);   // 4

2、添加多个元素；

const fruits = ['banana', 'orange'];
fruits.unshift('apple', 'kiwi');
console.log(fruits);  // ['apple', 'kiwi', 'banana', 'orange']

5、concat()

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

示例用法：

1、连接两个数组：

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = array1.concat(array2);
console.log(concatenatedArray);  // [1, 2, 3, 4, 5, 6]

2、连接数组和值：

const array = [1, 2, 3];
const value = 4;
const concatenatedArray = array.concat(value);
console.log(concatenatedArray);  // [1, 2, 3, 4]

3、连接多个数组：

const array1 = [1, 2];
const array2 = [3, 4];
const array3 = [5, 6];
const concatenatedArray = array1.concat(array2, array3);
console.log(concatenatedArray);  // [1, 2, 3, 4, 5, 6]

6、slice()

作用：从数组中提取指定范围的元素，返回一个新数组

array.slice(start,end)

参数说明：

start 是提取元素的起始位置的索引（包含该索引对应的元素）；
end 是提取元素的结束位置的索引（不包含该索引对应的元素）；

如果不指定 end 参数，则提取从 start 索引位置到数组末尾的所有元素。

示例用法：

1、提取指定范围的元素：

const fruits = ['apple', 'banana', 'kiwi', 'orange', 'grape'];
const slicedElements = fruits.slice(1, 4);
console.log(slicedElements);  // ['banana', 'kiwi', 'orange']

2、提取从指定位置到数组末尾的元素：

const numbers = [1, 2, 3, 4, 5];
const slicedElementsToEnd = numbers.slice(2);
console.log(slicedElementsToEnd);  // [3, 4, 5]

3、复制数组：

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice();
console.log(copiedArray);  // [1, 2, 3, 4, 5]

7、splice()

作用：删除、替换或添加元素到数组的指定位置

array.splice(start,delteteCount,item1,item2,...)

参数说明：

start 是要修改的起始位置的索引；
deleteCount 是要删除的元素数量。
可以根据需要指定 item1、item2 等参数来插入新元素。
如果不指定 deleteCount，则删除从 start 索引位置开始之后的所有元素

示例用法：

1、删除元素：

const numbers = [1, 2, 3, 4, 5];
const deletedElements = numbers.splice(2, 2);
console.log(numbers);          // [1, 2, 5]
console.log(deletedElements);  // [3, 4]

2、替换元素：

const fruits = ['apple', 'banana', 'kiwi'];
const replacedElements = fruits.splice(1, 1, 'orange', 'grape');
console.log(fruits);             // ['apple', 'orange', 'grape', 'kiwi']
console.log(replacedElements);   // ['banana']

3、插入元素：

const colors = ['red', 'blue', 'green'];
colors.splice(1, 0, 'yellow', 'purple');
console.log(colors);  // ['red', 'yellow', 'purple', 'blue', 'green']

8、join()

作用：将数组中的所有元素以指定的分隔符连接成一个字符串

array.join(separator)

separator 是一个可选的字符串参数，用于指定元素之间的分隔符，默认为逗号（,）。

示例用法：

1、将数组通过"-" 隔开；

const fruits = ['apple', 'banana', 'kiwi'];
const joinedString = fruits.join('-');
console.log(joinedString);  // "apple-banana-kiwi"

2、默认使用逗号作为分隔符；

const numbers = [1, 2, 3, 4, 5];
const joinedStringDefault = numbers.join();

9、indexOf()

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

示例用法：

1、搜索第一次出现的下标位置；

const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange'];
const index = fruits.indexOf('banana');
console.log(index);  // 1

2、搜索指定位置的下标位置；

const numbers = [1, 2, 3, 4, 5, 3, 2, 1];
const indexFromIndex = numbers.indexOf(3, 3);
console.log(indexFromIndex);  // 5

10、lastIndexOf()

作用：返回指定元素在数组中最后一次出现的索引，如果未找到则返回 -1。

示例用法：

1、搜索数组中最后一次出现的下标位置；

const fruits = ['apple', 'banana', 'kiwi', 'banana', 'orange'];
const lastIndex = fruits.lastIndexOf('banana');
console.log(lastIndex);  // 3

2、从指定位置开始搜索最后一次出现的下标位置；

const numbers = [1, 2, 3, 4, 5, 3, 2, 1];
const lastIndexFromIndex = numbers.lastIndexOf(3, 4);
console.log(lastIndexFromIndex);  // 2

11、forEach()

作用：对数组中的每个元素执行指定的函数。

forEach()

方法通常用于不需要返回新数组的情况下，对数组中的每个元素执行操作。它提供了一种方便的方式来遍历数组并对每个元素执行相同的操作。

注意：forEach() 方法无法中断或跳过迭代，它会遍历数组中的每个元素，即使在回调函数中使用了 return 语句也不会中止遍历。

示例用法：

const fruits = ['apple','banana','keiwi'];
      fruits.forEach((res)=>{
        console.log(res)
      })

12、map()

作用：对数组中的每个元素执行指定的函数，并返回执行结果组成的新数组

map()

方法可以根据自定义的处理逻辑对数组中的每个元素进行转换。你可以使用它来生成新的数组，其中的元素是原始数组经过处理后的结果。常见的使用场景包括对数组中的每个元素进行计算、转换、映射等操作。

示例用法：

const numbers = [1,2,3,4,5]
      const doublenumbers= numbers.map((res)=>res*2)
      console.log(doublenumbers)  //[2, 4, 6, 8, 10]

13、filter()

作用：根据指定的条件筛选出数组中符合条件的元素，返回一个新数组

使用filter 方法，可以根据数组筛选出满足特定条件的元素.

示例用法：

const numbers = [1,2,3,4,5]
      const filternumbers= numbers.filter((res)=>res>3)
      console.log(filternumbers) //[4, 5]

14、reduce()

作用：对数组中的所有元素执行指定的归约函数，返回一个单值结果

参数说明：callback 是一个回调函数，可以接受四个参数：

accumulator：累积器，用于保存计算结果。
currentValue：当前遍历到的元素。
index：当前遍历到的元素的索引。
array：正在被遍历的数组。

示例用法：

const numbers = [1,2,3,4,5]
      const reducenumbers= numbers.reduce((accumulator, currentValue)=>accumulator + currentValue)
      console.log(reducenumbers)  //15

调用 reduce() 方法并传入累加函数 (accumulator, currentValue) => accumulator + currentValue，即可对数组中的所有元素进行累加计算。初始累积器值未指定，因此 reduce() 方法从数组的第一个元素开始遍历，将当前元素与累积器相加，并更新累积器的值。最终，返回的累积结果即为数组所有元素的累加和。

15、sort()

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

示例用法：

1、不传参时调用 sort 会直接修改原始数组，并返回排序后的数组；

const fruits = ['banana','apple','keiwi'];
   fruits.sort()
   console.log(fruits) //['apple', 'banana', 'keiwi']

2、传入对比函数，对比较函数接受两个参数，并返回一个表示比较结果的数字；

const nums = [10,5,8,2,3]
      nums.sort((a,b)=>a-b)
      console.log(nums)  //[2, 3, 5, 8, 10]

16、reverse()

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

示例用法：

1、通过使用 reverse() 方法，你可以方便地反转数组中的元素顺序，适用于需要颠倒数组内容的情况。

const nums1 = [1,2,3,4,5]
      nums1.reverse()
      console.log(nums1) //[5, 4, 3, 2, 1]

2、reverse() 方法会直接修改原始数组，并不会创建新的数组。如果你需要保留原始数组的副本并进行反转操作，可以先使用 slice() 方法创建一个新数组，然后再调用 reverse() 方法。

const nums1 = [1,2,3,4,5]
      const reversenum = nums1.slice().reverse()
      console.log(reversenum)  //[5, 4, 3, 2, 1]
      console.log(nums1)  //[1,2,3,4,5]

17、includes()

作用：判断数组是否包含指定元素，返回 true 或 false。

示例用法：

1、检查数组中是否包含特定元素：

const numbers = [1, 2, 3, 4, 5];
    console.log(numbers.includes(3));  // true
    console.log(numbers.includes(6));  // false

2、使用 fromIndex 参数指定搜索的起始位置：

const numbers = [1, 2, 3, 4, 5];
    console.log(numbers.includes(3, 2));  // true，从索引 2 开始搜索
    console.log(numbers.includes(3, 4));  // false，从索引 4 开始搜索

3、检查数组中是否包含字符串：

const fruits = ['apple', 'banana', 'kiwi', 'pear'];
    console.log(fruits.includes('banana'));  // true
    console.log(fruits.includes('grape'));   // false

18、some()

作用：检测数组中是否有至少一个元素满足指定条件，返回 true 或 false。

示例用法：

1、检查数组中是否存在大于 10 的元素：

const numbers = [5, 8, 12, 3, 9];
const hasGreaterThan10 = numbers.some(element => element > 10);
console.log(hasGreaterThan10);  // true

2、检查数组中是否存在偶数：

const numbers = [3, 7, 5, 12, 9];
const hasEvenNumber = numbers.some(element => element % 2 === 0);
console.log(hasEvenNumber);  // true

3、检查数组中是否存在包含特定字符的字符串：

const fruits = ['apple', 'banana', 'kiwi', 'pear'];
const hasStrWithChar = fruits.some(element => element.includes('a'));
console.log(hasStrWithChar);  // true

4、检查数组中是否存在满足复杂条件的元素：

const students = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 },
  { name: 'Charlie', score: 76 },
];
const hasPassingScore = students.some(student => student.score >= 80);
console.log(hasPassingScore);  // true

19、every()

作用：检测数组中是否所有元素都满足指定条件，返回 true 或 false。

示例用法：

检查数组中的所有元素是否都大于 0：

const numbers = [5, 8, 12, 3, 9];
const allGreaterThan0 = numbers.every(element => element > 0);
console.log(allGreaterThan0);  // true

检查数组中的所有元素是否都是偶数：

const numbers = [2, 4, 6, 8, 10];
const allEvenNumbers = numbers.every(element => element % 2 === 0);
console.log(allEvenNumbers);  // true

检查数组中的所有字符串是否都以大写字母开头：

const words = ['Apple', 'Banana', 'Cherry', 'Durian'];
const allUpperCaseStart = words.every(element => /^[A-Z]/.test(element));
console.log(allUpperCaseStart);  // true

检查数组中的所有对象是否都满足特定条件：

const students = [
  { name: 'Alice', score: 85 },
  { name: 'Bob', score: 92 },
  { name: 'Charlie', score: 76 },
];
const allPassingScore = students.every(student => student.score >= 80);
console.log(allPassingScore);  // false

js数组常用的方法汇总

前言

1、push()

2、pop()

3、shift()

4、unshif()

5、concat()

6、slice()

7、splice()

8、join()

9、indexOf()

10、lastIndexOf()

11、forEach()

12、map()

13、filter()

14、reduce()

15、sort()

16、reverse()

17、includes()

18、some()

19、every()

热门文章

最新文章

相关课程

相关电子书

相关实验场景