JavaScript dataset是一種HTML5中引入的新特性，它允許我們?yōu)镠TML元素添加自定義屬性，這些自定義屬性可以在JavaScript代碼中使用。這給我們帶來(lái)了很多靈活性和便利性，接下來(lái)我們就來(lái)詳細(xì)講解一下JavaScript dataset。

我們可以使用任意名稱添加數(shù)據(jù)屬性，但是要以data-開(kāi)頭，如下所示：

<div data-color="red"></div>

然后我們可以使用dataset對(duì)象來(lái)訪問(wèn)這些數(shù)據(jù)屬性，代碼如下：

var myDiv = document.querySelector('div');
var color = myDiv.dataset.color;
console.log(color); // "red"

如果屬性名中包含多個(gè)單詞，應(yīng)該使用駝峰命名法。例如，一個(gè)data-employee-name屬性可以通過(guò)myDiv.dataset.employeeName屬性來(lái)訪問(wèn)，如下所示：

<div data-employee-name="John Doe"></div>

var myDiv = document.querySelector('div');
var employeeName = myDiv.dataset.employeeName;
console.log(employeeName); // "John Doe"

我們也可以使用 JavaScript dataset 來(lái)修改數(shù)據(jù)屬性。例如，我們可以將 myDiv 元素的 data-color 屬性更改為 "blue"：

myDiv.dataset.color = "blue";
console.log(myDiv.dataset.color); // "blue"

在某些情況下，我們需要在JavaScript代碼中動(dòng)態(tài)地創(chuàng)建數(shù)據(jù)屬性。我們可以在元素上使用setAttribute方法來(lái)添加一個(gè)新的屬性值，如下所示：

myDiv.setAttribute('data-size', 'large');
console.log(myDiv.dataset.size); // "large"

有時(shí)我們需要將JavaScript dataset屬性值轉(zhuǎn)換為數(shù)字。根據(jù)運(yùn)算符，getAttribute方法將返回字符串或數(shù)字。 如果值包含整數(shù)，則可以將其轉(zhuǎn)換為數(shù)字，如下所示：

<div data-price="50"></div>

var myDiv = document.querySelector('div');
var price = parseInt(myDiv.getAttribute('data-price'));
console.log(price); // 50

在JavaScript dataset中，我們可以使用任何類型的值作為屬性的值，包括字符串、數(shù)字、布爾值和對(duì)象。我們可以使用JSON.stringify和JSON.parse方法將對(duì)象轉(zhuǎn)換為字符串和反轉(zhuǎn)換，如下所示：

<div data-person='{"name": "John Doe", "age": 35}'></div>

var myDiv = document.querySelector('div');
var person = JSON.parse(myDiv.dataset.person);
console.log(person); // {name: "John Doe", age: 35}

小結(jié)：JavaScript dataset不僅可以方便地在HTML上添加自定義屬性，而且這些自定義屬性可以在JavaScript代碼中使用。我們可以使用dataset對(duì)象訪問(wèn)和修改這些屬性，而且也可以在運(yùn)行時(shí)動(dòng)態(tài)地創(chuàng)建這些屬性。 JavaScript dataset屬性也允許我們使用任何類型的值作為屬性的值，包括字符串、數(shù)字、布爾值和對(duì)象。這種非常有用的特性在開(kāi)發(fā)Web應(yīng)用程序時(shí)給我們提供了很多便利性。