ES6常用方法

69 阅读3分钟

1.let和const

let声明的变量只在let命令所在的代码块内有效 const声明一个只读的常量

2.解构赋值

解构赋值是对赋值运算符的扩展 基本

let [a,b,c] = [1,2,3]
// a = 1
// b = 2
// c = 3

可嵌套

let [a,[[b],c] = [1,[2],3]
// a= 1
// b = 2
// c = 3

不完全解构

let [a=1,b] = [] //a = 1,b = undefined

剩余运算符

let [a,...b] = [1,2,3]
// a= 1,b=[2,3]

3.Promise

Promise 异步操作有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。除了异步操作的结果,任何其他操作都无法改变这个状态。

Promise 对象只有:从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ,状态就不会再变了即 resolved(已定型)

const p = new Promise(function(resolve,reject){
    resolve('success1');
    resolve('success2');
})
p.then(function(value){
    console.log(value); // success1
})
状态的缺点
  • 无法取消 Promise ,一旦新建它就会立即执行,无法中途取消。
  • 如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。
  • 当处于 pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
then方法

then 方法接收两个函数作为参数,第一个参数是 Promise 执行成功时的回调,第二个参数是 Promise 执行失败时的回调,两个函数只会有一个被调用。

4.模板字符串

模板字符串相当于加强版的字符串,用反引号 `,除了作为普通字符串,还可以用来定义多行字符串,还可以在字符串中加入变量和表达式

字符串插入变量和表达式

let name = "Mike"
lat age = 27
let info = `My Name is ${name}, I am ${age+1} years old next year`
console.log(info)

字符串中调用函数

function f(){
    return "have fun!"
}
let string2=`Game start,${f()}`;
console.log(string2); // Game start,have fun!

5.箭头函数 参数 => 函数体

var f = v => v;
var f = function(a) {
 return a;
}
f(1) // 1

当箭头函数没有参数或者多个参数,要用()括起来

var f = (a,b) => a+b
f(6,2)

当箭头函数体有多行语句。用{}包裹起来,表示代码块

var f = (a,b) =>{
    let result = a + b;
    return result;
}
f(6,2)

6.class类 类定义

// 匿名类
let Example = class{
    constructor(a) {
        this.a = a
    }
}
// 命名类
let Example = class Example{
    constror(a){
        this.a = a
    }
}

类声明

class Example{
    constructor(a) {
         this.a =a
    }
}

静态属性

class Example {
    static a = 2
}
Example.b = 2

7.Reflect

Reflect 可以用于获取目标对象的行为,Reflect 对象使用函数的方式实现了 Object 的命令式操作。

静态方法

Reflect.get(target, name, receiver)

let exam = {
    name: "Top",
    age: 24,
    get info() {
        return this.name + this.age
    }
}
Reflect.get(exam,'name'); // "Tom"

let receiver = {
    name: "Jerry",
    age: 20
}
Reflect.get(exam,'info',receiver); // Jerry20
Reflect.set(target, name, value, receiver)
Reflect.has(obj, name)
Reflect.deleteProperty(obj, property)

8.async/await

async function name([param[, param[, ... param]]]) { statements }
async function helloAsync() {
    return "helloAsync"
}

async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。

await

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。