JavaScript中常用的数组方法

JavaScript中有许多操作数组的方法，利用这些方法可以实现对数组的复制等操作，使数组更好的为我们服务。

Array.from方法

语法: Array.from(object, mapFunction, thisValue)

返回值: 新的数组实例

Array.from(object, mapFunction, thisValue)
//object 需要转换为数组的对象
//mapFunction 对数组中每个元素要调用的函数
//thisValue mapFunction函数中的this对象

使用from方法可以将一个类数组(拥有length属性)实例，转换为数组实例。

let string = "Hello";

let array1 = Array.from(string);

console.log(array1);
//输出: [ 'H', 'e', 'l', 'l', 'o' ]

可以看到Array.from方法的返回值是一个数组，而数组中的每个元素 都对应字符串 Hello 的一个字母。

我们同样可以使用Array.from方法改变一个已知数组的值。

let array1 = [1, 2, 3, 4, 5];

let array2 = Array.from(array1, function (a) {
  return a * a;
});

console.log(array2);
//输出：[ 1, 4, 9, 16, 25 ]

对数组array1的每个元素使用函数中的操作后重新放在一个新的数组中。

使用Array.from方法对数组进行浅复制。

let array1 = [1,2,3,4,5];

let array2 = Array.from(array1); //对数组array1进行复制

console.log("array1:" + array1);  //array1:1,2,3,4,5
console.log("array2:" + array2);  //array2:1,2,3,4,5

array2[0] = 10;

console.log("array1:" + array1);  //array1:1,2,3,4,5
console.log("array2:" + array2);  //array2:10,2,3,4,5

使用Array.from方法对数组array1进行复制后，改变数组 array2的值并不会影响原数组的值(浅复制)，这就代表array1和array2是两个不同的数组。

Array.of方法

语法: Array.of(element0, element1, …, elementN)

返回值: 新的数组实例

Array.of方法可以将一组参数转换为数组。

let array1 = Array.of(1,2,3,4,5);

console.log(array1);  //[ 1, 2, 3, 4, 5 ]

let array2 = Array.of("hello", "world");

console.log(array2);  //[ 'hello', 'world' ]

push()方法

语法: array.push(element0, element1, …, elementN)

返回值: 改变后数组的长度

是否改变原数组: 是

在数组尾部添加元素，并返回数组长度。

let array1 = [1,2,3];

let length = array1.push(10);

console.log(length);  //4

pop()方法

语法: array.pop()

返回值: 数组中移除的最后一个元素，如果数组为空则返回undefined

是否改变原数组: 是

删除数组最后一位，并返回删除的数据。

let array1 = [1,2,3,4,5];

let el = array1.pop();

console.log(el);  //5

shift()方法

语法: array.shift()

返回值: 数组中移除的元素，如果数组为空则返回undefined

是否改变原数组: 是

删除数组的第一位元素，并返回删除的元素。

let array1 = [1,2,3,4,5];

let el = array1.shift();

console.log(array1);  //[ 2, 3, 4, 5 ]
console.log(el);  //1

concat()方法

语法: array.concat(array1,array2, array3, …, arrayN)

返回值: 合并后的新数组

是否改变原数组: 否

合并数组，并返回合并之后的数据。

let array1 = [1,2];

let array2 = [3,4];

let array3 = array1.concat(array2);

console.log(array3); //[ 1, 2, 3, 4 ]

使用concat()方法也可以实现数组的浅复制。

let array1 = [1,2,3];

let array2 = array1.concat();

console.log(array2);  //[ 1, 2, 3 ]

join()方法

语法: array.join(separator)

返回值: 字符串

是否改变原数组: 否

使用分隔符，将数组转为字符串并返回。

let array1 = ["hello", "world"];

let array2 = array1.join("-");

console.log(array2);  //hello-world

join()方法中的参数是可以自己指定的，这里指定了"-" 作为分隔符。

unshift()方法

语法: array.unshift(element0, element1, …, elementN)

返回值: 新数组的长度

是否改变原数组: 是

shift()方法是删除数组的第一位元素，而unshift()方法则是在数组的开头增加元素并返回数组长度。

let array1 = [1,2,3];

let length = array1.unshift(100);

console.log(array1);  //[ 100, 1, 2, 3 ]
console.log(length);  //4

reverse()方法

语法: array.reverse()

返回值: 反转后的数组

是否改变原数组: 是

