前端面试之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；
……

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