ES6特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/example440982/article/details/79705113

ES6学习合集

一上来就放大招，嘻嘻，主要是学习ES6主要特性的一下笔记，更多详细的内容，等遇到或者需要用到的时候再继续深究。现在这个时代讲究的就是快速，快速入门，入门再研究。不要在门口瞎折腾。

ES6

文章目录

ES6学习合集
ES6

标准

Google一下

入门书籍可以参考阮一峰写的《ES6标准入门》
也可以去官网看开源的
不得不说阮一峰真的是一个很厉害的人物，教经济学，对计算机技术也如此了解，实在佩服，我已把他列为我的偶像之一

兼容性

百度浏览器ES6兼容性

编译转换

在线转换
提前编译

babel=browser.js
说的是同一个东西，是ES6转码器

特性

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

关于ES6的更多特性可以Google一下

变量 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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GSd5BTmG-1606208496021)(https://s1.ax1x.com/2018/03/18/9oe91A.png)]

示例

cnpm install yield-runner-blue	//安装blue封装的包

runner(function *(){
    let data1 = $.ajax(url, dataType:'json')
    let data2 = $.ajax(url, dataType:'json')
    let data3 = $.ajax(url, dataType:'json')
    console.log(data1, data2, data3)
})

异步操作几种方法概述

回调，传统写法，一层套一层

Promise

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

generator

runner(function *(){
    let data1 = yield $.ajax({url: xxx, dataType: 'json'})
    let data2 = yield $.ajax({url: xxx, dataType: 'json'})
    let data3 = yield $.ajax({url: xxx, dataType: 'json'})
})

带逻辑比较方便，Promise带逻辑判断不方便

//带逻辑的 generator
runner(function *(){
    let userData = yield $.ajax(url: 'getUserType', dataType: 'json')
    if (userData == 'VIP') {
        let VipUser = yield $.ajax(url: 'getVipUsers', dataType: 'json')
        } else {
            let normalUser = yield $.ajax(url: 'getNormalUsers', dataType: 'json')
        }
    
    //其他逻辑
})