ECMAScript6发布已经一年多了,但是由于很多浏览器兼容性的问题,目前还没有很好的对它进行实现,所以ECMAScript6暂时还没有达到那种极其火热的程度,但是笔者通过对ECMAScript6的学习发现ECMAScript6真的时候十分好用,希望早日能在各大浏览器上盛行。
ECMAScript6是什么?
JS可以分为ECMAScript、BOM、DOM三种,通过版本的迭代ECMAScript已经发展到ES6的程度,如果说HTML5是个标准,那个IE10+、高版本浏览器就是对它实现,换句话说,Javascript就是对ECMAScript标准的实现,简写为ECMA或者说是ES
我们如何使用ES6
因为考虑到浏览器的版本问题,对ES6的兼容性不尽相同,下面我讲介绍三种使用ES6的方法
- 在线编译
http://babeljs.io/repl/#babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&code=
https://google.github.io/traceur-compiler/demo/repl.html#
注意:这种方法仅仅适用与在线的测试,开发项目最好采用下面的办法 - 添加脚本
//这两个缺一不可
//这两个缺一不可
//注意:这里的bootstrap.js和那个boostrap框架可不是一个东西。不要混淆
- 如果是高版本浏览器,可能上面两种方法都不必采用,我测试过高版本的chrome浏览器可以实现ES6的一些语法所以对浏览器不能实现的功能我会选择第二种方法
ES6声明变量let方法
在ES6中定义变量用 let
let a = 12;
alert(a);
这里let定义变量看似能和我们以前定义变量var 一样使用但是实际上却是有区别的
首先,它只能在块级作用域里面生效,也就是说在块级作用域外就不能起作用
if(true){
let a=12;
}
alert(a); //这里会报错Uncaught ReferenceError: a is not defined
正是因为在块级作用域中起作用所以在块级作用域外无法使用,这个就是和var 定义的变量的最大区别,因为let自身的机制我觉得let最大的用处就是能当作封闭空间来使用也就是说上面的代码可以等效于:
(function(){
var a = 12;
})()
相比较为繁琐的封闭空间,是不是使用块级作用域let更好呢?
但是我们需要注意的是:
- let只有在块级作用域里面生效
- 不允许重复声明(重复声明会报错)
ES6常量定义const
使用const定义的是一个常量,因为const定义之后就再也无法更改
const a = 12;
a = 1;
alert(a);//这里会报错
const a = 12;
const a = 1;
alert(a);//这样依然会报错
所以我们在使用const的时候一定要注意:
const必须给初值因为声明之后再也无法修改,同时它不允许重复声明
它的用途就是利用这种特性,防止意外修改变量,比如引入的库名和组件名
ES6字符串连接新方法
个人觉得字符串拼接是个麻烦的事情,一个两个还好,但是如果多了,有的时候真的应接不暇,
以前我们字符串拼接的时候采用的方法是:
var a = 'bushi' ;
var str = 'kexi' + a + 'ni';
//个人感觉这种方式很好
var a = 'bushi' ;
var str = `kexi${a}ni`;
解构赋值
按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。解构赋值对处理一些数据非常擅长,比如处理后台返回给我们数据
数组的解构赋值:
let [a,b,c]=[12,15,3];
console.log(a); //12
console.log(b); //15
console.log(c); //3
console.log(d); //undefined
var [a,[b,c],d]=[1,[3,5],7];
//注意:左面的结构和右边的结构要一样
对象的解构赋值:
let {a,b,c}={a:3,b:12,c:7};
console.log(a,b,c);
//对象的解构赋值可以不用考虑顺序的问题
解构赋值还可以给默认值:
function demo(json){
/*var a=json.time || 1000;
alert(a)*/
var {a=800}=json;
//当没有参数的时候默认的json.a为800,类似于:
/*var json = {};
var a = json.a || 800;*/
alert(a);
}
demo({})