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