数组中常用的方法总结

常见方法速查

// 1.数组的操作方法
var a = [];
a.unshift()		/*在数组的开头添加一个或者多个元素，返回新长度；IE9+*/
a.shift()		/*删除数组中的第一个元素，返回删除的元素*/
a.push()		/*往数组的末尾添加一个或多个元素，返回新长度*/
a.pop()			/*删除并返回数组的最后一个元素*/
 
a.slice('start', 'end')	/*不修改原数组，返回一个新数组*/
a.concat()		/*不修改原数组，返回一个新数组。不传参数时，复制数组；传参数时连接数组，可以有多个数组参数；*/
a.splice()		/*删除数组：两个参数，第一个是开始的位置，第二个是删除的长度
				插入元素：至少3个参数，第一个是开始的位置，第二个是0，后面是要插入的元素（可以有多个）
				替换元素：至少3个参数，第一个是开的位置，第二个是替换的个数，后面是要替换的元素*/
a.reverse()		/*反转数组*/
a.sort()		/*用特定的方法对数组进行排列，接收一个排序函数，该函数接收两个参数，
				如果第一个参数在前面，返回一个负数；如果第二个参数在前面，返回一个正数；如果两个参数相等，返回0*/
a.indexOf()		/*在数组中查找元素，两个参数，第一个参数时要查找的元素；第二个参数是要开始查找的位置（该参数可以没有）*/
a.lastIndexOf()		/*从数组的后面开始查找元素，与indexOf相同，只是查找方向不同*/
a.join()		/*把数组格式化成字符串，接收一个参数，即：分隔符。如果不传参数或传入undefined，则以逗号分隔*/
a.toString()		/*返回以逗号为分隔符的数组中的元素组成的字符串*/
 
a instanceof Array	/*检测是否为数组，如果是，返回true*/
Array.isArray(a)	/*检测是否为数组，如果是，返回true。IE9+*/

// 字符串操作方法
var b = '54545';
b.concat()			/*拼接字符串，返回新的字符串,不改变原字符串。实践中最常用的是+操作符*/
b.charAt()			/*接收一个参数（字符串中的位置），返回字符串中某位置上的字符*/
b.charCodeAt()			/*与charAt用法相同，返回的是该字符的字符编码*/
String.fromCharCode()	        /*传入字符串的编码，把编码解析为字符串并返回该字符串。可接收多个编码参数*/
b.slice('start', 'end')		/*返回一个新的字符串，不不包含end，不改变原字符串*/
b.substring('start', 'end')	/*与slice一样*/
b.substr('start', 'length')	/*返回一个新字符串，不改变原字符串*/
b.indexOf()			/*在字符串中从前往后查找字符，没找到就返回-1。接收两个参数：第一个参数时要查找的字符；第二个参数是（可选的）开始查找的位置*/
b.lastIndexOf()			/*与indexOf用法相同，改方法是从后往前查找*/
b.search()			/*在字符串中查找，并返回位置。接收一个参数（要查找的字符串），如果没找到，返回-1.从左向右查找*/
b.trim()			/*创建一个字符串副本，删除前置及后缀的所有空格，返回结果。 IE9+*/
b.toLocaleLowerCase()	        /*字符串大写转为小写（针对地区特定的方法，推荐使用）*/
b.toLocaleUpperCase()	        /*字符串小写转为大写（针对地区特定的方法，推荐使用）*/
b.toLowerCase()			/*字符串大写转为小写*/
b.toUpperCase()			/*字符串小写转为大写*/
b.localeCompare('str')	        /*比较字符串b与str，并返回0或一个正数或一个负数。如果在字母表中b在str的前面，就返回一个负数；在后面，返回一个正数；相等返回0*/
b.replace()			/*查找并替换(不改变原字符串)，返回一个新字符串，接收两个参数。第一个参数：要替换（查找）的字符串；第二个：要替换成的字符串。*/

低阶

1、 Array.from，将一个类似数组的对象中创建一个数组实例；

• 参数：Array.from(arrayLike[, mapFn[, thisArg]]) 后俩个可选

第一个类数组，第二个是函数，类数组的每一项都会执行，第三个参数座位mapFn的this

• 返回值：一个新的数组实例

	Array.from('foo');     //['f','o','o'];
	var o = {a:1};
	Array.from([1,2,3,4],function(item){
		return item+this.a;
	},o) //2,3,4,5

2、Array.isArray() 判断传进的值是否是array
注意：Array.prototype也是一个数组
3、 Array.of() 将参数当做数组项，并返回一个新数组

注意：和Array()的区别是，Array.of()是将参数作为数组项，而Array是将参数当做数组的长度。

• 参数：数组项
• 返回值：新数组

Array.of(1,2,3); // [1,2,3]
Array.of(9); //[9]
Array.of(7); //[7]
Array(7)  // [ , , , , , , ]

4、 copyWithin() 赋值数组的一部分
参数：arr.copyWithin(target[,start[，end]])，复制是包含start，不包含end
返回值：复制后的数组，改变了原数组（不会改变数组的length）

var arr = [0,1,2,3,4,5,6,7,8,9];
console.log(arr.copyWithin(3,5,9));    //[0,1,2,5,6,7,8,7,8,9]
console.log(arr);                      //[0,1,2,5,6,7,8,7,8,9]

