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