es6

ES6

ES全程EcmaScript，是脚本语言的规范，而平时经常编写的JavaScript，是EcmaScript的一种实现，所以ES

新特性指的就是JavaScript的新特性。

现在ES11了。

1、什么是ESMA && 定义成员变量

European Computer Manufacts Association ：欧洲计算机制造协会

bable 可以把es6转换为es5. 主要使用在ie

var 和let的区别，一个是全局的，一个不是。

const 是常量，赋初始值之后不能修改了。都是块级作用域。

let一定要赋初始值，const不用

一般常量使用大写，值不能修改，但是数组可以push新的值

2、解构赋值

const zhao = {
  name:'zhaobenshan',
  age:'buxinag',
  xiaopin:function(){
    console.log('jaja')
  }
}
let {name,age,xiaopin} = zhao
console.log(name);
console.log(age);
console.log(xiaopin)
xiaopin();

好像还是方法用的多。

3、新的声明字符串的方式 ``

ES6 引入新的声明字符串的方式 [``] 而ES5采用的[' '] 和[" "]

常用的是模版字符串的拼接

let str = `我也是字符串`;
// 内容中可以直接出现换行符
let str2 = `
a
b
c
`;
// 变量拼接
let lovest = 'elly';
let me = 'jesse';
let answer = `${me}love${lovest}the most`;
console.log(answer)

4、简化对象写法

es6允许在打括号里面，直接写入变量和函数，作为对象的属性和方法。书写更加简洁

let name = 'jesse';
let change = ()=>{
  console.log('esma')
}
// 等同于 
let change2 = function(){
  console.log('chang2Esma')
}
const hha  = {
  name,
  change,
  change2,
}
console.log(hha.name);
hha.change();
hha.change2();

5、arrow function

1、简单定义

let fn = (a,b)=>{
  return a+b;
}
let result = fn(1,2);
console.log(result);

2、this的作用域 （我的理解是指向外层作用域）

    function getName(){
      console.log(this.name)
    }
    // this 是静态的，this始终指向函数声明时所在作用域
    let getName2 = ()=>{
      console.log(this.name)
    }
    let person = {
      name:'1'
    }
    window.name = "window"
    getName();
    getName2();

    // call 方法调用
    getName2.call(person);
    getName.call(person)

3、更加简写

//1) 省略小括号，当形参只有一个的时候
let add = n=>{
  return n+n;
}
//2)省略花括号,当代码体只有一条语句，return 也必须省略
let pow = n=> n * n;

5.1、arrow function 实战

// 有在style中通过id定义 css样式
// 需求1:点击div 2s后颜色变成「粉色」
// old version ==》
let ad = document.getElementById("ad");
ad.addEventListener("click",function(){
  let _this = this; // 这个this指向ad
  setTimeout(function(){
    _this.style.background = 'pink'
  },2000) //这是个回调函数，即2s结束后，再改变颜色
})
// new Verison i use arrow Function
let av = document.getElementById("av");
av.addEventListener("click",function(){
  setTimeout(()=>{
    this.style.background = 'green'
  },2000)
})

5.2、

// 需求2：从数组返回偶数的元素
const arr = [1,6,9,10,100,25];
const res = arr.filter(item=> item%2===0);
console.log(res)

6、rest参数

// es5使用arguments 获取对象的实惨
function data(){
  console.log(arguments)
}
data('elly','jesse','love');
//es6使用rest参数，用于获取函数的实参 类似java可变参数哈..
    function data2(a,b,...args){
      console.log(args);
    }
data2('elly', 'jesse', 'love');

7、spread扩展运算符

spread = 「...」

// 「...」扩展运算符能将「数组」转换为逗号分隔的「参数序列」
const higherBrothers = ['masiwei','knowknow','melo','psyp'];
// => 'masiwei','knowknow'···
function hippop(){
  console.log(arguments)
}
hippop(...higherBrothers);

== 2 \ 连接数组

// 1 数组的合并
const higherBrothers = ['masiwei','knowknow','melo','psyp'];
const cdc = ['mengzi','ty'];
// 以前这么写的
const legend = higherBrothers.concat(cdc);
// 现在
const legendh = [...higherBrothers,...cdc]
console.log(legend);
console.log(legendh)

3、最常用的数组克隆

const a = ['e','g','m'];
const b =[...a];
console.log(b);

8、Symbol基本使用

前言：js6大数据类型

string number object Boolean null undefined

Es6 推出了新的类型叫Symbol

let s = Symbol();
console.log(s,typeof s);

9、iterator

使用了迭代器和增强for的方式

    const higherBrothers = ['masiwei','knowknow','melo','psyp'];
    // v 为下标
    for (let v in higherBrothers){
      console.log(v);
    }
    // v为值
    for (let v of higherBrothers){
      console.log(v);
    }
    // 和jvav一样的
    higherBrothers.forEach((a)=>{
      console.log(a);
    })
    // 使用迭代器
    let iterator = higherBrothers[Symbol.iterator]();
    // 调用对象的next方法
    while (true){
      let a = iterator.next();
      if (!a.done){
        console.log(a.value)
      }else{
        break;
      }
    }

10、generator

    // yield 线程暂时挂起
    function * gen(){
            console.log(111);
      yield '1';
            console.log(222);
      yield '2';
            console.log(333);
      yield '3';
            console.log(444);
      yield '4';
    }
    let iterator = gen();
    iterator.next();
      iterator.next();
      iterator.next();
      iterator.next();