var arr = [0,1,2,3,4,5,6,7,8,9];
console.log(arr.copyWithin(1,6));      //[0,6,7,8,9,5,6,7,8,9]

var arr = [0,1,2,3,4,5,6,7,8,9];
console.log(arr.copyWithin(5));        //[0,1,2,3,4,0,1,2,3,4]

5、every() 测试数组中所有的元素是否都通过了指定函数的测试

• 参数：arr.every(callback[, thisArg]) 第一个参数是需要执行的的函数，第二个参数是this。callback被传入三个参数，元素值，元素索引，原数组。
• 返回值：Boolean，不会改变原数组

 function theMax(element, index, array){
	return 	(element >= 10);
}
function yuygg(element){
	return 0 > element+this.a;
}
var passed = [12,3,4,5,53,54,22,45,2];
var o = {a: -100}
console.log(passed.every(theMax));    //false
console.log(passed.every(yuygg,o));   //true

6、fill() 用一个固定的值填充一个数组从起始到终止索引内的全部元素（不包括终止元素）

• 参数：arr.fill(value[,start[,end]])
• 返回值：修改后的数组，会改变原数组

var arr1 = [0,1,2,3,4,5,6,7,8];
console.log(arr1.fill('a', 2,7));  //[0,1,'a','a','a','a','a',7,8]

var arr3 = [0,1,2,3,4,5,6,7,8];
console.log(arr3.fill('b'));      //['b','b','b','b','b','b','b','b','b'];

7、filter() 创建一个新数组，包含了通过测试的所有元素

• 参数：arr.filter(callback[,thisAge]); 第一个参数为执行函数，第二个是函数的this
  callback被传入三个参数，元素值，元素索引，原数组
• 返回值：新数组，不会改变原来的数组
  8、find() 返回数组中满足函数测试的第一个值
• 参数：arr.find(callback[, thisArg])
• 返回值：有一个符合则返回该值，反之返回undefined 不会改变原数组

var arr = [1,2,3,4,5,6];
function nfewr(element){
	return element%2 == 0; 
}
console.log(arr.find(nfewr)); //2

9、findIndex() 和find()有一些类似，该函数返回的是符合条件的索引
10、flat() 深度遍历数组，并将所有元素与遍历道德子数组中的元素合并为一个新元素返回

• 参数：depth 深度
• 返回值：返回一个新数组，不改变原有的数组

var m = [1,2,[3,4,[5,6,7]]];
console.log(m.flat());    //[1,2,3,4,[5,6,7]];
console.log(m.flat(3));   // [1,2,3,4,5,6,7]

11、flatMap() 将结果压缩成一个新的数组

• 参数: callback(currentValue)
• 返回值：返回一个新的数组，深度为1

var m = [1,2,3,4];
function fun1(currentValue){
	return [[currentValue*2]];
}
console.log(m.flatMap(fun1)); //[[1],[2],[3],[4]]

var arr2 = ["你好呀",""","一起出去玩吧！"];
console.log(arr2.flatMap((x)=>x.split(""))); //["你", "好", "呀", "一", "起", "出", "去", "玩", "吧", "！"]

12、forEach() 对数组中的每个元素执行一次提供的函数

• 参数：arr.forEach(callback[, thisArg]) ;
• 返回值：undefined 不会改变原数组

var arr = [1,2,3,4];
function fun2(item){
	console.log(item*2);
}
console.log(arr.forEach(fun2));

13、includes() 判断数组是否包含一个指定的值，如果存在，返回true，反之false

• 参数：arr.include(valueToFind[, fromIndex]) 第二个参数是从该位置开始查找
• 返回值：

var arr = [1,2,3,4,5];
console.log(arr.includes(8)); //false
console.log(arr.includes(1,3)); //false

高阶

1、 concat 用于连接俩个或俩个以上数组，并保留引用

var num1 = [1,2,3];
var num2 = [4,5,6];
var num3 = num1.concat(num2);     //[1,2,3,4,5,6]
num1.push(5);
console.log(num4);                // [1,2,3,4,5,6] 合并基本类型不会改变num3

var arr1 = [[1,2,3],4,5];
var arr2 = [5,6];
var arr3 =  arr1.concat(arr2);      // [[1,2,3],4,5,5,6];
arr1[0].push(9);                    //arr1[[1,2,3,9],4,5]
//由于arr1[0]是应用类型，所以当arr1[0]改变时，就会改变arr3
console.log(arr3);                  // [[1,2,3,9],4,5,5,6]; 

• 返回值：新的数组实例

2、entries 返回一个新的Array Iterator对象

var m = ['a','b','c','d'];
var it = m.entries();
console.log(it);         //Array Iterator {}
//此时就需要使用next()
console.log(it.next());  
/*
	{
		done: false
    	value: (2) [0, "a"]
    	}
    	使用一次next就会一次向后遍历一次,done表示迭代器是否完成
*/
for(var i=0;i<m.length+1;i++){
	var temp = it.next();
	console.log(temp.done);
	if(temp.done !== true){ //表示迭代器还未完成
 		console.log(temp.value);
	}
}

参考：MDN