五分钟掌握 for...in 和 for...of 区别

BearyChat 发布于2019-08-23 12:27 / 1580人阅读

摘要：地址，欢迎，查看更多整理的前端知识语句以任意顺序遍历一个对象的可枚举属性。在每次迭代时，将不同的属性名分配给变量。对于的循环，可以由或终止使用报错。与区别语句以原始插入顺序迭代对象的可枚举属性。

GitHub 地址，欢迎star，查看更多整理的前端知识

for...in

for...in 语句以任意顺序遍历一个对象的可枚举属性。
for...in 遍历对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性。

for (variable in object) {...}

variable 在每次迭代时，将不同的属性名分配给变量。

object 被迭代枚举其属性的对象。

只遍历自身的可枚举属性，可以使用 hasOwnProperty

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    console.log(`obj.${prop} = ${obj[prop]}`);
  } 
}

for...of

for...of 语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。
对于for...of的循环，可以由break, throw 或return终止(使用return报错？)。

for (variable of iterable) {
    //statements
}

variable 在每次迭代中，将不同属性的值分配给变量。

iterable 被迭代枚举其属性的对象。

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

for...of 与 for...in 区别

for...in 语句以原始插入顺序迭代对象的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。

区别示例：

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // 3, 5, 7
}

GPU云服务器云服务器 for...of 镜像和容器区别主机和主机区别大数据和区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98548.html

JavaScript的for从懵懂到辨明

摘要：对于每个枚举的属性，部分都会被执行。被迭代枚举的对象。三对数组的每个元素执行一次提供的函数。没有办法终止会跳出循环，除了抛出一个异常。当到达包含值的项时，整个数组的第一个项被移除了，这导致所有剩下的项前移了一个位置。 showImg(https://segmentfault.com/img/remote/1460000015236979?w=1776&h=1080); 前言初学Jav...

loonggg 2019-08-26 12:02 评论0 收藏0
【基础】新手任务，五分钟全面掌握JQuery选择器

摘要：基本选择器选择器选中为的元素，速度最快类选择器选中属性为的所有元素元素选择器选中所有元素通配符选择器选中所有元素复合选择器选中所有元素和所有为的元素层次选择器选择器选择器选中内的所有元素选择器选择器选中内的所有直接元素，不查找间接元素选择器 1. 基本选择器 1.1 ID选择器： //选中id为myDiv的元素，速度最快 $(#myDiv) 1.2 类选择器： //选中class属性为...

weij 2019-08-20 16:37 评论0 收藏0
技术面试老是有劲使不出，该怎么办？

摘要：老王工作五六年了，今年刚从一家不小的公司出来，公司效益不好，年底裁员了，不幸老王在年前的最后一次裁员名单中中奖了。小黄心想，昨天复习了面试宝典里的数据库索引，老师说这个是要点，面试官怎么不按常理出牌呢。又到了一年金三银四，回想到很多年前我刚参加工作时的面试经历，那时都是呆呆地等着面试官问问题，被问到一些自己并不熟悉的问题时要不就是思考半天也切不中要点，要不就只能无奈地回答并不清楚了。...

史占广 2019-08-16 15:16 评论0 收藏0
ES6，你不得不学！

摘要：但是，的本质仍然是函数，是构造函数的另外一种写法。报错原生构造函数的继承对于一些原生的构造函数，比如，，，等，在是无法通过方法实现原生函数的内部属性，原生函数内部的无法绑定，内部属性获得不了。在没有学习 ES6 之前，学习 React，真的是一件非常痛苦的事情。即使之前你对 ES5 有着很好的基础，包括闭包、函数、原型链和继承，但是 React 中已经普遍使用 ES6 的语法，包括 ...

CKJOKER 2019-08-21 11:16 评论0 收藏0