ES6新特性
1.const、let关键字
①const：用来定义一个常量，一旦定义后是不可以修改的。注意：如果用来定义引用类型，是可以修改他的属性值的
const PI = 3.14;
console.log(PI);//3.14
//PI = 10; //报错：常量不可以重新赋值
const PERSON = {'age':17};
console.log(PERSON.age);
PERSON.age = 16;//引用类型可以重新赋值
console.log(PERSON.age);
②let：用来定义块级作用域的的变量，详细用法和解释可以参考：https://www.cnblogs.com/JuFoFu/p/6726359.html
if(1){
let jj = 'tim';
console.log(jj);
}
//console.log(jj);//报错 ReferenceError: jj is not defined
2.箭头函数
function a(a,b){//普通函数的写法
console.log(a + b);
}
a(2,1);
ad = (e,f)=> {//箭头函数的写法相对简单整洁
console.log(e+f)
};
ad(22,11);
3.this关键字
有箭头函数，this的指向问题就可以轻松解决，没有的话需要用第二、三种方法去处理，比较麻烦，第一种写法直接是报 错的。
var kitty1 = {
age:1,
grow: function(){
setTimeout(function(){
console.log(this.age);
console.log(++this.age);
},100);
}
};
var kitty2 = {
age:1,
grow: function(){
const self = this;
setTimeout(function(){
console.log(self.age);
console.log(++self.age);
},100);
}
};
var kitty3 = {
age:1,
grow: function(){
setTimeout(function(){
console.log(this.age);
console.log(++this.age);
}.bind(this),100);
}
};
var kitty4 = {
age:1,
grow: function(){
setTimeout(() =>{
console.log(this.age);
console.log(++this.age);
},100);
}
};
kitty1.grow();//undefined NaN
kitty2.grow();//1 2
kitty3.grow();//1 2
kitty4.grow();//1 2
4.函数的默认参数
function desc(name = 'peter',age = 18){
return name + ' is ' + age + ' years old';
}
var de = desc();
console.log(de);//peter is 18 years old
5.Rest参数
当一个函数的最后一个参数有 “…” 这样的前缀，它就会变成一个参数的数组。
注：其实rest参数和参数组arguments的区别：
①Rest是没有指定变量名称的参数组，有可能仅是参数的一部分，而arguments是所有参数的集合。
②arguments是对象不是数组，而Rest是真正的数组。
function test(...args){
console.log(args); // [ 1, 2, 35, 66 ]
console.log(Array.isArray(arguments));//false
console.log(Object.prototype.toString.call(args) === '[object Array]');//true
console.log(args.length);// 4
console.log(typeof(args));//object
}
test(1,2,35,66);
function test2(abc,...args){
console.log(abc);// 9
console.log(arguments);//{ '0': 9, '1': 4, '2': 77, '3': 23 }
console.log(args);// [ 4, 77, 23 ]
console.log(args.length);// 3
}
test2(9,4,77,23);
6.展开操作符“…”
对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中
①用于函数调用
function test(x,y,z){console.log(x+y+z);}
var arg = [1,2,3];
test.apply(null,arg);
//使用ES6后，可以简化为已下代码
function test1(x,y,z){console.log(x+y+z);}
let args = [1,2,3];
test(...args);
②用于数组字面量
var arr1 = [1,23,3];
var arr2 = [4,5,6];
console.log(arr1.concat(arr2)); // [ 1, 23, 3, 4, 5, 6 ]
console.log([...arr1,...arr2]); // [ 1, 23, 3, 4, 5, 6 ]
③对象的展开运算符
var jack = {name:'jack',age:18}
jack ={...jack,sex:'male'}
console.log(jack);// { name: 'jack', age: 18, sex: 'male' }
7.模板字符串
let name = 'tom';
let detail = `my name is ${name}`;
console.log(detail);//my name is tom
let add =`this is beautiful day,
I love it,
I can play outside with my friends`;
console.log(add);
8.解构赋值
①解构数组
let food =['apple','orange','been'];
let [one,two ,three] = food;
console.log(one,two,three);//apple orange been
console.log(`${one},${two},${three}`);//apple orange been
②解构对象
let food ={name:'orange',age:15};
let {name,age} = food;
console.log(name,age);//orange 15
console.log(`${name},${age}`);//orange 15
9.类
super:关键字用于访问父对象上的函数。
es6的static方法：不需要实例化类，即可直接通过该类来调用的方法，即称之为“静态方法”。将类中的方法设为静态方法也很简单，在方法前加上static关键字即可。这样该方法就不会被实例继承！
class Animal{
constructor(name,age){
this.name = name;
this.age = age;
}
shot(){
console.log(`my name is ${this.name},age is ${this.age}`);
}
//静态方法
static foo(){
console.log('Here is static method');
}
}
const cow = new Animal('James',3);
cow.shot();
Animal.foo();
class Dog extends Animal{
constructor(name,age = 2,color = 'red'){
//构造函数中可以直接使用super方法
super(name,age);
this.color = color;
}
shot(){
//非构造函数中不能直接使用super方法，但可以使用super.+父类方法名
console.log(super.shot()+`, color is ${this.color}`);
}
}
const JanpanDog = new Dog('jack');
JanpanDog.shot();
10.模块
①单一模块导出导入
//hello.js文件
function hello(){
console.log('hello world');
}
export hello;
//main.js文件
import hello from './hello';
hello();// hello world
②多模块导入导出
//hello.js
export PI = 3.14;
export function hello(){
console.log('hello world');
}
export let person = {name:'wide'};
//main.js解构
//使用对象解构加载这个三个变量
import {PI,hello,person} from './hello';
console.log(PI);
或者import * as util from './hello';
console.log(util.PI);
③使用default关键字来实现模块的导出
//hello.js文件
export default function (){
console.log('hello world');
}
//main.js文件
import hello from './hello';
hello();// hello world
11.event
事件包含的方法由on(), off(), offAll(), emit()等
