ES6笔记

Promise对象(异步操作，有三种状态(pending初始状态，fulfiled操作成功，rejected操作失败))
解决回调地狱，主要用于异步操作

const p=(data)=>{
  return new Promise((resolve,reject)=>{
   if(data){
      resolve(data)
    }else{
      reject(“无数据”)
    }
})
}
调用promise对象的then方法
p(data).then((res)=>{
   console.log(res)   //成功时的回调
}).catch((err)=>{
   console.error(err)   //失败时的回调
}).finally(()=>{ 
   console.log(“end”)   //完成时的回调
})

 

async await用法
使用await必须使用async定义函数
await接收promise对象

async function a(){
 try{  //await只能接收正确的信息，需要用try,catch方法来分别接收正确或错误信息
  var b=await p(data)
 }catch(err){   //传入错误的信息
   console.log(err)
  }
}
简写只接收正确的数据
async function a(){
   var b=await p(data)
}

 

数组
a=[1,2,3,4]
a=[...a,...a]   ...数组    使数组扁平化  ，输出   [1,2,3,4,1,2,3,4]

 

对象

Object.assign

    const target = { a: 1, b: 1 };
    const source1 = { b: 2, c: 2 };
    const source2 = { c: 3 };
    Object.assign(target, source1, source2);　　//会合并多个同名属性，后面会覆盖前面的
    target // {a:1, b:2, c:3}

 

结构赋值

数组

let [foo, [[bar], baz]] = [1, [[2], 3]];

  foo,bar,baz　　　　//1,2,3

 

  let [ , , third] = ["foo", "bar", "baz"];

  third 　　　　　　// "baz"

 

  let [x, , y] = [1, 2, 3];

  x,y 　　　　　　//1, 3

 

  let [head, ...tail] = [1, 2, 3, 4];

  head ,tail 　　　　　　//1 , [2, 3, 4]

 

  let [x, y, ...z] = ['a'];

  x  ,y 　,z　　　　　//'a', undefined ,[]


　let [x, y] = [1, 2, 3];

  x,y　　　　　　　　//1,2

 

  let [a, [b], d] = [1, [2, 3], 4];

  a,b,c 　　　　　　//1,2,4

//赋默认值

  let [x, y = 'b'] = ['a']; 　　// x='a', y='b'　

 

对象

与数组不同，赋值的变量名需要与属性名相同

let abc = {a: 1,b: 2,c: 3}

let {a, b} = abc　　　　　　

a,b　　　　　　　　　　　　　　 //1,2



let {ad,as} = abc

ad,as　　　　　　　　　　　　//undefined,undefined



//如果需要定义不同的变量名

let { foo: baz ,bar: abc} = { foo: 'aaa', bar: 'bbb' }

baz,abc　　　　　　　　//'aaa' 'bbb'　

 

 

class类
常规函数中 函数名.属性 的添加方法添加的就是静态成员，外部通过 函数.prototype.属性 的方法添加的属性构造的实例对象才能调用

class 类名{
     构造方法
      constructor(参数){//相当于构造函数,constructor方法是每个构造函数都自带的方法，如果不创建就会默认添加一个constructor(){}
           this.参数=参数
       }
       方法
       a(){                          //写在外面相当于 
             ……                      类名.prototype.xx
        }
      静态成员
      static name=xx  //构造的实例对象无法调用，只能通过  类名.name   的方法调用

　   static b(){}　　//静态方法
}

 

class子类继承
父类

class 类名1{
   构造方法
   constructor(brand,price){
    this.brand=brand
    this.price=price
    }
}

子类

class 子类名 extends(必加关键字) 父类名{
   constructor(brand,price,color,size){
    super(brand,price)//等于es5的Pone.方法名(this,brand,price)
    this.color=color
    this.size=size
    }
    方法1(){//子类的同名方法会覆盖父类方法
     ……
    }
}

 

构造实例对象

let a=new 类名()　　//与构造函数相似

 

实例

class Point {
    constructor(x, y) {
        console.log(x + y)
    }
    add(x, y) {
        console.log(x + y)
    }
    msg(data) {
        console.log(data)
    }
}

//向构造方法中添加新方法
Object.assign(Point.prototype，{
　　a(){},
　　....
})


class son extends Point {
    constructor(x, y, color) {
        super(x, y); // 调用父类的constructor(x, y)
        this.color = color;
    }
    add(data) {
        super.msg(data + this.color)    //调用父类的msg方法
    }

}
var a = new Point(1, 5)　　　　//输出5

var b = new son(1, 2, 'yellow')　　//输出3
b.add('hello')　　//输出helloyellow

 

 

加载本地文件
let a=require('链接地址')  　　nodejs引入方法js、json文件
import xx from “地址”   　　     es6引入方法，js,json文件
@import url(“地址”)   　　　　css文件

 

export， import  文件的引入

在普通项目中使用时，需要在script标签上定义  type='module'

<script src="js/index.js" type="module" charset="utf-8"></script>

通过export传输的数据在用import引入时需要知道变量名

export导出的数据在引入时都需要用此方法包裹需要引入的方法 {x,x,x,x}，

　　如：

var a=5
export {a}

//引入
import {a} from './文件地址'

//如果要自定义变量名则如下

import {abc as a} from './文件地址'　　//将abc改为a

export default传输的则不需要知道变量名

var a=123
export default{a}

//只会导出export default内的默认对象返回

import abc from “./地址”

引入的另一种方法
会将所有export导出(包括export default内的数据)并将内容组合成对象返回

import * as abc(此变量用来接收返回的对象) from “./文件地址”