2.13. Set
ES6 provides a new data structure Set (collection). It is similar to an array, but the values of the members are unique. The collection implements the iterator interface, so you can use the "spread operator" and "for...of..." to traverse, the properties and methods of the collection:
- size returns the number of elements in the collection
- add adds a new element and returns the current collection
- delete deletes an element, returning a boolean
- has Checks whether a collection contains an element, returns a boolean value
- clear clears the collection, returning undefined
A set is essentially an object, with some properties and methods
eg. Set.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gather</title>
</head>
<body>
<script>
//declare a set
let s = new Set();
// In addition to creating an empty collection, you can also pass in an initial parameter, receive an iterable data, an array
let s2 = new Set(['big deal','little things','good thing','bad thing','little things']);
//Number of elements (array length, here size)
// console.log(s2.size);
//add new element
// s2.add('happy event');
//remove element
// s2.delete('bad thing');
//Detect has (returns true if it exists and returns false if it does not exist)
// console.log(s2.has('bad thing'));
//empty collection
// s2.clear();
// console.log(s2);
for(let v of s2){
console.log(v);
}
</script>
</body>
</html>
eg. Set collection practice
1 Array deduplication
let arr = [1,2,3,4,5,4,3,2,1]; // Array deduplication // Because the set collection is unique, it removes duplicate values // The array is constructed as a collection new Set(arr), turn it into an array using the spread operator... let result = [...new Set(arr)]; console.log(result);
2 intersection
let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6]
// First, the array is deduplicated, and the filter method is used (returning a new array that meets the conditions). Judging whether the element is in ar or not, it is the intersection
let result = [...new Set(arr)].filt(item => {
let s2 = new Set(arr2); // 4 5 6
// Check if this element exists in the collection
if(s2.has(item)){
return true;
}else{
return false;
}
});
console.log(result)
// code to simplify
// let result = [...new Set(arr)filter(item => new Set(arr2).h(item));
// console.log(result);
3 Union
let arr = [1,2,3,4,5,4,3,2,1]; let arr2 = [4,5,6,5,6] // [...arr,...arr2] merge new Set to convert to array using [...] let union = [...new Set([...arr,.arr2])]; console.log(union);
4 difference
The difference set is the opposite of the union set, and the union set can be reversed
let arr = [1,2,3,4,5,4,3,2,1]; let arr2 = [4,5,6,5,6]; // arr has arr2 does not let diff = [...new Set(arr)].filter (item => !(new Set(arr2).has(item))); console.log(diff);
2.14. Map
ES6 provides the Map data structure. It is similar to an object, which is also a collection of key-value pairs. But the scope of "keys" is not limited to strings, and values of various types (including objects) can be used as keys. Map also implements the iterator interface, so it can be traversed using "spread operator" and "for...of...". Properties and methods of Map:
- size returns the number of elements in the Map
- set adds a new element and returns the current Map
- get returns the key value of the key name object
- has detects whether the Map contains an element and returns a boolean value
- clear clears the collection, returning undefined
eg. Map.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Map</title>
</head>
<body>
<script>
//Declare Map
let m = new Map();
//add element
m.set('name','Shang Silicon Valley');
m.set('change', function(){
console.log("we can change you!!");
});
let key = {
school : 'ATGUIGU'
};
m.set(key, ['Beijing','Shanghai','Shenzhen']);
//size
// console.log(m.size);
//delete
// m.delete('name');
//Obtain
// console.log(m.get('change'));
// console.log(m.get(key));
//empty
// m.clear();
//traverse
for(let v of m){
console.log(v);
}
// console.log(m);
</script>
</body>
</html>
Map is actually an upgraded version of the object, the original key can be a string, and now you can use the object as a key to create elements
2.15. class class
ES6 provides a writing method that is closer to traditional languages, and introduces the concept of Class (class) as a reference to
icon template. With the class keyword, classes can be defined. Basically, ES6 class es can be seen as just
A syntactic sugar, most of its functions, ES5 can do it, the new class writing is just to let the object
Prototypes are written more clearly and more like object-oriented programming syntax.
Knowledge points:
- class declares a class
- constructor defines constructor initialization
- extends inherits the parent class
- super calls the parent constructor
- static defines static methods and properties
- The parent class method can be overridden
2.15.1 Instantiating objects
es5 constructor to instantiate object
// cell phone
function Phone(brand,price) {
this.brand = brand;
this.price = price;
}
// add method call
Phone.prototype.call = function() {
console.log("I can call! !");
// instantiated object
let Huawei = new Phone('Huawei', 5999);
// call method
Huawei.call();
console.log(Huawei);
}
es6 class syntax instantiate object
// es6 class syntax instantiate object
class Phone {
// Constructor constructor Name is fixed, specific method
// new + class name will automatically execute the constructor method on the instance object
constructor(brand,price){
this.brand = brand;
this.price = price;
}
// Add a method Method must use this syntax (methodname()) Cannot use es5 object full form
call(){
console.log("I can call! !");
}
}
let onePlus = new Phone("1+", 1999);
console.log(onePlus);
2.15.2 class static members
// First use es5 as an example
function Phone() {
}
Phone.name = 'cell phone';
Phone.change = function(){
console.log("I can change the world");
}
Phone.prototype.size = '5.5inch';
let nokia = new Phone();
console.log(nokia.name);
// nokia.change();
console.log(nokia.size);
The instance object nokia is not the same as the function object Phone. For attributes such as name, Phone.name makes it a static member.
class Phone {
// static property declaration keyword is static
// For static annotated property name s and methods
change it belongs to the class Phone does not belong to the instance object
static name = 'cell phone';
static change() {
console.log("I can change the world");
}
}
let nokia = new Phone();
console.log(nokia.name);
console.log(Phone.name);
2.15.3 Class inheritance
1 ES5 uses constructor inheritance
// cell phone
// parent constructor
function Phone(brand,price) {
this.brand = brand;
this.price = price;
}
Phone.prototype.call = function() {
console.log("i can call");
}
// Smartphones also have brands and prices, so there is no need to write duplicate code, you can use inheritance
// child constructor
function SmartPhone(brand,price,color,size) {
// Call the initialization code in the parent constructor
// Phone changes the this value inside the call method and then executes
// This this points to the instance object of this SmartPhone in SmartPhone
Phone.call(this,brand,price);
this.color = color;
this.size = size;
}
// Set the prototype of the child constructor
SmartPhone.prototype = new Phone;
// Do a correction or not
SmartPhone.prototype.constructor = SmartPhone;
// Add some methods to the subclass object
// Declare methods of subclasses
SmartPhone.prototype.photo = function() {
console.log("i can take pictures");
}
SmartPhone.prototype.playGame = function() {
console.log("i can play games");
}
const chuizi = new SmartPhone('hammer', 2499,'black','55inch');
console.log(chuizi);
The result of es5 constructor and es6 class inheritance is the same
2 Inheritance of ES6 classes
// Parent class Phone
class Phone{
// Parent class constructor
constructor(brand,price) {
this.brand = brand;
this.price = price;
}
// Member properties of the parent class
call() {
console.log("i can call");
}
}
// Declare subclass SmartPhone
// Requirement: Inherit the properties and methods in the parent class
// Using the keyword extends
class SmartPhone extends Phone {
// Initialization parameters at the time of instantiation in the subclass contained in the constructor ()
constructor(brand,price,color,size) {
// Call the constructor of the parent class to initialize super is the constructor method of the parent class
super(brand,price); // Same as Phone.call(this,brand,price);
// Initialize properties in subclasses
this.color = color;
this.size = size;
}
// Add some unique methods in subclasses
photo() {
console.log("Photograph");
}
playGame() {
console.log("play games");
}
}
// instantiate
const xiaomi = new SmartPhone('Millet', 799, 'black', '4.7inch');
console.log(xiaomi);
// call these methods
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();
2.15.4 Subclass overrides parent class method
A subclass declares a method with the same name as the superclass
Made a small modification based on the code above
// Parent class Phone
class Phone{
// Parent class constructor
constructor(brand,price) {
this.brand = brand;
this.price = price;
}
// Member properties of the parent class
call() {
console.log("i can call");
}
}
// Declare subclass SmartPhone
// Requirement: Inherit the properties and methods in the parent class
// Using the keyword extends
class SmartPhone extends Phone {
// Initialization parameters at the time of instantiation in the subclass contained in the constructor ()
constructor(brand,price,color,size) {
// Call the constructor of the parent class to initialize super is the constructor method of the parent class
super(brand,price); // Same as Phone.call(this,brand,price);
// Initialize properties in subclasses
this.color = color;
this.size = size;
}
// Add some unique methods in subclasses
photo() {
console.log("Photograph");
}
playGame() {
console.log("play games");
}
call() {
console.log("I can make video calls");
}
}
// instantiate
const xiaomi = new SmartPhone('Millet', 799, 'black', '4.7inch');
// console.log(xiaomi);
// call these methods
xiaomi.call();
xiaomi.photo();
xiaomi.playGame();
In the js class syntax, the subclass cannot directly call the method of the same name of the parent class, nor can it be used with super, it can only be rewritten
2.15.5 getter and setter settings in class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>get and set</title>
</head>
<body>
<script>
// get and set
// es5 binds methods to object properties, such as adding get to obtain a property and execute the get function
// It is also used in class
class Phone{
get price(){
console.log("The price attribute was read");
return 'iloveyou';
}
set price(newVal){
console.log('The price attribute has been modified');
}
}
//instantiated object
let s = new Phone();
// console.log(s.price);
s.price = 'free';
</script>
</body>
</html>
