学习JavaScript框架之前需要了解的ES6的几个重要知识点

磨刀不误砍柴工,在学习JavaScript框架，如rect、vue等之前，了解几个ES6引入的几个新概念,对于我们框架,会有很大的帮助。

1. 箭头函数
   const myFunction = (num1,num2) =>{return num1num2;}
   如果函数体只有一样,我们可以写成如下形式:
   const myFunction = (num1,num2) => num1num2;(隐式调用return)
   如果返回的类型是对象(object),需要放到{}里.
   const myFunction = () => ({value:‘test’});
   如果只有一个参数，可以将（）去掉；
   const myFunction= num =>num*2;
   箭头函数他们没有自己的"this",但是他们可以从他们的父辈或者包含他们的函数中继承"this".
   如:
   const ojb = {
   id:1,
   printId:function prinId(){
   setTimeout(() => {
   console.log)(this.id);},1000) //this 从obj继承.
   }
   }
2. 模板字面量(Template Literals)

将JavaScript表达式放置在{}中,可以直接求值.
const name = “world”;
const message = Hello ${name};
console.log(message) //print :Hello world.
在举例如下:
console.log(3! is ${3*2*1};
//print 3! is 6;

3. 解构
   主要用来从对象中提取属性,从数组中提取元素.
   3.1 从对象中提取属性
   const preson = {
   firstName：‘John’，
   lastName：‘Doe’，
   age：20
   }
   可以用下面的解构语句来提取属性：
   const {firstName,lastName,age} = persion;
   console.log(firstName,lastName,age);
   //print John Doe 20
   3.2 从数组中提取元素
   const fruits = [“apple”,“orange”,“grapes”,“mango”];
   const [ apple ,orange,grapes,mango] = fruits;
   console.log(apple,orange,grapes,mango);
   //prints: apple orange graps mango
   4.扩展与余量操作
   4.1 扩展操作符主要用来将数组的元素扩展为独立元素或者将对象的属性扩展为独立的属性.
   用"…"来实现.
   扩展数组的元素.
   const fruitsNew = [‘banana’,watermelons’,…fruits];
   console.log(fruitsNew);
   //print [“banana”,“watemelons”,“apple”,“orange”,“graps”,“mango”];
   扩展对象的属性:
   const newPerson = { …person,contry:‘India’};
   console.log(newPerson);
   //prints :{firstName:“Johe”,lastName:“Doe”,age:20,country:“India”};
   4.2 余量操作符
   将多余的参数放置在一个数组里.
   const printNumbers = (num1,num2,…restNumbers) => console.log(num1,num2,restNumbers);
   printNumbers(1,2,3,4,5);
   //print:1 2 [3,4,5]