js中循环方式 some-forEach-every-reduce 对比

js中循环方式 some-forEach-every-reduce 对比

• forEach 循环一旦开始，中途无法停止。

    const arr = ["小红", "小蓝", "小紫", "小黄"];
    arr.forEach((item, index) => {
      if (item === "小蓝") {
        console.log(index);
      }
      console.log(item);
    });

• some 循环在找到对应的项之后，可以通过 return true 固定的语法，终止 some 循环。

    const arr = ["小红", "小蓝", "小紫", "小黄"];
    arr.some((v, i) => {
      if (v === "小蓝") {
        return true;
      }
      console.log(v, i);
    });

• every 当循环的每一项都满足条件时，返回 true ，否则为 false。

    const arr = [
      { id: 2, name: "你", state: true },
      { id: 2, name: "我", state: 0 },
      { id: 2, name: "他", state: true },
    ];
    const result = arr.every((item) => {
        return item.state===true
    });
    console.log(result);

• map 循环返回一个新的 array，数组元素由每一次调用函数产生结果组成。

    const arr = [1, 2, 3, 4, 5, 6];
    const arr1 = arr.map((item) => {
      if (item == 4) {
        return false;
      }
      return item * 10;
    });
    console.log(arr1);

• reduce 循环（购物车案例）

    const arr = [
      { id: 2, name: "你", state: true, price: 30, count: 2 },
      { id: 2, name: "我", state: true, price: 10, count: 4 },
      { id: 2, name: "他", state: false, price: 32, count: 6 },
    ];
    // arr.filter(item=>item.state).reduce((累加的结果，当前循环项)=>{ },初始值)

     const result = arr
      .filter((item) => item.state) //过滤
      .reduce((amt, item) => { //累加计算
        return (amt += item.price * item.count);
      }, 0);
    console.log(result);//100