前端面试之ES5与ES6的区别

    首先我们来看一下ES是什么？全称为ECMAScript，是JavaScript语言的核心，它规定了js的组成部分：语法、类型、语句、关键字、保留字、操作符、对象。下面直奔两者不同：

1. 系统库的引用

    ES5中的引用需要先使用require导入React包，成为对象，再去进行真正引用

//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'

2. 导出及引用单个类

    ES5中，要导出一个类给别的模块使用，一般通过module.exports来实现，引用时，依然通过require方法来获取。

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

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

    ES6中，使用export default实现同样的功能，但要使用import方法来实现导入。

//ES6导出(一般都继承于Component类)
export default class MyComponent extends Component{
    ...
}

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

    注意：ES5和ES6的导入导出方法是成对出现的，不可以混用。

3. 定义组件

    ES5中，组件类的定义通过React.createClass实现。

    注意：ES5中React.createClass后面是需要小括号的，且结尾必须有分号。

//ES5
var Photo = React.createClass({
    render: function() {
        return (
            <Image source={this.props.source} />
        );
    },
});

    在ES6里，让组件类去继承React.Component类就可以了。

    注意：这里结尾时不会出现小括号，也不需要添加分号。

//ES6
class Photo extends React.Component {
    render() {
        return (
            <Image source={this.props.source} />
        );
    }
}

4. 给组件定义方法

    从上面的例子可以看到，给组件定义方法不再用 名字：function()的写法，而是直接用 名字()，在方法的最后也不能有逗号了。

//ES5 
var Photo = React.createClass({
    componentWillMount: function(){

    },
    render: function() {
        return (
            <Image source={this.props.source} />
        );
    },
});

//ES6
class Photo extends React.Component {
    componentWillMount() {

    }
    render() {
        return (
            <Image source={this.props.source} />
        );
    }
}

5. 初始化State

    ES5中，初始化state使用getInitialState

//ES5 
var Video = React.createClass({
    getInitialState: function() {
        return {
            loopsRemaining: this.props.maxLoops,
        };
    },
})

ES6中存在两种写法
第一种，直接构造state函数

class Video extends React.Component {
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}

第二种，相当于OC中的方法重写，重写constructor方法

class Video extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

6. ES6中的新特性

• ES6中的let命令，声明变量，用法和var差不多，但是let是为JavaScript新增了块级作用域，ES5中是没有块级作用域的，并且var有变量提升的概念，但是在let中，使用的变量一定要进行声明；
• ES6中变量的结构赋值，包括对象解构和数组解构以及混合解构，比如：var [a,b,c] = [0,1,2];
• ES6中的函数定义也不再使用关键字function，而是利用了箭头函数=>来进行定义；
• ES6中可以设置默认函数参数，如function A（x,y=9）{};
• ES6中新增了Set集合和Map集合；
• ES6新增了一个基本数据类型Symbol；
• ……

 

目前先总结这么多，其他小伙伴也可以补充哦，大家一起学习、进步！