ES6

ES6
- 标准
- 兼容性
- 变量 let const
- 箭头函数
- 函数参数
- 解构赋值
- 数组
- 字符串
  - 多了两个新方法
  - 字符串模板
- 面向对象
- JSON
- Promise
- generator
- yield

标准

兼容性

百度浏览器ES6兼容性

编译转换

在线转换
提前编译

babel=browser.js

特性

变量
函数
数组
字符串
面向对象
Primise
generator
模块化

变量 let const

var

可以重复声明
无限制修改
没有块级作用域

let 不能重复声明、变量作用域内可以修改、块级作用域

const 不能重复声明、常量不可以修改、块级作用域

箭头函数

let show = function(){
    alert('13')
}
show()

---
let show = ()=>{
    alert('13')
}

function add(a, b){
    return a+b
}

add(5,12)

---
(a, b)=>a+b

只有一个参数时 () 可以省略
只有一个return时{} 可以省略

函数参数

参数

参数扩展/数组展开 ...args
. 参数默认值 function(a, b=2)

参数扩展

收集剩余的参数 args

function show(a, b, ...args){
  alert(a)
  alert(b)
  alert(args)
}
show(1, 3, 5, 8, 9)

...args 参数只能作为最后一个参数

收集参数

let arr1 = [1, 2, 3]
let arr2 = [5, 7, 9]
arr = [...arr1, ...arr2]
alert(arr)

解构赋值

一一对应赋值

左右两边结构必须一样
左右两边必须是个东西
声明和赋值不能分开

let oDiv1 = documet.getElementById()

数组

多了4个方法

map 映射一个对一个
reduce 汇总
filter 过滤器
forEach 迭代

let arr1 = [12, 23, 15]

let result = arr1.map(item=>item)

alert(result)

let result2 = arr1.reduce((tmp, item, index) => {
    if(index != arr1.length-1){
      return tmp+item
    } else {
      return (tmp+item)/arr1.length
    }
})

arr1.forEach((item, index) => {
    console.log(index + ':' + item)
})

字符串

多了两个新方法

startsWith() 判断字符以什么字符开头
. endsWith() 判断字符以什么字符结尾

字符串模板

字符串连接 反单引号

作用：

字符串中可以识别变量 $(变量)
可以换行

let title = '自信的勇气'
let content = '人一定要有勇气，不能做懦夫'

let article = `文章标题${title}
文章内容  ${content}  自信人生当自强
字符串模板不但可以加入变量，还可以转行，原样输出
跟php的<<<EOF  pyhon ''' 的定界符类似
`

console.log(article)

面向对象

原本js要实现面向对象需要用到原型链 prototype

新面向对象

有class关键字，构造器 construrtor 和类分开了
class内可以直接写方法

class User{
    constructor(name, pass){
        this.name = name
        this.pass = pass
    }

    showName(){
        alert(this.name)
    }

    showPass(){
        alert(this.pass)
    }
}

继承：

class VipUser extends User{
    constructor(name, pass, level){
        super(name, pass)
        this.level = level
    }

    showLevel(){
        alert(this.level)
    }
}

let vl = new VipUser('hotsuitor', '123456', 5)

v1.showName()
v1.showPass()
v1.showLevel()

JSON

JSON对象

简写

名字跟值（key和value）一样留一个就行

方法 :function 删除

let a = 12
let b = 3
let json = {a, b, c:33}  //{a:a, b:b, c:33}

let json2 = {
   a:12,
   show(){          //show: function(){}
       alert(this.a)
   }
}

json的标准写法

只能用双引号
所有名字必须引号包起来

{a: 12, b: 5}  错
{"a":12, b: 5} 对

{a: 'abc', b: 3} 错
{"a": "abc", "b": 3} 对

Promise

——承诺

异步：好用、代码复杂

同步：代码简单、不好用

promise——消除异步操作

用同步的方式来写异步代码

let p = new Promise(function(resolve, reject){
    //异步代码
    //resolve——成功
    //reject——失败
    $.ajax({
        url: "data.json",
        dataType: "json",
        success(res){
            resolve(res)    
        },
        error(e){
            reject()    //如果不传入参数，p.then 无法获取参数数据
        }
    })
})

p.then((res)=>{
    alert('success')
    console.log(res)    //请求成功会输出数据
}, (e)=>{
    alert('error')
    console.log(e)      //reject没有传递参数，输出undefined
})

Promise怎么用

Promise.all([$.ajax({url}), $.ajax({url, dataType: "json"})]).then(result=>{}, error=>{})

示例：

Promise.all([
    $.ajax({url: "https://cdn.bootcss.com/jquery/3.3.1/jquery.js"}),
    $.ajax({url:"https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.css"})
]).then(result=>{
    alert('all success')
}, error=>{
    alert('at lest one of error')
})

Promise.all all所有
Promise.race race竞速有一个成功就可以了

generator

生成器

普通函数——一条路走到底

generator函数——可以中间暂停

function show(){
    alert("a")
    alert("b")
}

show()      //一次性执行完整个函数

function *show2(){
    alert("a")
    yield
    alert("b")
}
show().next()   //alert a
show().next()   //alert b

简单理解

generator函数底层实现是把一个“大函数”生成多个yield分割的“小函数”

上的例子相当于
function *show(){
    show1(){
        alert("a")
    }
    yield 分割
    show2(){
        alert("b")
    }
}
//执行
show().next() ===>  show().show1()
show().next() ===> show().show2()

yield

可以传参数
可以返回

看下图理解yield

2018/3/18/18:37

es6语法学习笔记，后续更新

ES6 学习笔记，持续更新

ES6

标准

兼容性