前端面试系列-JavaScript-for ... in和for...of

文章目录

  • 一、for ... in、for...of区别
    • 1.for ... in
    • 2. for...of
    • 3.区别
  • 二、转为ES5代码
  • 三、性能比较

一、for … in、for…of区别

1.for … in

for…in 循环一般用于对象的遍历,不适用于遍历数组。

遍历数组的缺点:数组的下标 index 值是数字,for-in遍历的 index值"0",“1”,"2"等是字符串。存在一个转换过程,降低性能

任何对象都继承了Object对象,继承的类的属性是默认不可遍历的,for… in 循环遍历的时候会跳过,但是这个属性是可以更改为可以遍历的,那么就会造成遍历到不属于自身的属性。
可以用hasOwnProperty() 方法,在循环内部判断一下,某个属性是否为对象自身的属性。

2. for…of

for…of 循环不仅支持数组,还支持大多数类数组对象,也支持字符串遍历。 for…of 它可以正确响应 break、continue 和 return 语句。

3.区别

  • for in 一般常用来遍历对象或json,不适用于遍历数组。
  • for of数组对象都可以遍历,遍历对象需要通过和Object.keys()
  • for in循环出的是key,for of循环出的是value
  • 遍历对象时,for in,包括原型链上的属性,需要用hasOwnProperty()判断;for of + Object.keys()得到的是自身可枚举属性

二、转为ES5代码

ES6代码

let arr = [1,2,3,4]

for(let item of arr){
	console.log(item)
}

for(let index in arr){
	console.log(arr[index])
}

let obj = {
	name:"小强",
    age:23
}
for(let item of Object.keys(obj)){
	console.log(obj[item])
}

for(let index in obj){
	console.log(obj[index])
}

转为ES5:

"use strict";

var arr = [1, 2, 3, 4];

for (var _i = 0, _arr = arr; _i < _arr.length; _i++) {
  var item = _arr[_i];
  console.log(item);
}

for (var index in arr) {
  console.log(arr[index]);
}

var obj = {
  name: "小强",
  age: 23
};

for (var _i2 = 0, _Object$keys = Object.keys(obj); _i2 < _Object$keys.length; _i2++) {
  var _item = _Object$keys[_i2];
  console.log(obj[_item]);
}

for (var _index in obj) {
  console.log(obj[_index]);
}

可以看到转成ES5代码后, for…of 就是用for实现的。

三、性能比较

let arr = new Array();
for(let i = 0, len = 1000000;i < len; i++){
	arr.push(i);
}
 
function foradd(my_arr){
	let sum = 0;
	for(let i = 0; i < my_arr.length; i++){
		sum += my_arr[i];
	}
}
 
function forinadd(my_arr){
	let sum = 0;
	for(let key in my_arr){
		sum += my_arr[key];
	}
}
 
function forofadd(my_arr){
	let sum = 0;
	for(let val of my_arr){
		sum += val;
	}
}
 
function timeTest(func,my_arr,str) {
	var start_time = null;
	var end_time = null;
	start_time = new Date().getTime();
	func(my_arr);
	end_time = new Date().getTime();
	console.log(str,(end_time - start_time).toString());
}
 
timeTest(foradd,arr,'foradd');
timeTest(forinadd,arr,'forinadd');
timeTest(forofadd,arr,'forofadd');

// foradd 6
// forinadd 294
// forofadd 20

for > for…of > for…in

  • for循环的i是Number类型,开销较小
  • for…in需要穷举对象的所有属性,包括自定义的添加的属性也能遍历到
    且for…in的key是String类型,有转换过程,开销比较大

本文链接:https://blog.csdn.net/qq_39903567/article/details/115203524

你可能感兴趣的:(javaScript,javascript,前端,性能,面试)