Home>

This article introduces the detailed problem of dataset in JavaScript.Including basic usage of dataset,The role of using datasets and the basic operations of datasets and other related issues,Friends who are interested in javascript dataset problems learn together

dataset is the central concept of ado.net.Think of datasets as databases in memory,A dataset is an independent collection of data that does not depend on a database.So-called independence,That is, even if the data link is disconnected,Or close the database,The dataset is still available,The dataset uses xml to describe data internally.Since xml is a platform-independent and language-independent data description language,And data that can describe complex relationships,Such as parent-child relationship data,So datasets can actually hold data with complex relationships,And no longer rely on database links.

I. About dataset

1.html5 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 want to store the corresponding id on a text button:

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

The data- prefix here is called the data attribute, which can be defined by a script.You can also apply CSS property selector for style setting.Unlimited number,Provides very powerful controls when controlling and rendering data.

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

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

To get the value of a property,You can use dataset objects like this:

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 annotation content will pop up,If the browser does not support dataset, an error will be reported.Unable to get the value of attribute drink/food/meal:the object is null or undefined (like ie9 version).

The data property is basically supported by all browsers.But the dataset object supports something special,Currently only in Opera 11.1+, chrome 9+, you can access your custom data attributes through dataset using JavaScript. As for other browsers,Firefox 6+ (not shown) and safari 6+ (not shown) will support dataset objects.As for the Internet Explorer, it seems that it is still a distant trend.

It should be noted that the name with a border character connection needs to be named hump when using it.I.e. a combination of upper and lower case,This is similar to the style object of the application element,dom.style.bordercolor. For example, in the above example, there are the following data attributes, data-meal-time, then we can get the corresponding value using:expenseday.dataset.mealtime

2.Why use dataset

If you use the traditional method to get the attribute value, it should look like the following:

var typeofdrink=document.getelementbyid ("day-meal-expense"). getattribute ("data-drink");

Now if we want to get multiple custom attribute values,It will be implemented with the following n lines of code:

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 property, we don't need any loop to get the value i want,Direct spike:

expense=document.getelementbyid ("day-meal-expense"). dataset;

The dataset is not a typical javascript object, but a domstringmap object.Domstringmap is a new interactive variable with multiple name-value pairs in HTML5.

3.dataset operation

You can manipulate name-value pairs like this:

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

The function of the above thousands of codes is to get all the custom attributes into an array.

If i want to delete a data attribute, you can do this:

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

If i want to add an attribute to an element,This can be done:

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

4. Speed ​​compared to getattribute

Manipulating data with a dataset is slightly slower than using getattribute.

However, if we only process a small amount of data, the impact of this speed difference is basically not there.Instead, we should see thatThe use of datasets to manipulate adaptive attributes is much less troublesome than other forms like getattribute.And more readable.So, looking at the trade-off,Manipulate custom attributes,The dataset operation is selected above.

5. Where to use dataset

Every time you use a custom data attribute,Using datasets to get name-value pairs is a good choice.Considering that many browsers still treat datasets as unknown alien creatures,So, in actual use,It is necessary to perform feature detection.See if it supports datasets, similar to the following use:

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

Note:If your application frequently updates the data property, it is recommended to use javascript objects for data management.Instead of updating each time via the data property.

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]

The values ​​assigned to a and b above are all numbers,c is an array of a and b,Since the values ​​of a and b are 1 and 2, var c=[a, b] is equal to var c=[1,2];how to change the values ​​of a and b after that has nothing to do with c=[1,2] Already.

  • Previous MySQL subquery and related optimization learning tutorial
  • Next js pop up dialog box summary