es6基础

一、变量声明 let/const 

let提供了块级作用域{    let a = 12;} console.log(a);  // a is not definedlet和const区分：let声明一个值会改变的变量，const声明一个不会改变的常量。

二、箭头函数的使用

// es5var fn = function(a, b) {    return a + b;} // es6 箭头函数写法，当函数直接被return时const fn = (a, b) => a + b; // es5var foo = function() {    var a = 20；    var b = 30;    return a + b;} // es6const foo = () => {   const a = 20;   const b = 30;   return a + b;} // es5var person = {    name: 'tom',    getName: function() {        return this.name;    }} // es6const person = {    name: 'tom',    getName: () => this.name;//undefined}//注意箭头函数中，没有this。如果你在箭头函数中使用了this，那么该this一定就是外层的this。

三、模板字符串

模板字符串是为了解决使用+号拼接字符串var x = 1;var y = 2;const add =`${x} + ${y} = ${x + y}`;$('#result').append(`  There are <b>${basket.count}</b> items   in your basket, <em>${basket.onSale}</em>  are on sale!`);

四、解析结构

// 对象const props = {    className: 'tiger-button',    loading: false,    clicked: true,    disabled: 'disabled'}取得其中的2个值：loading与clicked时：// es5var loading = props.loading;var clicked = props.clicked;// es6const { loading, clicked } = props;// 给一个默认值，当props对象中找不到loading时，loading就等于该默认值const { loading = false, clicked } = props;react中的应用const { click, loading } = this.props;const { isCheck } = this.state;//数组// es6const arr = [1, 2, 3];const [a, b, c] = arr; // es5var arr = [1, 2, 3];var a = arr[0];var b = arr[1];var c = arr[2];

五、 函数默认参数

function add(x, y) {    var x = x || 20;    var y = y || 30;    return x + y;} console.log(add()); // 50这个存在个漏洞，当传入一个x值为false，这个时候会取到默认值。//ES6function add(x = 20, y = 30) {    return x + y;}console.log(add());

六、展开运算符

//合并数组和对象const arr1 = [1, 2, 3];const arr2 = [...arr1, 10, 20, 30]; //[1, 2, 3, 10, 20, 30];const obj1={first:1,second:2};const obj2={...obj1,third:3};//{first: 1, second: 2, third: 3}//将所有参数相加的函数function add(...x){return x.reduce((m,n)=>m+n);}//传递任意个数的参数console.log(add(1,2,3));//输出：6console.log(add(1,2,3,4,5));//输出：15// 这种方式在react中十分常用const props = {  size: 1,  src: 'xxxx',  mode: 'si'}  const { size, ...others } = props; console.log(others);//{src: "xxxx", mode: "si"}

七、import导入模块 和 export导出模块

//全部导入import people from './example'//有一种特殊情况，即允许你将整个模块当作单一对象进行导入//该模块的所有导出都会作为对象的属性存在import * as example from "./example.js"console.log(example.name)console.log(example.age)console.log(example.getName())//导入部分import {name, age} from './example'// 导出默认, 有且只有一个默认export default App// 部分导出export class App extend Component {};// 注意点：// 1.当用export default people导出时，就用 import people 导入（不带大括号）// 2.一个文件里，有且只能有一个export default。但可以有多个export。// 3.当用export name 时，就用import { name }导入（记得带上大括号）// 4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age } // 5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example//         })

八、类的定义

//类的定义class Animal {    constructor(name) {        this.name = name;    }    //实例方法    sayName() {        console.log('My name is '+this.name);    }}//类的继承class Cat extends Animal {    constructor(name) {    //直接调用父类构造器进行初始化        super(name);    }    program() {        console.log("hello");    }}var anima=new Animal('dog'),var cat1=new cat('mao');anima.sayName();//输出 ‘My name is dog’cat1.sayName();//输出 ‘My name is mao’cat1.program();//输出 hello