JavaScript中常用的数组方法

JavaScript中的数组方法

创建数组的方式

使用Array构造函数

var arr1=new Array()   //创建一个空数组
var arr2=new Array(20)   //创建一个包含20项的数组

使用数组字面量表示

var arr3=[]
var arr4=[20]   //创建一个包含一项的数组

各方法

1、join()

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

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"

console.log(elements.join(''));
// expected output: "FireAirWater"

console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

语法

arr.join([separator])

返回值

一个所有数组元素连接的字符串。如果 arr.length 为0，则返回空字符串。

！如果一个元素为 undefined 或 null，它会被转换为空字符串。

通过此方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串

	function repeat(str,n){
			return new Array(n+1).join(str)
		}
		console.log(repeat("abc;",3));   //abc;abc;abc;

2、push()、pop()

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

pop()：数组末尾移除最后一项，减少数组的length值，然后返回移除的项

var arr = ['kobe', 'James', 'Joe']
var arr1 = arr.push('Nancy', 'Tim')
console.log(arr1);   //5

var arr2=arr.pop()
console.log(arr2)    //Tim
console.log(arr);    //["kobe", "James", "Joe", "Nancy"]

3、shift()、unshift()

shift()：删除原数组的第一项，并返回删除元素的值；如果数组为空则返回undefined；

unshift()：将参数添加到原数组开头，并返回数组的长度

var arr = ['kobe', 'James', 'Joe']
var arr1 = arr.unshift('Nancy', 'Tim')   
console.log(arr1)    //5
var arr2=arr.shift()
console.log(arr2)    //Nancy
console.log(arr);    //["Tim", "kobe", "James", "Joe"]

4、sort()

sort()：按升序排列数组项；

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

var arr1 = ["a", "d", "c", "b"];
console.log(arr1.sort());    //["a", "b", "c", "d"]
arr2 = [13, 24, 51, 3];
console.log(arr2.sort());    //[13, 24, 3, 51]
console.log(arr2);   //[13, 24, 3, 51]，原数组被改变

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

function compare(value1, value2) {
			if (value1 < value2) {
				return -1;
			} else if (value1 > value2) {
				return 1;
			} else {
				return 0;
			}
		}
		arr2 = [13, 24, 51, 3];
		console.log(arr2.sort(compare));   //[3, 13, 24, 51]

降序只需交换比较函数返回的值即可。

5、reverse()

reverse()：反转数组项的顺序

arr = [13, 24, 51, 3];
console.log(arr.reverse())   //[3, 51, 24, 13]，原数组改变

6、concat()

concat()：将参数添加到原数组中。这个方法会先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

var arr = [1,3,5,7];
var arrCopy = arr.concat(9,[11,13]);
console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]
console.log(arr); // [1, 3, 5, 7](原数组未被修改)

var arrCopy2 = arr.concat([9,[11,13]]);
console.log(arrCopy2); //[1, 3, 5, 7, 9, Array[2]]
console.log(arrCopy2[5]); //[11, 13]

也就是说concat()方法只能将传入数组中的每一项添加到数组中，如果传入数组中有些项是数组，那么也会把这一数组项当做一项添加到新数组中。

7、slice()

slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组；slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项；如果有两个参数，该方法返回起始位置和结束位置之间的项——但不包括开始位置的项

var arr = [1,3,5,7,9,11];
var arrCopy = arr.slice(1);
var arrCopy2 = arr.slice(1,4);
var arrCopy3 = arr.slice(1,-2);
var arrCopy4 = arr.slice(-4,-1);
console.log(arr); //[1, 3, 5, 7, 9, 11](原数组没变)
console.log(arrCopy); //[3, 5, 7, 9, 11]
console.log(arrCopy2); //[3, 5, 7]
console.log(arrCopy3); //[3, 5, 7]
console.log(arrCopy4); //[5, 7, 9]

出现负数，负数就加上数组长度

8、splice()

splice()：可以实现删除、插入和替换。会改变原数组

删除：可以删除任意数量的项，只需指定两个参数：要删除的第一项的位置和要删除的项数量。如splice(0,2)会删除数组中的前两项。

插入：可以向指定位置插入任意数量的项，只需要提供三个参数：起始位置、要删除的项数量、要插入的项。如splice(2,0,4,6)会从当前数组的位置2开始插入4和6。

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定三个参数，同插入，插入的项数不必与删除的项数相等。如splice(2,1,4,6)会删除当前数组位置2的一个项并在位置2插入4，6

splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组

var arr = [1,3,5,7,9,11];
var arr1 = arr.splice(0,2);
console.log(arr); //[5, 7, 9, 11]
console.log(arr1); //[1, 3]
var arr2 = arr.splice(2,0,4,6);
console.log(arr); // [5, 7, 4, 6, 9, 11]
console.log(arr2); // []
var arr3 = arr.splice(1,1,2,4);
console.log(arr); // [5, 2, 4, 4, 6, 9, 11]
console.log(arr3); //[7]

9、indexOf()、lastIndexOf()

indexOf()：返回某个指定的字符串值在字符串中首次出现的位置。参数：查找的元素、开始查找的位置

lastIndexOf()：从数组的末尾开始向前查找元素首次出现的位置。参数：查找的元素、开始查找的位置

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5
console.log(arr.indexOf(5,2)); //2
console.log(arr.lastIndexOf(5,4)); //2
console.log(arr.indexOf("5")); //-1

10、forEach()

forEach()：对数组的每个元素执行一次给定的函数。这个方法没有返回值,不会改变原数组。参数都是方法类型，默认有传参，参数：遍历的数组内容；对应的数组索引，数组本身

forEach() 对于空数组是不会执行回调函数的。

const array1 = ['a', 'b', 'c'];

array1.forEach(element => console.log(element));    //控制台打印出a,b,c

11、map()

map()：创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值（一个由原数组每个元素执行回调函数的结果组成的新数组）。

map不修改调用它的原数组本身（当然可以在 callback 执行时改变原数组）

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

12、filter()

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

filter 不会改变原数组，它返回过滤后的新数组。

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-azKNULtp-1600153521169)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200915135132967.png)]

13、every()

every()：测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

every 不会改变原数组。

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: true

[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

14、some()

some()：测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

some() 被调用时不会改变数组。

const array = [1, 2, 3, 4, 5];
// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

15、reduce()、reduceRight()

reduce()：对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15


var total = [ 0, 1, 2, 3 ].reduce(
  ( acc, cur ) => acc + cur,
  0
);

reduceRight()：接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

const array1 = [[0, 1], [2, 3], [4, 5]].reduceRight(
  (accumulator, currentValue) => accumulator.concat(currentValue)
);

console.log(array1);
// expected output: Array [4, 5, 2, 3, 0, 1]