开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情

ES6介绍

ECMAScript 2015(ECMA,ES)
javascript(实现)是ES(标准)的一种

ES6优点

用户体验
健壮性
维护可读性
性能

ES6新语法

1. 变量/赋值

let
const

var 缺点：没有块级作用域（函数级作用域）、声明覆盖(不能限制修改)

//没有块级作用域
;(function fn() {
    for (var i = 0; i < 5; i++) {
      console.log(i) //正常打印0，1，2，3，4
    }
    console.log(i) //5
  })()

解构赋值

const [a,b,c]= [1,2,3];
const {a,b,c} = {a:1,b:2,c:3};
const [n1,{a,b,c},n2] = [1,{a:{c1:1,c2:2},b:11,c:12},13]

1.左右结构一样且右边结构合法；

2.定义和赋值必须同步完成

2. 函数

箭头函数

function(参数1,参数2){函数体}
(参数1,参数2)=>{函数体}

默认参数;

(a,b=2,c=3)=>{...}

参数展开(剩余参数、数组展开)

(a,b,...args)=>{...}
const a = [1,2,3];
const b = [4,5,6];
const c = [...a,...b];

3. 数组/json

数组-5种方法（map,filter,find,forEach,reduce,from,includes）

const arr = [12,55,61,70,88];

//map 映射
const arr2 = arr.map(item=>{
    if(item >= 60){
        return true
    }
    
    return false
})

//filter 过滤
const arr3 = arr.map(item=>item%2)//[55,61]

//find 查找
const arr4 = [{user:'focus',id:1},{user:'focus2',id:2}].find(item=>item.id===1)//{user:'focus',id:1}

//forEach 遍历
let sum = 0;
arr.forEach(item=>{
    sum+=item;
})

//reduce 汇总：一堆 => 一个
const average = arr.reduce((tmp,item,index)=>{
    if(index < arr.length-1){
        return tmp+item
    }
    
    return (tmp+item)/arr.length
})

//from 类数组转数组
Array.from([array-like])=>[x,x,x]

//includes 是否包含
arr.includes(1)//true

//延展操作符
const newArr = [...arr,99]

json

//简写变量
const a=1;
const b=2;
const json = {a,b};

//简写function
const json2 = {a,b,show(){console.log(1)}}

//延展操作符
const objClone = { ...obj };

4. 字符串

字符串模版

const a = 1;
const b = `测试${a}条`(支持任意换行)

判断方法

//以xx开始
if(str.startsWith('185'))
//以xx结束
if(str.endsWith('.pdf'))

5. 面向对象

历史作用：面向对象的出现拯救了软件工程！

this

普通函数根据调用者变化而变化：老变

箭头函数根据所在环境：恒定

document.onclick = function(){console.log(this)}//document
document.onclick = ()=>{console.log(this)}//window

bind 给函数指定this

//传统 js 面向对象
function Person(name,age){
    this.name = name;
    this.age = age;
}
Person.protoType.showName = fucntion(){
    console.log(this.name)
}
Person.protoType.showAge = function(){
    console.log(this.age)
}

const person1 = new Person();
person1.showName();

//ES6 标准化面向对象
class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    
    showName(){
        console.log(this.name)
    }
    
    showAge(){
        console.log(this.age)
    }
}
const person2 = new Person('Focus',18)
person2.showName();

//继承
class Worker extends Person{
    constructor(name,age,job){
        //超类、父类
        super(name,age)
        this.job = job;
    }
    
    showJob(){
        console.log(this.job)
    }
}

const person3 = new Worker('Focus',18,'打杂')
person3.showName();
person3.showAge();
person3.showJob();

//this指向document
document.onclick = person3.showName;//undefined
//this指向Woker
document.onclick = person3.showName.bind(person3);//Focus

6. `Promise`

语法糖，异步同步化，让异步串行

 const p1 = new Promise((resove,reject)=>{
     
     axios.get('xxx').then(res=>{
         //if success
         resove(res)
         //if error
         reject(res)
     })
     
 })
 
 p1.then((res)=>{console.log('resove')},(error)=>{console.log('reject')})

Promise.all

Promise.all([axios.get('xxx1'),axios.get('xxx2'),axios.get('xxx3')]).then(res=>{
    const [xxx1ResData,xxx2ResData,xxx3ResData] = res
},()=>{console.log('reject')})

Promise.race

结构参数同Promise.all,区别是返回最快的请求数据

7. generator

语法糖，生成器，promise（对带逻辑依赖上次请求结果的操作比较麻烦）的改进版

