君陌离的博客

vuePress-theme-reco 君陌离    2018 - 2020
君陌离的博客 君陌离的博客

Choose mode

  • dark
  • auto
  • light
首页
我的作品
  • 项目橱窗
  • blog模板
分类
  • 数据库
  • CSS
  • 摘记
  • JS
  • Node
  • Vue
  • React
  • GIT
  • Promise
  • Liunx
  • Xshell
  • ajax
  • WINDOWS
  • Python
  • 随笔
  • 脚手架
  • node
  • 自动化
标签
笔记
时间线
About Me
  • 关于我
  • 赞赏
Contact
  • GitHub
  • QQ
author-avatar

君陌离

70

文章

90

标签

首页
我的作品
  • 项目橱窗
  • blog模板
分类
  • 数据库
  • CSS
  • 摘记
  • JS
  • Node
  • Vue
  • React
  • GIT
  • Promise
  • Liunx
  • Xshell
  • ajax
  • WINDOWS
  • Python
  • 随笔
  • 脚手架
  • node
  • 自动化
标签
笔记
时间线
About Me
  • 关于我
  • 赞赏
Contact
  • GitHub
  • QQ
  • HTML5

  • JS

    • JS 前20个常用字符串方法及使用方式
    • JS封装
    • for in,for of, for,forEach,map的区别
    • windowfn方法 npm包引用
    • js中数组操作方法
    • 数组排序的方法
    • 常见的前端跨域解决方案
    • Cookie、session和localStorage、以及sessionStorage之间的区别
    • 数组去重的方法
    • windowfn 常用函数封装(持续更新中)
  • 微信小程序

  • 数据库

  • React

  • Vue

  • vuepress

for in,for of, for,forEach,map的区别

vuePress-theme-reco 君陌离    2018 - 2020

for in,for of, for,forEach,map的区别

君陌离 2020-08-12 10:44:26 JSfor infor offorforeachmap

# for in

  • for...in根据key遍历

遍历对象时会从原型上继承属性,可以用hasOwnProperty()识别出继承属性, 遍历数组会把数组下标看做属性名,也就输出结果是数组的下标,且不一定按照数组的索引顺序。 输出结果是字符串

function Person(name){s
    this.name = name;
}
Person.prototype.getName = function(){
    return this.name;
}
var child= new Person('lala');
for (let i in child){
    console.log(i);
}
//name
//getName
for (let i in child){
  if(child.hasOwnProperty(i)){
    console.log(i);
  }
}
//name
var aa = ['aa','bb','cc'];
for(let i in aa){
  console.log(i);
}
// 0  1  2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# for of

  • for...of根据值遍历

for...of用来遍历数据,例如数组中的值,但是也可以遍历字符串,支持Map和Set对象的遍历,避免了所有for...in的弊端,与forEach相比可以正确响应break,continue,return语句。

var aa = ['aa','bb','cc'];
for(let i of aa){
  console.log(i);
}
// aa  bb  cc
var str='abc';
for(let i of str){
  console.log(i);
}
// a  b  c
var set=new Set(['aa','bb','cc']);
for(let i of set){
  console.log(i);
}
//aa  bb  cc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# forEach根据index遍历

  • forEach一般只能适用于数组,功能是从头到尾把数组遍历一遍,可以有三个参数,后两个可以不写。
var arr = ['aa','bb'];
arr.forEach(function(v,i,a){
    console.log(v,i,a);//分别对应:数组元素,元素的索引,数组本身
});
//aa  0  ['aa','bb']
//bb  1  ['aa','bb']
1
2
3
4
5
6
  • forEach是for循环的加强版
Array.prototype.eachFor = function(fn){
  for(let i=0;i<this.length;i++){
    fn(this[i],i,this);
  }
}
var aa=[5,6,7];
aa.eachFor(function(v,i){
  console.log(v,i);
});
//5  0
//6  1
//7  2
1
2
3
4
5
6
7
8
9
10
11
12

# map根据index遍历

  • 和forEach相比,使用方法一样有三个参数,map只能对元素进行加工处理,产生一个新的数组对象。
var arr=[1,2,3];
arr.map(function(v,i,arr){
  return v*2;
});
//[2,4,6]
1
2
3
4
5

# filter

  • filter对原数组进行过滤筛选,生成新的数组,使用和map样有三个参数。如果对空数组进行筛选,会返回undefined。filter不会改变原数组。
var aa=[1,2,1,2,3];
aa.filter(function(v,i,self){
    return self.indexOf(v) == i;
});
//[1,2,3]
1
2
3
4
5

# for

  • for常规语句遍历,可循环数字,字符串,数组。
for(let i=0;i<5;i++){
  console.log(i);
}
//0  1  2  3  4
1
2
3
4
欢迎来到 您的站点名称($site.title)
看板娘