Variable declarations

ES6 Two new variable declaration keys are provided ：let and const

let

Local variable declaration ,ES6 Previous var With declarative promotion , That is, globally declare variables , Command variable declaration （ Just declaration, not assignment ） The default is before it is first used

Example

console.log(a);
let a=1;

Will be an error ：

console.log(a);
var a=1;

No mistake. , But the output is undefined

const

Local constant declaration , Declared constants cannot be modified

Example

const a=1;
a=2;

Will be an error ：

Template literal

`` You can write multiple lines of text in it , Newline character is required for string newline , And this new grammar You can match newlines directly to text

Example

let a=`a b c`

Output results ：

Object literal

The property name of the object is the same as the variable name of the declared value, which can be abbreviated , For variables with the same name , Fields in object this Keywords are distinguished from external variables

Example

let username="tom";
let user={
    
    username,
    age:12
}
console.log(user)

Output results ：

for-of

1. for-of Traverse the values in the array , And before for-in Traversal is the index of the array
2. for-of Can't traverse object , and for-in Property names that can traverse objects

Example

let username="tom";
let user={
    
    username:this.username,
    age:12
}
for (const i of user) {
    
    console.log(i)
}

Will be an error ：

let username="tom";
let user={
    
    username:this.username,
    age:12
}
for (const i in user) {
    
    console.log(i)
}

No mistake. , Output results ：

deconstruction

According to the structure of the data , It can be assigned by position correspondence

Example

let a=1;
let b=2;
[a,b]=[b,a];

Function parameter

ES6 Similar offers Java Variable length parameter for , Parameters are passed in as an array , The grammar is …

function func0(...num) {
    
    console.log(num);
}
func0(1,2,3,4);

Output results ：

Arrow function

The syntax is similar to java Of lambda expression , Arrow functions are usually used as arguments , The arrow function does not have its own scope ,this Refers to the environment in which the object or function calling it executes

Example

function func0(func1,a,b){
    
    return func1(a,b);
}
console.log(func0((a,b)=>{
    
    console.log(this);
    return a+b},1,2));

The output here is this yes window, namely func0 Environment in

let user={
    
    username:"tom",
    getName1:function(){
    
        console.log(this);
        return this.username;
    },
    getName2:()=>{
    
        console.log(this);
        return this.username;
    }
}
console.log(user.getName1());
console.log(user.getName2());

The output is ：

When using anonymous functions ,this Refers to the object that calls this function , When using the arrow function ,this Refers to the environment of the object calling the function , Here is windows( If there are objects nested in the upper layer of the object , that this Points to an object nested one level outside )

Built-in objects

Array

1. from： Convert an iteratable class array into an array
2. of： Convert a set of elements into an array
3. entries： Gets a collection of key value pairs of an array

Example

console.log(Array.from("123456"));
console.log(Array.of(1,2,3));
let nums=[1,2,3];
for (const num of nums.entries()) {
    
    console.log(num);
}

Output results ：

String

1. startWith： Pass in substring , Determines whether the string starts with the substring
2. endsWith： Pass in substring , Determine whether the string ends with the substring
3. includes： Pass in substring , Determine whether the string contains the substring
4. repeat： Pass in a number n, Returns a duplicate of the string n New string of times

Example

let str="hello";
console.log(str.startsWith("he"));
console.log(str.endsWith("llo"));
console.log(str.includes("ell"));
console.log(str.repeat(3));
console.log(str);

Output results ：

Set and Map

ES6 Provides a collection framework Set and Map, Usage and Java The collection framework in is the same ,Set Can be used to remove weight

class

ES6 Support js Create a class , This class and java The class usage in is similar to

Example

class User{
    
    name;
    constructor(name){
    
        this.name=name;
    }
    getName(){
    
        return this.name;
    }
    setName(name){
    
        this.name=name;
    }
}
let user1 = new User();
user1.setName("tom");
console.log(user1.getName());
let user2 = new User("jack");
console.log(user2.getName())

Output results ：

modular (module)

An independent js It's just a module , The first mock exam is to export some data in one module and then another module. (js Labels need to be specified type The attribute is module) Data in different modules can be shared by importing from
The default is derived ：export default Single data
Import ：import name from Module name string

Example

Export module

let user={
    
    name:"tom",
    age:12
}
export default{
    
    user
}

The import module

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="module"> import user from "./demo.js"; console.log(user) </script>
</body>
</html>

Output results ：

Promise

When sending ajax On request , If you need to send a request when you call back again , Such a cycle will form Back to hell , utilize Promise Send a request , It forms a chain call , Instead of nesting inside and outside

Example

new Promise(function(){
    
    ajax
}).then(function(response){
    
    ajax
}).then(function(){
    
    
})