ES5与ES6常用语法教程之 ①函数写法、创建对象、导入导出模块方式

函数写法区别

计算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'