如何在 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+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.