es6和es5的区别

1、ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

    {
        var a = 1;
        let b = 1;
    }
    a;
    b;/

let不像var存在变量提升，即变量一定要声明之后才能使用

2、块级作用域

ES5只有全局作用域和函数作用域，没有块级作用域

 3、变量的结构赋值

var [a, b, c] = [1, 2, 3];

4、模板字符串

1 2 3 4 5 6

$( '#list' ).html(` <ul>    <li>first</li>    <li>second</li> </ul> `);

模板字符串中还能调用函数

1 2 3 4 5 6

function  fn() {    return  "Hello World" ; }   `foo ${fn()} bar` // foo Hello World bar

5、函数参数的默认值

ES5

1 2 3 4 5 6 7 8

ES6

1 2 3 4 5 6 7

function  log(x, y =  'World' ) { function  log(x, y) {    y = y ||  'World' ;    console.log(x, y); }   log( 'Hello' )  // Hello World log( 'Hello' ,  'China' )  // Hello China log( 'Hello' ,  '' )  // Hello World    console.log(x, y); }   log( 'Hello' )  // Hello World log( 'Hello' ,  'China' )  // Hello China log( 'Hello' ,  '' )  // Hello

　　

引用

在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：

//ES5
var React = require("react");
var {
    Component,
    PropTypes
} = React;  //引用React抽象组件

var ReactNative = require("react-native");
var {
    Image,
    Text,
} = ReactNative;  //引用具体的React Native组件

在ES6里，import写法更为标准

//ES6
import React, { 
    Component,
    PropTypes,
} from 'react';
import {
    Image,
    Text
} from 'react-native'

导出单个类

在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出

//ES5
var MyComponent = React.createClass({
    ...
});
module.exports = MyComponent;

在ES6里，通常用export default来实现相同的功能：

//ES6
export default class MyComponent extends Component{
    ...
}

引用的时候也类似：

//ES5
var MyComponent = require('./MyComponent');

//ES6
import MyComponent from './MyComponent';

　　

好文要顶  关注我  收藏该文