接回来说道我们的ecmascript6,也就是ecmascript的第六个版本,它新增了很多新的特性,在现代前端体系中不得不学,不然你学现代前端框架的时候感觉像看天书,哪跟哪都不知道,比如:
import { Button, Radio, Icon } from 'antd';
能看得懂吗?这是啥东西啊,不着急,我们需要先把es6的新特性给学习了。下面我总结了一些经常会用到的es6新特性:
一、let和const
二、模板字符串
三、es6在es5原有函数上的扩展
四、es6在对象上的扩展
五、class
六、解构赋值
七、编译环境babel
八、模块import和export
九、新增的字符串方法
十、Symbol类型
十一、proxy
十二、set
十三、Map
十四、Promise
常用的大概也就这十几个了,之后我会继续用文章教程的形式来尽量给大家阐释清楚每一个新特性的用法。
能发一篇文章不容易,一天最多也就发10篇,能多写点就多写点吧。
看下第一个的知识点:
const
const翻译过来是常量的意思,顾名思义,就是使用这个关键字声明的变量不能被再次改变值。新建es6.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>es6新特性</title>
<style type="text/css">
</style>
</head>
<body>
<script>
const PI=3.14;
console.log(PI);
</script>
</body>
</html>
执行结果:3.14
修改js为如下:
const PI=3.14;
PI=4;
console.log(PI);
刷新页面,报错es6.html:14 Uncaught TypeError: Assignment to constant variable.如下图:
这就是const,简单吧,const就是用来声明不能被再次赋值的变量。但是被const声明的对象的属性对应的值是可以被修改的,而对象本身是不能被再次赋值的。如下:
<script>
const obj={
name:"zhao",
age:28
};
console.log(obj.name);
obj.name="zhang";//常量对象的属性值可修改
console.log(obj.name);
//常量对象不可修改
obj={
height:"2m"
};
console.log(obj);
</script>
执行结果:
let
我们知道,js里面的var用来声明变量,js变量的作用域只有两种:1.全局变量 2.函数作用域 也就是说,js里面并不存在块级作用域的概念。下面的代码输出结果毫无疑问为3,而不是 a is not defined。
<script>
if(true){
var a=3;
}
console.log(a);
</script>
这样就带来了一个问题,你可能在不知道的情况下就把a这个变量的值给修改了,es6里的let解决了js里面没有块级作用域的问题。
<script>
if(true){
let a=3;
console.log("if内部:"+a);
}
console.log(a);
</script>
执行结果:
没那么玄乎,let的作用就是这样,也就这么简单,你用的多了可能就会有自己的体会。