<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>for...of循环</title>
</head>
<body>
<script>
const fruits = ['apple', 'banana', 'orange', 'mango'];
/*
ES5
*/
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i])
}
fruits.forEach(friut => {//forEach缺点不能中止和跳过
// if(friuts[0]==='apple'){//报错：Uncaught ReferenceError: friuts is not defined at fruits.forEach.friut (for...of循环.html:23) at Array.forEach (<anonymous>) at for...of循环.html:22
// console.log(friuts[0])
// }
console.log(friut);
})
for (let friut in fruits) {//这里的friut获取的是下标
console.log(friut);//0 1 2 3
}
/*
for...in循环遍历对象上可枚举的所有属性
*/
fruits.describe = 'my favorite friuts';
for (let index in fruits) {
console.log(fruits[index]);//apple banana orange mango my favorite friuts
}
/*
ES6 for...of循环
支持中止和跳过
*/
for (let friut of fruits) {
console.log(friut);//apple banana orange mango
}
for (let friut of fruits) {
if (friut === 'orange') {//支持中止
break;
}
console.log(friut);//apple banana
}
for (let friut of fruits) {
if (friut === 'orange') {//支持跳过
continue;
}
console.log(friut);//apple banana mango
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>for...of实例</title>
<style>
.completed{
text-decoration: line-through;
}
</style>
</head>
<body>
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
<script>
const fruits = ['apple', 'banana', 'orange', 'mango'];
/*
entries() 方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
console.log(fruit)结果为：
(2) [0, "apple"]
(2) [1, "banana"]
(2) [2, "orange"]
(2) [3, "mango"]
注解：0,1,2,3是索引
*/
for (let fruit of fruits.entries()) {
console.log(fruit);
}
/*
注意：我现在想通过entries（）方法，
直接获得值（'apple', 'banana', 'orange', 'mango'）
*/
for (let [index, fruit] of fruits.entries()) {
console.log(fruit);
}
//将下标值（index）和值结合起来，注意下标值是从0开始的；
for (let [index, fruit] of fruits.entries()) {
console.log(`第${index + 1}天，吃${fruit}`);
}
/*
sum(4,30,623,1447,8,501,475,6)里面的数字加起来,操作如下；
arguments 是一个对应于传递给函数的参数的类数组对象。
arguments对象是所有（非箭头）函数中都可用的局部变量。
*/
function sum() {
// console.log(arguments);
let total = 0;
for (let num of arguments) {
total += num;
}
console.log(total);
return total;
}
sum(4, 30, 623, 1447, 8, 501, 475, 6)//3094
/*
for...of循环利用与字符串
*/
let name = 'xyz';
for (let char of name) {
console.log(char);//x y z
}
/*
for...of循环小操作
querySelectorAll:
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。
返回的对象是 NodeList 。
*/
const lis=document.querySelectorAll('li');
console.log(lis);//NodeList(3) [li, li, li]
for(let li of lis){
li.addEventListener('click',function(){
this.classList.toggle('completed');
})
}
</script>
</body>
</html>