js数组常用的方法汇总

简介: 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)

参数说明:

  1. start 是提取元素的起始位置的索引(包含该索引对应的元素);
  2. 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,...)

参数说明:

  1. start 是要修改的起始位置的索引;
  2. deleteCount 是要删除的元素数量。
  3. 可以根据需要指定 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 是一个回调函数,可以接受四个参数:

  1. accumulator:累积器,用于保存计算结果。
  2. currentValue:当前遍历到的元素。
  3. index:当前遍历到的元素的索引。
  4. 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]

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

示例用法:

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。

示例用法:

  1. 检查数组中的所有元素是否都大于 0:
const numbers = [5, 8, 12, 3, 9];
const allGreaterThan0 = numbers.every(element => element > 0);
console.log(allGreaterThan0);  // true
  1. 检查数组中的所有元素是否都是偶数:
const numbers = [2, 4, 6, 8, 10];
const allEvenNumbers = numbers.every(element => element % 2 === 0);
console.log(allEvenNumbers);  // true
  1. 检查数组中的所有字符串是否都以大写字母开头:
const words = ['Apple', 'Banana', 'Cherry', 'Durian'];
const allUpperCaseStart = words.every(element => /^[A-Z]/.test(element));
console.log(allUpperCaseStart);  // true
  1. 检查数组中的所有对象是否都满足特定条件:
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
目录
相关文章
|
3天前
|
前端开发 JavaScript
前端 js 经典:数组常用方法总结
前端 js 经典:数组常用方法总结
13 0
|
9天前
|
存储 JavaScript 前端开发
史上最详细JavaScript数组去重方法(11种)
使用set和Array.from ()方法 array.from可以将set结构转成数组
23 7
|
2天前
|
移动开发 JavaScript iOS开发
WKWebView和js互调方法的实现
WKWebView和js互调方法的实现
7 0
|
3天前
|
JavaScript 前端开发
Symbol在JavaScript中还有哪些内置的Symbol可以用于定义特定的方法或属性
Symbol在JavaScript中还有哪些内置的Symbol可以用于定义特定的方法或属性
|
3天前
|
前端开发 JavaScript
前端 JS 经典:数组去重万能方法
前端 JS 经典:数组去重万能方法
7 0
|
3天前
|
前端开发 JavaScript 流计算
前端 js 经典:字符串超全方法总结
前端 js 经典:字符串超全方法总结
13 0
|
5天前
|
前端开发 JavaScript 开发者
JavaScript中的异步编程方法总结
在JavaScript开发中,处理异步操作是非常常见的情况。本文将总结JavaScript中常用的异步编程方法,包括Callback、Promise、Async/Await等,分析其优缺点,并提供使用建议。
|
6天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
9 0
|
6天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
10 0
|
6天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
12 2