Es6

Introduction: ES6 (ECMAScript) is a language standard of JavaScript, and JavaScript is an implementation of ES6

ES6 generally refers to JAVAScript after version 5.1

ES6 is an upgrade of JS from 2015, 2016 and 2017, which is more convenient for programmers

let

let is used to declare variables (only in code blocks)

{
let a = "hello"
console.log(a)    // Output hello
}
console.log(a)    //report errors

let is more suitable for circular statements than var

let

let scope is valid only at block level scope

for(let i=0 ; i<5; i++){
	console.log(i)    //0 1 2 3 4 
}
console.log(i) //Error ReferenceError: i is not defined

let variables are not promoted

{
console.log(a)
let a=1
}   // report errors

Temporary deadband of let

As long as there is a let in the block level scope, the variables declared by the let will be bound in this area and will not be affected

var a = 123;
if (true) {
  a = 'abc'; // ReferenceError
  let tmp;
}

ES6 clearly stipulates that if there are let and const commands in the block, the variables declared by the block for these commands form a closed scope from the beginning. If these variables are used before declaration, an error will be reported.

"Temporary deadband": in a code block, a variable is unavailable until it is declared with let

var

var global scope

for(var i = 0 ; i<5 ; i++){
	console.log(i)  // 0 1 2 3 4 
}
console.log(i)  //5

var variable promotion

{
    console.log(a);
    var a=1
}     //undefined

const command

const is used to define constants, which cannot be changed once declared

const pai = 3.1415926
console.log(pai) // 3.1415926


pai = 123;
console/log(pai)  // report errors 
 

The variable declared by const is not promoted, and there is a temporary dead zone. It can only be used after the declared variable

if(true){
console.log(a); //Error ReferenceError
const a = 3.14;
}                 Note: declared constants a Before calling so wrong.

Destructuring assignment

1. Deconstruction and assignment of array

Deconstructing extracts values from objects in the array and copies variables

Writing method I

let [a,b,c,] = [1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

Writing method II

let arr = [1,2,3]
let [a,b,c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

be careful:

Incomplete structure

let arr = [1,2]
let [a,b,c] = arr
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

Remaining operators... rest

let [a,...b] = [1,2,3,4]
console.log(a) // 1
sonsole.log(...b) // 2 3 4

//Array splicing
let a = [1,2,3]   
console.log(...a)  // 1,2,3
let b = [4,5,6]
console.log(...b)  // 4,5,6
let c = [...a,...b]
console.log(c)   //[ 1, 2, 3, 4, 5, 6 ]

Arrow function

Initial writing of arrow function:

const fn = () => a + b ;
console.log(fn(1,3))  // 4

this in arrow function

this in a normal function points to window

function fn(){
console.log(this); // window
}
fn();

An ordinary function execution caller in an object

var obj = {
name:"tom",
say:()=>{
console.log(this); //window object
}
};
obj.say();

Interview questions:

var name ="jim";
var obj = {
name :"tom",
say:()=>{
consolelog(this.name}
}
};
obj.say();

Template character string

String splicing in ES6

//Original string splicing es5
var a ="Zhang San";
var b ="18"
console.log(a+"this year"+b)  // Zhang San 18 this year


//ES6 string splicing
let a ="Li Si";
let b = 20;
console.log(`${a}this year ${b}Years old`) //Li Si is 20 years old this year

Template strings represent multiline strings, and all spaces and indents are retained in the output.

$('#list').html(   
<ul>
  <li>first</li>
  <li>second</li>
</ul>
   );
  //In the above code, the spaces and newlines of all template strings are reserved. For example, there will be a newline in front of the label. If you don't want this newline, you can use the trim method to eliminate it.
  $('#list').html(   
<ul>
  <li>first</li>
  <li>second</li>
</ul>
   .trim);

Functions can be called in the template string

function fn() {
  return "Hello World";
}
 console.log(`foo ${fn()} bar`)   
// foo Hello World bar

Array extension

1.find method

Find is to find the qualified members in the array. If not found, it returns undefined

let arr = {
{
id:"1",
name:"tom"
},
{
id:"2",
name:"jim"
}
};
const obj = arr.find(item => item.id == 2)
console.log(obj)
This case is a query object id Is 2, and the returned result is the object that meets the condition

indIndex

FindIndex returns the index number that meets the conditions. If it is not found, it returns - 1

let arr = {
{
id:"1",
name:"tom"
},
{
id:"2",
name:"jim"
}
};
const index = arr.findIndex(item =>item.id == 3)
console.log(index)

2.includes

let arr = [10,20,30]
const res = arr.includes(10)
console.log(res)

The above judgment is whether 10 exists in the array

3.set

set is similar to array, but the value in the member is unique and will not be repeated

const set = new Set([10,20,30,4,2])
set.add(11); //Add number 11
set.delete(11); //Delete 11 from array
console.log(...set) // Output all the numbers in the array 

from()

The Array.from() method is used to convert two types of objects into real arrays; Similar to array like objects and iteratable objects (including the new data structures Set and Map in ES6)

The following is an object similar to an Array, Array. from converts it to a real Array

let arr = {
	'0':'a',
    '1': 'b',
    '2': 'c',
    length:3
};

//ES5 writing method
var arr1 = [].slice.call(arr); // ['a','b','c']


//ES6 writing method
let arr1 = Array.from(arr); // ['a','b','c']