ES6
1.什么是ES6
编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA(一个类似W3C的标准组织)参与进行标准化的语法规范。
ECMAScript标准不定义HTML或CSS的相关功能,也不定义类似DOM(文档对象模型)的Web API,这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景,无论是浏览器环境还是类似node.js的非浏览器环境。
ECMAScript标准的历史版本分别是1、2、3、5。
2009年发布的改进版本ES5
ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,2015年6月正式发布。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
1.1ES6新的语法特征
1.1.1定义变量let,常量const
var关键字声明变量。无论声明在何处,都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升。例如:
test();
function test(){
var flag=false;
if(flag){
var a='hello,a';
console.log(a);
}else{
console.log('no data...'+a);
}
}
在ES6中,通常用let表示变量、const表示常量。let和const都是块级作用域。
test();
function test(){
var flag=false;
if(flag){
let a='hello,a';
console.log(a);
}else{
console.log('no data...'+a); //此处访问不到,会抛异常,a未定义
}
}
//定义常量
const name='accp';
1.1.2 模板字符串
一。字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
//es5
var name = 'es5...'
console.log('hello' + name)
//es6
const name = 'es6'
console.log(`hello ${name}`) //hello es6
二。在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)非常方便实现多行字符串
// es5
var msg = "Hi \
man!"
// es6
const template = `<div>
<span>hello world</span>
</div>`
1.1.3 函数默认参数
ES6为参数提供了默认值。在定义函数时便初始化了这个参数,以便在参数没有被传递进去时使用。
看例子代码
function action(num = 200) {
console.log(num)
}
action() //200
action(300) //300
1.1.4 箭头函数
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。箭头函数最直观的三个特点。
1不需要function关键字来创建函数
2省略return关键字
3继承当前上下文的 this 关键字
看下面代码(ES6)
(response,message) => {
.......
}
相当于ES5代码
function(response,message){
......
}
1.1.5 对象初始化简写
ES5我们对于对象都是以键值对的形式书写,是有可能出现键值对重名的。例如
function student(name, age) {
return {
name: name,
age: age
};
}
以上代码可以简写为
function student(name, age) {
return {
name,
age
};
}
1.1.6 import导入模块、export导出模块
a.js
let fn=function(){
console.log('fn...');
}
export {fn}
b.js
import {fn} from './a'
fn();