标题ES6新增常用语法
let与const
let 和 var的作用相似都是用来声明变量的，ES5只有全局作用域和函数作用域，没有块级作用域，而let则实际上为JavaScript新增了块级作用域。用它所声明的变量，只在let命令所在的代码块内有效。
if (true) {
var a = 10;
let b = 12;
console.log(a); // 10
console.log(b); // 12
}
console.log(a); // 10
console.log(b); // 报错 ReferenceError: b is not defined
const也用来声明变量，但是声明的是常量。一旦声明，常量的值就不能改变。
const PI = Math.PI
PI = 23 //Module build failed: SyntaxError: /es6/app.js: "PI" is read-only
严格模式下当我们尝试去改变用const声明的常量时，浏览器就会报错。const有一个很好的应用场景，就是当我们引用第三方库的时声明的变量，用const来声明可以避免未来不小心重命名而导致出现bug
const monent = require('moment')
箭头函数
写法
let demoFun = (a, b) => a + b
// 返回的是 a + b，当函数直接被return时，可以省略函数体的括号
let demoFun = params => ({foo: bar})
//返回一个对象时，函数体外要加圆括号
let demoFun = (param1, param2, ...rest) => { statements }
// 支持 剩余参数和默认参数,statements为函数处理逻辑
箭头函数没有自己的this。箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值。如果上下文没有this, 则this指向Window对象。
const person = {
name: 'tom',
getName: () => this.name
}
console.log(person.getName());
// 实际编译结果却是
var person = {
name: 'tom',
getName: function getName() {
return undefined.name;
}
};
ES6中新增的箭头操作符=>简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值，这样的写法可以为我们减少大量的代码，看下面的实例：
let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));
let newArr = arr.filter((item) => (item<10));
console.log(newArr); //[6, 8, 9];
//上面的(item, i)就是参数，后面的console.log(item, i)就是回到函数要执行的操作逻辑。
字符串模版
ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。看一下实例就会明白了：
//产生一个随机数
let num = Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);
解构
若一个函数要返回多个值，常规的做法是返回一个对象，将每个值做为这个对象的属性返回。在ES6中，利用解构这一特性，可以直接返回一个数组，然后数组中的值会自动被解析到对应接收该值的变量中。我们来看例子：
function getVal() {
return [1, 2];
}
var [x,y] = getVal(); //函数返回值的解构
console.log('x:'+x+', y:'+y); //输出：x:1, y:2
默认参数
现在可以在定义函数的时候指定参数的默认值了，而不用像以前那样通过逻辑或操作符来达到目的了。
function sayHello(name){
var name=name||'tom'; //传统的指定默认参数的方式
console.log('Hello '+name);
}
//运用ES6的默认参数
function sayHello2(name='tom'){ //如果没有传这个参数，才会有默认值，
console.log(`Hello ${name}`);
}
sayHello();//输出：Hello tom
sayHello('jarson');//输出：Hello jarson
sayHello2();//输出：Hello tom
sayHello2('jarson');//输出：Hello jarson
//注意： sayHello2(name='tom')这里的等号，意思是没有传这个参数，则设置默认值，而不是给参数赋值的意思。
Class类
与es5相比，ES6提供了更接近传统语言的写法，引入了Class（类）这个概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法，也更加通俗易懂。
/ ES5
// 构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
// 原型方法
Person.prototype.getName = function() {
return this.name
}
//静态属性
Person.info='静态属性';
// ES6
class Person {
constructor(name, age) { // 构造函数
this.name = name;
this.age = age;
}
getName() { // 原型方法（千万不要加上function）
return this.name
}
}
//静态属性
Person.info = '静态属性';
const person = new Person("qiu", 24);
console.log(person.getName()); //qiu
console.log(Person.info); //静态属性
类的继承extends
class PersonExt extends Person{
constructor(name,age,birthday){
super(name,age);
//在继承的构造函数中，必须调用一次super方法，它表示构造函数的继承；必须在this之前被调用
this.birthday = birthday;
}
supGetName(){
console.log(super.getName()); //super直接调用父级的原型方法
}
}
const person = new PersonExt("qiurx",24,"0417");
console.log(person.getName()); //qiurx
person.supGetName(); //qiurx
对象字面量简写法
当属性与值的变量同名时。
let type = 'quartz';
let color = 'rose';
let carat = 21.29;
//es5
const gemstone = {
type: type,
color: color,
carat: carat
//es6
const gemstone = {type,color,carat};
console.log(gemstone);
简写方法的名称。
let gemstone = {
testFunc() {
console.log("对象字面量方法简写");
}
};
gemstone.testFunc();
在对象字面量中可以使用中括号作为属性，表示属性也能是一个变量了。
const name = 'Jane';
const person = {
[name]: true //'Jane':true
}
console.log(person.Jane); //true
展开运算符
展开字面量对象
在ES6中用(…)来表示展开运算符，它可以将数组或者对象进行展开。
展开结合数组
//es5
const arr1 = [1,2,3];
const arr2 = [3,4];
const arr3 = arr1.concat(arr2);
console.log(arr1); //concat不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
console.log(arr3); //arr1和arr2的合并 */
//es6
const arr1 = [1,2,3];
const arr2 = [3,4];
console.log(...arr1); //1 2 3
const arr3 = [...arr1,...arr2];
console.log(arr3); //arr1和arr2的合并
用于方法中
function func(x, y, z, a, b) {
console.log(x, y, z, a, b);
}
var args = [1, 2];
func(0, ...args, 3, ...[4]); // 0 1 2 3 4
展开结合对象
//jQuery
var obj1 = {
a: 1,
b: 2,
c: 3
}
var obj2 = {
d: 4,
e: 5,
f: 6
}
var obj3 = $.extend({},obj1,obj2); //目标对象（第一个参数）将被修改，所以用{}
console.log(obj3);
//es6
const obj1 = {
a: 1,
b: 2,
c: 3
}
const obj2 = {
d: 4,
e: 5,
f: 6
}
const obj3 = {
...obj1,
...obj2
}
console.log(obj3); //obj1和obj2两对象的结合
剩余参数
将变量赋数组值时
使用展开运算符将数组展开为多个元素, 使用剩余参数可以将多个元素绑定到一个数组中
const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(items); //数组(4) ["cheese", "eggs", "milk", "bread"]
可变参数函数
展开运算符还用在函数的参数中，来表示函数的不定参。只有放在最后才能作为函数的不定参，否则会报错
const add = (a, b, ...more) => {
return more.reduce((m, n) => m + n) + a + b
}
console.log(add(1, 23, 1, 2, 3, 4, 5)) // 39
es6 reduce说明
var numbers = [15.5, 2.3, 1.1, 4.7];
function getSum(total, num) {
return total + Math.round(num); //取最近的整数，0.5向大数的方向算
}
function myFunction(item) {
return item.reduce(getSum, 1);
}
console.log(myFunction(numbers)); //24+1
