ES6基础语法

var let const

let,const  1.具有块级作用域  2.不具有变量提升  3.不允许重复声明
const  用于声明常量，必须赋初值，不允许重新赋值

箭头函数

• 箭头函数，本质上，就是一个匿名函数
• 箭头函数无法通过 call、apply、bind 来手动改变内部 this 指向
• 箭头函数：自动 .bind(this) 也就是说箭头函数中的 this 指向与其所在作用域的 this 指向相同

let sum = (x, y) => {
    console.log(x + y)
}
sum(1, 6)

箭头函数的this继承于父级作用域

模板字符串

const name = 'Tiger';
const age = 13;
console.log(`My cat is named ${name} and is ${age} years old.`);

解构(对象和数组)

交换数值：
[a,b]=[b,a]

结构数组：

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

数组拼接:

arr1=[1,2,3]
arr2=[1,2,3]
arr3=[…arr1,…arr2]

解构对象：

let luke = { occupation: 'jedi', father: 'anakin' };
let {occupation, father} = luke;
console.log(occupation);
console.log(father);

连接对象

let obj1={
    name:"123",
    age:18
}

let obj2={
    height:19,
    age:18
}

let obj3=Object.assign(obj1,obj2)
console.log(obj1)   // { name: '123', age: 18, height: 19 }
console.log(obj3===obj1)    // true

模块

暴露对象：

function sumThree(a, b, c) {

            return a + b + c;

            }

        export { sumThree };

    引入：

        import { sumThree } from 'math/addition';

如果是 export default={}
import sumThree from ‘math/addition’;

参数

es6支持设置默认值：

function addTwoNumbers(x=0, y=0) {

    return x + y;

}

rest参数

处理不定数目参数：

function logArguments(...args) {

   for (let arg of args) {

      console.log(arg);

      }
}

扩展运算符

可以展示数组：

 Math.max(...[-1, 100, 9001, -32]);

let cities = ['San Francisco', 'Los Angeles'];

let places = ['Miami', ...cities, 'Chicago']; // ['Miami', 'San Francisco', 'Los Angeles', 'Chicago']

promise

初始是 pending 状态，可以通过函数 resolve 和 reject，将状态转变为 resolved 或者 rejected 状态，状态一旦改变就不能再次变化。

var fs = require("fs")
//promise就是利用回调函数，来将原来的数据，转到promise对象上来解决
var promise = new Promise((res, rej) => { //res成功时调用，rej失败时调用
    fs.readFile("./1.txt", "utf-8", (err, data) => {
        if (err) {
            rej(err) //将错误导出
        } else {
            res(data) //将成功导出
        }
    })
})

promise.then(data => {
    console.log(data)
}).catch(err => {
    console.log(err)
})

promise 链式调用

let p1 = new Promise(res => {
    setTimeout(() => {
        res("p1")
    }, 3000)
})

let p2 = new Promise(res => {
    setTimeout(() => {
        res("p2")
    }, 2000)
})

let p3 = new Promise(res => {
    setTimeout(() => {
        res("p3")
    }, 1000)
})

p1.then(res => {
    console.log(res);
    return p2
}).then(res => {
    console.log(res);
    return p3
}).then(res => {
    console.log(res);
})

Promise.all和Promise.race

Promise.all
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')   //必须要有成功的回调
})
let p2 = new Promise((resolve, reject) => {
  resolve('success')
})
let p3 = Promse.reject('失败')
Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})

Promise.race
Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})
let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})
Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})


利用Promise解决回调地狱
var fs = require("fs")

function p1() { //通过函数来控制执行顺序
    return promise = new Promise((res, ref) => { //通过return ,函数p()才能.then
        fs.readFile("1.txt", "utf-8", (err, data) => {
            res(data)
        })
    })
}

function p2() {
    return promise = new Promise((res, ref) => {
        fs.readFile("2.txt", "utf-8", (err, data) => {
            res(data)
        })
    })
}

function p3() {
    return promise = new Promise((res, ref) => {
        fs.readFile("3.txt", "utf-8", (err, data) => {
            res(data)
        })
    })
}

p1().then(data => {
    console.log(data)
    return p2()
}).then(data => {
    console.log(data)
    return p3()
}).then(data => {
    console.log(data)
})

async

Async是Generator函数的语法糖

const fs = require("fs")
const promisify = require("util").promisify //用于改造现有异步API，让其返回PROMISE对象，从而支持异步语法
const readFile = promisify(fs.readFile)

async function run() {
    let r1 = await readFile("1.txt", "utf-8")
    let r2 = await readFile("2.txt", "utf-8")
    let r3 = await readFile("3.txt", "utf-8")
    console.log(r1)
    console.log(r2)
    console.log(r3)
}
run()

Generators(生成器)

// generator 原理
// Generator 是 ES6中新增的语法，和 Promise 一样，都可以用来异步编程

// 使用 * 表示这是一个 Generator 函数
// 内部可以通过 yield 暂停代码
// 通过调用 next 恢复执行

function* test() {
  let a = 1 + 2;
  yield 2;
  yield 3;
}
let b = test();
console.log(b.next()); // >  { value: 2, done: false }
console.log(b.next()); // >  { value: 3, done: false }
console.log(b.next()); // >  { value: undefined, done: true }

Set()

1.没有重复值的数组
2.不能通过索引来获取值

var list1=[1,1,2,2,3]
var list2=new Set(list1)
list1=[…list2]
console.log(list2) //Set { 1, 2, 3 }
console.log(list1) //[ 1, 2, 3 ]

symbol

ES6 引入了一种新的原始数据类型 Symbol ，表示独一无二的值，最大的用法是用来定义对象的唯一属性名。

Map()

Maps 和 Objects 的区别
一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值(包括对象)。

Proxy

Proxy 是 ES6 中新增的功能，可以用来自定义对象中的操作

  $(function () {
        let obj={
            number:""
        }
        let proxy =new Proxy(obj,{
            get(target,key){
                return Reflect.get(target,key)
            },
            set(target,key,newval){
                $("span").html(newval)
                $("input").val(newval)
                Reflect.set(target,key,newval)
            }
        })

        $("input").on('input',()=>{
            proxy.number=$("input").val()
        })
        // obj.number=12355        // 这个不会
        proxy.number=12355      // 这个才会触发set 
    })

Proxy 与 Object.defineProperty 对比

数组变化也能监听到
不需要深度遍历监听

Object.assign()函数的作用及用法，举例说明

可用于浅拷贝 assign

 let Person = {
            name: '123'
        }
        var person = {}
        Object.assign(person, Person) //浅拷贝
        person.name = "111"
        console.log(person === Person) //false
        console.log(person.name) //111
        console.log(Person.name) //123

fetch

返回的是一个promise

需要对返回的数据.then 两次

接收参数

fetch(url, {
  method: 'POST',
  headers: {
    "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
  },
  body: 'foo=bar&lorem=ipsum',
}).then(res=>{
    return res.json()
})
.then(res=>{
    console.log(res)
})

默认不会自己带上 cookie

无法对400-500+的错误状态码，直接回应

async function fetchText() {
  let response = await fetch('/readme.txt');
  if (response.status >= 200 && response.status < 300) {
    return await response.text();
  } else {
    throw new Error(response.statusText);
  }
}

fetch()配置对象的完整 API

const response = fetch(url, {
  method: "GET",
  headers: {
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",
  mode: "cors", 
  credentials: "same-origin",
  cache: "default",
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined
});