如何在 JavaScript 对象中只乘以特定值?


能够仅在 JavaScript 对象中乘以特定值可以是执行计算或修改数据的有用工具。

通过使用 map() 和 reduce() 方法,您可以快速遍历整个对象并对满足特定条件的任何值进行更改。本文将概述此过程的工作原理,并提供一些如何在实践中使用它的示例。

JavaScript 中的对象是一个独立的实体,具有属性和类型。

示例

在以下示例中,我们正在运行脚本,在脚本中我们声明了一个数组,稍后将数据值乘以 3 并将其收集为结果。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      let someArray = [{"car":"BMW", "value":34 }, {"car":"BENZ", "value":80 },{"car":"AUDi", "value":75}]
      let result = someArray.map(data=>{
         return {...data, value: data.value*3}
      })
      document.getElementById("tutorial").innerHTML= JSON.stringify(result);
   </script>
</body>
</html>

当脚本执行时,它将生成一个输出,其中包含在网页上打印的数组,该数组是从原始数组乘以 3 得到的,该事件在用户执行触发脚本的事件时发生。

示例

考虑以下示例,我们将在其中使用 Object.values 后跟 Array#map。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <script>
      let fundata = {
         'arr1': {
            a: [2,3],
            b: []
         },
         'arr2': {
            a: [5,6],
            b: []
         }
      };
      let multiplier = 50;
      Object.values(fundata).forEach(item => {
         item.a = item.a.map(number => number * multiplier);
      });
      document.getElementById("tutorial").innerHTML= JSON.stringify(fundata);
   </script>
</body>
</html>

运行以上脚本后,网页浏览器将显示事件,显示一个包含已更改值的数组,该数组在用户运行脚本时发生,将实际数组乘以 50。

示例

让我们看另一个示例,在其中我们使用Array.map 将值直接返回到新数组,然后我们将使用Array.reduce 获取值的总和。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <p id="tutorial1"></p>
   <script>
      var array = [
         { x: 10, y: 30 },
         { x: 20, y: 90 },
         { x: 54, y: 32 }
      ];
      var areas = array.map( arr => arr.x * arr.y);
      var total = areas.reduce( (a,b) => (a+b) );
      document.getElementById("tutorial").innerHTML= JSON.stringify(areas);
      document.getElementById("tutorial1").innerHTML=JSON.stringify(total);
   </script>
</body>
</html>

当脚本执行时,它将生成一个输出,其中包含一个新数组以及通过添加所有内容获得的值。新数组是通过将给定的数组对象彼此相乘并给出事件触发时发生的结果而获得的。

示例

执行以下脚本以查看如何乘以对象值。

<!DOCTYPE html>
<html>
<body>
   <p id="tutorial"></p>
   <p id="tutorial1"></p>
   <p id="tutorial2"></p>
   <p id="tutorial3"></p>
   <script>
      var employee =
      [
         { name: "John", amount: 800 },
         { name: "David", amount: 500 },
         { name: "Bob", amount: 450 }
      ]
      document.getElementById("tutorial").innerHTML= ("Before multiplying the result=")
      document.getElementById("tutorial1").innerHTML= JSON.stringify(employee)
      for (var index = 0; index < employee.length; index++) {
         if (employee[index].amount > 500) {
            employee[index].amount = employee[index].amount * 2;
         }
      }
      document.getElementById("tutorial2").innerHTML= ("After multiplying the result=")
      document.getElementById("tutorial3").innerHTML=JSON.stringify(employee);
   </script>
</body>
</html>

当脚本执行时,它将生成一个输出,其中包含原始数组和网页上的已乘数组。已乘数组是在实际数组对象乘以 2 时发生的,作为用户执行脚本时触发的事件。

更新于: 2023年1月18日

1K+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告