JS数组常用方法的整理

什么是数组？
数组是一种特殊的变量，它能够一次存放一个以上的值。

Array.shift();

​ 作用:删除数组中的第一个元素
​ 返回值:被删除的那个元素

​ 参数:无
​ 注意点:直接在原数组操作,不会生成新数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();        
// 从 fruits 删除第一个元素 "Banana"

Array.pop();

​ 作用:删除数组中的最后一个元素
​ 返回值:被删除的那个元素
​ 参数:无
​ 注意点:直接在原数组操作,不会生成新数组

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();            
// 从 fruits 删除最后一个元素（"Mango"）

Array.splice(start,n);

​ 作用一:从数组的start位置开始删除n个元素
​ 参数:start表示从哪个索引开始删除,n表示要删除几个元素
​ 返回值:被删除的元素的集合
​ 注意点:直接在原数组操作

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        
// 删除 fruits 中的第一个元素

Array.splice(start,n,…);

​ 作用二:从数组的start位置开始删除n个元素,新增m个元素
​ 参数:start表示从哪个索引开始删除或者增加,n表示要删除几个元素,后面由m个参数,就是要增加要数组中的新元素,从索引是start位置开始增加
​ 返回值:被删除的元素的集合
​ 注意点:直接在原数组操作

Array.unshift(item);

​ 作用:从数组前面增加一个元素
​ 参数:item要新增的那个元素
​ 返回值:数组的长度
​ 注意点:直接在原数组操作

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");   
// 返回 5

Array.push(item)

​ 作用:从数组后面增加一个元素
​ 参数:item要新增的那个元素
​ 返回值:数组的长度
​ 注意点:直接在原数组操作

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");      
//  向 fruits 添加一个新元素

Array.slice(start,end);

​ 作用:从数组中截取一部分
​ 参数:start表示开始截取的索引,end表示结束截取的索引,包start,不包end
​ 返回值:返回一个新的数组，包含从 start 到 end （不包括该元素）的 所有元素
​ 注意点:返回一个新数组,原数组不变

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

Array.reverse();

​ 作用:颠倒数组
​ 参数:无
​ 返回值:原数组
​ 注意点:直接在原数组操作

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

Array.sort(fn)

​ 作用:按照指定规则进行排序
​ 参数:如果不写参数,默认是按照字符编码的顺序进行排序,如果写参数,参数fn是表示排序规则的函数
​ 返回值:返回值就是拍好序的数组
​ 注意点:直接在原数组操作
例子简化版:如果希望由小到大排序

		 if(a<b){return a-b;}
		if(a==b){return a-b;}
		if(a>b){return a-b;}
		return a-b;
简化版:如果希望由大到小排序
		if(a<b){return b-a;}
		 if(a==b){return b-a;}
		 if(a>b){return b-a;}

Array.concat(数组2,数组3,…);

​ 作用:用于连接多个数组
​ 参数:要被连接的那些数组
​ 返回值:连接好的新数组
​ 注意点:不在原数组操作,会产生新数组

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

Array.join(“分隔符”);

​ 作用:把数组变成字符串
​ 参数:默认是逗号,分隔符
​ 返回值:生成的那个字符串
​ 注意点:不会改变原数组

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 

字符串.split(“分隔符”)

​ 作用:把字符串变成数组
​ 参数:默认字符串不分割,直接变成一个数组中的唯一元素,也可以指定分隔符作为参数
​ 返回值:生成的那个新数组
​ 注意点:不会改变原来的字符串

length

属性提供了向数组追加新元素的简易方法：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";  

兼容性差的方法：

Array.indexOf(ele,start)

​ 作用:从前往后查找数组中某个元素的索引
​ 返回值:只返回第一次找的元素的索引,如果没有找到就返回-1,如果找到了就返回该元素的索引值
​ 参数:第一个参数ele是:要查找的那个元素 第二个参数start是:从哪里开始查找,默认从0开始
2.数组.lastIndexOf(ele,start)
​ 作用:从后往前查找数组中某个元素的索引
​ 返回值:只返回第一次找的元素的索引,如果没有找到就返回-1,如果找到了就返回该元素的索引值
​ 参数:第一个参数ele是:要查找的那个元素 第二个参数start是:从哪里开始查找,默认从0开始

遍历数组：

for循环

 for(var i=0;i<arr.length;i++){
 	console.log('当前循环到的是第'+i+'个元素,元素的值是:'+arr[i]);
     //i是索引,arr[i]是数组中的元素

for in循环

  for(var index in arr){
		//固定写法,arr是要循环的数组,index是循环到的那个元素的索引
 	console.log("当前循环到的是第"+index+'个元素,元素的值是:'+arr[index])
	// }

forEach循环(数组迭代)

​ 用法:数组.forEach(function(value,index){要循环执行的函数,数组里面有多少个元素,该函数就执行多少次})
​ 参数:要循环执行的函数,函数有两个形参,第一个形参实循环到的那个数组元素的值,第二个形参实循环到的那个数组元素的索引
​ 注意点:不会改变原数组

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "
"; 
}

Array.map(要循环执行的函数)

​ 作用:循环数组
​ 参数:要循环执行的函数,函数有两个形参,第一个形参实循环到的那个数组元素的值,第二个形参实循环到的那个数组元素的索引
​ 返回值:整个map的返回值是每一次循环的函数的返回值的集合

//map的回调函数中支持return返回值``
arr.map(function(value,index,array){`` ` `　　
``//执行代码`` ` `　``
　return xxx`` ` `
})

Array.filter(要循环执行的函数)

​ 作用:循环数组,返回数组中符合条件的元素
​ 参数:要循环执行的函数,函数有两个形参,第一个形参实循环到的那个数组元素的值,第二个形参实循环到的那个数组元素的索引
​ 返回值:符合条件的元素的集合

//不会改变原始数组，返回新数组`
var arr = [{ id: 1, text: 'aa', done: true},
{ id: 2, text: 'bb', done:false}]
console.log(arr.filter(item => item.done))
//ES5 
arr.filter(function(item) {
    returnitem.done;});
var arr = [73,84,56, 22,100]
var newArr = arr.filter(item => item>80)  
//得到新数组 [84, 100]
console.log(newArr,arr)

Array.every(要循环执行的函数体)

​ 作用:判断数组中的所有元素是否满足条件,如果所有都满足条件返回true,否则返回false

	
	 var result = arr.every(function(value,index){
		return value>30;
     })
	 console.log(result)

数组.some(要循环执行的函数体)
作用:判断数组中是否有一些元素满足条件,只要有一个满足条件就返回true,否则返回false

var result = arr.some(function(value,index){
 	return value>30;
 })
 console.log(result)

Array.reduce

Array.reduce(function(上次循环的返回值,当前遍历到的那个数组元素){
		//要循环执行的函数体
	},初始值)
	由于第一次循环的时候没有上次循环的返回值,所以可以设置初始值.
	返回值是:最后一个循环的返回值
	*/
	var arr = [23,45,43,78,23,12,46,28,97];
	console.log(arr.reduce(function(prev,current){
		return prev+current;
	},0))
	//0+23
	//23+45
	//23+45 + 43

some遍历

//some()是对数组中每一项运行指定函数，如果该函数对任一项返回true，则返回true。
var arr = [ 1, 2, 3, 4, 5, 6 ];
console.log( arr.some( function( item, index, array ){   
    return item > 3; 
}));
true