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'