const fruits=['orange','apple','banana','mango'];
for循環(huán)
for(let i=0;i<fruits.length;i++){
console.log(fruits[i]);
}
//orange
//apple
//banana
//mango
forEach
fruits.forEach(fruit=>{
console.log(fruit)
})
//orange
//apple
//banana
//mango
但是forEach不能中止或者中途跳出循環(huán)，即不能使用break涮总，continue這些：
fruits.forEach(fruit=>{
break;
})
//Uncaught SyntaxError: Illegal break statement at Array.forEach (native) at <anonymous>:1:8
fruits.forEach(fruit=>{
continue;
})
//Uncaught SyntaxError: Illegal continue statement
for...in
注意：for...in遍歷的是下標(biāo)
for(let index in fruits){
console.log(fruits[index])
}
需要注意的是惰拱，for...in還會(huì)遍歷原型上的屬性淮逊，能夠遍歷可枚舉繼承的屬性
Array.prototype.a=function(){
return this[0];
}
fruits.a="aaa";
for(let index in fruits){
console.log(fruits[index])
}
//orange
//apple
//banana
//mango
//aaa
//function(){return this[0];}
對(duì)于原型繼承的屬性我們有時(shí)候可以用hasOwnProperty()來過濾掉
es6的for...of
for(let fruit of fruits){
console.log(fruit)
}
//orange
//apple
//banana
//mango
- 支持中止循環(huán)即跳出循環(huán)：
for(let fruit of fruits){
if(fruit==='apple'){
break;
}
console.log(fruit)
}
//orange
for(let fruit of fruits){
if(fruit==='apple'){
continue;
}
console.log(fruit)
}
//orange
//banana
//mango
- for...of還可以這樣遍歷：
for(let fruit of fruits.entries()){
console.log(fruit)
}
//[0, "orange"]
//[1, "apple"]
//[2, "banana"]
//[3, "mango"]
for(let [index,fruit] of fruits.entries()){
console.log(`${index}-${fruit}`)
}
//0-orange
//1-apple
//2-banana
//3-mango
- 遍歷字符串
let str="hello";
for(let i of str){
console.log(i);
}
//'h'
//'e'
//'l'
//'l'
//'o'
- 遍歷類數(shù)組
function sum(){
console.log(arguments)
}
sum(1,2,3,4,5)
arguments是一個(gè)類數(shù)組,可以用Array.from轉(zhuǎn)換成真實(shí)數(shù)組或可遍歷對(duì)象袱耽。但是據(jù)說性能不好,我們先用學(xué)到的for...of遍歷:
function sum(){
let total=0;
for(let i of arguments){
total+=i;
}
return total;
}
sum(1,2,3,4,5)//15
- 遍歷Nodelist
補(bǔ)充Array.from() 和 Array.of()
Array.from()
MDN上面對(duì)Array.from()的定義是：
Array.from() 方法從一個(gè)類似數(shù)組或可迭代的對(duì)象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例咒循。
Array.from()返回值是一個(gè)新的 Array据途；
語法
Array.from(arrayLike[, mapFn[, thisArg]])
- 字符串
Array.from("HELLO");
//["H", "E", "L", "L", "O"]
- Set和Map類型
let s = new Set(['foo', window]);
Array.from(s);
// ["foo", window]
let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]
- 類數(shù)組
跟正文最后一個(gè)例子一樣，arguments是一個(gè)類數(shù)組（NodeList也是）叙甸，就可以用Array.from()轉(zhuǎn)成數(shù)組
function sum(){
return Array.form(arguments).reduce((prev,next)=>prev+next
,0)
}
sum(1,2,3)
//6
帶其他參數(shù)
- 自加
Array.from([1,2,3],x=>x+x);
//[2, 4, 6]
- 生成0-100的數(shù)組
Array.from({length: 101}, (v, i) => i);
// [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99颖医，100]
Array.of()
在js中Array(7)生成的是[,,,,,,],Array(1,2,3)生成[1,2,3],但是我們用生成[7]這樣呢？在之前只能用直接量的方法[7]這樣直接寫,而ES6就提供了Array.of()讓我們可以創(chuàng)建一個(gè)具有可變數(shù)量參數(shù)的新數(shù)組實(shí)例裆蒸，而不考慮參數(shù)的數(shù)量或類型便脊。
Array.of(7);//[7]
Array.of(1,2,3)//[1,2,3]
