JavaScript(es6)数组常用的方法

喜欢而已 提交于 2021-01-19 05:52:30

<h2>常用方法</h2> <p>1.forEach()</p> <div class="cnblogs_code"> <pre>var data = [1,2,3,4,5]; var sum = 0;<br />//求和 data.forEach((item)=&gt;{sum+=item}) //给原数组的每个值加1 data.forEach((value,index,data)=&gt;{data[index] = value + 1}) </pre> </div> <p>2.concat()&nbsp; //合并多个数组,返回合并后的新数组,原数组没有变化。</p> <div class="cnblogs_code"> <pre>const array = [1,2].concat(['a', 'b'], ['name']); // [1, 2, "a", "b", "name"]</pre> </div> <p>3.filter()&nbsp; //<strong>返回一个新数组,包含通过callback函数测试的所有元素。</strong></p> <div class="cnblogs_code"> <pre>var fil = [5,4,3,2,1]; smallvalues = fil.filter((x)=&gt;{return x &lt; 3}); console.log(smallvalues)//小于3 oddNumber = fil.filter((x,i) =&gt; x % 2 === 0);//偶数</pre> </div> <p>4.map()&nbsp; //返回新数组</p> <div class="cnblogs_code"> <pre>var a = [1,2,3], b; b = a.map((x)=&gt;{return x*3}); console.log(a,b)</pre> </div> <p>5.every()和some()&nbsp; //every()和some()方法是数组的逻辑判定</p> <div class="cnblogs_code"> <pre>var ever = [1,2,3,4,5]; var xiaoyushi = ever.every((x)=&gt;{return x &lt; 10})//返回true,所有的值都小于10 var evenNumber = ever.every((x)=&gt; x % 2 === 0)//返回false,不是所有的值都是偶数 var shifouyousi = ever.some((x)=&gt; x==4)//数组里面有一个值等于4则返回true</pre> </div> <p>6.reduce()和reduceRight</p> <div class="cnblogs_code"> <pre>//reduce为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(或者上一次回调函数的返回值) var arr = [1,2,3,4]; var qiuhe = arr.reduce((prev, cur, index, arr)=&gt;{ //prev:上一次调用回调返回的值,或者是提供的初始值(initialValue); cur:数组中当前被处理的元素 console.log(prev, cur, index); return prev + cur; }) //实例解析initialValue参数 var arr1 = [1,2,3,4]; var qiuhe2 = arr1.reduce((prev,cur,index,arr)=&gt;{ console.log(prev,cur,index); return prev + cur; },0)//这里设置了初始值 console.log(arr1, qiuhe2); //结论: 如果没有initialValue,reduce会从索引1的地方开始执行callback方法,跳过第一个索引。如果提供initialValue,从索引0开始。

/var arr2 = []; var qiuhe3 = arr2.reduce((prev, cur, index, arr)=>{//报错,不能处理空数组 console.log(prev, cur, index); return prev + cur; })/

var arr3 = []; var qiuhe4 = arr3.reduce((prev, cur, index, arr)=>{//不会报错,因为设置了初始值 console.log(prev, cur, index); return prev + cur; },0) console.log(arr3,qiuhe4)

//reduce的简单用法(求和,求乘积) var arr4 = [1,2,3,4,5,6,7,8,9,10]; var qiuhe5 = arr4.reduce((x,y)=>{return x + y}) var mul = arr4.reduce((x,y)=>{return x * y}) var max = arr4.reduce((x,y)=>{return (x>y)?x:y})//求最大值

//reduce的高级用法 //1.计算数组中每个元素出现的次数 let names = ['alice','bob','tiff','bruce','alice']; let nameNum = names.reduce((pre, cur)=>{ if(cur in pre){ pre[cur]++ }else{ pre[cur] = 1 } return pre },{}) console.log(nameNum)

//2.数组去重 let arr5 = [1,2,3,4,4,3,5]; let newArr = arr5.reduce((pre, cur)=>{ if(!pre.includes(cur)){ return pre.concat(cur) }else{ return pre } },[]) console.log(newArr)

//3.将二维数组转化为一维数组 let arr6 = [[0,1],[2,3],[4,5]]; let newArr2 = arr6.reduce((pre,cur)=>{ return pre.concat(cur) },[]) console.log(newArr2);

//4.将多维数组转化为一维数组 let arr7 = [[0,1],[2,3],[4,[5,6,7]]] const newArr3 = function(arr){ return arr.reduce((pre,cur)=>{ return pre.concat(Array.isArray(cur)? newArr3(cur): cur) },[]) } console.log(newArr3(arr7));

//5.对象里的属性求和 var result = [ { subject: 'math', score: 10 }, { subject: 'chinese', score: 20 }, { subject: 'english', score: 30 } ];

var qiuhe6 = result.reduce((prev,cur)=>{ return cur.score + prev },0) console.log(qiuhe6) </pre>

</div>

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!