前端面试之ES5与ES6的区别

一时失言乱红尘 2022-05-09 12:04 343阅读 0赞

首先我们来看一下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；
 *  ……

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