js for in和for of的区别,JS之for循环

js for in和for of的区别,JS之for循环详细介绍

本文目录一览： Js中for in 和for of的区别

对数组的遍历大家最常用的就是for循环，ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。

那么接下来我们一起看一下for in 和for of 的区别吧。

##### for in

看一个简单的例子

```

//for in 应用于数组

Array.prototype.sayHello = function(){

? ? console.log("Hello")

}

Array.prototype.str = 'world';

var myArray = [1,2,10,30,100];

myArray.name='数组';

for(let index in myArray){

? ? console.log(index);

}

//输出结果如下

0,1,2,3,4,name,str,sayHello

//for in? 应用于对象中

Object.prototype.sayHello = function(){

? ? console.log('Hello');

}

Obeject.prototype.str = 'World';

var myObject = {name:'zhangsan',age:100};

for(let index in myObject){

? ? console.log(index);

}

//输出结果

name,age,str,sayHello

//首先输出的是对象的属性名，再是对象原型中的属性和方法，

//如果不想让其输出原型中的属性和方法，可以使用hasOwnProperty方法进行过滤

for(let index in myObject){

? ? if(myObject.hasOwnProperty(index)){

? ? ? ? console.log(index)

? ? }

}

//输出结果为

name,age

//你也可以用Object.keys()方法获取所有的自身可枚举属性组成的数组。

Object.keys(myObject)

```

可以看出for in 应用于数组循环返回的是数组的下标和数组的属性和原型上的方法和属性，而for in应用于对象循环返回的是对象的属性名和原型中的方法和属性。

使用for in 也可以遍历数组，但是会存在以下问题：

1.index索引为字符串型数字，不能直接进行几何运算

2.遍历顺序有可能不是按照实际数组的内部顺序

3.使用for in会遍历数组所有的可枚举属性，包括原型。例如上栗的原型方法method和name属性

##### for of

```

Object.prototype.sayHello = function(){

? ? console.log('Hello');

}

var myObject = {

? ? name:'zhangsan',

? ? age:10

}

for(let key of myObject){

? ? consoloe.log(key);

}

//输出结果

//typeError

Array.prototype.sayHello = function(){

? ? console.log("Hello");

}

var myArray = [1,200,3,400,100];

for(let key of myArray){

? ? console.log(key);

}

//输出结果

1,200,3,400,100

```

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。

所以for in更适合遍历对象，不要使用for in遍历数组。

js for in 和 for of的区别

for in是ES5标准，遍历key（属性名），并且原型链上的所有属性也会被遍历。过滤原型链上的属性可以用hasOwnProperty()方法。for in遍历后不能保证顺序（也就是顺序可能会被打乱）

for of 是ES6标准，遍历value（属性值），这个方法修复for in存在的缺陷。

JS之for循环

JS的 for 循环主要包含如下几种: for(let i = 0; i < len; i++) , for-in , for-of , for-each 。
至于第一种 for 循环，地球人都会，按下不表。难点在于 for-in ， for-of , for-each 直接有什么区别，看起来都差不多的样子。
一句话概述 for-in 与 for-of ： for-in 遍历得到的是 key 值，适用于对象的遍历， for-of 得到的是 value 值，适合数组的遍历。只要有 iterator 接口的数据结构,都可以使用 for-of 循环，包括： Array, Map, Set, String, arguments对象, Nodelist对象
获得的是属性值
获得的是对象的索引值 遍历的时候不要用这个！
当给数组的原型添加属性时，for in 会遍历到原型链上的属性
这时候只要判断是不是本身所有的属性就行了
传入匿名的回调函数，匿名函数的参数为：当前项item，索引index（可省），当前数组array（可省）
for-of这个方法避开了for-in循环的所有缺陷 与forEach()不同的是，它可以正确响应break、continue和return语句
map遍历与foreach类似，支持使用return语句，支持return返回值
参考链接 link

详解JS中常见的5 种 for 循环

