Summary of problems with dataset in javascript_javascript skills

DataSet is the central concept of ADO.NET. You can think of DataSet as an in-memory database. DataSet is an independent data collection that does not depend on the database. The so-called independence means that even if the data link is disconnected or the database is closed, the DataSet is still available. The DataSet internally uses XML to describe the data, because XML is a platform-independent and language-independent data description language. , and can describe data with complex relationships, such as parent-child relationship data, so DataSet can actually accommodate data with complex relationships and no longer relies on database links.

1. 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:

Copy code The code is as follows:

ca1f262ce84840cb5120f8a46b250e53Test5db79b134e9f6b82c0b36e0489ee08ed

The data- prefix here is called the data attribute, which can be defined through scripts or can be styled using css attribute selectors. The number is not limited and provides a very powerful tool when controlling and rendering data. Control.

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

Copy code The code is as follows:

953e0631f2d2ea36ee29783193882c3a$18.316b28748ea4df4d9c2150843fecfba68

To get the value of a certain 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 attribute drink/food/meal cannot be obtained: the object is null or undefined (such as IE9 version).

The data attribute is basically supported by all browsers, but the dataset object supports it in a special way. Currently, you can only use dataset to access your customized data attribute through javascript under Opera 11.1 and Chrome 9. As for Other browsers, FireFox 6 (not yet released) and Safari 6 (not yet released) will support the dataset object. As for IE browser, it seems that this trend is still far away.

It should be noted that the name of the connection with border characters needs to be camel-cased when used, that is, written in 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. If we want to get the corresponding value, we can use: expenseday.dataset.mealTime

2. Why use dataset

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

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

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 loop at all to get the value you want, just kill it directly:

expense=document.getElementById('day-meal-expense').dataset;
Dataset is not a JavaScript object in the typical sense, but a DOMStringMap object. DOMStringMap is a new interactive variable in HTML5 that contains multiple name-value pairs.

3.dataset operations

Name-value pairs can be manipulated as follows:

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

The function of the above few thousand codes is to stuff all the custom attributes into 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 slightly slower than using getAttribute.

However, if we only process a small amount of data, the impact of this difference in speed is basically nonexistent. Instead, we should see that using dataset to operate adaptive attributes is faster than other forms like getAttribute. It has a lot less headaches and is more readable. Therefore, on balance, when operating custom attributes, dataset operations are the best choice.

5. Where to use dataset

Every time you use a custom data attribute, it is a good choice to use dataset to obtain name-value pairs. Considering that many browsers still treat datasets as unknown alien creatures, so, in In actual use, it is necessary to perform feature detection to see if the dataset is supported, similar to the following usage:

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

注意:如果你的应用程序会频繁更新data属性,建议使用JavaScript对象进行数据管理,而不是每次都经由data属性进行更新.

二.关于字面量赋值,数组赋值

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]

上面赋给a,b的值都是数字,c是由a和b组成的数组,由于a,b的值就是1和2,所以var c=[a,b]就等于var c=[1,2];之后a和b的值再怎么改变变与c=[1,2]无关了.

以上内容是关于javascript中dataset的问题小结，希望对大家学习有所帮助。