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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值