前言
我们在开发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 (
这是es5创建的对象
)
}
})
- es6
class App extends React.Component{
render() {
return (
这是es6创建的对象
)
}
}
注意：
- render函数内可以返回视图组件，也可以返回其他的对象
- 如果return函数中如果返回视图组件，则视图组件一定要使用
()包裹起来 -
()中只能有一个顶级视图标签
这种写法就属于()中有2个顶级标签, 这种会语法报错
let App = React.createClass({
render: function(){
return (
这是es5创建的对象
这是es5创建的对象
)
}
})
导入导出模块方式区别
导出方式
- 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学习资料给大家，谢谢支持！