前言
我們?cè)陂_發(fā)ReactNative或者是看別人開源項(xiàng)目時(shí)，總是發(fā)現(xiàn)很多開發(fā)同學(xué)是es5和es6語法混合著開發(fā)的，但是對(duì)于非前端開發(fā)的小伙伴們來說，可能對(duì)es5/es6的一些常用的語法不熟或經(jīng)常記混淆，導(dǎo)致程序報(bào)錯(cuò)，影響開發(fā)效率，在這我就總結(jié)一些js開發(fā)中常用的es5和es6語法。
js常用語法系列教程如下
- es5與es6常用語法教程(1)
- es5與es6常用語法教程(2)
- es5與es6常用語法教程(3)
- es5與es6常用語法教程(4)
- es5與es6常用語法教程(5)
- es5與es6常用語法教程(6)
- es5與es6常用語法教程(7)
函數(shù)寫法區(qū)別
計(jì)算a, b兩個(gè)數(shù)字之和，有返回值
- es5 寫法
function add(a, b) {
return a + b;
}
- es6 寫法（箭頭函數(shù)）
let add = (a, b) => {
return a + b
}
注意：
- 箭頭函數(shù)作用于執(zhí)行代碼，這時(shí)使用{}
let add = (a, b) => {a + b}
- 當(dāng)執(zhí)行的代碼語句只有一個(gè)邏輯表達(dá)式，這時(shí)可以省略{}
let add = (a, b) => a + b
- 箭頭函數(shù)用于返回對(duì)象時(shí)，這時(shí)使用()
let add = (a, b) => (c)
- 箭頭函數(shù)的參數(shù)當(dāng)只有一個(gè)參數(shù)時(shí)，這時(shí)可以省略參數(shù)的()
let add = a => alert(a)
打印計(jì)算結(jié)果，沒有返回值
- 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)
函數(shù)執(zhí)行多條邏輯語句
- es5
function printAB(a, b){
console.log(a);
console.log(b);
}
- es6
let printAB = (a, b) => {
console.log(a)
console.log(b)
}
創(chuàng)建對(duì)象區(qū)別
es5和es6創(chuàng)建對(duì)象方式的不同
- es5
let App = React.createClass({
render: function(){
return (
<View>
<Text>這是es5創(chuàng)建的對(duì)象</Text>
</View>
)
}
})
- es6
class App extends React.Component{
render() {
return (
<View>
<Text>這是es6創(chuàng)建的對(duì)象</Text>
</View>
)
}
}
注意：
- render函數(shù)內(nèi)可以返回視圖組件，也可以返回其他的對(duì)象
- 如果return函數(shù)中如果返回視圖組件，則視圖組件一定要使用
()包裹起來 -
()中只能有一個(gè)頂級(jí)視圖標(biāo)簽
這種寫法就屬于()中有2個(gè)頂級(jí)標(biāo)簽, 這種會(huì)語法報(bào)錯(cuò)
let App = React.createClass({
render: function(){
return (
<Text>這是es5創(chuàng)建的對(duì)象</Text>
<Text>這是es5創(chuàng)建的對(duì)象</Text>
)
}
})
導(dǎo)入導(dǎo)出模塊方式區(qū)別
導(dǎo)出方式
- es5
module.exports = App
- es6
export default App
當(dāng)只導(dǎo)出一個(gè)模塊時(shí)，可以直接使用下面的寫法
export default class App extents Component {}
注意：
下面的兩種導(dǎo)出方式，導(dǎo)入模塊時(shí)，寫法不一樣
- 方式1
// 導(dǎo)出
export default App
// 導(dǎo)入
import App from './App'
- 方式2
// 導(dǎo)出
export {App}
// 導(dǎo)入
import {App} from './App'
導(dǎo)入方式
- es5
var App = require('./App');
- es6
import App from './App'
注意：
當(dāng)es5和es6的導(dǎo)入導(dǎo)出方式混用時(shí)，切記：當(dāng)使用es6導(dǎo)出模塊，使用es5導(dǎo)入模塊，這時(shí)程序會(huì)報(bào)錯(cuò)
設(shè)置默認(rèn)的導(dǎo)入導(dǎo)出模塊
- es6 設(shè)置默認(rèn)導(dǎo)出的內(nèi)容
export default function dinner(fruit, dessert){
console.log(`${fruit}+${dessert}`)
}
或者
function dinner(fruit, dessert){
console.log(`${fruit}+${dessert}`)
}
export default dinner
注意：
當(dāng)需要導(dǎo)出一個(gè)js文件中的全部模塊時(shí)，使用 * as xxx 語法
function fruit(fruit){
console.log(fruit)
}
function dessert (dessert ){
console.log(dessert )
}
// 導(dǎo)出全部模塊
export {fruit, dessert}
// 導(dǎo)入全部模塊
import * as chef from './xxx'
console.log(chef.fruit)
console.log(chef.dessert)
導(dǎo)入導(dǎo)出模塊重命名
導(dǎo)出和導(dǎo)入模塊時(shí)，可以重命名模塊的名字
- 導(dǎo)出重命名
let fruit = '蘋果'
let dessert = '面包'
function dinner( fruit, dessert){
console.log(`${fruit}+${dessert}`)
}
// 導(dǎo)出模塊dinner函數(shù)的名字重命名為supper
export {dinner as supper}
// 導(dǎo)入supper模塊
import {supper} from './App'
- 導(dǎo)入重命名
let fruit = '蘋果'
let dessert = '面包'
function dinner( fruit, dessert){
console.log(`${fruit}+${dessert}`)
}
// 導(dǎo)出模塊dinner函數(shù)
export {dinner}
// 導(dǎo)入dinner模塊，并重命名為supper
import {dinner as supper} from './App'
總結(jié)
至此完成了es5，es6基礎(chǔ)語法的第一部分，后面的部分未完待續(xù)。文中有錯(cuò)誤的地方，請(qǐng)同學(xué)們及時(shí)留言提出。歡迎ReactNative開發(fā)的同學(xué)們加QQ交流群：620792950。大家一起交流學(xué)習(xí)。
福利時(shí)間
- 作者React Native開源項(xiàng)目OneM地址(按照企業(yè)開發(fā)標(biāo)準(zhǔn)搭建框架設(shè)計(jì)開發(fā))：https://github.com/guangqiang-liu/OneM (歡迎小伙伴們 star)
- 作者簡(jiǎn)書主頁：包含50多篇RN開發(fā)相關(guān)的技術(shù)文章http://www.itdecent.cn/u/023338566ca5 (歡迎小伙伴們：多多關(guān)注，多多點(diǎn)贊)
- 作者React Native QQ技術(shù)交流群：620792950 歡迎小伙伴進(jìn)群交流學(xué)習(xí)
- 友情提示：在開發(fā)中有遇到RN相關(guān)的技術(shù)問題，歡迎小伙伴加入交流群（620792950），在群里提問、互相交流學(xué)習(xí)。交流群也定期更新最新的RN學(xué)習(xí)資料給大家，謝謝支持！
