迟早要知道的JS系列之常用数组方法

Posted 2021-02-18 eric021

常用数组方法

一.不会改变原始数组的方法：

即访问方法，下面的这些方法绝对不会改变调用它们的对象的值，只会返回一个新的数组或者返回一个其它的期望值。

1. concat()

** 语法：**
javascript,defaultvar new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

参数: valueN(可选)
将数组和/或值连接成新数组。如果省略了valueN参数参数，则concat会返回一个它所调用的已存在的数组的浅拷贝

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

实例：

  let obj={a:1}
  const arr=["a","b",obj]; //obj为对象的引用，原始数组arr同新数组arr2引用相同对象，其更改对于原始数组和新数组是可见的
  const arr1=[1,2,3,4];
  const arr2=arr1.concat(obj);
  obj.a=2;               
  console.log(arr2);    	//[‘a‘,‘b‘,{a:2},1,2,3,4]  
  console.log(arr);       //[‘a‘,‘b‘,{a:2}]

2.slice()

** 语法：**
arr.slice(begin, end)

参数:
***begin(可选) ***
如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素)。

如果省略 begin，则 slice 从索引 0 开始。

如果 begin 大于原数组的长度，则会返回空数组。

***end(可选) ***
在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。
slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素 （索引为 1, 2, 3的元素)。

如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

如果 end 被省略，则 slice 会一直提取到原数组末尾。

如果 end 大于数组的长度，slice 也会一直提取到原数组末尾.

**返回值 **
slice 不会修改原数组，只会返回一个浅复制了原数组中的元素的一个新数组。拷贝规则同concat()

实例：

  var fruits = [‘Banana‘, ‘Orange‘, ‘Lemon‘, ‘Apple‘, ‘Mango‘];
  var citrus = fruits.slice(1, 3);

// fruits contains [‘Banana‘, ‘Orange‘, ‘Lemon‘, ‘Apple‘, ‘Mango‘]
// citrus contains [‘Orange‘,‘Lemon‘]

3.join()

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

**返回值 **
将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。如果 arr.length 为0，则返回空字符串

实例：

  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"

4.toString()

** 语法：**
arr.toString()

**返回值 **
返回一个字符串，表示指定的数组及其元素。

实例：

   const array1 = [1, 2, ‘a‘, ‘1a‘];
   console.log(array1.toString());
// "1,2,a,1a"

5.indexof()

** 语法：**
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  

6.lastIndexOf()

** 语法：**
arr.lastIndexOf(searchElement,fromIndex)
参数:
***searchElement ***
要查找的元素

fromIndex(可选)
从此位置开始逆向查找。默认为数组的长度减 1(arr.length - 1)，即整个数组都被查找。

如果该值大于或等于数组的长度，则整个数组会被查找。

如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。

如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。

**返回值 **
返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

实例：

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

二.会改变原始数组的方法:

下面的这些方法会改变调用它们的对象自身的值：

1.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 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

**返回值 **
通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容，如果只删除了一个元素，则返回只包含一个元素的数组。

如果没有删除元素，则返回空数组。此方法会改变原数组。

实例：

//1.从第 2 位开始删除 0 个元素，插入“drum”
var myFish = ["angel", "clown", "mandarin",    "sturgeon"];    //1-5同
var removed = myFish.splice(2, 0, "drum");

// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除    --removed的返回值下同

//2.从第 2 位开始删除 0 个元素，插入“drum” 和 "guitar"
var removed = myFish.splice(2, 0, ‘drum‘, ‘guitar‘);

// 运算后的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

//3.从第 3 位开始删除 1 个元素
var removed = myFish.splice(3, 1);

// 运算后的 myFish: ["angel", "clown", "drum", "sturgeon"]
// 被删除的元素: ["mandarin"]

//4.从第 2 位开始删除 1 个元素，插入“trumpet”
var removed = myFish.splice(2, 1, "trumpet");

// 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
// 被删除的元素: ["drum"]

//5.从第 0 位开始删除 2 个元素，插入"parrot"、"anemone"和"blue"
var removed = myFish.splice(0, 2, ‘parrot‘, ‘anemone‘, ‘blue‘);

// 运算后的 myFish: ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// 被删除的元素: ["angel", "clown"]

//6.从第 2 位开始删除 2 个元素
var myFish = [‘parrot‘, ‘anemone‘, ‘blue‘, ‘trumpet‘, ‘sturgeon‘];
var removed = myFish.splice(myFish.length - 3, 2);

// 运算后的 myFish: ["parrot", "anemone", "sturgeon"]
// 被删除的元素: ["blue", "trumpet"]

//7.从倒数第 2 位开始删除 1 个元素
var myFish = [‘angel‘, ‘clown‘, ‘mandarin‘, ‘sturgeon‘];
var removed = myFish.splice(-2, 1);

// 运算后的 myFish: ["angel", "clown", "sturgeon"]
// 被删除的元素: ["mandarin"]

//8.从第 2 位开始删除所有元素
var myFish = [‘angel‘, ‘clown‘, ‘mandarin‘, ‘sturgeon‘];
var removed = myFish.splice(2);

// 运算后的 myFish: ["angel", "clown"]
// 被删除的元素: ["mandarin", "sturgeon"]

2.pop()

** 语法：**
arr.pop()

**返回值 **
从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。当数组为空时返回undefined

实例：

let myFish = ["angel", "clown", "mandarin", "surgeon"];

let popped = myFish.pop();

console.log(myFish); 
// ["angel", "clown", "mandarin"]

console.log(popped); 
// surgeon

3.push()

** 语法：**
arr.push(element1, ..., elementN)

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

返回值 **
将一个或多个元素添加到数组的末尾，并返回该数组的新长度。新的 length 属性值将被返回。**

实例：

var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");

console.log(sports); 
// ["soccer", "baseball", "football", "swimming"]

console.log(total);  

4.shift()

** 语法：**
arr.shift()

**返回值 **
从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。如果数组为空则返回undefined

实例：

let myFish = [‘angel‘, ‘clown‘, ‘mandarin‘, ‘surgeon‘];

console.log(‘调用 shift 之前: ‘ + myFish);
// "调用 shift 之前: angel,clown,mandarin,surgeon"

var shifted = myFish.shift(); 

console.log(‘调用 shift 之后: ‘ + myFish); 
// "调用 shift 之后: clown,mandarin,surgeon" 

console.log(‘被删除的元素: ‘ + shifted); 
// "被删除的元素: angel"

5.unshift()

** 语法：**
arr.unshift(element1, ..., elementN)

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

返回值 **
将一个或多个元素添加到数组的开头，并返回该数组的新长度**(该方法修改原有数组)。当一个对象调用该方法时，返回其 length 属性值。

实例：

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 ]

6.reverse()

** 语法：**
arr.reverse()

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

实例：

const array1 = [‘one‘, ‘two‘, ‘three‘];
console.log(‘array1:‘, array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log(‘reversed:‘, reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log(‘array1:‘, array1);
// expected output: "array1:" Array ["three", "two", "one"]

7.sort()

** 语法：**
arr.sort(function(a,b){....})

参数
function(){}可选
用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。

a
第一个用于比较的元素。

b
第二个用于比较的元素。

如果指明了 compareFunction(即function(a,b)) ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

• 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；

• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；

• 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。

• compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

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

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

实例：

var numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

也可以写成：
var numbers = [4, 2, 5, 1, 3]; 
numbers.sort((a, b) => a - b); 
console.log(numbers);

// [1, 2, 3, 4, 5]

参考：
https://developer.mozilla.org/zh-CN/