const fruits=['orange','apple','banana','mango'];
for循环
for(let i=0;iforEach
fruits.forEach(fruit=>{
console.log(fruit)
})
//orange
//apple
//banana
//mango
但是forEach不能中止或者中途跳出循环，即不能使用break，continue这些：
fruits.forEach(fruit=>{
break;
})
//Uncaught SyntaxError: Illegal break statement at Array.forEach (native) at :1:8
fruits.forEach(fruit=>{
continue;
})
//Uncaught SyntaxError: Illegal continue statement
for...in
注意：for...in遍历的是下标
for(let index in fruits){
console.log(fruits[index])
}
需要注意的是，for...in还会遍历原型上的属性，能够遍历可枚举继承的属性
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];}
对于原型继承的属性我们有时候可以用hasOwnProperty()来过滤掉
es6的for...of
for(let fruit of fruits){
console.log(fruit)
}
//orange
//apple
//banana
//mango
- 支持中止循环即跳出循环：
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'
- 遍历类数组
function sum(){
console.log(arguments)
}
sum(1,2,3,4,5)
arguments是一个类数组,可以用Array.from转换成真实数组或可遍历对象。但是据说性能不好,我们先用学到的for...of遍历:
function sum(){
let total=0;
for(let i of arguments){
total+=i;
}
return total;
}
sum(1,2,3,4,5)//15
- 遍历Nodelist
补充Array.from() 和 Array.of()
Array.from()
MDN上面对Array.from()的定义是：
Array.from() 方法从一个类似数组或可迭代的对象中创建一个新的数组实例。
Array.from()返回值是一个新的 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]]
- 类数组
跟正文最后一个例子一样，arguments是一个类数组（NodeList也是），就可以用Array.from()转成数组
function sum(){
return Array.form(arguments).reduce((prev,next)=>prev+next
,0)
}
sum(1,2,3)
//6
带其他参数
- 自加
Array.from([1,2,3],x=>x+x);
//[2, 4, 6]
- 生成0-100的数组
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()让我们可以创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
Array.of(7);//[7]
Array.of(1,2,3)//[1,2,3]
参考：
for...in MDN
for...of MDN