【for in】 /【 for each】 /【for of】的区别

2022-06-20 19:03:33 阅读：154 来源： 互联网

标签：console log 区别 value let myArray 数组 each

1、for...in循环

1.1 可枚举对象

let person = {
    name:"典韦",
    age:4,
    sex:"男"
}
for(let item in person){
    console.log(item);
}

结果是：name age sex

for…in…循环是对对象的key值进行循环

1.2 可枚举数组

let person = ['张三','李四','王五'];
for(let item in person){
    console.log(item);
}

结果是：0 张三 1 李四 2 王五

for…in…是输出索引值，通过索引值能拿到数组数据

1.3 可枚举数组的原型对象

Array.prototype.sayHello = function(){
    console.log('hello');
}
Array.prototype.str = 'world';
let myArray = [1,2,3];
myArray.name = '数组';
for(let index in myArray){
    console.log(index);
}

输出结果是： 0 1 2 name sayHello str

这个结果看出for in 不仅返回的是数组的下标，而且将数组的原型对象以及数组对象本身属性值都会返回。但是这也存在一个问题，在实际工作开发中，这些对象很可能是不需要的，全部列举出来可能会产生新的问题。

为了解决原型对象这个问题，可以使用hasOwnProperty

Array.prototype.sayHello = function () {
    console.log('hello');
}
Array.prototype.str = 'world';
let myArray = [1, 2, 3];
myArray.name = '数组';
for (let index in myArray) {
    if(myArray.hasOwnProperty(index)){
        console.log(index);
    }
}

结果是 0 1 2 name

结果能看出来，虽然使用hasOwnProperty，但是数组本身的属性还是会输出

1.4 可以使用break终止

var arr = [3, 5, 7];
for (let index in arr) {
  console.log(arr[index]);
  if (arr[index] == 5) {
    break;
  }
}

输出结果为 3 5，由此可以看出for in 可以使用break

2、for...each

2.1 可遍历数组

Array.prototype.sayHello = function(){
  console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = ['a','b','c'];
myArray.name='数组';

myArray.forEach((value,i) => {
  console.log(value)
  console.log(i)
})

输出的结果是 ‘a’ 0 ‘b’ 1 ‘c’ 2

使用forEach可以输出索引值和数组值，而且不会输出数组的原型对象。

2.2 无法break中断执行

var arr = [3, 5, 7];

arr.forEach(function (value) {
  console.log(value);
  if (value === 5) {
    return false;
  }
});

输出的结果是 3 5 7

从结果可以看出，return false没有执行，他会一直运行到底

3、for...of

3.1 可以遍历数组

Array.prototype.sayHello = function(){
  console.log("Hello")
}
Array.prototype.str = 'world';
var myArray = ['a','b','c'];
myArray.name='数组';

for(let index of myArray) {
  console.log(index)
}

结果为 a b c

使用for of无法输出索引值，但也不会输出数组的原型对象

3.2 可以使用break终止运行

var arr = [3, 5, 7];
for (let value of arr) {
  console.log(value);
  if (value == 5) {
    break;
  }
}

结果是 3 5 ；break 可以终止循环

3.3 可以迭代字符串

let str = 'hello';

for (let value of str) {
  console.log(value);
}

结果是 h e l l o

3.4 可以迭代arguments类数组对象

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

输出结果是 1 2 3

3.5 可以迭代map和set

let mapData = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (let [key, value] of mapData) {
  console.log(value);
}

let setData = new Set([['a', 1], ['b', 2], ['c', 3]]);
for (let [key, value] of setData) {
  console.log(value);
}

输出结构都是1 2 3

4、总结

for in 适用于纯对象的遍历，并且只能输出可枚举属性

forEach适用于需要知道索引值的数组遍历，但是不能中断

for of适用于无需知道索引值的数组遍历，因为可以中断。另外对于其他字符串，类数组，类型数组的迭代，for of也更适用

标签：console,log,区别,value,let,myArray,数组,each
来源： https://www.cnblogs.com/Eamon-18/p/16394367.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9