Array.prototype.first = function () {
return this[0]
}
const fruits = ['Apple', 'Banana', 'Orange', 'Mango']
fruits.desc = 'My favorite fruits'
//for循環(huán)的缺點(diǎn)，結(jié)構(gòu)復(fù)雜，可讀性不高
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i])
}
//Apple Banana Orange Mango
//forEach的缺點(diǎn)是不能終止與跳過
fruits.forEach(fruit => console.log(fruit))
//Apple Banana Orange Mango
//需要注意的是forin遍歷的是對(duì)象上可枚舉屬性
for (let index in fruits) {
console.log(fruits[index])
}
//Apple Banana Orange Mango My favorite fruits ? (){return this[0]}
//因此為了解決以上的問題，ES6提供了forOf
for (let fruit of fruits) {
if(fruit==='Banana'){
break;
}
console.log(fruit)
}
//Apple
for of 的應(yīng)用
//遍歷字符串
const string = 'ABCDEF'
for (let str of string) {
console.log(str)
}
//A B C D E F
//遍歷arguments
function list(){
for(let arg of arguments){
console.log(arg)
}
}
list(1,2,3,4,5)
//1 2 3 4 5
//遍歷數(shù)組
for(let [index,fruit] of fruits.entries()){
console.log(`${index++}---->${fruit}`)
}
/**
* 0---->Apple
* 1---->Banana
* 2---->Orange
* 3---->Mango
*/
遍歷DOMList
<style>
.completed {
text-decoration: line-through;
}
</style>
<body>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
<li>Mango</li>
</ul>
<script>
//遍歷Domlist
const domList = document.querySelectorAll('li')
for (let li of domList) {
li.addEventListener('click', function () {
this.classList.toggle('completed')
})
}
</script>
</body>
點(diǎn)擊事件
