JavaScript数组常用方法总结_js 数组 foreach 或者 map 中对原数组做增删会有影响吗-CSDN博客

本文链接：https://blog.csdn.net/hjp9906/article/details/119578069

常用的数组方法：

join()
push()和pop()
shift() 和 unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf()（ES5新增）
forEach() （ES5新增）
map() （ES5新增）
filter() （ES5新增）

1.join()

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

语法：

arr.join([separator])

参数：

separator 可选
指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果缺省该值，数组元素用逗号（,）分隔。如果separator是空字符串("")，则所有元素之间都没有任何字符。

返回值:

一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。
如果一个元素为 undefined 或 null，它会被转换为空字符串。

<!--
 * @Author: your name
 * @Date: 2021-08-03 15:42:38
 * @LastEditTime: 2021-08-10 20:15:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workspace\test.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var a = ['Wind', 'Rain', 'Fire'];
    var myVar1 = a.join();        // myVar1的值变为"Wind,Rain,Fire"
    var myVar2 = a.join(' , ');  // myVar2的值变为"Wind, Rain, Fire"
    var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
    var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"
    var myVar5 = a.join('-')   // myVar5的值变为"Wind-Rain-Fire"
    console.log(myVar1);
    console.log(myVar2);
    console.log(myVar3);
    console.log(myVar4);
    console.log(myVar5);

  </script>
</body>

</html>

通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：

 <!--
 * @Author: your name
 * @Date: 2021-08-03 15:42:38
 * @LastEditTime: 2021-08-10 20:22:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workspace\test.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    function repeatString(str, n) {
      return new Array(n + 1).join(str)
    }
    console.log(repeatString("abc", 4));  //abcabcabcabc
    console.log(repeatString("abc", 4).length);  //12
  </script>
</body>

</html>

2.push()和pop()

push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

语法：

arr.push(element1, ..., elementN)

参数：

elementN
被添加到数组末尾的元素。

返回值：

当调用该方法时，新的 length 属性值将被返回。

<!--
 * @Author: your name
 * @Date: 2021-08-03 15:42:38
 * @LastEditTime: 2021-08-10 20:27:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workspace\test.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    var sports = ["soccer", "baseball"];
    var total = sports.push("football", "swimming");
    console.log(sports);// ["soccer", "baseball", "football", "swimming"]
    console.log(total);// 4
  </script>
</body>

</html>

pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

语法：

arr.pop()

返回值:

从数组中删除的元素(当数组为空时返回undefined)。
注意：
pop（）里面没有参数，即使有参数，也是删除最后一项。

<!--
 * @Author: your name
 * @Date: 2021-08-03 15:42:38
 * @LastEditTime: 2021-08-11 09:04:50
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workspace\test.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
    console.log(plants.pop());
    // expected output: "tomato"
    console.log(plants);
    // expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
    plants.pop();
    console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]
  </script>
</body>

</html>

3、shift() 和 unshift()

shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

语法：

arr.shift()

返回值 :

从数组中删除的元素; 如果数组为空则返回undefined 。

<!--
 * @Author: your name
 * @Date: 2021-08-03 15:42:38
 * @LastEditTime: 2021-08-11 09:14:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workspace\test.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let array1 = [1, 2, 3];
    let firstElement = array1.shift();
    console.log(array1);
    // expected output: Array [2, 3]
    console.log(firstElement);
    // expected output: 1
  </script>
</body>

</html>

unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

语法：

arr.unshift(element1, ..., elementN)

参数列表:

elementN
要添加到数组开头的元素或多个元素。

返回值:

当一个对象调用该方法时，返回其 length 属性值。

<!--
 * @Author: your name
 * @Date: 2021-08-03 15:42:38
 * @LastEditTime: 2021-08-11 09:19:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workspace\test.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let arr = [1, 2];
    arr.unshift(0); // result of the call is 3, which is the new array length
    // arr is [0, 1, 2]
    arr.unshift(-2, -1); // the new array length is 5
    // arr is [-2, -1, 0, 1, 2]
    arr.unshift([-4, -3]); // the new array length is 6
    // arr is [[-4, -3], -2, -1, 0, 1, 2]
    arr.unshift([-7, -6], [-5]); // the new array length is 8
    // arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ]
  </script>
</body>

</html>

4.sort()

sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的

