ES6-map、filter、find、findIndex讲解

时间:2023-03-09 18:32:14
ES6-map、filter、find、findIndex讲解

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

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

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

filter方法:

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

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

find方法:

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

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

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

 [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( )方法的讲解:

     //every()
let numbers = [2, 4, 10, 4, 8];
let a = numbers.every((item,index)=>{
if(item%2===0){
return true;
}else{
return false;
}
});
console.log(a) //some()
let b=numbers.some((item,index)=>{
if(item%3===0){
return true;
}else{
return false;
}
})
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中是怎么实现的呢?

 /*
* MAP对象,实现MAP功能
*
* 接口:
* size() 获取MAP元素个数
* isEmpty() 判断MAP是否为空
* clear() 删除MAP所有元素
* put(key, value) 向MAP中增加元素(key, value)
* remove(key) 删除指定KEY的元素,成功返回True,失败返回False
* get(key) 获取指定KEY的元素值VALUE,失败返回NULL
* element(index) 获取指定索引的元素(使用element.key,element.value获取KEY和VALUE),失败返回NULL
* containsKey(key) 判断MAP中是否含有指定KEY的元素
* containsValue(value) 判断MAP中是否含有指定VALUE的元素
* values() 获取MAP中所有VALUE的数组(ARRAY)
* keys() 获取MAP中所有KEY的数组(ARRAY)
*
* 例子:
* var map = new Map();
*
* map.put("key", "value");
* var val = map.get("key")
* ……
*
*/
function Map() {
this.elements = new Array(); //获取MAP元素个数
this.size = function() {
return this.elements.length;
}; //判断MAP是否为空
this.isEmpty = function() {
return (this.elements.length < 1);
}; //删除MAP所有元素
this.clear = function() {
this.elements = new Array();
}; //向MAP中增加元素(key, value)
this.put = function(_key, _value) {
this.elements.push( {
key : _key,
value : _value
});
}; //删除指定KEY的元素,成功返回True,失败返回False
this.removeByKey = function(_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
this.elements.splice(i, 1);
return true;
}
}
} catch (e) {
bln = false;
}
return bln;
};
//删除指定KEY的所有元素
this.removeAllByKey=function(_key){
for (var i = this.elements.length - 1; i >= 0; i--) {
if (this.elements[i].key == _key) {
this.elements.splice(i, 1);
}
}
} //删除指定VALUE的元素,成功返回True,失败返回False
this.removeByValue = function(_value) {//removeByValueAndKey
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].value == _value) {
this.elements.splice(i, 1);
return true;
}
}
} catch (e) {
bln = false;
}
return bln;
}; //删除指定VALUE的元素,成功返回True,失败返回False
this.removeByValueAndKey = function(_key,_value) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].value == _value && this.elements[i].key == _key) {
this.elements.splice(i, 1);
return true;
}
}
} catch (e) {
bln = false;
}
return bln;
}; //获取指定KEY的所有元素值VALUE,以数组形式返回,失败返回false
this.get = function(_key) {
var arr=[];
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
arr.push(this.elements[i].value)
}
}
return arr;
} catch (e) {
return false;
}
return false;
}; //获取指定索引的元素(使用element.key,element.value获取KEY和VALUE),失败返回NULL
this.element = function(_index) {
if (_index < 0 || _index >= this.elements.length) {
return null;
}
return this.elements[_index];
}; //判断MAP中是否含有指定KEY的元素
this.containsKey = function(_key) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
}; //判断MAP中是否含有指定VALUE的元素
this.containsValue = function(_value) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].value == _value) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
}; //判断MAP中是否含有指定key,VALUE的元素
this.containsObj = function(_key,_value) {
var bln = false;
try {
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].value == _value && this.elements[i].key == _key) {
bln = true;
}
}
} catch (e) {
bln = false;
}
return bln;
}; //获取MAP中所有VALUE的数组(ARRAY)
this.values = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].value);
}
return arr;
};
//获取MAP中所有指定VALUE的元素数组(ARRAY)
this.getAllByValue=function(_value){
var arr=[];
for (var i = this.elements.length - 1; i >= 0; i--) {
if (this.elements[i].value == _value) {
arr.push(this.elements[i]);
}
}
return arr;
} //获取MAP中指定key的所有VALUE的数组(ARRAY)
this.valuesByKey = function(_key) {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
if (this.elements[i].key == _key) {
arr.push(this.elements[i].value);
}
}
return arr;
}; //获取MAP中所有KEY的数组(ARRAY)
this.keys = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
arr.push(this.elements[i].key);
}
return arr;
}; //获取key通过value
this.keysByValue = function(_value) {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
if(_value == this.elements[i].value){
arr.push(this.elements[i].key);
}
}
return arr;
}; //获取MAP中所有KEY的数组(ARRAY)key有相同的 取出的key为去重后的 数组里去重后的key的数组
this.keysRemoveDuplicate = function() {
var arr = new Array();
for (i = 0; i < this.elements.length; i++) {
var flag = true;
for(var j=0;j<arr.length;j++){
if(arr[j] == this.elements[i].key){
flag = false;
break;
}
}
if(flag){
arr.push(this.elements[i].key);
}
}
return arr;
};
}

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

后续补充:

传统写法和ES6写法对比:

 var users = [
{name: "张含韵", "email": "zhang@email.com"},
{name: "江一燕", "email": "jiang@email.com"},
{name: "李小璐", "email": "li@email.com"}
]; function valuesByKey(_key) {
//定义个空数组
var arr = [];
//循环遍历users数组
for (i = 0; i < users.length; i++) {
//只要是key值等于_key的,对应的值都push进arr
arr.push(users[i][_key]);
}
//返回arr
return arr;
} var arr=users.map((user)=>user.name);
console.log(arr)//["张含韵", "江一燕", "李小璐"]
console.log(valuesByKey('name')) //["张含韵", "江一燕", "李小璐"]

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