Analysis of new data type instances of ES6 learning notes

Time:2020-3-31

An example of this paper describes the new data types of ES6 learning notes. To share with you for your reference, as follows:

1. Data deconstruction assignment

1. Deconstruction and assignment of arrays

Basic usage: let [key1, key2…] = [value1, Value2…]

Let [name, age, sex] = ['xiaoming ', 24,' male '];
console.log(name);
console.log(age);
console.log(sex);

Note that the left and right key and value formats should match. The key value can be defaulted, but the comma position should be correct


let [arr1,,[arr3,,[,arr6]]]=[1,2,[31,32,[331,332]]];
console.log(arr1);
console.log(arr3);
console.log(arr6);

2. Deconstruction and assignment of objects

Usage: let {key1, key2…} = {key1: value1, key2: Value2…}

Let obj = {Name: 'Xiaoming', age: 24, sex: 'male', friend: ['Xiaozhang', 'Xiaoli']};
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);
console.log(obj.friend);

3. String type

Each character in the string corresponds to an array key

Let [a, B, C] = "this is a string";
console.log(a);
console.log(b);
console.log(c);

2. New data type set set set

The difference between set and array is that there can be no duplicate data in set, which is often used for de duplication operation

1. Create set


let myset=new Set(['data1','data2','data3','data3']);

2. Attribute size: number of elements in the set


console.log(myset.size);

3, method

Myset. Add ('data4 '); // add element
Myset. Delete ('data2 '); // delete element
Console. Log (myset. Has ('data1 ')); // judge whether there is an element, and return true if there is one
Myset. Clear(); // clear all elements of the collection
Console. Log (myset. Keys()); // returns all key values of the collection
Console. Log (myset. Values()); // returns all values of the collection

3. New data type map

Because the key value of an object can only be a string, not an object type, using an object as the key value will be converted by toString to the string “[object object]”. For example:

let obj1={key:1},obj2={key:2},obj={};
obj.value='objValue';
Obj [obj 1] = = obj 1value '; // use obj 1 as the key value of obj
obj[obj2]='obj2Value';
console.log(obj);

Output: object {value: ‘objectvalue’, ‘[object object]’: ‘object2value’}. Since it is converted to the same key value string, object2 will overwrite object1

Map can avoid the restriction that the key value must be a string, and its key value can be an object, an array, etc

1. Create map


let mymap=new Map([
    ['stringKey','stringValue'],
    ['age',24],
    [obj1,'obj1Value'],
    [obj2,'obj2Value'],
    [['arr'],'arrValue']
]);

Print mymap as follows:

2. Attribute size: returns the number of key value pairs in the map


console.log(mymap.size);

3, method

Mymap. Set ('key ','value'); // set the key and value of map
Mymap. Get ('key '); // get value by key
Mymap. Delete ('key '); // delete the corresponding key value
Mymap. Has ('key '); // judge whether it contains
//Mymap. Clear(); // clear all key values in the map
// traversal
mymap.forEach(function (value,key) {
  console.log(key+":"+value);
})

4. Note that {} and {} are two different key values


mymap.set({},"obj1");
mymap.set({},"obj2");

The above statement oby2 will not overwrite oby1. Because empty objects {} request storage space in different heap areas in memory, they are different as key values

4. Symbol type

When naming object property names or methods with the same string, there will be naming conflicts, but the names generated by using symbol are different, for example:

let obj={};
Obj [symbol ('name ')] = "Xiao Zhao";
Obj [symbol ('name ')] = "small money";
console.log(obj);

As a result, the first sentence will not be covered:

Interested friends can useOnline HTML / CSS / JavaScript code running tool: http://tools.jb51.net/code/htmljsrun test the running effect of the above code.

For more information about JavaScript, please refer to our special topics: introduction to JavaScript object-oriented course, summary of JavaScript errors and debugging skills, summary of JavaScript data structure and algorithm skills, summary of JavaScript traversal algorithm and skills, and summary of JavaScript mathematical operation usage

I hope this article will be helpful to JavaScript programming.