ES6
标准
兼容性
百度 浏览器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语法学习笔记,后续更新