如何在 JavaScript 中使用結構體？

在本教程中，我們將討論如何在 JavaScript 中使用結構體。

什麼是結構體？結構體是資料結構的簡稱。結構體在一個變數中建立多個不同型別的值。我們可以使用結構體來生成記錄。

JavaScript 中的結構體就是物件的建立。除此之外，JavaScript 本身並不具備結構體特性。

讓我們看看建立結構體的方法。

使用 String split() 方法

讓我們學習如何使用字串分割來建立結構體。

用逗號和空格分隔字串，並將其作為輸入來建立所需結構體的建構函式。現在我們可以訪問此建構函式的物件。

使用者可以按照以下語法來完成此操作。

語法

function createStruct(keys) {
   if (!keys) return null;
   const kArr = keys.split(', ');
   const kCount = kArr.length;
   function createConstructor() {
      for (let i = 0; i < kCount; i++)
         this[kArr[i]] = arguments[i];
   }
   return createConstructor;
}
const keyObj = new createStruct('key1, key2');
const valObj = new keyObj('val1, val2');
valObj.key1;

上述語法根據字串輸入建立一個建構函式。

屬性

  • 鍵 - 鍵是輸入字串。

返回值

建構函式返回一個物件結構。

示例

下面的程式根據字串輸入建立了一個簡單的物件和兩個複雜的物件結構。

第一個複雜的物件結構包含一個數組，第二個複雜的物件結構包含另一個物件。輸出顯示物件結構和物件結構的屬性。

<html>
<body>
   <h2> Working with struct using<i> string split </i> </h2>
   <div id="structOneBtnWrap">
      <button id="structOneBtn"> Click Me </button>
   </div>
   <p id="structOneOut"></p>
   <script>
      var structOneOut = document.getElementById("structOneOut");
      var structOneBtnWrap = document.getElementById("structOneBtnWrap");
      var structOneBtn = document.getElementById("structOneBtn");
      var structOneInpStr = "";
      structOneBtn.onclick = function() {
         structOneInpStr = "";
         
         //structOneBtnWrap.style.display = "none";
         function createStruct(keys) {
            if (!keys)
               return null;
            const kArr = keys.split(', ');
            const kCount = kArr.length;

            function createConstructor() {
               for (let i = 0; i < kCount; i++)
                  this[kArr[i]] = arguments[i];
            }
            return createConstructor;
         }
         const user = new createStruct("id, name");
         const egan = new user(1, 'Egan');
         structOneInpStr += JSON.stringify(egan) + "<br><br>";
         structOneInpStr += "<b>name = </b>" + egan.name + "<br><br>";
         structOneInpStr += "<b>id = </b>" + egan.id + "<br><br><br><br>";
         const userMult = new createStruct("id, name, color");
         const colors = new userMult(1, 'Anna', ['Blue', 'Grey']);
         structOneInpStr += JSON.stringify(colors) + "<br><br>";
         structOneInpStr += "<b>color = </b>" + colors.color + "<br><br>";
         structOneInpStr += "<b>first color = </b>" + colors.color[0] + "<br><br>";
         structOneInpStr += "<b>second color = </b>" + colors.color[1] + "<br><br>";
         structOneInpStr += "<b>id = </b>" + colors.id + "<br><br>";
         structOneInpStr += "<b>name = </b>" + colors.name + "<br><br><br><br>";
         const userData = new createStruct('job, place');
         const moreData = new userData('Handicapper', 'USA');
         const userObj = new createStruct('id, name, info');
         const grace = new userObj(1, 'Grace', moreData);
         structOneInpStr += JSON.stringify(grace) + "<br><br>";
         structOneInpStr += "<b>name = </b>" + grace.name + "<br><br>";
         structOneInpStr += "<b>id = </b>" + grace.id + "<br><br>";
         structOneInpStr += "<b>job = </b>" + grace.info.job + "<br><br>";
         structOneInpStr += "<b>place = </b>" + grace.info.place + "<br><br>";
         structOneOut.innerHTML = structOneInpStr;
      };
   </script>
</body>
</html>

使用 'this' 關鍵字

讓我們學習如何使用 'this' 關鍵字來建立結構體。

使用者可以按照以下語法來完成此操作。

語法

function createStruct(val1, val2){
   this.key1 = val1;
   this.key2 = val2;
}
var objArr = [
   new createStruct(‘val1', 'val2')
];

上述語法使用 'this' 關鍵字建立了一個建構函式。

屬性

  • val1, val2 - 值。

返回值

建構函式返回一個數組結構。

示例

下面的程式使用 'this' 關鍵字根據陣列輸入建立了一個結構體。

<html>
<body>
   <h2> Working with struct using <i> 'this' </i> keyword reference function </h2>
   <div id="structFuncBtnWrap">
      <button id="structFuncBtn"> Click Me </button>
   </div>
   <p id="structFuncOut"></p>
   <script>
      var structFuncOut = document.getElementById("structFuncOut");
      var structFuncBtnWrap = document.getElementById("structFuncBtnWrap");
      var structFuncBtn = document.getElementById("structFuncBtn");
      var structFuncInpStr = "";
      structFuncBtn.onclick = function() {
         structFuncInpStr = "";
         
         //structFuncBtnWrap.style.display = "none";
         function createMovie(rating, review) {
            this.rating = rating;
            this.review = review;
            structFuncInpStr += "Rating = <b>" + this.rating + "</b><br><br>";
            structFuncInpStr += "Review = <b>" + this.review + "</b><br><br>";
         }
         var movieArr = [
            new createMovie('5', 'Great'),
            new createMovie('1', 'Poor')
         ];
         structFuncInpStr += "<b>Struct = </b><br><br>" + JSON.stringify(movieArr);
         structFuncOut.innerHTML = structFuncInpStr;
      };
   </script>
</body>
</html>

本教程教我們如何在 JavaScript 中使用結構體。結構體與 JavaScript 物件相同。第一種方法透過使用字串分割來建立結構體，有點巢狀。第二種方法使用 'this' 關鍵字，實現起來比較簡單。

更新於：2022年11月15日

7000+ 次瀏覽

啟動您的 職業生涯

完成課程獲得認證

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