es5与es6常用语法教程(1)

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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值