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