JavaScript ES6 数组新方法学习随笔-白红宇

JavaScript ES6 数组新方法学习随笔

阅读量：5149 次

发布时间：2019-06-13

本文共 9709 字，大约阅读时间需要 32 分钟。

map方法：可以简单的理解为映射

1 var arr=[1,2,3,4];2 console.log( arr.map((n)=>n*n) );//[1, 4, 9, 16]3 console.log( arr.map((n)=>n-1) );//[0, 1, 2, 3]

从数组[1，4，-5，10]当中给我找出小于0的数字。在你看到这里的时候相信你也是对箭头函数了解，(n)=>n*n 就不用赘述了。

filter方法：

1 var users = [ 2   {name: "张含韵", "email": "zhang@email.com"}, 3   {name: "江一燕",   "email": "jiang@email.com"}, 4   {name: "李小璐",  "email": "li@email.com"} 5 ]; 6 //获取所有人的email 7 var emails=users.map(user=>user.email)  8 console.log(emails.join(',')) //"zhang@email.com", "jiang@email.com", "li@email.com" 9 //获取指定人的email10 var liEmail=emails.filter(email=>/^li/.test(email))11 console.log(liEmail.join('')) //li@email.com

获取用户列表里的所有用户的email，map帮我们做到了，map方法通过传一个形参，这个形参就代表users里的每一项，map内部通过遍历所有的用户项，获取到每个用户项的email，再push到一个数组，再作为值给我们返回。第二步，我们需要获取指定人的email，filter方法登场了，通过过滤筛选email是数组，给我们返回结果，筛选方法得我们定，这里筛选方法是以正则匹配到li开头的那一个email，然后返回。

find方法：

1 [1, 4, -5, 10].find((n) => n < 0)    // -5

find方法比较好理解，这里的参数n代表数组里的每一项，然后find方法内部通过遍历数组里的每一项，找到＜0的这一项( - 5 )。

findIndex方法：find方法的回调函数可以接受三个参数，依次为当前的值、当前的位置和原数组。看一个例子：

1 [1, 4, -5, 10].findIndex((value,index,arr) => value < 0)  // 2

在这个例子当中，value代表这个数组的每一项，1，4，-5，10。index代表每一项的索引值，arr代表这个数组[1, 4, -5, 10]，然后我们需要返回的是＜0的这一项的索引值，即是2了。

这4个方法内部机制都有一个遍历过程，比起forEach确实简洁多了。

接着补充ES6-some( ) 和 every( )方法的讲解:

1     //every() 2     let numbers = [2, 4, 10, 4, 8]; 3     let a = numbers.every((item,index)=>{ 4         if(item%2===0){ 5             return true; 6         }else{ 7             return false; 8         } 9     });10     console.log(a)11 12     //some()13     let b=numbers.some((item,index)=>{14          if(item%3===0){15             return true;16         }else{17             return false;18         }19     })20     console.log(b)

some 英语翻译为一些,every翻译为所有,每个，所以some方法只要其中一个为true 就会返回true的，相反，every（）方法必须所有都返回true才会返回true，哪怕有一个false，就会返回false；every（）和 some（）目的：确定数组的所有成员是否满足指定的测试。具体请参考MDNhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some

总结一下：

后续补充：最近看很多小伙伴都在学习ES6，比如ES6中的map，在ES5中是怎么实现的呢？