yield 能暂停

function *show(){
    console.log('a');
    yield();
    console.log('b')
}
const gen = show();
gen.next();//a
gen.next();//b

yield传参

function *show(){
    console.log('a');
    const para = yield();
    console.log(para)//2
    console.log('b')
}
const gen = show();
gen.next(1);
gen.next(2);

yield返回值

function *show(){
    console.log('a')
    const para = yield 3
    console.log(para)//2
    console.log('b')
    return 4
}
const gen = show();
const gen1 = gen.next(1);//{value:3,done:false}
const gen2 = gen.next(2);//{value:4,done:true}

gennerator和promise结合

//需要引入runner.js库
function *show(){
    const data1 = yield axios.get('xxx1')
    if(data1){
        const data2 = yield axios.get('xxx2')
    }else{
        const data3 = yield axios.get('xxx3')
    }
}
runner(show)

8. `async`/`await`

实际是ES7引入，是由上面演化而来

基本结构

(async ()=>{
    console.log(1)
    await new Promise((resove,reject)=>{//可以是promise,gennerator,async
        setTimeout(()=>{
            console.log(2)
        },2000)
    })
    console.log(3)
})()

错误处理

通过try/catch

(async ()=>{
    console.log(1)
    try{
        await new Promise((resove,reject)=>{//可以是promise,gennerator,async
            setTimeout(()=>{
                console.log(2)
            },2000)
        })
        console.log(3)
    }catch(e){
        throw new Error('错误！')
    }
    
})()

9.Symbol

独一无二的值,保证不会与其他属性名产生冲(带有描述的唯一的一个特殊字符串)

const sy1 = Symbol('描述')
const sy2 = Symbol('描述')
console.log(sy.description)//描述
console.log(sy1===sy2)//false

const sy3 = Symbol.for('描述2')//写入内存
const sy4 = Symbol.for('描述2')
console.log(Symbol.keyFor(sy2))//描述2
console.log(sy3===sy4)//true

10.Set

类似于数组，但是成员的值都是唯一的，没有重复的值。

//数组去重
Array.from(new Set(arr))
[...new Set([1, 1, 2, 3])] // [1, 2, 3]

//字符串去重复
[...new Set('ababbc')].join('') // "abc"

11.Map

由于传统的Object对象只能使用字符串当作键，所以新增的Map结构可以将各种类型的值（包括对象）都可以当作键。

const set = new Map(arr)//每个成员都是一个双元素的数组
const map = new Map([['a'，1],['b'，2]])

// Map转为数组 
const myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
[...myMap]//[[true,7],[{foo:3},['abc']]]

// 数组转为 Map
new Map([ [true, 7], [{foo: 3}, ['abc']] ])
// Map { // true => 7, // Object {foo: 3} => ['abc'] // }

属性：

constructor：构造函数，返回Map
size：返回实例成员总数

方法：

get() ：返回键值对
set() ：添加键值对，返回实例
delete() ：删除键值对，返回布尔
has() ：检查键值对，返回布尔
clear() ：清除所有成员
keys() ：返回以键为遍历器的对象
values() ：返回以值为遍历器的对象
entries() ：返回以键和值为遍历器的对象
forEach() ：使用回调函数遍历每个成员

12.模块化

//导出
const myModule = { x: 1, y: () => { console.log('This is ES6') }} 
export default myModule;//export myModule;

//引入
import myModule from './myModule';//import {myModule} from './myModule'

ES6编译ES5

流程参考 babel官网

//创建项目生成 package.json
cnpm init
//安装babel-cli
cnpm install --save-dev @babel/core @babel/cli
//package.json增加启动脚本命令（src:源目录 -d:destination lib:目标目录）
"build": "babel src -d lib" 
//安装预设-cli
cnpm install @babel/preset-env --save-dev
//创建`babel.config.json`
{
  "presets": ["@babel/preset-env"]
}
//启动
npm run build

编译完看看长什么样？（截图如下👇）

预设配置源文件 1421667305554_.pic.jpg 编译目标文件 1411667305541_.pic.jpg

以上就是es6比较常用的基本知识点了，目前工作中也是延伸使用这些比较多，不怎么用到的点暂时没有罗列

工作中超常用的ES6汇总👇

ES6介绍

ES6优点

ES6新语法

1. 变量/赋值

2. 函数

3. 数组/json

4. 字符串

5. 面向对象

6. Promise

7. generator

8. async/await

9.Symbol

10.Set

11.Map

12.模块化

ES6编译ES5

6. `Promise`

8. `async`/`await`