javascript-数组的常用方法

Posted 2020-09-01 张啊咩

不知大家是否有过跟我类似的经历，就是切图仔刚开始做切图页面的时候，经常调用一些别人写的jquery插件，例如音乐播放器这种需要切换多首音乐的插件。调用的时候就必须有一个音乐队列，而这个队列就是一个数组，而需求方希望能在页面的html通过date属性获取到javascript就可以自动生成歌曲列表。当时的我并没有系统地看过一些javascript的基础知识，自己丈二的和尚，摸不着头脑，就不知道怎么办。

后来查了一下ECMAScript给数组这个对象已经原生地封装了许多很有用的方法，所以接下来我想在这里总结一下一些常用的数组内置方法：

1、join

var colors = ["red","blue","green"];

colors.join("$$");   

colors.toString();  //"red$$blue$$green"

join()用于改变数组的分割。

 

2、修改数组内部数据的方法

//*
//*插入方法
//*

//push方法
var colors = ["red"]；
colors.push("blue","green"); //3
colors.toString();  //"red,blue,green"

//unshift方法
var colors = ["red"];
colors.unshift("blue","green");  //3
colors.toString();  //"blue,green,red"

//*
//*删除(退出)数组项方法
//*

 //pop方法
var colors = ["red","blue","green"];
colors.pop();  //"green"

//shift方法
var colors = ["red","blue","green"];
colors.shift();  //"red"

//*
//*功能最强的方法——splice(索引位置,要删除的个数,要插入的若干项数据)
//*

//作为删除用途
var colors = ["red","blue","green"];
colors.splice(1,1);  //["blue"]
colors.toString()  //"red,green"

//作为替换用途
var colors = ["red","blue","green"];
colors.splice(1,2,"white","black");  //["blue", "green"]
colors.toString();  //"red,white,black"

//作为插入用途
var colors = ["red","blue","green"];
colors.splice(1,0,"white","black");   //[]
colors.toString();  //"red,white,black,blue,green"

 

push()方法是从数组最后插入数组项，而unshift()则是从数组的最前插入数组项，注意插入的数组项在该数组的顺序保持与参数时候一致。

pop()方法是从数组最后“弹出”数组项，而unshift()则是从数组的最前“弹出”数组项。

而splice方法可以实现插入、删除、替换这3种功能：splice(索引位置,要删除的个数,要插入的若干项数据)

 

3、迭代方法

 

var numbers = [1,2,3,4,5,4,3,2,1];

//*
//*判断数组每一项
//*

//every只有每一项都返回true,整个才会返回true
numbers.every(function(item,index,array){return item>2})  //false

//some只要有一项返回true,整个就会返回true
numbers.some(function(item,index,array){return item>2})  //true

//*
//*filter过滤器，返回一个由符合的项组成的数组
//*
numbers.filter(function(item,index,array){return item>2})   //[3, 4, 5, 4, 3]

//*
//*逐项执行的迭代
//*

//map有返回结果
numbers.map(function(item,index,array){return item*2})   //[2, 4, 6, 8, 10, 8, 6, 4, 2]

//forEach没有返回结果
numbers.forEach(function(item,index,array){array[index] = item*2}) ;
alert(numbers);  //[2, 4, 6, 8, 10, 8, 6, 4, 2]

大家可以根据不同的需求来调用js提供的原生的迭代方法！！

4、归并方法

最后是归并方法reduce()和reduceRight(),两者都会迭代数组所有项,其中reduce()从第一项开始，而reduceRight()从数组最后一项开始，出此之外两个函数完全相同

//reduce()中pre第一次为数组第一项，第二次开始为第一次函数返回值为pre
var values = [1,2,3,4,5];
var sum=values.reduce(function(pre,cur,index,array){return pre + cur});
alert(sum); //15

//reduceRight()中pre第一次为数组最后一项，第二次开始为第一次函数返回值为pre
var values = [1,2,3,4,5];
var sum=values.reduceRight(function(pre,cur,index,array){return pre + cur});
alert(sum); //15

其实forEach()也完全可以实现，并且比以上两个归并方法更好理解，怎样实现这功能也看个人习惯。