es6基础

一、变量声明 let/const 

let提供了块级作用域
{
    let a = 12;
}
 
console.log(a);  // a is not defined

let和const区分：let声明一个值会改变的变量，const声明一个不会改变的常量。

二、箭头函数的使用

// es5
var fn = function(a, b) {
    return a + b;
}
 
// es6 箭头函数写法，当函数直接被return时
const fn = (a, b) => a + b;
 
// es5
var foo = function() {
    var a = 20；
    var b = 30;
    return a + b;
}
 
// es6
const foo = () => {
   const a = 20;
   const b = 30;
   return a + b;
}
 
// es5
var person = {
    name: 'tom',
    getName: function() {
        return this.name;
    }
}

 
// es6
const 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时：


// es5
var loading = props.loading;
var clicked = props.clicked;

// es6
const { loading, clicked } = props;

// 给一个默认值，当props对象中找不到loading时，loading就等于该默认值
const { loading = false, clicked } = props;

react中的应用

const { click, loading } = this.props;
const { isCheck } = this.state;

//数组
// es6
const arr = [1, 2, 3];
const [a, b, c] = arr;
 
// es5
var 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，这个时候会取到默认值。


//ES6
function 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));//输出：6
console.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