Es6-- common basic knowledge

One 、 What is? ES6

ES6 yes ECMAScript 6 For short , It is JavaScript The next generation standard of language , His aim is to make JavaScript Language can be used to write complex large applications , Become an enterprise development language

1、let and const command

stay es6 Previously, we defined variables with only one keyword var, however var There is a problem , That is, the defined variable will somehow become a global variable , In this way, the scope of the variable becomes larger , Let us become inconvenient and convenient in the process of using , Especially when making a very complex page ;

let Declared variables are only in let Valid in code block , This is the perfect solution var The problem of ;
const Declared constant , Cannot be modified ;

2、 String extension
stay ES6 in , Several new extensions for strings have been added API：

• includes() ： Returns a Boolean value , Indicates whether the parameter string was found .
• startsWith() ： Returns a Boolean value , Indicates whether the parameter string is in the header of the original string .
• endsWith() ： Returns a Boolean value , Indicates whether the parameter string is at the end of the original string .

ES6 It is also provided ` As a string template tag

<script>
    let str = `	 Hongxing Erke Niubi 
				 Come on, honey snow ice city 
				 Typhoon fireworks go `;
 	alert(str);
</script>

In two ` The part between will be used as the value of the string , You can change lines at will .

3、 Deconstruction expression
ES6 Allows you to extract values from arrays and objects according to certain patterns , And then assign values to variables

<script>
	//  Array 
    let arr = [1,2,3];
    const [x,y,z] = arr;
    console.log(x,y,z);
	//  object 
	const person = {
     
		name:"jack_xiong", 
		age:26, 
		language: ['java','js','css'] 
	};
    const {
    name,age,language} = person;
    console.log(name,age,language); 
</script>

4、 Function parameter defaults
stay es6 Before , We can't set default values for function parameters

function add(a , b) {
     
	//  Judge b Is it empty , If it is empty, the default value will be given 1
	b = b || 1; 
 	return a + b;
  }
  //  Pass a parameter  
  console.log(add(10));

// es6
function add(a , b = 1) {
     
	return a + b; 
}
//  Pass a parameter 
 console.log(add(10));

5、 Arrow function

/*  No parameters --- No parameters required （） To carry on the placeholder  */
let sayHello = () => console.log("hello!"); 
//  Multiple lines , no return value  
let sayHello = () => {
     
	console.log("hello!"); 
	console.log("world!"); 
}
/*  Single parameter  */
var print = function (obj) {
     
	console.log(obj); 
}
//  Shorthand for ： 
var print2 = obj => console.log(obj);

/*  Multiple parameters  */
var sum = function (a , b) {
     
	return a + b; 
}
//  Shorthand for ： 
var sum2 = (a,b) => a+b;

6、 Arrow function combined with deconstruction expression

const person = {
     
	name:"jack_xiong", 
	age:26, 
	language: ['java','js','css'] 
};
function hello(person) {
     
	console.log("hello," + person.name) 
}
//  Arrow function combined with deconstruction expression 
var hi = ({
    name}) => console.log("hello," + name); 
hi(person)

7、map and reduce

map() ： Receive a function , All elements in the original array are processed with this function and put into the new array to return .

	//  give an example ： There is an array of strings , We hope to turn to int Array 
	let arr = ['5','20','13','14'];
    console.log(arr);
    let newArr = arr.map(s => parseInt(s));
    console.log(newArr);

reduce() ： Receive a function （ must ） And an initial value （ Optional ）, This function takes two arguments ：
The first parameter is the last time reduce Results of processing
The second parameter is the next element in the array to be processed
reduce() The elements in the array will be used from left to right with reduce Handle , And treat the result as next time reduce The first parameter of . If it's the first time , The first two elements are taken as calculation parameters , Or take the initial value specified by the user as the starting parameter
（ More complicated , I feel I don't use much in my work , Friends in need can experiment by themselves ）

8、 Extension operator （…）
Extension operator (spread) Three points (…), Convert an array to a comma separated sequence of parameters .

//  Array merge  
let arr = [...[1,2,3],...[4,5,6]]; 
console.log(arr); //[1, 2, 3, 4, 5, 6] 
//  Combination and deconstruction expression  
const [first, ...rest] = [1, 2, 3, 4, 5]; 
console.log(first, rest) //1 [2, 3, 4, 5] 
// Convert string to array  
console.log([...'hello']) //["h", "e", "l", "l", "o"]

9、set and map

Set, Essentially similar to arrays . Difference is that Set Only different elements can be saved in , If the elements are the same, they will be ignored . and java Medium Set Sets are very similar .

    let set = new Set([2,3,4,2,3,4,5,5]);
    console.log(set);

    let set1 = new Set([" Erke "," Snow Ice City "," Snow Ice City "," Typhoon fireworks "," Erke "]);
    console.log(set1);

> set.add(1);				//  add to  
> set.clear();				//  Empty  
> set.delete(index);			//  Deletes the specified element  
> set.has(index);				//  Judge whether it exists  
> set.forEach(function(){
    })	// Traversing elements  
> set.size; 					//  Element number . Attribute , It's not the way 

map, The essence is with Object Similar structures . Difference is that ,Object A mandatory provision key It can only be a string . and Map Structural key Can be any pair
like . namely ：

object yes <string,object> aggregate
map yes <object,object> aggregate

// map Receive an array , The elements in the array are key value pairs  
const map = new Map([ 
	['key1','value1'], 
	['key2','value2'], 
]);
//  Or receive a set 
const set = new Set([ 
	['key1','value1'], 
	['key2','value2'], 
]);
const map2 = new Map(set);
//  Or other map 
const map3 = new Map(map);

map.set(key, value);//  add to  
map.clear();//  Empty  
map.delete(key);//  Deletes the specified element  
map.has(key); //  Judge whether it exists  
map.forEach(function(key,value){
    })// Traversing elements  
map.size; //  Element number . Attribute , It's not the way  
map.values() // obtain value The iterator  
map.keys() // obtain key The iterator  
map.entries() // obtain entry The iterator   usage ： 
for (let key of map.keys()) {
     
	console.log(key); 
}
 or ：
console.log(...map.values()); // Expand through the extension operator 

10、class（ class ） Basic syntax
JavaScript The traditional method of language is to generate new objects through constructor definition wells .ES6 Introduced in class The concept of , adopt class Keyword custom class .