Redux-React Router+Node.js全栈开发实战教程--ES6语法概述（二）

一、ES6里都有什么

块级作用域、字符串、函数
对象扩展、解构
类、模块化等

二、作用域

1. 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

• 作用域和{}

2. 模板字符(告别+拼接字符串)

• 使用反引号，直接写变量

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

3. 函数扩展

• 参数默认值

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

4. 对象扩展

• 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'}

5. 解构赋值

• 数组解构

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

6. 类

• 是prototype的语法糖
• Extends继承
• Constructor构造函数

class MyReact {
	constructor(){
		this.name = 'react'
	}
	sayHello(){
		console.log(name)
	}
}
const react1 = new MyReact()
react1.sayHello() //输出 react

7. 新的数据结构

• Set,元素不可重合
• Map
• Symbol

8. 模块化

• Import,import{}
• Export,Export default
• Node现在还不支持，还需要用require来加载文件

9. 其他特性

• Promise
• 迭代器和生成器
• 代理Proxy

10. 其他
    虽然不在ES6的范围，但是也被babel支持，普遍被大家接受和使用（需要安装插件）

• 对象扩展符，函数绑定
• 装饰器
• Async await

11. 常见代码

 //遍历数组
   [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)]