for 循环在平时开发中使用频率最高的，前后端数据交互时，常见的数据类型就是数组和对象，处理对象和数组时经常使用到 for 遍历，因此需要彻底搞懂这 5 种 for 循环。它们分别为：
1、for for 循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历。可以遍历 数组、对象、字符串，示例：
2、for ... in for ... in 是在 ES5 中新增的，以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
3、for ... of for ... of 语句在可迭代对象(包括 Array、Map、Set、String、TypedArray、arguments 对象等等)上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
4、for await...of 创建一个循环，该循环遍历异步可迭代对象以及同步可迭代对象，包括内置的 String、Array，类数组对象(arguments 或 nodeList)，TypedArray, Map, Set 和用户定义的异步/同步迭代器。 它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代钩子。 类似于 await 运算符一样，该语句只能在一个async function 内部使用
5、forEach forEach 是ES5版本发布的，按升序为数组中含有效值的每一项执行一次回调函数，那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)，一般认为是 普通for循环 的加强版。
6、map 遍历时可以返回一个新数组，新数组的结果是原数组中每个元素都调用一次提供的函数后返回的值。
1、使用场景差异 for循环是最早最原始的循环遍历语句，for 内部定义一个变量，按照条件进行循环遍历，通常是数组的长度，当超过长度时就停止循环，一般遍历的都是数组或类数组。 遍历对象时，由于对象没有长度，所以使用 Object.keys() 获取对象的所有属性，以数组形式返回。 for / in主要是用来遍历对象上的可枚举属性，包括原型对象上的属性，按任意顺序进行遍历，遍历对象时获取到的是属性的键值，遍历的是数组，数组的下标当做键值。 for / of用于遍历可迭代对象的数据，包括 Array、Map、Set、String、TypedArray、arguments 对象等等。 for await...of用于遍历异步可迭代对象，该语句只能在一个async function 内部使用。 forEach 是 for 的加升级版，使用更简单，携带参数更多，但本质还是数组的循环，每个元素都执行一次回调，不会改变原数组。 map是给原数组每个元素都执行一次回调，返回一个新数组，不会改变原数组。 2、功能差异 forEach、map 不支持跳出循环，其他不支持。 for await ... of 能够支持异步操作，其他的不支持。 对于纯对象的遍历， for ... in 枚举更方便。 对于数组遍历，如果不需要索引，可以直接使用 for...of 获取值，还可支持 break 或 return ;如果还需要索引，使用 forEach 更适合，但不支持 return。 如果是一个数组映射成另一个数组，使用 map 最合适。 3、性能差异 在测试环境、测试数据条件一致的情况下，性能排序为： for > for of > forEach > map > for in。 for 因为没有额外的函数调用和上下文，所以性能是最快的。 for ... of 具有 iterator 接口的数据结构，可以使用它来迭代成员，直接读取键值。 forEach 是 for 的语法糖，还有许多的参数和上下文，因此会慢一些。 map 因为它返回的是一个等长的全新数组，数组创建和赋值产生的性能开销较大。 for...in 性能最差，因为需要列举对象的所有属性，有转化过程，开销比较大。
在项目开发中，我们应该根据实际需求，去选择一个合适的 for 遍历。以下是一些使用建议： 如果需要把数据映射成另外一个数组，如变成对应布尔值，推荐使用 map ，不会修改原数组，使用语法简单。 数组遍历时，可以使用 for 、forEach 或 for...of。 遍历的是纯对象时，推荐使用 for ... in 。 如果是需要对迭代器遍历，推荐使用 for ... of。 如果是在数组中筛选符合条件的数组，使用 fillter 。

JS中的forEach,for in,for of和for的遍历优缺点及区别

优点: 遍历的时候更加简洁,效率和for循环相同,不用关心集合下标的问题,减少出错的效率
缺点: 不能同时遍历多个集合，在遍历的时候无法修改和删除集合数据，方法不能使用break，continue语句跳出循环，或者使用return从函数体返回,对于空数组不会执行回调函数

forEach不可遍历对象,这也是和for in的区别

优点: 可以遍历数组的键名,遍历对象简洁方便
缺点: 某些情况下,会出现随机顺序的遍历,因为里面的值是string类型,所以增加了转换过程,因此开销比较大

优点: 避免了for in的所有缺点,可以使用break，continue和return，不仅支持数组的遍历,还可以遍历类似数组的对象,支持字符串的遍历,最直接的遍历数组的语法,支持map和set对象遍历
缺点: 不适用于处理原有的原生对象

优点: 程序简洁，结构清晰，循环初始化，循环变量化，循环体和循环条件位置突出
缺点: 结构比while循环复杂，容易出编码错误

js 循环遍历变量的几种方式

js循环遍历变量的方式有以下几种：
1.for(let i = 0; i < 5; i++)
2.forEach
3.for of
4.for in
那么我们来看下这几种遍历方式的用法，以及退出循环的方法

