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

看看同步与异步的区别吧:​

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');
},
}


为啥会错