需要掌握的es6新特性列举以及es6新特性之const和let

接回来说道我们的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.如下图:

image.png

这就是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>

执行结果:

image.png

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>

执行结果:

image.png

 没那么玄乎,let的作用就是这样,也就这么简单,你用的多了可能就会有自己的体会。                                                                                                                       

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值