如何在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.