深入浅出ES6之let和const命令


Posted in Javascript onAugust 25, 2016

let和const声明的变量只在代码块内有效

{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1

不存在变量提升

变量一定要在声明后使用,否则报错

var tmp = 123;
if (true) {
tmp = 'abc'; // ReferenceError
let tmp;
}

不允许重复声明

// 报错
function () {
let a = 10;
var a = 1;
}

块级作用域

function f() { console.log('I am outside!'); }
(function () {
if(false) {
// 重复声明一次函数f
function f() { console.log('I am inside!'); }
}
f();
}());
//I am inside! ES5 函数提升
//I am outside! ES6 块级作用域

const命令

声明一个只读的常量,一旦声明,常量的值就不能改变

一旦声明变量,就必须立即初始化,不能留到以后赋值

let命令、const命令、class命令声明的全局变量,不属于全局对象的属性

var a = 1;
// 如果在Node的REPL环境,可以写成global.a
// 或者采用通用方法,写成this.a
window.a // 1
let b = 1;
window.b // undefined

下面再单独给大家介绍ES6之const命令

一直以来以ecma为核心的js始终没有常量的概念,es6则弥补了这一个缺陷;

const foo='foo';
foo='bar';//TypeError: Assignment to constant variable.

上例声明了一个基本类型的常量,如过试图修改初始值则会报错;如果是引用类型的值同样适用,但是有一点需要注意,举例说明:

const foo=[];
foo=[1];//Assignment to constant variable.

正常报错,没毛病,再看:

const foo=[1,2,3];
foo[1]=4;
console.log(foo)//[1, 4, 3]

这怎么没报错?而且还能修改成功? 这两个例子不一样的地方在于前者是修改了指针(需熟悉js 引用类型)对应的内容改变了,后者则不是指向依然没变 但是指向对象的内容发生改变了,对于foo而言我只是一个指针负责指向对应的对象 至于对象内容是什么就不管我的事了所以可以修改;如果不想让内容也改变也行使用另一个方法;

const foo=Object.freeze([1,2,3]);
foo[1]=4;
console.log(foo)//[1, 2, 3]

这样就不用担心被修改了;

Javascript 相关文章推荐
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
Nov 08 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
javascript作用域问题实例分析
Jul 13 Javascript
jquery转盘抽奖功能实现
Nov 13 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
jquery实现轮播图效果
Feb 13 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
vue实现图片上传功能
May 28 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 #Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 #Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 #Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 #Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 #Javascript
You might like
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
php中用memcached实现页面防刷新功能
2014/08/19 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
javascript比较文档位置
2008/04/08 Javascript
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
2015/01/18 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
jQuery实现内容定时切换效果完整实例
2016/04/06 Javascript
详解js的六大数据类型
2016/12/27 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
python基础教程之面向对象的一些概念
2014/08/29 Python
python杀死一个线程的方法
2015/09/06 Python
对python中的logger模块全面讲解
2018/04/28 Python
对python函数签名的方法详解
2019/01/22 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python matplotlib可视化实例解析
2020/06/01 Python
python中常用的数据结构介绍
2021/01/12 Python
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
大学生职业生涯规划书模板
2014/01/03 职场文书
彩妆大赛策划方案
2014/05/13 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
Python+Appium自动化测试的实战
2021/06/30 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS
mysql序号rownum行号实现方式
2022/12/24 MySQL