ES6，正式名称叫做ECMAscript2015，ES6这个名称更加简洁。ES6已经不再是JavaScript最新的标准，他已经广泛的用于实际编程中。对ES6常用的特性给一个总结。
ES6常用特性
- 函数参数默认值
- 模板字符串
- 多行字符串
- 结构赋值
- 对象属性简写
- Promise
- let和const
- class类
- 模块化
1参数默认值
不使用ES6
为函数的参数设置默认值
function a(a,b){
var a = a || ' ';
var b = b || ' ';
}
这样写一般是没有问题的。但是当参数的布尔值为false时，就会出事情！！！比如这样调用
a(0,1)
因为0的布尔值为false，这样a就是空。你要在进行处理就很麻烦啦。但是使用ES6可以避过这些问题。
使用ES6
function a(a=' ',b=' '){
}
2模板字符串
不使用ES6
在不使用ES6的时候拼接字符串是一件很烦的事情。
var a = 'asd' + str + ' ' + obj + '.';
使用ES6
将变量放在大括号之中
var a = `asd${str}${obj}.`;
ES6的写法更加简单、明了。
3多行字符串
不使用ES6
在不使用ES6的时候换行必须要拼接上\n\t
var a = 'asdasdasdasdasda\n\t'+
'asdasdasdasdasdasd\n\t'+
'asdasdasdasdasdasdasd'
使用ES6
使用ES6就方便多啦
var a = `asdasdsadasdas
asdasdasdasda
asdasdasdasdsd`;
4解构赋值
不使用ES6
当需要获取某个对象的属性值时，需要单独获取
var data = $('body').data(); // data有house和mouse属性
var house = data.house;
var mouse = data.mouse;
使用ES6
一次性获取对象子属性
var {house,mouse} = $('body').data();
对于数组也是一样
var [a,b] = $('.arr');
5对象属性的简写
不使用ES6
对象中必须要有属性和属性值，显得很是多余
var a = 'a ';
var b = function(){}
var obj = {
a:a,
b:b
}
使用ES6
使用ES6会变得很简单
var a = 'a ';
var b = function(){}
var obj = {a,b};
6箭头函数
不使用ES6
普通函数的this，永远指向调用者。这个很奇怪，就会出现许多莫名的问题。
function foo()
{
console.log(this.id);
}
var id = 1;
foo(); // 输出1
foo.call({ id: 2 }); // 输出2
使用ES6
箭头函数中的this，就是定义时所在的对象，而不是调用时所在的对象
var foo = () => {
console.log(this.id);
}
var id = 1;
foo(); // 输出1
foo.call({ id: 2 }); // 输出1
7Promise对象
不使用ES6
不使用ES6的时候，前端很容易陷入一个回调地狱，比如等这个AJAX调取完，再去调用另一个AJAX，就要基于回调，多个就会出现回调地狱。
setTimeout(function()
{
console.log('Hello'); // 1秒后输出"Hello"
setTimeout(function()
{
console.log('Fundebug'); // 2秒后输出"Fundebug"
}, 1000);
}, 1000);
使用ES6
var wait1000 = new Promise(function(resolve, reject)
{
setTimeout(resolve, 1000);
});
wait1000
.then(function()
{
console.log("Hello"); // 1秒后输出"Hello"
return wait1000;
})
.then(function()
{
console.log("Fundebug"); // 2秒后输出"Fundebug"
});
8let和const
不使用ES6
不使用ES6的时候，js声明变量一般都在使用var，var会有一个变量提升的问题。
{
var a = 10;
}
console.log(a); //10
使用ES6
let定义的变量是块级作用域，const定义的是常量。
{
let a = 10;
}
console.log(a); //报错
let和const都一样都是定于的块级作用域。
9class类
不使用ES6
不使用ES6的时候，是要使用构造函数定义一个类
function aa(x,y){
this.x = x;
this.y = y;
this.add=function(){
return this.x + this.y;
}
}
var p = new aa(1,2);
console.log(p.add()); //输出3
使用ES6
使用class定义类，更加规范，更加方便继承，写法更加偏向后台。
class aa{
constructor(x,y){
this.x = x;
this.y = y;
},
add(){
return this.x + this.y;
}
}
var p = new aa(1,2);
console.log(p.add()); //输出3
10模块化
JavaScript中是没有一个模块化的概念的，开发者在实践中主要采用common.js和AMD的规范。但是ES6中定义了模块的概念。
node.js中主要采用common.js规范实现模块化，而前端也可以采用。这里不妨介绍一下common.js的规范。
module.js中使用了module.exports导出a变量和getAjax方法：
module.exports = {
a:100,
getAjax (){ //ES6中对象定义方法简写
}
}
main.js中使用require导入module.js：
var a= require('module.js')
console.log(a.port) // 输出100
使用ES6
ES6中使用export和import关键字来实现模块化。
module.js中使用了module.exports导出a变量和getAjax方法：
export var a = 100;
export function getAjax(){}
main.js中使用import导入module.js，可以指定需要导入的变量：
import {a, getAjax} from 'module'
console.log(a) // 输出100
也可以全局引入
import * as service from 'module'
console.log(service.a) //输出100
网友评论