資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究JavaScript 中的複雜資料型別是什麼？
在本教程中，我們將學習 JavaScript 中的複雜資料型別。
JavaScript 具有多種內建資料型別，用於以不同的格式儲存資料。JavaScript 的資料型別可以分為兩組，分別是原始資料型別和非原始資料型別。數字、字串、布林值、未定義和空值是原始資料型別的一部分，而陣列和物件是非原始資料型別的一部分。typeof 運算子用於識別資料型別。
原始資料型別簡單易用。相反，非原始資料型別（陣列和物件）比原始資料型別相對複雜，因此陣列和物件資料型別被稱為複雜資料型別。
在本教程中，我們將瞭解這兩種複雜資料型別的功能和用途：
複雜資料型別：陣列
在 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()' 函式，該函式從陣列中刪除最後一個元素。新增到陣列的新數字將是最後一個元素的值加一。我們使用了 '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.stringify() 方法將整個物件轉換為字串格式，並在網頁上顯示物件。
<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>
2K+ 瀏覽量
