文档章节

谈谈神秘的ES6——(二)ES6的变量

JandenMa
 JandenMa
发布于 2018/07/23 02:43
字数 588
阅读 61
收藏 0

谈谈神秘的ES6——(二)ES6的变量

我们在《零基础入门JavaScript》的时候就说过,在ES5里,变量是有弊端的,我们先来回顾一下。

首先,在ES5中,我们所有的变量都是通过关键字var来定义的。而这种变量呢,是存在弊端的,1.可重复声明;2.无法限制修改;3.没有块级作用域。而这三个弊端,可能会导致变量使用混乱、或者变量值受到污染。举一个最简单的例子:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
<script type="text/javascript">
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            console.log(i);//都是5
        }
    }
</script>

</html>

上边这个例子呢,很明显,这个i呢,我们在点击时,i其实已经循环完毕,在ES5中,想要解决这个问题,就只能用闭包了。关于闭包,等我们讲JS进阶的时候,再详细讲一讲。

<script type="text/javascript">
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = (function (j) {
            return function () {
                console.log(j);
            }
        })(i)
    }
</script>

而在ES6里边呢,我们上述的三个弊端,已经有了比较好的解决方案。

在ES6中,首次提出了let和const两个关键字,let用来声明变量,不可重复声明,可以修改,有块级作用域;const用来声明常量,不可修改,同样不可重复声明,有块级作用域。

let a = 10;
let a = 20; //Uncaught SyntaxError: Identifier 'a' has already been declared

const b = 10;
const b = 20; //Uncaught SyntaxError: Identifier 'b' has already been declared

const c = 10;
c = 20;//Uncaught TypeError: Assignment to constant variable.

好了,这节课就说到这里,下一节课,我们来讲讲函数。

                                                                                                       

如果想跟着振丹继续学习,可以微信关注【振丹敲代码】(微信号:JandenCoding)

新博文微信同步推送,还附有讲解视频哦~

也可直接扫描下方二维码关注。

© 著作权归作者所有

共有 人打赏支持
JandenMa
粉丝 21
博文 28
码字总数 27794
作品 0
汕头
私信 提问
谈谈神秘的ES6——(三)ES6的函数

谈谈神秘的ES6——(三)ES6的函数 ES6函数的改变不算太大,都是一些其他语言早就有的功能,而Javascript一直比较欠缺的,比如函数参数默认值,任意参数的表示法,最大的变化应该是支持箭头函...

JandenMa
2018/07/30
0
0
谈谈神秘的ES6——(四)解构赋值【数组篇】

今天,我们来讲一个新的概念,叫做解构赋值。那么在ES6中,什么是解构赋值呢?我们先来给它下个定义。 在ES6中,允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(D...

JandenMa
2018/08/09
0
0
JavaScript数组去重方法总结

前言 数组去重方法老生常谈,既然是常谈,我也来谈谈。 双层循环 也许我们首先想到的是使用 indexOf 来循环判断一遍,但在这个方法之前,让我们先看看最原始的方法: 在这个方法中,我们使用...

卟想苌亣
2017/11/17
0
0
张成文——ECMAScript 6 开发体系实践

2016年04月23日14:00時,在武汉市东湖高新技术开发区民院路38号纽宾凯鲁广国际酒店(光谷步行街地铁C出口省测绘局斜对面),舉行的规模在800人左右的2016源创会武汉站。由张成文(腾讯SNG web)分...

yunwangjun
2016/04/24
2.3K
1
ReactNative开发必备ES6知识

引言 现代前端应用通常都会使用ES6进行开发,ReactNative项目同样也会使用ES6进行开发,对于现代前端项目开发来说,掌握ES6成为一件十分必要的事情。对于ES6的学习,通常都会阅读阮一峰的《E...

芒言
2018/06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Cookie 显示用户上次访问的时间

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.serv......

gwl_
今天
1
0
网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
今天
1
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0
day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
昨天
2
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部