1、ES6新增了let
命令,用来声明变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
{ var a = 1; let b = 1; } a; b;/
let不像var存在变量提升,即变量一定要声明之后才能使用
2、块级作用域
ES5只有全局作用域和函数作用域,没有块级作用域
3、变量的结构赋值
var [a, b, c] = [1, 2, 3];
4、模板字符串
1
2
3
4
5
6
|
$(
'#list'
).html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);
|
模板字符串中还能调用函数
1
2
3
4
5
6
|
function
fn() {
return
"Hello World"
;
}
`foo ${fn()} bar`
// foo Hello World bar
|
5、函数参数的默认值
ES5
1
2
3
4
5
6
7
8
|
ES6
1
2
3
4
5
6
7
|
function
log(x, y =
'World'
) {
function
log(x, y) {
y = y ||
'World'
;
console.log(x, y);
}
log(
'Hello'
)
// Hello World
log(
'Hello'
,
'China'
)
// Hello China
log(
'Hello'
,
''
)
// Hello World
console.log(x, y);
}
log(
'Hello'
)
// Hello World
log(
'Hello'
,
'China'
)
// Hello China
log(
'Hello'
,
''
)
// Hello
|
引用
在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样:
//ES5
var React = require("react");
var {
Component,
PropTypes
} = React; //引用React抽象组件
var ReactNative = require("react-native");
var {
Image,
Text,
} = ReactNative; //引用具体的React Native组件
在ES6里,import写法更为标准
//ES6
import React, {
Component,
PropTypes,
} from 'react';
import {
Image,
Text
} from 'react-native'
导出单个类
在ES5里,要导出一个类给别的模块用,一般通过module.exports来导出
//ES5
var MyComponent = React.createClass({
...
});
module.exports = MyComponent;
在ES6里,通常用export default来实现相同的功能:
//ES6
export default class MyComponent extends Component{
...
}
引用的时候也类似:
//ES5
var MyComponent = require('./MyComponent');
//ES6
import MyComponent from './MyComponent';