反转数组中的元素，reverse()方法可以改变原数组。

let array1 = [1,2,3,4,5];

let array2 = array1.reverse();

console.log(array2);  //[ 5, 4, 3, 2, 1 ]

console.log(array2 === array1);  //true

array2[0] = 23;

console.log(array1);  //[ 23, 4, 3, 2, 1 ]

sort()方法

语法: array.sort(index,len,element0, element1, …, elementN)

返回值: 排序后的数组

是否改变原数组: 是

该方法默认按照Unicode码位点(Unicode码位点（code point）是Unicode编码的基本单位，它是一个非负数值，表示一个Unicode字符或字符序列及其规范化表示形式， 一个Unicode码位点可以由0到10FFFF之间的十六进制数值表示，并以“U+”加十六进制数字的形式指定， 如U+0041表示大写英文字母“A”) 的顺序来排序字符串数组。

let array1 = ["hello", "year", "world"];

let array2 = array1.sort();

console.log(array2);  //[ 'hello', 'world', 'year' ]

'h'的码位点: U+0068'w'的码位点:U+0077 'y'的码位点:U+0079比较时 68 < 77 < 79所以排序后的顺序是[ ‘hello’, ‘world’, ‘year’ ]。

我们也可以通过传入比较函数来改变排序规则，比较函数是一个可选参数，它接受两个参数，如果第一个参数比第二个参数小， 则返回负数；如果两个参数相等，则返回0；如果第一个参数比第二个参数大，则返回正数。

该数字告诉sort()方法如何排序这两个参数，如果返回值小于 0，则第一个参数会被排列到第二个参数之前； 如果返回值大于 0，则第二个参数会被排列到第一个参数之前； 如果返回值等于 0，则这两个参数的位置不变。

let array1 = [2,3,4,2,1];

array1.sort(function(a,b){
    return a - b;
});

console.log(array1);  //[ 1, 2, 2, 3, 4 ]

slice()方法

语法: array.slice(start, end)

返回值: 数组

是否改变原数组: 否

`slice(start,end) 截取数组并返回一个新数组，不改变原数组， start为开始截取的位置，end是结束截取的位置。

如果不指定开始和结束位置，则是截取整个数组，此时相当于对数组进行浅复制，如果只指定开始而没有结束位置，则从 开始位置截取到数组末尾，如果指定了开始和结束位置则截取包含开始但不包含结束的数组。

let array1 = [2,3,4,2,1];

let array2 = array1.slice();  //没有指定开始和结束位置

console.log(array2);  //[ 2, 3, 4, 2, 1 ]
///
let array3 = [2,3,4,2,1];

let array4 = array3.slice(1);  //指定了开始位置没有指定结束位置

console.log(array4);  //[ 3, 4, 2, 1 ]
///
let array5 = [2,3,4,2,1];

let array6 = array5.slice(1,3);  //指定了开始和结束位置，截取的新数组包含开始，但不包含结束

console.log(array6);  //[ 3, 4 ]

方法的参数也可以是负数，符号代表的是方向，正数代表从左到右，负数代表从右到左。

let array1 = [1,2,3,4];

let array2 = array1.slice(-3,-1);

console.log(array2);  //[ 2, 3 ]

let array3 = array.slice(-3);  //表示取得数组中倒数第三个元素及其之后的所有元素

console.log(array3);  //[ 2, 3, 4 ]

splice()方法

语法: array.splice(index,len,element0, element1, …, elementN)

返回值: 数组

是否改变原数组: 是

其中 index:开始下标，len:替换/删除的长度，item:替换的值。

let array1 = [1,2,3,4];

let array2 = array1.splice(0, 1);

console.log(array1);  //[2,3,4]

console.log(array2);  //[1]

可以看到，方法的的返回值是被删除的元素组成的数组，如果没有指定len参数则默认从开始元素删除到数组末尾。

let array1 = [1,2,3,4];

let array2 = array1.splice(1);

console.log(array1);  //[ 1 ]

console.log(array2);  //[ 2, 3, 4 ]

接下来看一看方法第三个参数的使用。

let array1 = [1,2,3,4];

let array2 = array1.splice(0,2, 'A');

console.log(array1);  //[ 'A', 3, 4 ]

console.log(array2);  //[ 1, 2 ]

使用方法删除了数组中的元素 1、2 并指定了替代元素 ‘A’。

博客