一、ES6里都有什么
块级作用域、字符串、函数
对象扩展、解构
类、模块化等
二、作用域
- let 和const
- 定义变量使用let代替var
{
var name = 'sytin'
}
console.log(name)//没有任何问题
{
let name = 'sytin'
}
console.log(name) //报错 name is not defined
- const定义不可修改的变量
const name = 'sytin'
name = 'eunice'
console.log(name) //报错 Assignment to constant variable
- 作用域和{}
- 模板字符(告别+拼接字符串)
- 使用反引号,直接写变量
let name = 'wang'
let course = 'react'
console.log('hello '+name+',course is '+course) //传统方式
console.log(`hello ${name},course is ${course}`)
- 多行字符串
console.log(`
h
e
l
l
o
`)
//输出
h
e
l
l
o
- 函数扩展
- 参数默认值
const hello = (name='sytin') => {
console.log(name)
}
hello(); 输出 sytin
hello('wang') //输出 wang
- 箭头函数
//传统方式
function hello(name){
console.log(name)
}
//es6
const hello1 = name => {
console.log(name)
}
hello('sytin')
hello1('sytin')
//1.简化代码 2.解决this指向问题
setTimeout(()=>{
console.log('hello')
},1000)
const double = x => x+2
console.log(double(2)) //输出 4
- 展开运算符
function(name1,name2){
console.log(name1,name2)
}
let arr = ['sytin','eunice']
hello(...arr) //输出 sytin,eunice
- 对象扩展
- Object.keys、values、entries
let obj = {name:'sytin',course:'react'}
console.log(Object.keys(obj)) // ["name","course"]
console.log(Object.values(obj)) // ["sytin","react"]
console.log(Object.entries(obj)) // [["name","sytin"],["course","react"]]
- 对象方法简写、计算属性
let name = 'sytin'
let obj1 = {name:'wang'}
obj[name] = 'hello'
console.log(obj) //{sytin:'hello',name:'wang'}
//其他简写
let obj2 = {
name,
[name]:'eunice',
hello(){}
}
- 展开运算符(不是ES6标准,但是babel也支持)
const obj = {name:'sytin',course:'react'}
const obj2 = {type:'IT',name:'eunice'}
console.log({...obj,...obj3,date:'2018'})
输出 {course:'react',type:'IT',name:'eunice',date:'2018'}
- 解构赋值
- 数组解构
let arr = ['hello','react']
let arr1 = arr[0]
let arr2 = arr[1]
let [arr1,arr2] = arr
console.log(arr1,arr2) //输出 helloreact
- 对象解构
let obj = {name:'sytin',course:'react'}
let {name,course} = obj
console.log(name,course) //输出 sytinreact
- 类
- 是prototype的语法糖
- Extends继承
- Constructor构造函数
class MyReact {
constructor(){
this.name = 'react'
}
sayHello(){
console.log(name)
}
}
const react1 = new MyReact()
react1.sayHello() //输出 react
- 新的数据结构
- Set,元素不可重合
- Map
- Symbol
- 模块化
- Import,import{}
- Export,Export default
- Node现在还不支持,还需要用require来加载文件
- 其他特性
- Promise
- 迭代器和生成器
- 代理Proxy
- 其他
虽然不在ES6的范围,但是也被babel支持,普遍被大家接受和使用(需要安装插件)
- 对象扩展符,函数绑定
- 装饰器
- Async await
- 常见代码
//遍历数组
[1,2,3].forEach(function(value,index){
console.log(value)
})
//映射新数组
arr = [1,2,3].map(v=>v+2)
//所有元素是否通过测试
[1,2,3,4].every(v=>v>3)
//是否有元素通过测试
[1,2,3,4].some(v=>v>3)
//过滤数组
[1,2,3,4,5].filter(v=>v>3)
//查询符合条件的元素:
arr=[{name:'sytin',age:18},{name:'wang',age:1}]
//查找索引
[1,2,3].indexOf(2)
//连接数组
arr1=[1,2,3]
arr2=[4,5,6]
[...arr1,...arr2]
//数组去重
arr=[1,2,3,4,3,2,1]
[...new set(arr)]