前言

我们在开发ReactNative或者是看别人开源项目时，总是发现很多开发同学是es5和es6语法混合着开发的，但是对于非前端开发的小伙伴们来说，可能对es5/es6的一些常用的语法不熟或经常记混淆，导致程序报错，影响开发效率，在这我就总结一些js开发中常用的es5和es6语法。

js常用语法系列教程如下

• es5与es6常用语法教程(1)
• es5与es6常用语法教程(2)
• es5与es6常用语法教程(3)
• es5与es6常用语法教程(4)
• es5与es6常用语法教程(5)
• es5与es6常用语法教程(6)
• es5与es6常用语法教程(7)

函数写法区别

计算a, b两个数字之和，有返回值

• es5 写法

function add(a, b) {
    return a + b;
}

• es6 写法（箭头函数）

let add = (a, b) => {
    return a + b
}

注意：

• 箭头函数作用于执行代码，这时使用{}

let add = (a, b) => {a + b}

• 当执行的代码语句只有一个逻辑表达式，这时可以省略{}

let add = (a, b) => a + b

• 箭头函数用于返回对象时，这时使用()

let add = (a, b) => (c)

• 箭头函数的参数当只有一个参数时，这时可以省略参数的()

let add = a => alert(a)

打印计算结果，没有返回值

• es5

function printSum(a, b) {
    console.log(a + b);
}

• es6

let printSum = (a, b) => {
    console.log(a + b)
}

省略{}

let printSum = (a, b) => console.log(a + b)

函数执行多条逻辑语句

• es5

function printAB(a, b){
    console.log(a);
    console.log(b);
}

• es6

let printAB = (a, b) => {
    console.log(a)
    console.log(b)
}

创建对象区别

es5和es6创建对象方式的不同

• es5

let App = React.createClass({
    render: function(){
        return (
            <View>
                <Text>这是es5创建的对象</Text>
            </View>
        )
    }
})

• es6

class App extends React.Component{
    render() {
        return (
            <View>
                <Text>这是es6创建的对象</Text>
            </View>
        )
    }
}

注意：

• render函数内可以返回视图组件，也可以返回其他的对象
• 如果return函数中如果返回视图组件，则视图组件一定要使用()包裹起来
• ()中只能有一个顶级视图标签

这种写法就属于()中有2个顶级标签, 这种会语法报错

let App = React.createClass({
    render: function(){
        return (
            <Text>这是es5创建的对象</Text>
            <Text>这是es5创建的对象</Text>
        )
    }
})

导入导出模块方式区别

导出方式

• es5

module.exports = App

• es6

export default App

当只导出一个模块时，可以直接使用下面的写法

export default class App extents Component {}

注意：

下面的两种导出方式，导入模块时，写法不一样

• 方式1

// 导出
export default App

// 导入
import App from './App'

• 方式2

// 导出
export {App}

// 导入
import {App} from './App'

导入方式

• es5

var App = require('./App');

• es6

import App from './App'

注意：

当es5和es6的导入导出方式混用时，切记：当使用es6导出模块，使用es5导入模块，这时程序会报错

设置默认的导入导出模块

• es6 设置默认导出的内容

export default function dinner(fruit, dessert){
    console.log(`${fruit}+${dessert}`)
}

或者

function dinner(fruit, dessert){
    console.log(`${fruit}+${dessert}`)
}

export default dinner

注意：

当需要导出一个js文件中的全部模块时，使用 * as xxx 语法

function fruit(fruit){
    console.log(fruit)
}

function dessert (dessert ){
    console.log(dessert )
}

// 导出全部模块
export {fruit, dessert}

// 导入全部模块
import * as chef from './xxx'

console.log(chef.fruit)
console.log(chef.dessert)

导入导出模块重命名

导出和导入模块时，可以重命名模块的名字

• 导出重命名

let fruit = '苹果'
let dessert = '面包'

function dinner( fruit, dessert){
    console.log(`${fruit}+${dessert}`)
}

// 导出模块dinner函数的名字重命名为supper
export {dinner as supper}

// 导入supper模块
import {supper} from './App'

• 导入重命名

let fruit = '苹果'
let dessert = '面包'

function dinner( fruit, dessert){
    console.log(`${fruit}+${dessert}`)
}

// 导出模块dinner函数
export {dinner}

// 导入dinner模块，并重命名为supper
import {dinner as supper} from './App'

总结

至此完成了es5，es6基础语法的第一部分，后面的部分未完待续。文中有错误的地方，请同学们及时留言提出。欢迎ReactNative开发的同学们加QQ交流群：620792950。大家一起交流学习。

福利时间

• 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发)：https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
• 作者简书主页：包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们：多多关注，多多点赞)
• 作者React Native QQ技术交流群：620792950 欢迎小伙伴进群交流学习
• 友情提示：在开发中有遇到RN相关的技术问题，欢迎小伙伴加入交流群（620792950），在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家，谢谢支持！