什么是ECMAScript？
ECMAScript是浏览器脚本语言的规范，而我们熟知的js语言，如JavaScript则是规范的具体实现。es6就好比Java的jdk。
一、es6语法详解：let声明变量
1、var声明的变量往往会越域；let声明的变量有严格局部作用域
{
var a = 1;
let b = 2;
}
console.log(a) // 1
console.log(b) // Uncaught ReferenceError: b is not defined
2、var 可以声明多次；let只能声明一次
var m = 1;
var m = 2;
let n = 1;
let n = 2;
console.log(m) //2
console.log(n) //Uncaught SyntaxError: Identifier 'n' has already been declared
3、var会变量提升；let不存在变量提升
console.log(x);
var x = 10; // undefined
console.log(y);
let y = 12; // Uncaught ReferenceError: Cannot access 'y' before initialization
ps:注意：以后要习惯使用let声明变量
二、es6语法详解：解构表达式
1、数组解构
let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c) //1,2,3
2、对象解构
const person = {
name: "qiyue",
age: 23,
language: ['java', 'js', 'css']
}
const { name, age, language } = person
console.log(name, age, language) //qiyue 23 (3) ["java", "js", "css"]
const person = {
name: "qiyue",
age: 23,
language: ['java', 'js', 'css']
}
//从person里解析出name的值在赋值给abc
const { name:abc, age, language } = person
console.log(abc, age, language) //qiyue 23 (3) ["java", "js", "css"]
三、es6语法详解: 函数优化
1、函数默认值：直接给参数写上默认值，没传就会自动使用默认值
function add(a, b = 1) {
return a + b;
}
console.log(add(10)) //11
2、不定参数：有且只有一个不定参数
function fun(...params) {
console.log(params.length)
}
fun(1, 2) // 2
fun(1, 2, 3, 4) //4
3、箭头函数
//以前
var sum = function (a, b) {
c = a + b
return c
}
console.log(sum(2, 3)) // 5
//箭头函数
var sum2 = (a, b) => a + b;
console.log(sum2(2, 4)) // 6
4、箭头函数结合解构表达式
//以前
function hello(person) {
console.log("hello" + person.name)
}
hello(person); //helloqiyue
//箭头函数
let hello2 = params => console.log("hello" + person.name)
hello2(person) //helloqiyue
//箭头函数加解构表达式
var hello3 = ({ name }) => console.log("hello" + name)
hello3(person) //helloqiyue
四、es6语法详解:map和reduce方法
1、map():接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
let arr = ["1", "3", "4", "23"]
arr = arr.map(item => item * 2)
console.log(arr) //[2, 6, 8, 46]
2、reduce():为数组中的每一个元素依次执行回调函数，不包括数组中被删除或未被赋值的元素
let arr1 = [2, 40, -10, 6]
let result = arr1.reduce((a, b) => {
return a + b
}, 10)
console.log(result)//48
五、es6语法详解:模块化
什么是模块化：模块化就是把代码进行拆分，方便重复利用。类似Java中的导包，要使用一个包，必须先导包。二Js中没有包的概念，换来的就是模块
模块的功能主要有两个命令构成：export和import
- export命令用于规定模块的对外接口，export不仅可以导出对象，一切js变量都可以导出。比如：基本类型变量、函数、数组、对象
- import命令用于导入其他模块提供的功能
六、es6语法详解: 对象优化
1、es6给Object扩展了许多新的方法，如
- key(obj)：获取对象的所有key形成的数组
- value(obj):获取对象的所有value形成的数组
- entries(obj):获取对象所有的key和value形成的二维数组
const person = {
name: "qiyue",
age: 23,
language: ["java", "js", "css"]
}
console.log(Object.keys(person)) //["name","age","language"]
console.log(Object.values(person)) // ["qiyue",23,Array(3)]
console.log(Object.entries(person)) //[Array(2),Array(2),Array(2)]
2、Object.assign方法的第一个参数是目标对象，后面的参数都是源对象；将源对象的属性赋值到目标对象中
onst target = { a: 1 }
const source1 = { b: 2 }
const source2 = { c: 3 }
Object.assign(target, source1, source2);
console.log(target) //{a: 1, b: 2, c: 3}
3、 声明对象简写
//以前
const name = 'sanyue'
const age = 21
//将属性值name，age分别赋给person1对象的name，age,后面是属性值
const person1 = { name: name, age: age }
console.log(person1) //{name: "sanyue", age: 21}
//es6:属性名和属性值变量名一样，可以省略
const person2 = {name,age}
console.log(person2) //{name: "sanyue", age: 21}
4、对象的函数属性简写
let person3 = {
name: "qiyue",
//以前
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数中this不能使用，用对象.属性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food)
}
}
person3.eat("苹果") //qiyue在吃苹果
person3.eat2("香蕉") // qiyue在吃香蕉
person3.eat3("西瓜") //qiyue在吃西瓜
5、对象的扩展运算符
扩展运算符（…)用于取出参数对象所有可遍历属性然后拷贝到当前对象
//拷贝对象（深拷贝）
let p1 = { name: "qiyue", age: 23 }
let obj = { ...p1 }
console.log(obj)//{name: "qiyue", age: 23}
//合并对象
let age1 = { age: 24 }
let name1 = { name: "qiyue" }
let p2 = {}
p2 = { ...age1, ...name1 }
console.log(p2) //{age: 24, name: "qiyue"}
//如果p2中原本有name,age属性会被覆盖