1.for
这是最常用的遍历方法，for用来遍历数组，可以使用break 退出循环，使用continue来跳过本次循环。
2.forEach
除了抛出异常以外，没有办法中止或跳出 forEach() 循环。
并且forEach不会改变原来的数组

3.for of
for of 可以迭代 可迭代对象 （包括 Array ， Map ， Set ， String ， TypedArray ， arguments 对象等等）
对于for of，可以由break, throw 或return终止, 可以用continue略过此次循环。在这些情况下，迭代器关闭。

JS数组循环遍历常用的9种方法

首先定义一个数组

const arr = [1,2,3,4,5,6];

第一种：for循环

for (let i = 0;i
<arr.length;i++){

? ?console.log(arr[i]);

}

for(j=0,len=arr.length;j
<len;j++){} 这种方法基本上是所有循环遍历方法中性能最高的一种

第二种 for of?(需要ES6支持)?性能要好于forin，但仍然比不上普通for循环

for?(let?value?of?arr){

? ? ? ?console.log(value);

}

第三种 for in?它的效率是最低的

for?(let?i?in?arr){

? ? ? console.log(arr[i]);

?}

第四种 foreach()?实际上性能比普通for循环弱

????1、箭头函数写法

????arr.forEach(value?=>{

? ? ? ? console.log(value);

????})

????2、普通函数写法

????arr.forEach(function(value){

? ? ? ?console.log(value);

? ? ?})

第五种?entries()

for?(let?[index,?value]?of?arr.entries())?{

? ? ?console.log(value);

?}

第六种?keys()

for (let inx of arr.keys()){

console.log(arr[inx]);

}

第七种 reduce()

1、箭头函数

arr.reduce((pre,cur)=>{

? ? ? ?console.log(cur);

?})

2、普通函数

arr.reduce(function(pre,cur){

? ? ?console.log(cur);

})

第八种 map()?但实际效率还比不上foreach

1、箭头函数

?arr.map(value=>{

? ? ? ?console.log(value);

?})

2、普通函数

arr.map(function(value){

? ? ? console.log(value);

})

第九种?values()

for?(let?value?of?arr.values()){

? ? ? ?console.log(value);

?}

</arr.length;i++){

javascript中的iterable常用的几种遍历方法

本篇文章给大家带来的内容是关于javascript中的iterable常用的几种遍历方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在es6中，引入了新的Map和Set对象，Array可以通过下标遍历，而Map和Set无法通过下标遍历。为了统一集合，es引入了新的iterable类型,Array,Map，Set类型都属于iterable。讲讲常用的几种遍历方法。1.for..in var a = [1,2,3];for(var index in a ){ console.log(index); console.log(a[index]);}上面分别输出0,1,2 1,2,3只有Array能有for..in Map和Set都不能使用,for..in遍历的是索引2.for..offor(var x of a){ console.log(x);}var d = new Set(['A', 'B', 'C']);for(var dd of d){ console.log(dd);}for..of遍历的是值这是上面运行的结果。for..of 与 for..in的区别for..of是es6新引入的概念，for ... in循环由于历史遗留问题，它遍历的实际上是对象的属性名称。一个Array数组实际上也是一个对象，它的每个元素的索引被视为一个属性。当我们手动给Array对象添加了额外的属性后，for ... in循环将带来意想不到的意外效果：var a = ['A', 'B', 'C'];a.name = 'Hello';for (var x in a) { console.log(x); // '0', '1', '2', 'name'3.foreach()方法var d = new Set(['A', 'B', 'C']);for(var dd of d){ console.log(dd);}var s2 = new Map([[1,'hxy'],[2,'yyw'],[3,'zzh']]);s2.forEach(function (value,key,map) { console.log(key+":"+value);})

js几种for循环的几种用法

第一种:普通for循环
for(j = 0; j < arr.length; j++) { }第二种:优化版for循环
for(j = 0,len=arr.length; j < len; j++) { }第三种:弱化版for循环
for(j = 0; arr[j]!=null; j++) { }第四种:foreach循环
arr.forEach(function(e){ });第五种:foreach变种
Array.prototype.forEach.call(arr,function(el){ });第六种:for in循环
for(j in arr) { }第七种:map遍历
arr.map(function(n){ });第八种:forof遍历(需要ES6支持)
for(let value of arr) { });