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/