This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

1. The ES6 🔥

1.1 the let

New keyword for declaring variables in ES6

  • Variables declared by let are valid only at the block level
 if(true){
     let a = 10;
 }
 console.log(a);   // a is not defined
Copy the code

Variables declared with the let keyword in a brace have block-level scope; the var keyword does not

  • Prevents loop variables from becoming global
if(true){ let a = 10; var b = 10; } console.log(a); //a is not defined console.log(b); / / 10Copy the code
  • There is no variable promotion
 console.log(a);  // a is not defined
 let a = 10;
Copy the code
  • Temporary dead zone
var num = 11; if(true){ consloe.log(num); Let num = 20; }Copy the code

1.2 const

Declare constants. Constants are quantities whose value (memory address) cannot change

  • Has block-level scope
 if(true){
     const a = 10;
     if(true){
         const a = 20;
         console.log(a); //20
     }
     console.log(a); //10
 }
 console.log(a);  // a is not defined
Copy the code
  • Constants must be assigned when declared

const PI; //Missing initializer in const declaration

  • After a constant is assigned, the value cannot be modified
Const PI = 3.14; PI = 100; Const array = [100,200]; array[0] = 'a'; array[1] = 'b'; console.log(array); ['a','b'] array = ['a','b'Copy the code

1.3 Deconstructing assignments

ES6 allows you to extract values from an array, assign values to variables according to their location. Objects can also be deconstructed

An array of deconstruction

Let 'arry = [1, 2, 3]; let [a,b,c] = arry; console.log(a); console.log(b); console.log(c);Copy the code

Object to deconstruct

let person = {name:'zhangsan',age:20}; let{name,age} = person; // The name of the object must be the same as the name of the property console.log(name); console.log(age);Copy the code

The second way to write it

let {name:MyName,age:MyAge} = person; //Myname MyAge belongs to an aliasCopy the code

2. Arrow function

The arrow function is used to simplify function definition syntax() = > {}const fn = () = > {}

Copy the code
  • There is only one line of code in the body of the function, and the result of the code execution is the return value. The braces can be omitted
const sum = (num1,num2) = > num1+num2;
let s = sum(10.20);
console.log(s);
Copy the code
  • If there is only one parameter, you can omit the parentheses
function  fn(v){
return v;
}

const fn = v= > v;
Copy the code

The arrow function is not bound to the this keyword. The this in the arrow function refers to the context this== where the function is defined

var age = 100;

// Objects are not scoped
var obj = {
	age:20;
    say:() = > {
        alert(this.age);		//this refers to window
    }
}
obj.say(); 	/ / 100
Copy the code

2.1 Remaining Parameters

The remaining arguments syntax allows us to represent an indefinite number of arguments as an array

function sum (first,... args){
	console.log(first);/ / 10
	console.log(args);/ / (20, 30)
}
sum(10.20.30)
Copy the code

Remaining parameters are used in conjunction with deconstruction

let students = ['wangwu'.'ssss'.'lisi'];
let [s1,...s2] = students;
console.log(s1);	//'wangwu'
console.log(s2);	//['sss','lisi']
Copy the code

3.Array extension methods

3.1 Extension Operators (expansion syntax)

The extension operator converts an array or object into a sequence of arguments separated by commas

let ary = [1.2.3]; . ary/ / 1, 2, 3
console.log(... ary);/ / 1 2 3
Copy the code

The extension operator can be applied to == to merge the array ==

/ / method
let ary1 = [1.2.3];
let ary2 = [3.4.5];
let ary3 = [...ary1,...ary2];
/ / method 2ary1.push(... ary2);Copy the code

Converts a class array or traversable object to a real array

let oss = document.getElementsByTagName("div");
oss = [...oss];
Copy the code

Constructor method: array.from ()

let arrayLike = {
	'0':'a'.'1':'b'.'2':'c'."length":3
};
let ary2 = Array.from(arrayLike);//['a','b','c']
Copy the code

Example method: find()

Used to find the first member of an array that matches the condition. If none is found, undefined is returned

let ary = [{
	id:1.name:'zhangsan'}, {id:2.name:"lisi"
}];
let target = ary.find((item,index) = >item.id == 2);
Copy the code

Instance method: findIndex()

Used to find the position of the first qualified array member. If none is found, -1 is returned

let ary = [1.2.3.4.5];
let index = ary.findIndex ((value,index) = >value>9);
console.log(index); / / 1
Copy the code

Instance method: includes()

Indicates whether an array contains a given value. Returns a Boolean value

[1.2.3].includes(2)	//true
[1.2.3].includes(66)	//false
Copy the code

4. Extension methods for String

4.1 Template String

ES6 new way to create a string, defined by backquotes

let name = `zhangsan`;
Copy the code
  • Template strings can parse variables
let name = `zhangsan`;
let say = `hello ,my name is ${name}`;	
Copy the code
  • You can wrap lines in a template string
let result = {
	name:"zhangsan".age:20.sex:"nan"
}
let  html = `<div>
	<span>${result.name}</span>
	<span>${result.age}</span>
	<span>${result.sex}</span>
	</div>`;
Copy the code
  • A template string can call a function
const say = function(){
	return "sssssss";
};
let greet = `${say()} sss`;
console.log(greet);	//sssssss sssss
Copy the code
  • Example methods: startsWith() and endsWith()

Startswith (): indicates whether the argument string is at the head of the original string. Returns a Boolean value

EndsWith (): indicates whether the argument string is at the end of the original string. Returns a Boolean value

let str = 'hello world';
str.startsWith('hello'); 	//true
str.endsWith('world');		//true
Copy the code
  • Instance method: repeat()

The repeat method means that the original string is repeated n times, returning a new string

'x'.repeat(3) //'xxx'
'hello'.repeat(2)  //'hellohello'
Copy the code

4.2Set data structure

ES6 provides a new data structure, Set, which is similar to an array, but whose member values are unique, with no duplicate values

The Set itself is a constructor that generates a Set data structure

const s = new Set();

The Set function can take an array as an argument for initialization

Const set = new set ([1,2,3,4,5,5,6])

4.3 Instance Method

  • Add (value) : Adds a value, returning the Set structure itself
  • Delete (value): deletes a value and returns a Boolean value to indicate whether the value is successfully deleted
  • Has (value): Returns a Boolean value indicating whether the value is a member of a Set
  • Clear (): clear all members, no return value
const s = new Set(a); s.add(1).add(2).add(3);	// Add values to the set structure
s.delete(2)  	// Delete the value 2 from the set structure
s.has(1)		// Return a Boolean value indicating whether the set structure has a value of 1
s.clear()		// Clear all values in the set structure
Copy the code

4.4 traversal

An instance of a Set structure, like an array, has a forEach method that performs some operation on each member and returns no value

s.forEach(value= > console.log(value))
Copy the code

The end