JavaScript ES6 数组新方法学习随笔

r囧r小猫 2021-10-29 11:44 671阅读 0赞

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方法：

![复制代码][copycode.gif]

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 //获取指定人的email
    10 var liEmail=emails.filter(email=>/^li/.test(email))
    11 console.log(liEmail.join('')) //li@email.com

![复制代码][copycode.gif]

获取用户列表里的所有用户的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( )方法的讲解:

![复制代码][copycode.gif]

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)

![复制代码][copycode.gif]

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中是怎么实现的呢？

![复制代码][copycode.gif]

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，以数组形式返回,失败返回false
    108     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），失败返回NULL
    124     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通过value
    216     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<arr.length;j++){
    232                 if(arr[j] == this.elements[i].key){
    233                     flag = false;
    234                     break;
    235                 } 
    236             }
    237             if(flag){
    238                 arr.push(this.elements[i].key);
    239             }
    240         }
    241         return arr;
    242     };
    243 }

![复制代码][copycode.gif]

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

后续补充:

传统写法和ES6写法对比:

![复制代码][copycode.gif]

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进arr
    13     arr.push(users[i][_key]);
    14   }
    15   //返回arr
    16   return arr;
    17 }
    18 
    19 var arr=users.map((user)=>user.name);
    20 console.log(arr)//["张含韵", "江一燕", "李小璐"]
    21 console.log(valuesByKey('name')) //["张含韵", "江一燕", "李小璐"]

![复制代码][copycode.gif]

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

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

[copycode.gif]: /images/20211029/3259a83cd04f4ea9b71635570aba6213.png