Summary of questions on javascript dataset

DataSet is the central concept of ES2en.NET. Think of DataSet as an in-memory database; DataSet is a separate set of data that is not database dependent. So-called independent, that is to say, even if the disconnected data link, or close the database, DataSet is still available, DataSet XML internally is used to describe the data, because the XML is one kind has nothing to do with the platform, has nothing to do with the language data description language, and can describe the complex relationship of data, such as parent-child relationships of data, so actually DataSet can accommodate with complex relation of data, and no longer dependent on the database link.

1. About dataset

1.html5 custom properties and foundations

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

<a href="javascript:;" data-id="2312"> test </a>

The data- prefix here is referred to as the data attribute, which can be defined by a script or can be styled by applying the css attribute selector. There is no limit to the amount of data, which provides very powerful control over how data is controlled and rendered.

Here is an example of an element applying the data attribute:

<div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div>

To get the value of an attribute, 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 will pop up, and if the browser does not support dataset, an error will be reported and the value of the property drink/food/meal cannot be obtained: the object is null or undefined (as in IE9).

The data attribute is supported by almost all browsers, but the dataset object support is quite special. Currently, javascript is only available under Opera 11.1+,Chrome 9+, and you can use dataset to access your custom data attribute. As for the other browsers,FireFox 6+(not out) and Safari 6+(not out) will support dataset objects, while IE is still a long way off.

It is important to note that the names of the sideband concatenated characters need to be named camel case when used, which is similar to the style object to which the element is applied, dom.style.borderColor. For example, the example above has the following data attribute, ES69en-ES70en-ES71en, then we can get the corresponding value by using: ES72en.dataset.mealTime

2. Why dataset

If you used the traditional method to get the property value, it would look something like this:

var typeOfDrink=document.getElementById('day-meal-expense').getAttribute('data-drink');
Now, if we want to get more than one custom attribute value, we do it with the following N line:

var attrs=expenseday.attributes, expense={},i,j;
for (i=0,j=attrs.length;i<j;i++){
  if(attrs[i].name.substring(0,5)=='data-'){
    expense[attrs[i].name.substring(5)]=attrs[i].value;
  }
}

With the dataset attribute, we don't need any loops at all to get the value you want, just seckill:

expense=document.getElementById('day-meal-expense').dataset;
dataset is not a typical JavaScript object, but an DOMStringMap object. DOMStringMap is a new type of HTML51 interactive variable that contains multiple name-value pairs.

3. dataset operation

You can manipulate name-value pairs as follows:

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

The purpose of this few thousand lines of code is to squeeze all the custom properties into an array.

If you want to delete an data attribute, do this:

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

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

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

4. Speed compared to getAttribute

Operating data is slightly slower with dataset than with getAttribute.

However, if we were dealing with only a small amount of data data, the impact of this speed difference would be virtually non-existent. Instead, you should see that using dataset to operate on adaptive attributes is much less painful and more readable than other forms like getAttribute. So, in terms of trade-offs, the dataset operation is selected.

5. Where is dataset used

Every time you use the custom data attribute, it's a good idea to use dataset to get name-value pairs. Considering that many browsers still treat dataset as an alien creature they do not know, it is necessary to conduct 1 feature check to see whether dataset is supported in actual use, similar to the following usage:

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

Note: If your application updates the data property frequently, it is recommended to use the JavaScript object for data management, rather than updating every time via the data property.

2. About literal assignment, array assignment

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]

var =[a,b] = es15160en =[1,2]; b =[1,2]; var =[a,b]; var =[1,2]. Then how the values of a and b change is irrelevant to c=[1,2].

The above content is about javascript dataset questions summary, hope to help you learn.