JS 常见的几种对数据的值循环遍历

1. for

// 语法 结构 
for (语句 1; 语句 2; 语句 3) { 
  循环 执行的代码块...
}

//举例1
var arr = [1,2,3,4,5]
for (let i=0; i<arr.length; i++) {
  console.log(i)
}
//输出  1,2,3,4,5,

2. map

注意事项：
1. 只能遍历 Array对象
2. 它有返回值（它返回一个新的数组），新数组中的元素 为 原始数组元素 在回调函数内处理后的值。
3. 不会对空数组进行检测。
4. 当数组中的值为基本数据类型时不会改变原始数组（当数组内的元素为对象会被改变）

// 语法结构
array.map(function(currentValue,index,arr), thisValue)

// 例子1
const arr = [1,2,3];
const arr1 = arr.map((item, index, arr) =>{
    item = item + 10;
    return item;
})
console.log('arr1 =>', JSON.parse(JSON.stringify(arr1))) // 新数组
console.log('arr =>', JSON.parse(JSON.stringify(arr))) // 原数组
 
 
// 输出：arr1 => [11, 12, 13]
// 输出：arr2 => [1, 2, 3]

// 例子2
const arr = [{
    id: 1,
    name: '张三',
},{
    id: 2,
    name: '李四',
}];
const newArr = arr.map((item, index, arr) =>{
    return item.name;
})
 
/*
newArr 格式如下：
[
    '张三',
    '李四'
]
*/

3. forEach

forEach : 负责遍历可迭代对象
注意事项：
1. 对于空数组是不会执行回调函数的。
2. 想要跳出循环 可以使用 try/catch。  
3. 不建议修改正在遍历的可迭代对象内的元素值，避免出现低级错误。

// 语法结构
array.forEach(function(currentValue, index, arr), thisValue)

//  例子
try{
    const arr = [1,2,3,4];
    arr.forEach((item,index,arr) => {
        console.log('item =>', item)
        if(item == 2){
            throw new Error('11') // 抛出异常
        }
    })
}catch(e){
    if (e.message !== "11") throw e;
}
console.log('啊啊啊啊')

// 输出：item => 1
// 输出：item => 2
// 输出：啊啊啊啊

4. while

while 循环只要指定条件结果为 true，循环就可以一直执行代码块
别忘记更新变量的值，否则循环永远不会结束！
// 语法结构
while (条件){
    需要执行的代码
}

//举例1
const arr = ['1','2','3','4'];
let i = 0;
while(arr[i]){
    console.log(arr[i])
    i = i + 1;
}

5. for … in

// 语法结构  不建议遍历数组，因为循环顺序有可能不是按照实际数组的内部顺序
for(let 成员 in 对象){
    循环的代码块
}
// 例子
const json = {
    name: '张三',
    sex: '男',
    age: '18',
};
for(let item in json){
    console.log('item =>', item , json[item])
}
// 输出：item => name 张三
// 输出：item => sex 男
// 输出：item => age 8

6. every

every跟some不同点在于，every要判断数组中是否每个元素都满足条件，只有都满足条件才返回true；只要有一个不满足就返回false；
//举例1
let arr = [1, 2, 3, 4, 5];
let flag = arr.every(item => item < 6);
console.log(flag); //输出结果true

//举例2
 let arr = [1, 2, 3, 4, 5];
let flag = arr.every(item => item < 5);
console.log(flag); //输出结果false

7. some 新手很少用，但是很好用

简介：
some() 方法用于检测数组中的元素是否满足指定条件，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。
some : 一般使用场景大多都是用在：判断一个字段是否存在在某个数组中
如果一个数组量很大的数组需要进行判断某个值是否存在时，他比foe map 等循环好一些，因为她匹配到就会跳出，这样就不需要每个都遍历一遍，节省资源的占用。
注意事项：
1.some() 不会对空数组进行检测。
2.some() 不会改变原始数组。
//举例1
let arr = [1, 2, 3, 4, 5];
let flag = arr.some(item => {
    if (item == 0) {
        return item;
    }
});
console.log(flag); //输出结果false

//举例2 
let arr = [1, 2, 3, 4, 5];
let flag = arr.some(item => {
    if (item == 1) {
        return item;
    }
});
console.log(flag); //输出结果true