11、promise

一直以来，JavaScript处理异步都是以callback的方式，在前端开发领域callback机制几乎深入人心，近几年随着JavaScript开发模式的逐渐成熟，CommonJS规范顺势而生，其中就包括提出了Promise规范，Promise完全改变了js异步编程的写法，让异步编程变得十分的易于理解，同时Promise也已经纳入了ES6，而且高版本的chrome、firefox浏览器都已经原生实现了Promise，只不过和现如今流行的类Promise类库相比少些API

Promise包括以下几个规范

• 一个promise可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）

• 一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换

• promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可以调用多次，并且回调的执行顺序跟它们被定义时的顺序一致

• then方法接受两个参数，第一个参数是成功时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用，同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象

  在使用Promise时，我们需要检测一些浏览器是否支持Promise

看看同步与异步的区别吧：

https://www.cnblogs.com/Yellow-ice/p/10433423.html

init：异步编程：io 网络 文件操作使用

promise 是es6引入的异步编程的新解决方案。语法上promise是一个构造函数，

用来封装异步操作并可以获取成功或失败的结果。

11.1、 使用promise异步读取文件

const fs = require("fs");

// 使用promise封装
const p = new Promise((resolve, reject) => {
  fs.readFile("./data.txt", (err, data) => {
    if (err) reject(err);
    else resolve(data.toString() + "success");
  });
});
p.then(
  value => {
    console.log(value);
  },
  error => {
    console.log(error);
  }
);

11.2、使用promise封装ajax

    const p = new Promise((resolve,reject)=>{
      const xhr = new XMLHttpRequest();
      xhr.open("GET","https://api.apiopen.top/getJoke");
      xhr.send();
      xhr.onreadystatechange = ()=>{
        if (xhr.readyState===4){
          if (xhr.status>=200 && xhr.status<300){
            resolve(xhr.response);
          }else{
            reject(xhr.response);
          }
        }
      }
    })
    p.then(response=>{
      console.log(response)
    },err=>{
      console.log(err)
    })

12、promise的then

    p.then(response=>{
      console.log(response)
    },err=>{
      console.log(err)
    })

13、promise的catch

    p.catch(err=>{
      console.log(err)
    })

14、set

    let arr = ['1','2','3','3','3'];
    let arr2 = ['1', '4'];
    let set = new Set(arr);
    set.add('4');
    set.delete('1');
    console.log(set.has('2'));
    for(let v of set){
      console.log(v)
    }
    //2、数组去重
    let result = [...new Set(arr)];
    //3、交集
    // 4、并集
    let union = [...new Set([...arr,...arr2])];
    console.log(union)

15、map

no more introduce

16、模块化

1）export

命令用于规定模块的对外接口

1) 分别暴露
export let school = "hujesse";
export let teach = () => {
  console.log("schoolexpo");
};
2)整体暴露
...
export {school,teach}
3)默认暴露
 export default{
  school = "hujesse",
  teach = () => {
  console.log("schoolexpo");
  }
}

2）import

命令用于输入其他模块提供的功能

//1 、通用的导入方式
import * as m1 from "./m1.js"
//2、解构赋值形式
import {school,teach} from "./m1.js"
import {school as ntu,teach} from "./m1.js"
import {default as m1} from "./m1.js"
// 3、默认暴露只针对默认暴露
import m1 from "./m1.js

js里面引入时使用require，html引入使用import

ES7

1. 数组的方法 includes 检测数组中是否包含某个元素，返回boolean

const a = [1,2,3]
a.includes(1)

2、幂运算 **

conosle.log (2**2) // 4

ES8

1.async 和await

async 和await 二种语法结合可以让异步代码像同步代码一样。

1.async函数返回值为promise对象

fun = async()=>{
  return "haha";
}
const result = fun();
console.log(result)

2.await 简化promise

const p = new Promise((reslove,reject)=>[
  reslove("用户数据")
])
let fun = async()=>{
  let result = await p;
  console.log(result)
}
fun();
// 解释一下。reslove改变了p的状态，p状态成功的值修改成了“用户数据”.
// await 返回的结果返回的是成功状态的值
==============
// 使用try catch捕获错误
    const p = new Promise((reslove,reject)=>[
      reject("失败啦")
    ])
let fun = async()=>{
  try{
    let result = await p;
    console.log(result)
  }catch(e){
    console.log(e)
  }
}
fun();

2.async和await实战demo1

let fun = () => {
  return new Promise((resolve, reject) => {
    fs.readFile("./data1.txt", (err, data) => {
      if (err) reject(err);
      resolve(data);
    });
  });
};

let res = async () => {
  try {
    let result = await fun();
    console.log(result);
  } catch (err) {
    console.log(err);
  }
};
res();

3.async和await发送ajax请求

    let fun = (url)=>{
      return new Promise((reslove,reject)=>{
        const x = new XMLHttpRequest();
        x.open('GET',url);
        x.send();
        x.onreadystatechange = ()=>{
          if (x.onreadystatechange ===4){
            if (x.status>=200 && x.status<300){
              reslove(x.response);
            }else{
              reject(x.status);
            }
          }
        }
      })
    }
    let res = async()=>{
          const result = await fun("https://api.apiopen.top/getJoke");
          console.log(result)
    }
    res();

My question Here

1、对象定义函数

    const hha  = {
      hahFunc = ()=>{
        console.log('i use arrow function');
      },
    }

为啥会错