ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

es6中 for-in for-of的用法和区别

2022-08-16 09:03:59  阅读:179  来源: 互联网

标签:es6 console log 区别 用法 -------------------- ... iterable 属性


其中for-of是ES6新增的迭代语法

在MDN上的解释:
for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。
for...of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句

由此概念可看出区别:for..in是返回可枚举对象的属性,而for..of是返回可枚举对象的值
另外一点:for...in会继承, 而for...of不会,

  • for...in实例
Object.prototype.objCustom = function(){}
Array.prototype.arrCustom = function(){}
let iterable = [3,4,5]

iterable.foo = 'hello'
console.log(iterable)

console.log('--------------------')
for(let i in iterable){
    console.log(i)
}

console.log('--------------------')
for(let j in iterable){
    if(iterable.hasOwnProperty(j)){ // hasOwnProperty 判断是自己属性才能输出
	    console.log(j)
    }
}


  • 输出结果
[ 3, 4, 5, foo: 'hello' ]
--------------------
0
1
2
foo
arrCustom
objCustom
--------------------
0
1
2
foo
  • for of
console.log('--------------------')
for(let k of iterable){
    console.log(k)
}

// iterable 百度翻译:可迭代的
--------------------
3
4
5

以上三个结果中:
1 . console.log(iterable) 返回数组本身

2 . 第一个for...in结果看出,可枚举属性除了本身的 0 , 1 , 2 ,foo之外,还有 arrCustom, objCustom。这是由于继承功能, iterable是数组实例,iterable.__proto__指向Array原型对象则有了前面定义的属性arrCustom, 而Array.__proto__指向Object原型对象,则有了前面定义的熟悉objCustom, 原型链在往上Object.__proto__指向null,此时终止继承。

3 . 第二个for...in内部使用hasOwnProperty判断只有是本身的属性才输出

标签:es6,console,log,区别,用法,--------------------,...,iterable,属性
来源: https://www.cnblogs.com/pansidong/p/16590349.html

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

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有