如何在 JavaScript 中訪問物件陣列的方法？

在本教程中，我們將學習如何在JavaScript中訪問物件陣列的方法。

什麼是物件陣列？物件陣列可以在單個變數中儲存多個值。每個值都有一個數組索引。這些值可以是物件、布林值、函式、數字、字串或另一個數組。

陣列非常靈活，因為它們被列為物件。因此，我們可以輕鬆訪問它。

物件陣列有很多內建方法。一些是 concat、forEach、join、indexOf、splice、sort、slice、lastIndexOf、filter、map、pop、shift、push、unshift、reverse、find、reduce、isArray、length、includes 等。

使用點表示法

在這種方法中，我們可以使用陣列和點表示法訪問物件陣列的方法。

使用者可以按照以下語法使用此方法。

語法

//create an array of objects
const arr = [v1,v2,…vn];
//access the method name
arr.methodName();

在這裡，陣列名稱使用點表示法直接訪問陣列方法。

引數

  • v1,v2,...vn - 陣列元素。

示例

在此程式中，我們使用輸入陣列和點表示法（遵循上面給出的語法）訪問陣列 join 方法。

當用戶點選按鈕時，名為 getArrayMethod 的函式被呼叫，並將輸入陣列的值用 @ 運算子連線起來。

<html>
<body>
   <p> The JavaScript program to access the methods of an array of objects
   using the dot notation </p>
   <div id="arrMethBtnWrap">
      <p> Click on the button </p>
      <button onclick="getArrayMethod();"> Join </button>
   </div>
   <br>
   <pre id="arrMethInp"> </pre>
   <p id="arrMethOut"> </p>
   <script>
      function getArrayMethod(){
         var arrMethObj=["A","B","C"];
         var arrMethInp=document.getElementById("arrMethInp");
         var arrMethOut=document.getElementById("arrMethOut");
         var arrMethBtnWrap=document.getElementById("arrMethBtnWrap");
         arrMethBtnWrap.style.display="none";
         arrMethInp.innerHTML="The input array="+ JSON.stringify(arrMethObj);
         var arrMethJoin = arrMethObj.join("@");
         arrMethOut.innerHTML=`Accessed array join method and combined values
         with @ symbol -> ` + arrMethJoin;
      }
   </script>
</body>
</html>

使用陣列原型方法呼叫函式

在這種方法中，我們可以在 Array.prototype 上使用 function.prototype.call 來訪問物件陣列的方法。

使用者可以按照以下語法使用陣列原型方法。

語法

//create an array of objects
const arr = new Array();
//access method name
Array.prototype.methodName.call(arg);

此處使用陣列原型和 call 函式訪問陣列方法。

引數

  • arg - 物件陣列和任何其他值。

示例

在此程式中，我們使用陣列原型方法呼叫函式（遵循上面給出的語法）訪問陣列 join 方法。

當用戶點選按鈕時，我們呼叫方法 getArrayProtMethod。該方法連線輸入陣列的值，並將字串引數傳遞給 Array.prototype.join.call 函式，並將輸出顯示給使用者。

<html>
<body>
   <p> The JavaScript program to access the methods of an array of objects using the array prototype method call. </p>
   <div id="arrProtBtnWrap">
      <p> Click on the button </p>
      <button onclick="getArrayProtMethod();"> Join </button>
   </div>
   <br>
   <pre id="arrProtInp"> </pre>
   <p id="arrProtOut"> </p>
   <script>
      function getArrayProtMethod(){
         var arrProtObj=["A",["X","Y"],"B"];
         var arrProtInp=document.getElementById("arrProtInp");
         var arrProtOut=document.getElementById("arrProtOut");
         var arrProtBtnWrap=document.getElementById("arrProtBtnWrap");
         arrProtBtnWrap.style.display="none";
         arrProtInp.innerHTML="The input array=" +
         JSON.stringify(arrProtObj);
         function getJoin(x, y, z){
            const arrProtObj=Array.prototype.join.call(arguments);
            arrProtOut.innerHTML=`Accessed array join method and combined the
            input array values with two string arguments using the array
            prototype method call. </b> <br><br>` + arrProtObj;
         }
         getJoin(arrProtObj, "S1", "S2");
      }
   </script>
</body>
</html>

在本教程中，我們介紹了兩種在 JavaScript 中訪問物件陣列的方法。

本文可能幫助您理解了使用陣列和點表示法訪問方法的方法，以及訪問陣列方法的陣列原型函式。

從長遠來看，Array.prototype 方法效果很好。原因是此方法避免了迴圈和其他迭代選項的需要。

更新於： 2022年11月22日

2K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.