1 /*  2  * MAP对象，实现MAP功能  3  *  4  * 接口：  5  * size()                     获取MAP元素个数  6  * isEmpty()                  判断MAP是否为空  7  * clear()                    删除MAP所有元素  8  * put(key, value)            向MAP中增加元素（key, value)   9  * remove(key)                删除指定KEY的元素，成功返回True，失败返回False 10  * get(key)                   获取指定KEY的元素值VALUE，失败返回NULL 11  * element(index)             获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL 12  * containsKey(key)           判断MAP中是否含有指定KEY的元素 13  * containsValue(value)       判断MAP中是否含有指定VALUE的元素 14  * values()                   获取MAP中所有VALUE的数组（ARRAY） 15  * keys()                     获取MAP中所有KEY的数组（ARRAY） 16  * 17  * 例子： 18  * var map = new Map(); 19  * 20  * map.put("key", "value"); 21  * var val = map.get("key") 22  * …… 23  * 24  */ 25 function Map() { 26     this.elements = new Array(); 27  28     //获取MAP元素个数 29     this.size = function() { 30         return this.elements.length; 31     }; 32  33     //判断MAP是否为空 34     this.isEmpty = function() { 35         return (this.elements.length < 1); 36     }; 37  38     //删除MAP所有元素 39     this.clear = function() { 40         this.elements = new Array(); 41     }; 42  43     //向MAP中增加元素（key, value)  44     this.put = function(_key, _value) { 45         this.elements.push( { 46             key : _key, 47             value : _value 48         }); 49     }; 50  51     //删除指定KEY的元素，成功返回True，失败返回False 52     this.removeByKey = function(_key) { 53         var bln = false; 54         try { 55             for (i = 0; i < this.elements.length; i++) { 56                 if (this.elements[i].key == _key) { 57                     this.elements.splice(i, 1); 58                     return true; 59                 } 60             } 61         } catch (e) { 62             bln = false; 63         } 64         return bln; 65     }; 66     //删除指定KEY的所有元素 67     this.removeAllByKey=function(_key){ 68         for (var i = this.elements.length - 1; i >= 0; i--) { 69             if (this.elements[i].key == _key) { 70                 this.elements.splice(i, 1); 71             } 72         } 73     } 74      75     //删除指定VALUE的元素，成功返回True，失败返回False 76     this.removeByValue = function(_value) {//removeByValueAndKey 77         var bln = false; 78         try { 79             for (i = 0; i < this.elements.length; i++) { 80                 if (this.elements[i].value == _value) { 81                     this.elements.splice(i, 1); 82                     return true; 83                 } 84             } 85         } catch (e) { 86             bln = false; 87         } 88         return bln; 89     }; 90      91     //删除指定VALUE的元素，成功返回True，失败返回False 92     this.removeByValueAndKey = function(_key,_value) { 93         var bln = false; 94         try { 95             for (i = 0; i < this.elements.length; i++) { 96                 if (this.elements[i].value == _value && this.elements[i].key == _key) { 97                     this.elements.splice(i, 1); 98                     return true; 99                 }100             }101         } catch (e) {102             bln = false;103         }104         return bln;105     };106 107     //获取指定KEY的所有元素值VALUE，以数组形式返回,失败返回false108     this.get = function(_key) {109         var arr=[];110         try {111             for (i = 0; i < this.elements.length; i++) {112                 if (this.elements[i].key == _key) {113                     arr.push(this.elements[i].value)114                 }115             }116             return arr;117         } catch (e) {118             return false;119         }120         return false;121     };122 123     //获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL124     this.element = function(_index) {125         if (_index < 0 || _index >= this.elements.length) {126             return null;127         }128         return this.elements[_index];129     };130 131     //判断MAP中是否含有指定KEY的元素132     this.containsKey = function(_key) {133         var bln = false;134         try {135             for (i = 0; i < this.elements.length; i++) {136                 if (this.elements[i].key == _key) {137                     bln = true;138                 }139             }140         } catch (e) {141             bln = false;142         }143         return bln;144     };145 146     //判断MAP中是否含有指定VALUE的元素147     this.containsValue = function(_value) {148         var bln = false;149         try {150             for (i = 0; i < this.elements.length; i++) {151                 if (this.elements[i].value == _value) {152                     bln = true;153                 }154             }155         } catch (e) {156             bln = false;157         }158         return bln;159     };160     161     //判断MAP中是否含有指定key,VALUE的元素162     this.containsObj = function(_key,_value) {163         var bln = false;164         try {165             for (i = 0; i < this.elements.length; i++) {166                 if (this.elements[i].value == _value && this.elements[i].key == _key) {167                     bln = true;168                 }169             }170         } catch (e) {171             bln = false;172         }173         return bln;174     };175 176     //获取MAP中所有VALUE的数组（ARRAY）177     this.values = function() {178         var arr = new Array();179         for (i = 0; i < this.elements.length; i++) {180             arr.push(this.elements[i].value);181         }182         return arr;183     };184     //获取MAP中所有指定VALUE的元素数组（ARRAY）185     this.getAllByValue=function(_value){186         var arr=[];187         for (var i = this.elements.length - 1; i >= 0; i--) {188             if (this.elements[i].value == _value) {189                 arr.push(this.elements[i]);190             }191         }192         return arr;   193     }194     195     //获取MAP中指定key的所有VALUE的数组（ARRAY）196     this.valuesByKey = function(_key) {197         var arr = new Array();198         for (i = 0; i < this.elements.length; i++) {199             if (this.elements[i].key == _key) {200                 arr.push(this.elements[i].value);201             }202         }203         return arr;204     };205 206     //获取MAP中所有KEY的数组（ARRAY）207     this.keys = function() {208         var arr = new Array();209         for (i = 0; i < this.elements.length; i++) {210             arr.push(this.elements[i].key);211         }212         return arr;213     };214     215     //获取key通过value216     this.keysByValue = function(_value) {217         var arr = new Array();218         for (i = 0; i < this.elements.length; i++) {219             if(_value == this.elements[i].value){220                 arr.push(this.elements[i].key);221             }222         }223         return arr;224     };225     226     //获取MAP中所有KEY的数组（ARRAY）key有相同的 取出的key为去重后的 数组里去重后的key的数组227     this.keysRemoveDuplicate = function() {228         var arr = new Array();229         for (i = 0; i < this.elements.length; i++) {230             var flag = true;231             for(var j=0;j

如果你需要兼容IE，用这个ES5写的map应该没有问题，明白了ES5怎么实现ES6中的map，自然也就懂了，后续货继续更新ES6其他知识点，虽然我也很菜，如发现有BUG的小伙伴，一定记得给我留言，万分感激。

后续补充:

传统写法和ES6写法对比:

1 var users = [ 2   {name: "张含韵", "email": "zhang@email.com"}, 3   {name: "江一燕",   "email": "jiang@email.com"}, 4   {name: "李小璐",  "email": "li@email.com"} 5 ]; 6  7 function valuesByKey(_key) { 8   //定义个空数组 9   var arr = [];10   //循环遍历users数组11   for (i = 0; i < users.length; i++) {12     //只要是key值等于_key的,对应的值都push进arr13     arr.push(users[i][_key]);14   }15   //返回arr16   return arr;17 }18 19 var arr=users.map((user)=>user.name);20 console.log(arr)//["张含韵", "江一燕", "李小璐"]21 console.log(valuesByKey('name')) //["张含韵", "江一燕", "李小璐"]

js数组方法可以看我博客整理的数组相关:http://moxiaofei.com/2018/07/02/js-array/

转载于:https://www.cnblogs.com/zzsdream/p/11247217.html

你可能感兴趣的文章