原生JS--数组循环总结

（一）数组循环

1.for循环

 let arr = [11,22,33,44,55];

for(let i = 0;i<arr.length;i++){
    arr[i] = arr[i] *2;
}
console.log(arr)

　　优化版for循环

使用变量，将长度保存起来，当数组长度很大时，优化效果明显

let arr = [11,22,33,44,55];
for(let i = 0;let len = arr.length,i<len;i++){
    arr[i] = arr[i] *2;
}
console.log(arr)

2.forEach

优点：ES5推出的，数组自带，一般用来代替for

缺点：不可以使用break语句中断循环

　　　不可用return语句返回到外层函数

　　　没有返回值

　　　不可以改变原数组性能没有for高有兼容性

arr.forEach(function(value,index,array){
　　console.log('forEach遍历:'+i+'--'+value);
})

使用方法：

3.map遍历

　　用法与forEach基本相同，不同的是可以return返回值，但并不改变数组

　　一般用来，修改数组的值从而映射出一个新数组。

let arr = [1, 2, 3, 4, 5];
let arrs = arr.map((value, index, array) => {
    return value * 2;
});
console.log(arrs); //[2, 4, 6, 8, 10]

　　4.filter:过滤

一般用来过滤一个数组，不改变原来的数组

 let arr = [1, 2, 3, 4, 5];
let arrs = arr.filter((value, index, array) => {　
　if (value > 2) {
  return true;　　} else {
   return false;
　　}
});
console.log(arrs); //[3, 4, 5]

5.for..of

　　ES6新功能

　　可以正确响应break、continue和return语句

　　可以获得到键值，一般我们用他来循环数组

　　支持字符串遍历，支持大多数数字对象，例如DOM NodeList对象

for (let i of arr) {
  console.log(i);  // 11, 22, 33, 44, 55
}

（二）for..in与for...of

for...in是为便利对象而设计的，不适用于遍历数组

遍历数组时，我们推荐使用for...of

for...in遍历数组的缺点：数组的下标index值是数字，而for...in遍历的index值（下标）的数据类型是字符串

for...in...循环值遍历可枚举属性。像Array和Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性，例如String的indexOf（）方法或Object的toString（）方法。循环将边路对象本身的所有可枚举属性，以及对象从其构造函数原型中继承的属性（更为接近原型链中对象的属性覆盖原型属性）

数组索引只是具有整数名称的枚举属性，并且与通用对象属性相同。不能保证for..in将以任何特定的顺序返回索引。for...in循环语句将返回所有可枚举属性，包括非整数类型的名称和继承的那些。

for...in 语句以原始插入顺序迭代对象的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。

使用hasOwnProperty() 来检查，如果找到的枚举属性是对象自己的（不是继承的）。如果是，该属性被记录。记录的属性是0, 1, 2和foo，因为它们是自身的属性（不是继承的）。属性arrCustom和objCustom不会被记录，因为它们是继承的。

该循环迭代并记录iterable作为可迭代对象定义的迭代值，这些是数组元素 3, 5, 7，而不是任何对象的属性。