1. ES6新增的方法
-
let和const，解构赋值、模板字符串、箭头函数。
-
Symbol、Map、Set三种常用的数据类型。
-
Proxy重新定义了数据劫持的能力
-
Reflect定义了一套标准化的数据操作的方式
-
Promise确实的解决了异步逻辑嵌套及回调地狱问题。定义了异步逻辑的三种状态pending、rejected、fullfilled, 搭配then、catch、all、race等方法以及async await语法糖，大量简化了异步操作。
-
Generator函数，可以将异步逻辑划片执行。
-
Generator 函数是 ES6 提供的一种异步编程解决方案
-
Generator 函数是一个状态机，封装了多个内部状态。
-
执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
-
-
新增了class类的概念
-
ES6 Modules
2. var, let, const的区别
ES6新增了定义变量的关键字 let和const， 分别用于定义块级变量和常量
let， const不会声明提前， 存在暂时性死区
外部无法使用到内部的let和const定义的变量， 存在块级作用域限制]
const 定义的常量， 无法更改。
if(true){
let name ="kerwin"
}
const obj = {name:"kerwin"}
obj.name="xiaoming"
// obj = {name:"xioamng"}
// obj= 'dwadwa'
3. 箭头函数
箭头函数是ES6推出的，所以在低版本浏览器是有兼容问题的，语法简介明了，逻辑更清晰。
箭头函数没有自己的this，this指向外部的this，并且this会在创建的时候就绑定好.文章来源：https://www.toymoban.com/news/detail-823694.html
const fn1 = function() {
console.log(this)
}
fn1() // window
const obj = {
name: 'tom',
fn2 () {
fn1() // window
console.log(this) // obj
}
}
obj.fn2()
// 在箭头函数定义的位置往上数，这一行是可以打印出 this 的
// 因为这里的 this 是 window
// 所以箭头函数内部的 this 就是 window
const obj = {
fn: function () {
console.log(this)
},
// 这个位置是箭头函数的上一行，但是不能打印出 this
fun: () => {
// 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
console.log(this)
}
}
obj.fn()
obj.fun()
4. 解构
let {type,payload} = data; // {type:"",payload:""}
5 ... 展开合并
[...arr1,...arr2]
{...obj1,...obj2}
6. promise
//异步处理方案
1. 回调函数
2. Promise
3. generator 生成器 yield
4. async await
//解决回调地狱 ，嵌套金字塔
function test1(){
return new Promise((resolve,rejet)=>{
setTimeout(() => {
resolve("123")
}, 2000)
})
}
test1().then(res=>{
}).catch(error=>{
})
// pending reject fullfilled
axios.get("1.php").then(res=>{
return axios.get(2.php,{res})
}).then(res=>{
return axios.get(3.php)
}).then(res=>{
console.log(res.data)
}).catch(error=>{
console.log(error)
})
async await 写起来
async function test(){
var a = await axios.get(1);
var b= await axios.get(2,{a});
var c= await axios.get(3,{b})
console.log(c);
}
test()
//所有的异步都结束
Promise.all([axios.get(1),axios.get(2)]).then(res=>{
//loading隐藏
}).catch(error=>{
})
Promise.race([axios.get(1),axios.get(2)])
`Promise.any()`跟`Promise.race()`方法很像，只有一点不同，就是`Promise.any()`不会因为某个 Promise 变成`rejected`状态而结束，必须等到所有参数 Promise 变成`rejected`状态才会结束。
7 .class (语法糖 => 构造函数,babel-loader)
class Person{
constructor(name,age) {
this.name = name;
this.age =age;
}
say=()=>{
}
}
class Test extends person{
constructor(name,age,location) {
super(name,age);
this.location = location;
}
}8 .模块化
import obj from "./a" ;
export default aaa;
import {test} from "./b" ;
export {test} ;
export var test =function(){}
AMD - 前端 异步加载 - 提前下载， 提前加载 require.js
CMD - 异步加载 - 提前下载 ， 按需加载 -- 玉伯 -sea.js
CommonJs -同步加载（webpack）
require("./b")
=>module.exports
=>exports
ES6 - 模块化
//ES6 和 commonJS区别？
//ES6可以导入某几个接口 import {a} from './module.js' + webpack- tree shaking 摇树优化
//commonJS 导入整个文件
9. 异步遍历器生成函数(大厂面试)
Generator 函数返回一个同步遍历器，异步 Generator 函数的作用，是返回一个异步遍历器对象。在语法上，异步 Generator 函数就是async函数与 Generator 函数的结合。文章来源地址https://www.toymoban.com/news/detail-823694.html
function timer(t) {
return new Promise(resolve => {
setTimeout(() => {
resolve(t)
}, t)
})
}
async function* fn() {
yield timer(1000)//任务1
yield timer(2000)//任务2
yield timer(3000)//任务3
}
// 使用一下 for await ...of
async function fn1() {
for await(const val of fn()) {
console.log("start",Date.now())
console.log(val);
console.log("end",Date.now())
}
}
fn1();到了这里，关于ES6-ES13用法（高频面试题）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
