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 1find()
该方法主要应用于查找第一个符合条件的数组元素。它的参数是一个回调函数。在回调函数中可以写你要查找元素的条件，当条件成立为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 ]
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/
posted on 2019-07-25 21:46 zhangzongshan 阅读(411) 评论(0) 编辑 收藏 举报
