Summary about dataset in javascript _ javascript skills

This article introduces the detailed description of dataset in javascript, including the basic usage of dataset, the role of dataset, and basic operations of dataset, if you are interested in javascriptdataset, let's learn it. DataSet is ADO. NET. DataSet can be regarded as a database in memory, and DataSet is an independent data set independent of the database. The so-called independence means that, even if the data link is disconnected or the database is closed, DataSet is still available, and DataSet uses XML internally to describe the data, because XML is a data description language that is platform-independent and language-independent, and can describe data with complex relationships, such as parent-child relationship data, therefore, DataSet can actually accommodate data with complex relationships and is no longer dependent on database links.

1. dataset

1.html 5 custom attributes and basics

In html5, we can use the data-prefix to set the custom attributes we need to store some data. For example, we need to store the corresponding id on a text button:

The Code is as follows:

Test

The data-prefix is called the data attribute. It can be defined by a script, or the css attribute selector can be used to set the style. there is no limit on the quantity. It provides very powerful control when controlling and rendering data.

The following is an example of applying the data attribute to an element:

The Code is as follows:

$18.3

To obtain the value of an attribute, you can use the dataset object as follows:

 var expenseday=document.getElementById('day-meal-expense');  var typeOfDrink=expenseday.dataset.drink;  console.log(typeOfDrink);//tea  console.log(expenseday.dataset.food);//noodle  console.log(expenseday.dataset.meal);//lunch

If the browser supports dataset, the Comment content will pop up. If the browser does not support dataset, an error will be reported and the value of the drink/food/meal attribute cannot be obtained: the object is null or undefined (for example, IE9 ).

Data attributes are basically supported by all browsers, but dataset objects are quite special. Currently, javascript can be used only in Opera 11.1 + and Chrome 9 +, use dataset to access your custom data attributes. for other browsers, FireFox 6 + (not available) and Safari 6 + (not available) will support dataset objects. for IE browsers, it still seems to be a distant trend.

It should be noted that the name of the name with edge character connection needs to be scaled back when used, that is, case-sensitive combination writing, which is similar to the style object of the application element, dom. style. borderColor. for example, if the data attribute data-meal-time exists in the preceding example, we can use expenseday to obtain the corresponding value. dataset. mealTime

2. Why dataset?

If you use the traditional method to obtain the property value, it should be similar to the following:

Var typeOfDrink = document. getElementById ('day-meal-expense '). getAttribute ('data-drink ');
Now, if we want to obtain multiple custom attribute values, we need to use the following N lines of code:

Var attrs = expenseday. attributes, expense = {}, I, j; for (I = 0, j = attrs. length; I
 
  

  
Using the dataset attribute, we do not need to get the value you want in any loop at all, so we can directly kill the second:
  
Expense = document. getElementById ('day-meal-expense'). dataset;
Dataset is not a typical JavaScript Object, but a DOMStringMap object. DOMStringMap is a new interactive variable containing multiple name-value pairs in html5.
  
3. dataset operations
  
You can perform the following operations on the name-Value Pair:
  

  
charInput=[];  for(var item in expenseday){    charInput.push(expenseday[item]);  }
  

  
The above several thousand generations of codes are used to add all custom attributes to an array.
  
If you want to delete a data attribute, you can do this:
  

  
delete expenseday.dataset.meal;  console.log(expenseday.dataset.meal)//undefined
  

  
If you want to add an attribute to an element, you can do this:

  

  
expenseday.dataset.dessert='icecream';  console.log(expenseday.dataset.dessert);//icecream
  

  
4. speed compared with getAttribute
  
Using dataset to operate data is a little slower than using getAttribute.
  
However, if we only process a small amount of data, the difference in speed will have basically no impact. instead, we should see that using dataset to operate adaptive attributes is much less troublesome and more readable than other forms similar to getAttribute. therefore, in terms of trade-offs, dataset operations are selected for custom properties.
  
5. Where to use dataset
  
Every time you use custom data attributes, using dataset to obtain the name-value pair is a good choice. considering that many browsers still treat dataset as an unfamiliar alien creature, it is necessary to perform Feature Detection in actual use to see if dataset is supported, similar to the following:
  

  
if(expenseday.dataset){    expenseday.dataset.dessert='icecream';  }else{    expenseday.setAttribute('data-dessert','icecream');  }
  

  
NOTE: If your application updates data attributes frequently, we recommend that you use JavaScript objects for data management instead of updating data attributes each time.
  
2. Assignment of literal values and assignment of array values
  

  
var a=1,b=2;var c=[a,b];console.log(c);//[1,2]var b=3;console.log(c);//[1,2]var c=[a,b];console.log(c);//[1,3]
  

  
Given to a, the values of B are numbers, and c is an array composed of a and B. Because the values of a and B are 1 and 2, var c = [, b] is equal to var c = [1, 2]. Then, how to change the values of a and B is irrelevant to c = [1, 2.
  
The above is a summary of dataset in javascript, and I hope it will help you learn it.