一、ES6是什么?
新的JavaScript语法标准
使用babel语法转换器,支持低端浏览器
流行的库基本都基于ES6构建,React、vue默认使用ES6新语法开发
二、ES6语法概览
1、块级作用域、字符串、函数
作用域:定义变量使用let替代var
const定义不可修改的变量
作用域和{}:
{
let a = 0
}
console.log(a)// 如果这样是打印不到的,因为let是定义局部变量,a在作用域里
字符串:使用反引号,直接写变量
多行字符串(注意包括字符串时要用~那个按键的` `来把字符串包起来)
告别+拼接字符串
let name = 'World'
//before
console.log('hello'+name+'!\n thanke you')
//after
console.log(`hello${name}!
thanke you`)
函数 :参数默认值、箭头函数、展开运算符
const double = num => num*2// num只有一个时可以加括号可以不加括号,num是参数,num*2返回值
const add = (num1,num2=1) => {
return num1+num2//{}里面可以是个函数体
}
console.log(double(3)) // 6
console.log(add(3,4)) // 7
console.log(add(3)) // 4
let arr = [5,6]
//...可以吧arr展开
console.log(add(...arr)) // 11
//...可以做数组合并
console.log([1,2,3,...arr]) // [1,2,3,5,6]
2、对象扩展、解构
Object扩展:Object.key、value、entries
对象方法简写,计算属性
展开运算符(不是es6标准)
const key = 'job'
const obj = {
key,
num:1,
str:'hello'
work(){},
[key]:'fe',
[key+'world'}:'fe'// []可以写表达式
}
console.log(obj)// {key:'job',num:1,str:'hello'work:f work(),job:'fe',jobworld:'fe'
解构:
let arr = [1,2]
let[num1,num2] = arr
console.log(num1,num2)// 1 2
const obj = {type:'it',name:'world'}
const {type,name} = obj
console.log(type,name)// it world
3、类、模块化等
es6中自带了模块化机制,告别seajs和require.js
Import、import{}
module.js
export const name = '123'
mian.js
import {name} from'./module.js'
console.log(name)// 123
Export、Export default
module.js
export default function(){// 默认暴露,除了函数还可以是对象
console.log('hello')
}
mian.js
import say from './module.js'// 不需要大括号,直接赋给一个值就可以了
say()// 如果是对象还可以通过say.属性来调用
Node现在还不支持,还需要用require来加载文件
三、其他
1、对象扩展符
2、装饰器
3、Async await(ES7)很重要,优雅处理异步