for...in 和 for...of

文章目录

for…in

for...in语句以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性,包括继承的可枚举属性。

基本用法:

const cat = {
  name: "Tom",
  age: 100,
};

const color = Symbol("color");
cat[color] = "pink";

console.log(cat); // { name: "Tom", age: 100, Symbol(color): "pink" }

for (let key in cat) {
  console.log(key);
}

/**
 * name
 * age
 */

继承的属性也会被遍历:

const animal = {
  color: "pink",
};

function Cat() {
  this.name = "Tom";
}

Cat.prototype = animal;

const cat = new Cat();

for (let key in cat) {
  console.log(key);
}

/**
 * name
 * color
 */

只输出本身的属性:

for (let key in cat) {
  if (cat.hasOwnProperty(key)) {
    console.log(key);
  }
}

/**
 * name
 */

for…of

for...of语句遍历可迭代对象定义要迭代的数据。(包括 Array、Map、Set、String 等)

迭代 Array:

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

for (let value of arr) {
	console.log(value);  // 1, 2, 3, 4
}

迭代 Map

const map = new Map([
  [1, "a"],
  [2, "b"],
  [3, "c"],
]);

console.log(map);  // Map(3) {1 => 'a', 2 => 'b', 3 => 'c'}

for (let value of map) {
  console.log(value);  // [1, 'a']  [2, 'b']  [3, 'c']
}

迭代 Set:

const set = new Set([1, 2, 3, 4])

console.log(set);  // Set(4) {1, 2, 3, 4}

for (let value of set) {
  console.log(value);  // 1 2 3 4
}

迭代 String:

let string = 'hello';

for (let value of string) {
  console.log(value);  // h e l l o
}

区别

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式:

for...in语句可以任意顺序迭代对象的可枚举属性
for...of语句遍历可迭代对象定义要迭代的数据

for...of循环和for...in循环在遍历 Array 时的区别:

const arr = ['a', 'b', 'c', 'd'];

for (let value of arr) {
  console.log(value);  // a b c d
}

for (let key in arr) {
  console.log(key);  // 0 1 2 3 
}

for...in是为遍历对象属性而构建的,不建议与数组一起使用,数组可以使用forEach()for...of

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值