https://www.jianshu.com/p/dcf2e97439ef
函数写法区别
计算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'作者：光强_上海
链接：https://www.jianshu.com/p/dcf2e97439ef
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
文章来源: es5与es6常用语法教程(1)