JavaScript数组常用方法

数组的常用方法

数组的定义：数组是能够存储有序的集合

队列和栈

• 队列

  队列根据插入删除元素方法被称为FIFO（先进先出）

1. push 在末端添加一个元素

2. shift 删除最前端的一个元素，整个队列往前移

3. 栈

   栈根据插入删除元素方法被称为LIFO（后进先出）

• push 在末端添加一个元素
• pop 从末端删除一个元素

push/pop，shift/unshift方法

1. pop() 删除并返回数组的最后一个元素
2. push(…items) 在数组末端添加元素，可以添加多个元素
3. shift() 删除数组的第一个元素并返回
4. unshift(…items) 在数组最前端添加元素，可以添加多个元素

从性能上讲pop和push的性能最高，添加或删除元素时不需要改变元素的索引

而shift和unshift改变数组元素时，都需要改变数组的索引

数组循环

数组的遍历大部分是用for来进行的，可以用for…of以及for…in来循环数组

for (let i = 0; i<arr.length; i++) 运行效率最快

for (let item of arr) 循环数组得到的是数组的每个元素

for (let i in arr) 循环数组得到的是数组元素的的索引值，并且该方式会迭代所有属性

let friuts = ['Apple','Orange','Pear','Banana'];
for(let fruit of fruits){
    alert(fruit);    //分别打印出数组中的每个元素Apple，Orange，Pear，Banana
}
for(let i in fruits){
    alert(i);       //打印的是数组的索引0，1，2，3，
}

数组还有一个toString()方法， 能将数组返回成一个以逗号分隔的字符串

数组添加/移除的其他方法

splice方法

arr.splice(str)可以添加、删除和插入元素，是数组界的瑞士军刀

语法： arr.splice(start [, deleteCount] [, elem1, …, elemN])

从start开始，删除deleteCount元素并在当前位置插入elem1,…,elemN。最后返回已修改的元素的数组

若删除元素，则deleteCount表示要删除元素的个数，不传该参数则删除从start开始的所有元素，为0则表示不删除任何元素

若替换元素，则从替换元素的位置设置deleteCount，然后在该参数后面插入deleteCount个elem

若插入元素，则deleteCount为0，并在后面插入需要插入到数组中的元素

slice方法

语法: slice(start ,end)

该方法表示从索引start开始到end（不包括end）的元素复制到一个新的数组，并且start和end都可以是负数

concat方法

arr.concat(arg1,arg2…)

将数组与其他数据或数组结合在一起，arg*可以是元素或者数组

数组查询

indexOf、lastIndexOf、includes

arr.indexOf(item,from) 从索引from查询item，如果找打则返回索引下标，未找到则返回-1，from为空则查找整个数组

arr.lastIndexOf(item,from) 和上面效果相同，只是从尾部开始查找

arr.includes(item,from) 从索引from查询item，如果找到则返回true，未找到返回false，from为空则表示查找整个数组

find和findIndex

find内部的函数是对数组中的每个元素重复调用

1. item是元素；

2. index是元素的索引；

3. array是数组本身，可省略；

一般用于对对象数组的查询

如果返回true，则查询停止，返回item；如果没有查询到，则返回undefined

findIndex和find函数类似，只是返回的是元素的索引

但是这两个函数只是返回第一个查询为true的元素，因此只是一个值，若返回的是多个值，需要用filter

//语法
let result = arr.find(function(item,index,arr){
    //如果查询到返回true
});

//有一组用户，每个用户有id和name字段，找到一个id==1的用户的name
let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"} 
];
let user = users.find(item => item.id == 1);   //返回的item是一个对象
console.log(user.name)

filter方法

filter方法与find类似，但是它返回的是所有匹配元素组成的数组，而不是单个元素

filter中的回调函数必须返回一个boolean值，当为true时，函数内部会自动将这次回调的结果加入到新的数组中；当返回false时，函数会自动过滤这次结果

//语法
let result = arr.filter(function(item,index,arr){
    //在元素通过过滤器时返回true
});

