浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结

 更新时间:2021年07月28日 11:08:56   投稿:mrr  
本文是小编给大家总结的关于javascript中的map, filter, some, every, forEach, for in, for of 用法,非常不错,具有参考借鉴价值,需要的朋友参考下吧

1.map

有返回值,返回一个新的数组,每个元素为调用func的结果。

let list = [1, 2, 3, 4, 5];
let other = list.map((d, i) => {
  return d * 2;
});
console.log(other);
// print: [2, 4, 6, 8, 10]

2.filter

有返回值,返回一个符合func条件的元素数组

let list = [1, 2, 3, 4, 5];
let other = list.filter((d, i) => {
  return d % 2;
});
console.log(other);
// print: [1, 3, 5]

3.some

对数组中的每一个元素进行遍历,遇到return true退出循环

var list=[1,2,3,4,5,6]

var sum = 0;

list.some(obj->{
  sum = sum + obj;
  
  if(obj === 5)
    return true
})

console.log(sum);

//sum == 10

返回一个boolean,判断是否有元素符合func条件,如果有一个元素符合func条件,则循环会终止。

let list = [1, 2, 3, 4, 5];
list.some((d, i) => {
  console.log(d, i);
  return d > 3;
});
// print: 1,0 2,1 3,2 4,3
// return false

4.every

对数组中的每一个元素进行遍历,遇到return false退出循环

var list=[1,2,3,4,5,6]
var sum = 0;
list.euery(obj->{
  sum = sum + obj;  
  if(obj === 5)
    return false
})
console.log(sum);
//sum == 10

返回一个boolean,判断每个元素是否符合func条件,有一个元素不满足func条件,则循环终止,返回false。

let list = [1, 2, 3, 4, 5];
list.every((d, i) => {
  console.log(d, i);
  return d < 3;
});
// print: 1,0 2,1 3,2
// return false

5.forEach

对数组中的每一个元素进行遍历,直到循环完成

var list=[1,2,3,4,5,6]
var sum = 0;
list.some(obj->{
  sum = sum + obj;
    if(obj === 3)
    return true
  if(obj === 4)
    return false
  if(obj === 5)
    return
})
console.log(sum);
//sum == 21

没有返回值,只针对每个元素调用func。

优点:代码简介。

缺点:无法使用break,return等终止循环。

let list = [1, 2, 3, 4, 5];
let other = [];
list.forEach((d, i) => {
  other.push(d * 2);
});
console.log(other);
// print: [2, 4, 6, 8, 10]

6.for in

for-in循环实际是为循环”enumerable“对象而设计的,for in也可以循环数组,但是不推荐这样使用,for–in是用来循环带有字符串key的对象的方法。

缺点:只能获得对象的键名,不能直接获取键值。

var obj = {a:1, b:2, c:3};
for (var prop in obj) {
 console.log("obj." + prop + " = " + obj[prop]);
}
// print: "obj.a = 1" "obj.b = 2" "obj.c = 3"

7.for of

for of为ES6提供,具有iterator接口,就可以用for of循环遍历它的成员。也就是说,for of循环内部调用的是数据结构的Symbol.iterator方法。

for of循环可以使用的范围包括数组、Set和Map结构、某些类似数组的对象(比如arguments对象、DOM NodeList对象)、后文的Generator对象,以及字符串。

有些数据结构是在现有数据结构的基础上,计算生成的。比如,ES6的数组、Set、Map都部署了以下三个方法,调用后都返回遍历器对象。

entries

entries() 返回一个遍历器对象,用来遍历[键名, 键值]组成的数组。对于数组,键名就是索引值;对于Set,键名与键值相同。Map结构的iterator接口,默认就是调用entries方法。

keys

keys() 返回一个遍历器对象,用来遍历所有的键名。

values

values() 返回一个遍历器对象,用来遍历所有的键值。

这三个方法调用后生成的遍历器对象,所遍历的都是计算生成的数据结构。

// 字符串
let str = "hello";
for (let s of str) {
 console.log(s); // h e l l o
}
// 遍历数组
let list = [1, 2, 3, 4, 5];
for (let e of list) {
  console.log(e);
}
// print: 1 2 3 4 5
// 遍历对象
obj = {a:1, b:2, c:3};
for (let key of Object.keys(obj)) {
 console.log(key, obj[key]);
}
// print: a 1 b 2 c 3

说明:对于普通的对象,for...in循环可以遍历键名,for...of循环会报错。

一种解决方法是,使用Object.keys方法将对象的键名生成一个数组,然后遍历这个数组。

// entries
let arr = ['a', 'b', 'c'];
for (let pair of arr.entries()) {
 console.log(pair);
}
// [0, 'a']
// [1, 'b']
// [2, 'c']

以上所述是小编给大家介绍的浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • uin-app+mockjs实现本地数据模拟

    uin-app+mockjs实现本地数据模拟

    这篇文章主要为大家详细介绍了uin-app+mockjs实现本地数据模拟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • Next.js中处理时区的常用方案推荐

    Next.js中处理时区的常用方案推荐

    这篇文章主要为大家详细介绍了Next.js中处理时区的几种常用方案推荐,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-01-01
  • JavaScript中将值转换为字符串的五种方法总结

    JavaScript中将值转换为字符串的五种方法总结

    这篇文章主要给大家总结介绍了关于JavaScript中将值转换为字符串的五种方法,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • js实现简单音乐播放器

    js实现简单音乐播放器

    这篇文章主要介绍了js实现简单音乐播放器,可拖动进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • javascript的键盘控制事件说明

    javascript的键盘控制事件说明

    获取键盘控制事件是实现交互性最有力的方法之一。
    2008-04-04
  • javascript实现带节日和农历的日历特效

    javascript实现带节日和农历的日历特效

    这篇文章主要介绍了javascript实现带节日和农历的日历特效,效果十分棒,需要的朋友可以参考下
    2015-02-02
  • javascript使用输出语句实现网页特效代码

    javascript使用输出语句实现网页特效代码

    这篇文章主要介绍javascript使用输出语句实现网页特效,有需要的朋友可以参考下
    2015-08-08
  • Bootstrap datepicker日期选择器插件使用详解

    Bootstrap datepicker日期选择器插件使用详解

    这篇文章主要为大家详细介绍了Bootstrap datepicker日期选择器插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 用AJAX返回HTML片段中的JavaScript脚本

    用AJAX返回HTML片段中的JavaScript脚本

    如果AJAX加载的数据是一个HTML片段,而且这个HTML片段还包含脚本<script>块,那么在你把这数据xmlHttp.responseText用innerHTML方法插入到当前文档一个元素中,你会发现AJAX加载回来的脚本根本没有执行。
    2010-01-01
  • JS控制层作圆周运动的方法

    JS控制层作圆周运动的方法

    这篇文章主要介绍了JS控制层作圆周运动的方法,涉及javascript动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2016-06-06

最新评论