zoukankan html css js c++ java

JavaScript ES6 数组新方法学习随笔

新建数组

   var arr = [1, 2, 2, 3, 4]

includes 方法

includes 查找数组有无该参数有返回true

    var includes = arr.includes(2)

map方法

map 遍历处理返回新数组原数组不会改变

    var map = arr.map(function (item) {
        return ++item
    })

reduce方法

reduce 遍历处理数组返回结果
prev与next中间的符号以及顺序控制处理方式

   var reduce = arr.reduce(function (prev, next) {
      return prev + next
    })

some方法

some 遍历如果成立就返回 includes相当于some的特殊情况

    var some = arr.some(function (item) {
      return item === 4
    })

find 方法

find 遍历数据找到并返回元素

    var find = arr.find(function (item) {
      return item === 4
    })

findIndex 方法

findIndex 遍历数组找到并返回元素序号

    var findIndex = arr.findIndex(function (item) {
      return item === 2
    })

以上方法输出结果

    console.log(include, map, reduce, some, find, findIndex)
    //true [ 2, 3, 3, 4, 5 ] 12 true 4 1

find()

该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为true时，返回该元素。如果没有符合条件的元素，返回值为undefined。

以下代码在myArr数组中查找元素值大于4的元素，找到后立即返回。返回的结果为查找到的元素：

const myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>4);
console.log(v);// 5

没有符合元素，返回undefined:

const myArr=[1,2,3,4,5,6];
var v=myArr.find(value=>value>40);
console.log(v);// undefined

回调函数有三个参数。value：当前的数组元素。index：当前索引值。arr：被查找的数组。

查找索引值为4的元素：

const myArr=[1,2,3,4,5,6];
var v=myArr.find((value,index,arr)=>{
    return index==4
});
console.log(v);// 5

findIndex()

findIndex()与find()的使用方法相同，只是当条件为true时findIndex()返回的是索引值，而find()返回的是元素。如果没有符合条件元素时findIndex()返回的是-1，而find()返回的是undefined。findIndex()当中的回调函数也是接收三个参数，与find()相同。

const bookArr=[
    {
        id:1,
        bookName:"三国演义"
    },
    {
        id:2,
        bookName:"水浒传"
    },
    {
        id:3,
        bookName:"红楼梦"
    },
    {
        id:4,
        bookName:"西游记"
    }
];
var i=bookArr.findIndex((value)=>value.id==4);
console.log(i);// 3
var i2=bookArr.findIndex((value)=>value.id==100);
console.log(i2);// -1

filter()

filter()与find()使用方法也相同。同样都接收三个参数。不同的地方在于返回值。filter()返回的是数组，数组内是所有满足条件的元素，而find()只返回第一个满足条件的元素。如果条件不满足，filter()返回的是一个空数组，而find()返回的是undefined

var userArr = [
    { id:1,userName:"laozhang"},
    { id:2,userName:"laowang" },
    { id:3,userName:"laoliu" },
]
console.log(userArr.filter(item=>item.id>1));
//[ { id: 2, userName: 'laowang' },{ id: 3, userName: 'laoliu' } ]

数组去重：

var myArr = [1,3,4,5,6,3,7,4];
console.log(myArr.filter((value,index,arr)=>arr.indexOf(value)===index));
//[ 1, 3, 4, 5, 6, 7 ]

ES6-map、filter、find、findIndex讲解

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 //获取指定人的email
10 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，以数组形式返回,失败返回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 }

如果你需要兼容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进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')) //["张含韵", "江一燕", "李小璐"]

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

查看全文

相关阅读:
第06组 Alpha冲刺（3/4）
第06组 Alpha冲刺（2/4）
第06组 Alpha冲刺（1/4）
第06组团队Git现场编程实战
 第二次结对编程作业
 2019 SDN大作业
 2019 SDN上机第7次作业
 第08组 Beta版本演示
 第08组 Beta冲刺（5/5）
第08组 Beta冲刺（4/5）

原文地址：https://www.cnblogs.com/zzsdream/p/11247217.html

JavaScript ES6 数组新方法 学习随笔