//返回id小于3的所有用户，得到的将是一个数组
let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];
// 返回前两个用户的数组
let someUsers = users.filter(item => item.id < 3);
alert(someUsers.length); // 2

数组转换

map方法

arr.map(fun)是最经常使用的方法之一

它对数组中的每个元素调用fun函数并返回符合结果的数组

//语法
let result = arr.map(function(item, index, array) {
  // 返回新值而不是当前元素
})

//将数组中的每个元素转换为它的字符串长度并输出
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length)
console.log(lengths); // 5,7,6

sort方法

该方法用于对数组进行排序

但是该方法在默认情况下是对数组中的元素按字符串排序，因此需要添加一个函数让它正常排序

//升序排列
let arr = [1,12,3,14];
arr.sort(function(a,b){return a-b});
console.log(arr);   //1,3,12,14

//装逼写法
arr.sort((a,b) => a-b);
console.log(arr);   //1,3,12,14

//降序排列
let arr = [1,12,3,14];
arr.sort((a,b) => b-a);
console.log(arr);  //14,12,3,1

reverse方法

arr.reverse方法用于颠倒arr中元素的顺序

let arr = [1, 2, 3, 4, 5];
arr.reverse();
alert( arr ); // 5,4,3,2,1

split和join

str.split(delim) 通过delim分隔符将str分割成一个数组，其中delim是str中的某个子字符串，delim也可为空字符串

arr.join(str) 通过str将arr中的每个元素粘合在一起组成一个字符串

let names = 'Bilbo, Gandalf, Nazgul';
//通过,来分割
let arr = names.split(', ');  //[Bilbo,Gandalf,Nazgul]

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];
let str = arr.join(';');   // Bilbo;Gandalf;Nazgul

reduce方法

reduce方法一般用于对数组的每个元素进行汇总

1. previousValue是前一个函数调用的结果，第一次调用是初始化，一般情况下只是用前两个参数
2. item 是当前的数组元素
3. index是当前索引

如果省略了初始值initial，那将默认初始值为0，但是在这种情况下，数组为空，将会报错

let value = arr.reduce(function(previousValue, item, index) {
  // ...
}, initial);

//求给数组的和
let arr = [1, 2, 3, 4, 5];
// 删除初始值
let result = arr.reduce((sum, current) => sum + current);
console.log( result ); // 15

forEach迭代

arr.forEach方法允许为数组的每个元素运行一个函数，但是该函数不会有返回结果

forEach与map很类似，但是map会返回结果

//语法
arr.forEach(function(item, index, array) {
  // ... do something with item
});

数组实例

对一个数组const num = [10,20,111,444,40,50];有3个需求

1. 需求：求出数组中小于100的值并返回
2. 需求：将所有小于100的值*2并返回
3. 需求：对需求2中的所有值相加并返回最终结果

//常规写法
//需求1
const num = [10,20,111,444,40,50];
let new1Num = [];
	for(let i of num){
		if(i < 100){
			new1Num.push(i);
		}
	}	
console.log(new1Num);
//需求2
let new2Num = [];
	for(let i of new1Num){
		new2Num.push(i * 2);
	}
console.log(new2Num);
//需求3
let total = 0;
	for(let i of new2Num){
		total +=i;
	}
console.log(total);

//高级写法
const num = [10,20,111,444,40,50];
//需求1
let new1Num = num.filter(function(n){
		return n < 100;
	})
console.log(new1Num);
//需求2
let new2Num = new1Num.map(function(n){
		return n * 2;
	})
console.log(new2Num);
//需求3
let total = new2Num.reduce(function(preValue, n){
		return preValue + n;
	},0)
console.log(total);

//更高级写法
let total1 = num.filter(function(n){
		return n < 100;
	}).map(function(n){
		return n * 2;
	}).reduce(function(preValue,n){
		return preValue + n;
	})
console.log(total1);

//装逼写法
let total2 = num.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n , 0);
console.log(total2);