文章详情
JS ES6 map()遍历、filter()筛选
发布时间:2021-10-21
沉默小管-技术博客
JS ES6 map()遍历、filter()筛选
663
1
原文地址:
https://www.php-china.com//detail/49
H1
H2
H3
H4
H5
H6
<p> <span style="line-height:1;">1.</span><span style="line-height:1;">map</span> </p> <p> <span style="line-height:1;">let arr1 = [1,2,3];</span> </p> <p> <span style="line-height:1;">let arr2 = arr1.map((value,key,arr) => {</span><br /> <span style="line-height:1;"> console.log(value) // 1,2,3</span><br /> <span style="line-height:1;"> console.log(key) // 0,1,2</span><br /> <span style="line-height:1;"> console.log(arr) //[1,2,3] [1,2,3] [1,2,3]</span><br /> <span style="line-height:1;"> return value * value;</span><br /> <span style="line-height:1;"> })</span><br /> <span style="line-height:1;"> console.log(arr1); // [ 1, 2, 3 ]</span> </p> <p> <span style="line-height:1;">console.log(arr2); // [ 1, 4, 9 ]</span> </p> <p> <br /> </p> <p> <span style="line-height:1;">2.filter</span> </p> <p> <span style="color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">filter函数可以看成是一个过滤函数,</span><span style="font-weight: 700; color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">返回符合条件的元素的数组</span> </p> <p> <span style="color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">filter需要在循环的时候判断一下是true还是false,是true才会返回这个元素;</span> </p> <p> <span style="line-height:1;">let arr1 = [1,2,3];</span><br /> <span style="line-height:1;"> let arr2 = arr1.filter((value,key,arr) => {</span><br /> <span style="line-height:1;"> console.log(value) // 1,2,3</span><br /> <span style="line-height:1;"> console.log(key) // 0,1,2</span><br /> <span style="line-height:1;"> console.log(arr) // [1,2,3]</span><br /> <span style="line-height:1;"> return value >= 3 ? false : true; </span><br /> <span style="line-height:1;"> })</span><br /> <span style="line-height:1;"> console.log(arr1); // [ 1, 2, 3 ]</span><br /> <span style="line-height:1;"> console.log(arr2); // [ 1, 2 ]</span> </p> <p> <br /> </p> <p> <span style="color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">1.filter() 过滤不符合项</span><br /> <span style="line-height:1;"> let arr = [1,2,3]</span><br /> <span style="line-height:1;"> let newArr = arr.filter(item => item>=3) </span><br /> <span style="line-height:1;"> console.log(newArr)</span> </p> <p> <span style="line-height:1;">2.</span><span style="color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">filter() 去掉空字符串、undefined、null</span> </p> <p> <span style="line-height:1;">let arr = ['','1','2',undefined,'3.jpg',undefined]</span><br /> <span style="line-height:1;"> let newArr = arr.filter(item => item)</span><br /> <span style="line-height:1;"> console.log(newArr)</span><br /> <span style="line-height:1;"> 3.</span><span style="color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">filter() 数组去重</span> </p> <p> <span style="line-height:1;">let arr = [1, 2, 2, 3, 4, 5, 5, 6];</span><br /> <span style="line-height:1;"> let newArr = arr.filter((x, index,self)=>self.indexOf(x)===index) </span><br /> <span style="line-height:1;"> console.log(newArr)</span><br /> <span style="line-height:1;"> 4.</span><span style="color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">去重推荐使用 set()方法</span> </p> <p> <span class="hljs-keyword" style="line-height: 1;" font-size:14px;color:#000000;"="">let</span><span style="line-height: 1;" font-size:14px;color:#000000;"=""> arr = [</span><span class="hljs-number" style="line-height: 1;" font-size:14px;color:#000000;"="">1</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">, </span><span class="hljs-number" style="line-height: 1;" font-size:14px;color:#000000;"="">2</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">, </span><span class="hljs-number" style="line-height: 1;" font-size:14px;color:#000000;"="">2</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">, </span><span class="hljs-number" style="line-height: 1;" font-size:14px;color:#000000;"="">3</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">, </span><span class="hljs-number" style="line-height: 1;" font-size:14px;color:#000000;"="">4</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">, </span><span class="hljs-number" style="line-height: 1;" font-size:14px;color:#000000;"="">5</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">, </span><span class="hljs-number" style="line-height: 1;" font-size:14px;color:#000000;"="">5</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">, </span><span class="hljs-number" style="line-height: 1;" font-size:14px;color:#000000;"="">6</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">];</span> </p> <p> <span class="hljs-keyword" style="line-height: 1;" font-size:14px;color:#000000;"="">let</span><span style="line-height: 1;" font-size:14px;color:#000000;"=""> newArr =</span><span class="hljs-built_in" style="line-height: 1;" font-size:14px;color:#000000;"="">Array</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">.from(</span><span class="hljs-keyword" style="line-height: 1;" font-size:14px;color:#000000;"="">new</span><span style="font-family:" font-size:14px;"=""> </span><span class="hljs-built_in" style="line-height: 1;" font-size:14px;color:#000000;"="">Set</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">(arr));</span> </p> <p> <span class="hljs-built_in" style="line-height: 1;" font-size:14px;color:#000000;"="">console</span><span style="line-height: 1;" font-size:14px;color:#000000;"="">.log(newArr)</span> </p> <p> <span style="font-family:" font-size:14px;color:#000000;"=""><span style="line-height:1;">5.</span><span style="color: rgb(77, 77, 77); line-height: 1;" font-size:16px;background-color:#ffffff;"="">filter() 筛选数组对象</span></span> </p> <p> <span style="font-family:" font-size:14px;color:#000000;"=""><span style="line-height:1;">let arr = [</span><br /> <span> </span><span style="line-height:1;"> {a:'苹果',b:'面包',c:'吃'},</span><br /> <span> </span><span style="line-height:1;"> {a:'香蕉',b:'面包',c:'不吃'},</span><br /> <span> </span><span style="line-height:1;"> {a:'香蕉',b:'苹果',c:'吃'},</span><br /> <span> </span><span style="line-height:1;"> {a:'苹果',b:'香蕉',c:'不吃'},</span><br /> <span> </span><span style="line-height:1;"> ]</span><br /> <span style="line-height:1;"> console.log(arr.filter(item => item.a=== '苹果' ))//[{a:'苹果',b:'面包',c:'吃'},{a:'苹果',b:'香蕉',c:'不吃'}]</span></span> </p>
上一篇
下一篇
收藏
支持
标签:
特别推荐
作者推荐
热门推荐
最新文章
统计信息
联系站长
加入技术群
日志总数:92篇
网站运行:1599天
累计访客:15873
热门文章
1. PHP基础概念
2. redis:ERR AUTH <password> called without any password configured for the default user解决办法
3. PHP的语言结构之包含文件
4. PHP中public,private,protected的区别
5. PHP魔术方法总结
6. php如何转换json格式中的中文
7. PHP7新特性(常用)
8. PHP7上项目报错A non-numeric value encountered解决办法
9. 运行golang出现invalid memory address or nil pointer dereference错误
10. git常用命令集合