当前位置:主页 > javascript教程 > 浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结

JS中的 map, filter, some, every, forEach, for in, for of 用法

发布:2020-03-09 12:26:02 166


本站精选了一篇javascript相关的编程文章,网友龚锐思根据主题投稿了本篇教程内容,涉及到js、map、filter、some、every、foreach、for、in、for、of、浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结相关内容,已被881网友关注,内容中涉及的知识点可以在下方直接下载获取。

浅析JS中的 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

返回一个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

返回一个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

没有返回值,只针对每个元素调用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 用法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!


参考资料

相关文章

  • 结合JQ1.9通过js正则判断各种浏览器版本的方法

    发布:2022-06-17

    给网友们整理关于javascript的教程,本篇文章主要是对结合JQ1.9通过js正则判断浏览器版本的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助


  • 实现JS倒计时图文效果

    发布:2020-03-23

    这篇文章主要为大家详细介绍了JS实现倒计时图文效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • nodejs实现json和jsonp服务的实例讲解

    发布:2019-11-24

    本篇文章主要介绍了用nodejs实现json和jsonp服务的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • SpringMVC @RequestMapping注解作用详解

    发布:2023-03-10

    通过@RequestMapping注解可以定义不同的处理器映射规则,下面这篇文章主要给大家介绍了关于SpringMVC中@RequestMapping注解用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下


  • Java HashMap算法原理详细讲解

    发布:2023-04-11

    在java开发中,HashMap是最常用、最常见的集合容器类之一,文中通过示例代码介绍HashMap为啥要二次Hash,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧


  • Vue.js图片的随意拖动实例代码

    发布:2021-06-05

    下面小编就为大家分享一篇Vue.js实现图片的随意拖动方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • JS实现的字符串数组去重功能小结

    JS实现的字符串数组去重功能小结

    发布:2022-06-17

    给大家整理一篇关于javascript的教程,这篇文章主要介绍了JS实现的字符串数组去重功能,结合实例形式分析了javascript基于ES6、ES5、ES3及正则实现数组去重的相关操作技巧,需要的朋友可以参考下


  • SpringMVC集成FastJson使用流程详解

    发布:2023-04-14

    如果你使用 Spring MVC 来构建 Web 应用并对性能有较高的要求的话,可以使用 Fastjson 提供的FastJsonHttpMessageConverter 来替换 Spring MVC 默认的 HttpMessageConverter 以提高 @RestController @ResponseBody @RequestBody&nb


网友讨论