JavaScript 中的复杂数据类型是什么？

在本教程中，我们将学习 JavaScript 中的复杂数据类型。

JavaScript 有多种内置数据类型，用于以不同的格式存储数据。JavaScript 的数据类型可以分为两组，分别是原始数据类型和非原始数据类型。Number、String、Boolean、Undefined 和 Null 属于原始数据类型，而 Array 和 Object 属于非原始数据类型。typeof 运算符用于识别数据类型。

原始数据类型简单易用。相反，非原始数据类型（Array 和 Object）比原始数据类型相对复杂，因此数组和对象数据类型被称为复杂数据类型。

在本教程中，我们将了解这两种复杂数据类型的功能和用途：

复杂数据类型：数组

在 JavaScript 中，数组用于存储数据集合。它是一个引用类型变量。要创建数组，我们可以使用数组构造函数或数组字面量，即方括号（[]）。数组有多个属性和方法，使数组操作变得简单高效。一些最常用的数组属性和方法有：'length'、'map()'、'filter()'、'at()'、'find()'、'findIndex()'、'join()'、'push()'、'pop()'、'slice()'、'toString()' 等。

语法

const arr = [1, 2, 3, 4, 5]
// OR
const arr2 = new Array(1, 2, 3, 4, 5)

在上面的语法中，我们使用数组字面量和数组构造函数创建了两个数组 'arr' 和 'arr2'。

示例

在下面的示例中，我们使用了 JavaScript 复杂数据类型之一：数组。我们创建了一个包含一些整数的数组。两个按钮与点击事件处理程序函数相关联。'添加' 按钮的点击执行 'add()' 函数，该函数在数组末尾添加一个新元素或数字，类似地，'移除' 按钮执行 'remove()' 函数，该函数从数组中移除最后一个元素。添加到数组的新数字将是最后一个元素的值加 1。我们使用了 'push()' 和 'pop()' 方法来添加新元素并从数组中移除最后一个元素。'length' 属性用于显示数组的长度。

<html>
<body>
   <h2>Using the <i> Array data type </i> of JavaScript</h2>
   <button onclick="add()">Add</button>
   <button onclick="remove()">Remove</button>
   <div 
      style="
         margin-top: 5px;
         padding: 0px 5px;
         background-color: rgb(215, 251, 249);
         border: 1px solid #b2b2b2;
      " 
      class="element item abc xyz"
   >
      <h4 id="array-length"></h4>
      <h4>Array:</h4>
      <p id="array"></p>
   </div>
   <script>
      const array_length = document.getElementById('array-length')
      const array = document.getElementById('array')
      
      // Array
      let arr = [1, 2, 3]
      
      // Initial output
      array_length.innerHTML = 'The length of the Array: ' + arr.length
      array.innerHTML = '[' + arr + ']'
      function add() {
         const lastElement = arr[arr.length - 1]
         
         // Adding new element
         arr.push(lastElement + 1)
         array_length.innerHTML = 'The length of the Array: ' + arr.length
         array.innerHTML = '[' + arr + ']'
      }
      function remove() {
         
         // Removing last element
         arr.pop()
         array_length.innerHTML = 'The length of the Array: ' + arr.length
         array.innerHTML = '[' + arr + ']'
      }
   </script>
</body>
</html>

复杂数据类型：对象

在 JavaScript 中，对象用于存储键值对数据。它是一个引用类型变量。要创建对象，我们可以使用对象构造函数或对象字面量，即花括号（{}）。对象数据的键称为属性，值称为属性值。对象可以有多个属性，我们也可以在其中存储方法。一些内置方法使对象操作变得简单高效，例如：'keys()'、'values()'、'toString()' 等。

语法

const obj = {
   id: 1,
   name: 'Tutorialspoint',
}

// OR
const obj2 = new Object({ id: 1, name: 'Tutorialspoint' })

在上面的语法中，我们使用对象字面量和对象构造函数创建了两个对象 'obj' 和 'obj2'。

示例

在下面的示例中，我们使用了 JavaScript 复杂数据类型之一：对象。首先，我们创建了一个对象并使用了两个输入字段来添加更多对象属性。第一个输入字段用于对象属性名称，第二个用于获取属性值。然后，'添加属性' 按钮的点击事件执行 'addProperty()' 函数，该函数使用输入字段的值向对象添加一个新属性。最后，使用 JSON.stringyfy() 方法将整个对象转换为字符串格式，并在网页上显示该对象。

<html>
<body>
   <h2>Using the <i> Object data type </i> of JavaScript</h2>
   <div>
      <label for="key">Key:</label>
      <input type="text" id="key" />
   </div>
   <div>
      <label for="key">Value:</label>
      <input type="text" id="value" />
   </div>
   <button onclick="addProperty()">Add Property</button>
   <div 
      style="
         margin-top: 5px;
         padding: 5px;
         background-color: rgb(215, 251, 249);
         border: 1px solid #b2b2b2;
      "
   >
      <h4>Object:</h4>
      <p id="root"></p>
   </div>
   <script>
      const root = document.getElementById('root')
      
      // input fields
      const key = document.getElementById('key')
      const value = document.getElementById('value')
      
      // Object
      let obj = {}
      root.innerHTML = JSON.stringify(obj, null, ' ')
      function addProperty() {
         const propertyName = key.value
         const propertyValue = value.value
         
         // Adding new property in the object
         obj[propertyName] = propertyValue
         root.innerHTML = JSON.stringify(obj, null, ' ')
      }
   </script>
</body>
</html>

更新于： 2022年11月15日

2K+ 阅读量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告