JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别
JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别 :https://blog.csdn.net/hyupeng1006/article/details/79877710
本文链接:https://blog.csdn.net/hyupeng1006/article/details/79877710
函数简述:
map():返回一个新的Array,每个元素为调用func的结果
filter():返回符合func条件的元素数组
find():返回第一个符合条件的元素对象
some():返回一个boolean,判断是否有元素是否符合func条件
every():返回一个boolean,判断每个元素是否符合func条件
forEach():没有返回值,只是针对每个元素调用func
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.find
有返回值,返回第一个符合条件的元素对象
var arr = [{name: '张三', age: 12}, {name: '李四', age: 14}];
var obj = arr.find(e => {
return e.name === '张三'
})
console.log(obj);
// print: {name: '张三', age: 12}
4.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
5.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
6.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]
7.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"
8.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 用法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的
————————————————
版权声明:本文为CSDN博主「hyupeng1006」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/hyupeng1006/article/details/79877710
JS中的 map, filter, some, every, forEach, for in, for of 用法总结和区别的更多相关文章
- 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) => { ...
- [转载]JS中 map, filter, some, every, forEach, for in, for of 用法总结
转载地址:http://codebay.cn/post/2110.html 1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let list = [1, 2, 3, 4, 5] ...
- JS中 map, filter, some, every, forEach, for in, for of 用法总结
本文转载自:http://blog.csdn.net/gis_swb/article/details/52297343 1.map 有返回值,返回一个新的数组,每个元素为调用func的结果. let ...
- js中的Map对象的简单示例
es6提供一个对象Map, 其功能类似于java中的Map, 下面是java中的Map和js中的Map的简单对比: js中的Map.set()相当于java中的Map.put(), js中的Map.s ...
- js中数组的循环与遍历forEach,map
对于前端的循环遍历我们知道有 针对js数组的forEach().map().filter().reduce()方法 针对js对象的for/in语句(for/in也能遍历数组,但不推荐) 针对jq数组/ ...
- js Array 中的 map, filter 和 reduce
原文中部分源码来源于:JS Array.reduce 实现 Array.map 和 Array.filter Array 中的高阶函数 ---- map, filter, reduce map() - ...
- jQuery与JS中的map()方法使用
1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
- JS中的Map和Set实现映射对象
使用iterable内置的forEach方法 var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) { // elem ...
- JS中的Map和Set
使用iterable内置的forEach方法 var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) { // elem ...
随机推荐
- 关于Environment类的使用
import org.springframework.core.env.Environment; EnvironmentAware 如何引用这个类1.可以通过 @Autowired织入Environm ...
- java文件断点续传上传下载解决方案
这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数 下面直接贴代码吧,一些难懂的我大部分都加上注释了: 上传文件实体类: 看得 ...
- AHOI/HNOI2017 礼物
题目链接:戳我 对于题目中给的式子:(大家暂且把\(y_i\)当作\(y_{i+k}\)来看啦qwq) \(\sum_{i=1}^{n}(x_i-(y_i+c))^2\) \(=\sum_{i=1}^ ...
- create-react-app 构建的项目使用 css module 方式来书写 css
先 yarn eject 释放出来配置文件具体参见我之前写过相关的文章(这里不再重复), 找到 config 文件夹下的文件如下图所示: 找到如图所示的配置: 书写 css 的文件名例如(App.mo ...
- 决策树python建模中的坑 :ValueError: Expected 2D array, got 1D array instead:
决策树python建模中的坑 代码 #coding=utf-8 from sklearn.feature_extraction import DictVectorizerimport csvfrom ...
- UVA 572 -- Oil Deposits(DFS求连通块+种子填充算法)
UVA 572 -- Oil Deposits(DFS求连通块) 图也有DFS和BFS遍历,由于DFS更好写,所以一般用DFS寻找连通块. 下述代码用一个二重循环来找到当前格子的相邻8个格子,也可用常 ...
- 微信小程序中的不同场景,不同的判断,请求的时机
本来5月1之前就想写一下一篇关于小程序不同场景下发送ajax请求的问题,但是放假的前一天,出了个大bug,就是因为我修改不同的场景下执行不同的逻辑造成的 1.首先,在小程序里,微信做了很多的缓存,我们 ...
- android 面试汇总<二>
Animation Q:Android中有哪几种类型的动画? 技术点:动画类型 参考回答: 常见三类动画 View动画(View Animation)/补间动画(Tween animation):对V ...
- Python之取整
在编程过程中数据处理是不可避免的,很多时候都需要根据需求把获取到的数据进行处理,取整则是最基本的数据处理.取整的方式则包括向下取整.四舍五入.向上取整等等.下面就来看看在Python中取整的几种方法吧 ...
- 配置pip镜像源(转)
使用pip安装python扩展时,如若没有配置国内镜像源,在未翻墙的情况下,其下载速度将会特别缓慢.因此,有些时候我们必须使用国内镜像源,来解决pip下载安装速度慢的问题,比较常用的国内镜像包括: 阿 ...