JS中数组遍历方法

标签：筛选   字符   class   return   渲染   log   返回   过滤   als   

forEach()

• 书写格式：
• 特点：普通遍历。对返回值没有任何要求。

let arr = [1, 3, 4, 7, 2, 9, 5, 6, 8, 10];
let r1=arr.forEach(v=>{
       console.log("每一次迭代：",v);
       return 1;
});
console.log("迭代完成后的返回值：",r1);//不论return后是什么都是undefined，说明返回值对他没有任何影响

map()

• 书写格式：
• 特点：映射，专业键值对。通过返回值将原数组映射为一个新数组
• 常用：map().join()

let arr = [1, 3, 4, 7, 2, 9, 5, 6, 8, 10];
let r2 = arr.map(v => {
       console.log("每一次迭代：", v);
       //对比
       return 1;    //返回一个新数组，元素值全部为1
       return 1 + v;    //返回一个新数组，元素值为遍历出的每个元素加1
       return `<li>${v}<li>`;//可通过map().join("")无缝拼接，得到一个字符串，使用innerHTML渲染即可
    });
console.log("迭代完成后的返回值：", r2);

filter()

• 书写格式：
• 特点：过滤，以数组形式返回满足条件（判断结果为true）的值。如果都不满足，则返回一个空数组。

let arr = [1, 3, 4, 7, 2, 9, 5, 6, 8, 10];
let r3 = arr.filter(v => {
console.log("每一次迭代：", v);
     return 0;//false  写死了返回结果，每一个都不满足，返回空数组
     return 1;//true   每一个都满足，返回一个存放所有元素的新数组
     return v>7;//[8,9,10]  根据return的对比结果来进行筛选，将结果为true的元素返回为一个新数组
 });
console.log("迭代完成后的返回值：", r3);

some()

• 书写格式：
• 功能：判断。
• 特点：有一个满足，就返回true并停止遍历。都不满足才返回false。

let arr = [1, 3, 4, 7, 2, 9, 5, 6, 8, 10];
let r4 = arr.some(v => {
    console.log("每一次迭代：", v);
    //对比
    return 1;//true 只遍历一次，因为return被写死，1就是true，代表找到了满足要求的数据，既然找到了，就不会继续遍历了
    return v>7;//返回9，遍历结束后的返回值为true（有一个满足就返回true）
});
console.log("迭代完成后的返回值：", r4);

every()

• 与some方法对比学习。

• 书写格式：
• 功能：判断

• 特点：数组中的每一个元素都满足条件才返回true。有一个不满足，就返回false并停止寻找。

let arr = [1, 3, 4, 7, 2, 9, 5, 6, 8, 10];
let r5 = arr.every(v => {
     console.log("每一次迭代：", v);
     //对比
     return 1;//true
     return 0;//false  找到第一个不满足的就返回false,不会继续往下执行
     return v<7;//遍历到7
});
console.log("迭代完成后的返回值：", r5);

reduce()

• 书写格式：
• 功能：迭代更新
• 特点：有原始值。能够通过return拿到上一次的计算结果。

let arr = [1, 3, 4, 7, 2, 9, 5, 6, 8, 10];
let r6 = arr.reduce((pre,cur) => {
    console.log("每一次迭代：", pre,cur);
    return pre+cur;//返回值会作为下一次的pre，与cur进行运算,迭代更新
},0);
console.log("迭代完成后的返回值：", r6);

JS中数组遍历方法

标签：筛选   字符   class   return   渲染   log   返回   过滤   als   

原文地址：https://www.cnblogs.com/Lotus3904/p/12380406.html