JavaScript array常用方法代码实例详解
1.map/reduce
map()
map()是array的一个方法
作用:对array中每一个元素调用自定义函数
'usestrict';
functionpow(x){
returnx*x;
}
vararr=[1,2,3,4,5]
varnewarray=arr.map(pow)
map的回调函数有三个参数:
callback(currentValue,index,array)通常只要第一个参数
PS:map()传入的参数是pow,即函数对象本身
通常map调用的自定义方法只包含一个参数
reduce()
reduce()也是array的一个方法
作用:从数组的前两个元素开始,作为函数参数,传入函数得到结果,
结果再和下一个数组元素再一次调用函数,直到数组尽头
[x1,x2,x3,x4].reduce(f)=f(f(f(x1,x2),x3),x4)
PS:通常reduce()调用的自定义方法只包含两个个参数
2.filter(筛选)
作用:把Array的某些元素过滤掉,然后返回剩下的元素.
和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
//去掉空字符串
vararr=['A','','B',null,undefined,'C',''];
varr=arr.filter(function(s){
returns&&s.trim();//注意：IE9以下的版本没有trim()方法
});
r;//['A','B','C']
回调函数
通常我们仅使用第一个参数，表示Array的某个元素。回调函数还可以接收另外两个参数，表示元素的位置和数组本身:
vararr=['A','B','C'];
varr=arr.filter(function(element,index,self){
console.log(element);//依次打印'A','B','C'
console.log(index);//依次打印0,1,2
console.log(self);//self就是变量arr
returntrue;
});
筛选素数:
functionget_primes(arr){
if(elem===1){
returnfalse;
}
for(vari=2;i<=elem/2;i++){
if(elem%i==0)
{
returnfalse;
}
}
returntrue;
});
returnx;
}
PS:关键在于正确实现一个“筛选”函数
3.sort(排序)
默认排序会把所有元素转成String在排序,根据一个元素的ASCII值进行排序(非递减)(TimSort算法)
两两比较,当回调函数返回值大于0时,交换元素值
自定义数字排序
'usestrict'
vararr=[10,20,1,2];
arr.sort(function(x,y){
if(xy){
return1;
}
return0;
});
console.log(arr);//[1,2,10,20]
数字倒序排列
vararr=[10,20,1,2];
arr.sort(function(x,y){
if(xy){
return-1;
}
return0;
});//[20,10,2,1]
4.其他的Array方法
every()和some()
作用:可以判断数组的所有元素是否满足测试条件(通过函数提供)
every()是全部满足的时候返回true,一个不满足返回false,并终止检测
some()是全部不满足的时候返回false,有一个满足就返回true
find()
作用:查找第一个符合条件的元素
查找符合条件的第一个元素,如果找到了就返回这个元素,否则,返回undefined
findindex()
作用:查找第一个符合条件的元素的索引
查找符合条件的第一个元素,找到这个元素就返回他的索引,如果没有找到就返回-1
forEach()
作用:常用于遍历数组
(和map类似)把数组每个元素依次传入函数,但不会返回新的数组.
函数作为返回值
函数里再定义一个函数,返回值为里面定义的函数
调用函数作为返回值的函数式,每次调用都会返回一个新的函数,即使传入相同参数
functionlazy_sum(arr){
varsum=function(){
returnarr.reduce(function(x,y){
returnx+y;
});
}
returnsum;
}
//此时返回的是求和函数
varf=lazy_sum([1,2,3,4,5]);//functionsum()
f();//15此时调用,才进行计算
在函数lazy_sum中又定义了函数sum，并且，内部函数sum可以引用外部函数lazy_sum的参数和局部变量，当lazy_sum返回函数sum时，相关参数和变量都保存在返回的函数中，这种称为“闭包（Closure）”的程序结构拥有极大的威力.
闭包(懵逼了)(吐彩虹)
有权访问另一个函数作用域内变量的函数都是闭包。
函数里面的函数会随着外部定义函数而改变
PS:因为返回值就是一个函数,调用的时候要加小括号
返回闭包时牢记的一点就是：返回函数不要引用任何循环变量，或者后续会发生变化的变量。
如果一定要引用循环变量怎么办？方法是再创建一个函数，用该函数的参数绑定循环变量当前的值，无论该循环变量后续如何更改，已绑定到函数参数的值不变：
箭头函数(=>)(强哒)
(参数...)=>{函数体}等价于function(参数...){函数体}
当返回的是一个对象时函数体大括号外边加小括号
x=>({foo:x})
this
箭头函数内部的this是词法作用域,由上下文确定
varobj={
birth:1990,
getAge:function(){
varb=this.birth;//1990
varfn=()=>newDate().getFullYear()-this.birth;//this指向obj对象
returnfn();
}
};
obj.getAge();//25
箭头函数完全修复了this指向,this总是指向词法作用域,也就是外层调用obj
generator(生成器)
ES6引入借鉴Python同名函数
写法和函数类似,只是在function后加*,通过yield多次返回值,也可通过return返回值
函数在执行过程中，如果没有遇到return语句（函数末尾如果没有return，就是隐含的returnundefined;），控制权无法交回被调用的代码。
function*(x){
yieldx
}
function*fib(max){
var
t,
a=0,
b=1,
n=0;
while(n
直接调用一个generator和调用函数不一样，fib(5)仅仅是创建了一个generator对象，还没有去执行它。
调用generator对象有两个方法，
一是不断地调用generator对象的next()方法：next()方法会执行generator的代码，然后，每次遇到yieldx;就返回一个对象{value:x,done:true/false}，然后“暂停”。返回的value就是yield的返回值，done表示这个generator是否已经执行结束了。如果done为true，则value就是return的返回值。当执行到done为true时，这个generator对象就已经全部执行完毕，不要再继续调用next()`了。
varf=fib(5);
f.next();//{value:0,done:false}
f.next();//{value:1,done:false}
f.next();//{value:1,done:false}
f.next();//{value:2,done:false}
f.next();//{value:3,done:false}
f.next();//{value:undefined,done:true}
第二个方法是直接用for...of循环迭代generator对象，这种方式不需要我们自己判断done：
for(varxoffib(10)){
console.log(x);//依次输出0,1,1,2,3,...
}
generator还有另一个巨大的好处，就是把异步回调代码变成“同步”代码。这个好处要等到后面学了AJAX以后才能体会到。
try{
r1=yieldajax('http://url-1',data1);
r2=yieldajax('http://url-2',data2);
r3=yieldajax('http://url-3',data3);
success(r3);
}
catch(err){
handle(err);
}
看上去是同步的代码，实际执行是异步的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。