php网站接口开发,wordpress 推特,手机移动端,免费建立自己的网站代码给大家推荐一个实用面试题库
1、前端面试题库 #xff08;面试必备#xff09; 推荐#xff1a;★★★★★
地址#xff1a;web前端面试题库 除了for循环♻️#xff0c;for-of,for-each循环♻️也是一个不错的选择
先说for-of循环♻️
认识for-of循环♻️…给大家推荐一个实用面试题库
1、前端面试题库 面试必备 推荐★★★★★
地址web前端面试题库 除了for循环♻️for-of,for-each循环♻️也是一个不错的选择
先说for-of循环♻️
认识for-of循环♻️
for(const /* 循环对象集合中的每个元素 */ of /* 循环对象集合 */ ){/* 循环体 *//* 你可以在循环体中取出循环对象集合中的每一个元素 */
}通过for-of循环♻️可以对数组Array、对象Object等可迭代变量进行像键值对一样的循环遍历操作。换句话说你不需要亲自创建索引来依次遍历并取出集合中的每一个元素此循环会将集合中的每一个元素创建对应的索引通过索引来遍历整个数组中的元素。
另外如果你觉得这样不好记忆你可以换一种方式在英文中The color of books 指的是图书的颜色。图书是一个整体而每一本书的封皮颜色都是不同的是图书整体中的个体。通过这种方式可以很快的理解for-of循环机制。
使用for-of循环遍历数组元素
restaurant对象
const restaurant {name: 意大利经典,location: Via Angelo Tavanti 23, 佛罗伦萨, 意大利,categories: [意大利, 比萨店, 素食, 有机],starterMenu: [佛卡夏, 意式烤面包, 大蒜面包, 卡普雷塞沙],mainMenu: [披萨, 意大利面, 烩饭],openingHours: {thu: {open: 12,close: 22,},fri: {open: 11,close: 23,},sat: {open: 0, // Open 24 hoursclose: 24,},},
};利用传统的方法for循环来逐次遍历数组中的每个元素
const menu [...restaurant.starterMenu, ...restaurant.mainMenu];// Normal loop
for (let i 0; i menu.length; i) {console.log(menu[i]);
}通过方法for-of循环来逐次遍历数组中的每个元素:
for(const item of menu){console.log(item);
}甚至你也可以写成这样
for(const item of menu) console.log(item);for-of循环的注意事项
注意在普通循环♻️和for-of循环中你还是可以使用break或continue关键字在设定的情况下跳出循环但是在之后的for-each循环中你将不能做这些
初识entries()
实际上for-of循环之所以可以做到不设立和操作索引变量index就可以遍历整个数组集合。entries()方法功不可没。实际上在JavaScript中entries()是一个数组迭代器。
// 如何在for-of循环中获取元素的索引
for (const item of menu.entries()) {console.log(item);
}entries()方法会将获取到的数组或对象整合到一个对象中并将他们编排成一个带索引序号和元素内容的一个数组通过访问对象内数组的第一个元素即可得到索引序号访问第二个元素即可得到数组中包含的内容。
// menu.entries()到底是什么
// 用console.log(menu.entries()); 会返回一个数组迭代器
console.log([...menu.entries()]); // 探究entries()方法下的数组迭代器内部是什么样子既然这样如果我们将刚刚得到的menu菜单数组进行遍历如果我们不了解for-of循环的运行原理我们只能这样写
// 利用for-of循环打印一个菜单
// 旧式写法
for (const item of menu.entries()) {console.log(${item[0] 1}: ${item[1]});
}实际上通过entries()方法我们可以对数组进行解构操作。将得到的item的每一项分解成i和el。通过变量i获取每一个数组中的第一个元素——即序号通过变量el获取每个数组中的第二个元素——即内容和值。
对于这个数组来说item中的第一个元素一定是1,2,3...等序号第二个元素就是序号对应的菜品和食物。
//新写法
//因为在for-of-loop中已经将menu数组解构成索引加内容的样式所以直接用变量去替代
//索引序号即可
for (const [i, el] of menu.entries()) {console.log(${i 1}: ${el});
}测试结果两次输出的结果是一样的。 使用for-of循环遍历对象内属性
使用for-of循环同样可以遍历对象内部的属性。实际上对象内部的属性也可以被称为键而属性对应的内容称为值。通过for-of循环可以通过键值对的方式逐次遍历对象内部的属性。
对象restaurant :
const weekdays [Mon, Tue, Wed, Thu, Fri, Sat, Sun];
const openingHours {[weekdays[3]]: {open: 12,close: 22,},[weekdays[4]]: {open: 11,close: 23,},[weekdays[5]]: {open: 0, // Open 24 hoursclose: 24,},
};
const restaurant {name: 意大利经典,location: Via Angelo Tavanti 23, 佛罗伦萨, 意大利,categories: [意大利, 比萨店, 素食, 有机],starterMenu: [佛卡夏, 意式烤面包, 大蒜面包, 卡普雷塞沙],mainMenu: [披萨, 意大利面, 烩饭],// ES6 enhanced object literalsopeningHours,// 新的对象属性名写法order(starterIndex, mainIndex) {return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];},
};目前在restaurant对象中具有openingHours这个属性通过for-of循环可以将openingHours属性内的对象和元素依次解构。
通过for-of循环 ♻️ 遍历restaurant对象中的openingHours属性
for (const day of Object.keys(openingHours)) {console.log(day);
}利用Object.keys()获取到对象中的属性键
而且通过Object.keys()方法获取到的键值会将他们集成到一个数组中因此对数组可以进行的操作同样适用于此。
const properties Object.keys(openingHours);
console.log(properties);console.log(We are open on ${properties.length} days我们店铺开${properties.length}天。);另外获取到的键值对依然可以附加到字符串中这并不影响字符串的连接。for-of循环会将遍历得到的键值附加到字符串的末尾。
for (const day of properties) {openStr ${day},;
}
console.log(openStr);利用Object.values()获取对象属性中的值
// Property VALUES
const values Object.values(openingHours);
console.log(values);这些值正好是restaurant对象下的openingHours属性中的键和值
const weekdays [Mon, Tue, Wed, Thu, Fri, Sat, Sun];
const openingHours {[weekdays[3]]: {open: 12,close: 22,},[weekdays[4]]: {open: 11,close: 23,},[weekdays[5]]: {open: 0, // Open 24 hoursclose: 24,},
};Object.values()方法会将每个获取到的属性对象封装到一个数组中通过数组访问索引的方式可以依次将属性对应的值和内容取出。
const values Object.values(openingHours);
console.log(values[0]);进一步分析entries()方法
// Entries object
const entries Object.entries(openingHours);
console.log(entries);for (const x of entries) {console.log(x); // 遍历entries获取到其中的每个值
}对于遍历对象中的属性值和方法通过entries()会返回一个对象在数组中依次装载着对象的属性值键和对应的值。就类似于这样
[ index(0): [key, {object}],index(1): [key, {object}],index(2): [key, {object}],
]因此现在你可以对通过entries()方法返回对象中的每一个属性元素进行控制这种方法类似于使用for-of循环♻️来控制数组。
最初使用for-of循环来控制对象和对象内部的属性与值。
for (const x of entries) {console.log(x); // 遍历entries获取到其中的每个值
}现在可以对属性和值进行更详细的操作。
// 甚至在遍历对象属性中你也可以使用数组
for (const [key, value] of entries) {console.log(On ${key} we open at ${open} and close at ${close});
}但是目前通过这种解析方式我们仍无法获取到属性中的每个值——即openingHours对象中Thu键下的属性值。
这是因为你还需要对value进行解构。value也是键值下的一个对象。 //[key, value]
for (const [key, { open, close }] of entries) {console.log(On ${key} we open at ${open} and close at ${close});
}给大家推荐一个实用面试题库
1、前端面试题库 面试必备 推荐★★★★★
地址web前端面试题库