由于它取决于具体实现，因此无法保证排序的时间和空间复杂性。

语法:

arr.sort([compareFunction])

参数:

compareFunction 可选
用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
firstEl
第一个用于比较的元素。
secondEl
第二个用于比较的元素。

返回值:

排序后的数组。请注意，数组已原地排序，并且不进行复制。

let months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

let array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以上的这种情况；

为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：

function compare(a, b) {
  if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
    return -1;
  }
  if (a > b ) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

let arr=[21,32,4,5,0,98,12,33]
    function compare(a,b){
      return b-a;
    }
    console.log(arr.sort(compare));
    //[98, 33, 32, 21, 12, 5, 4, 0]

5.reverse()

reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

语法：

 arr.reverse()

返回值：

颠倒后的数组。

let a = [1, 2, 3];
console.log(a); // [1, 2, 3]
a.reverse();
console.log(a); // [3, 2, 1]

6、concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

语法:

var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

参数:

valueN可选
数组和/或值，将被合并到一个新的数组中。如果省略了所有 valueN 参数，则 concat 会返回调用此方法的现存数组的一个浅拷贝。

返回值:

新的 Array 实例。
注意：
数组/值在连接时保持不变。此外，对于新数组的任何操作（仅当元素不是对象引用时）都不会对原始数组产生影响，反之亦然。

<!--
 * @Author: your name
 * @Date: 2021-08-03 15:42:38
 * @LastEditTime: 2021-08-11 19:04:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \workspace\test.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    let array1 = ['a', 'b', 'c'];
    let array2 = ['d', 'e', 'f'];
    let array3 = array1.concat(array2);
    console.log(array3);
    console.log(array1);
// expected output: Array ["a", "b", "c", "d", "e", "f"]
// expected output: Array ["a", "b", "c"]
  </script>
</body>

</html>

7、slice()

slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝 （包括 begin，不包括end）。原始数组不会被改变。

语法：

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

参数：

begin 可选
提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。
如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
如果省略 begin，则 slice 从索引 0 开始。
如果 begin 超出原数组的索引范围，则会返回空数组。
end 可选
提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。
slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素（索引为 1, 2, 3的元素）。
如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
如果 end 被省略，则 slice 会一直提取到原数组末尾。
如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

返回值：

一个含有被提取元素的新数组。

let animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

8、splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

语法:

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

参数:

start指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。
deleteCount 可选
整数，表示要移除的数组元素的个数。
如果 deleteCount 大于 start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。
如果 deleteCount 被省略了，或者它的值大于等于array.length - start(也就是说，如果它大于或者等于start之后的所有元素的数量)，那么start之后数组的所有元素都会被删除。
如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。
item1, item2, ... 可选
要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

返回值:

由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1);
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被删除的元素: ["mandarin"]

var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
var removed = myFish.splice(2, 1, "trumpet");
console.log(myFish);
console.log(removed);
// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素: ["drum"]

9、indexOf()

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

语法:

arr.indexOf(searchElement[, fromIndex])

参数:

searchElement 要查找的元素
fromIndex 可选
开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找，以此类推。注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。其默认值为0.

返回值:

首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1

var array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

10、forEach()

forEach() 方法对数组的每个元素执行一次给定的函数。

语法:

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

参数:

callback为数组中每个元素执行的函数，该函数接收一至三个参数：
currentValue数组中正在处理的当前元素。
index 可选数组中正在处理的当前元素的索引。
array 可选 forEach() 方法正在操作的数组。
thisArg 可选可选参数。当执行回调函数 callback 时，用作 this 的值。

返回值:

undefined。

11、 map()

map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

语法:

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg]

参数

callback 生成新数组元素的函数，使用三个参数：
currentValue callback 数组中正在处理的当前元素。
index可选 callback 数组中正在处理的当前元素的索引。
array可选 map 方法调用的数组。
thisArg可选执行 callback 函数时值被用作this。

返回值:

一个由原数组每个元素执行回调函数的结果组成的新数组。

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]

12、 filter()

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

语法:

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

参数:

callback 用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。它接受以下三个参数：
element 数组中当前正在处理的元素。
index可选正在处理的元素在数组中的索引。
array可选调用了 filter 的数组本身。
thisArg可选执行 callback 时，用于 this 的值。

返回值:

一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

function isBigEnough(element) {
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// filtered is [12, 130, 44]