每天学习一点ES6(二)let 和 const
let 命令
let 和 var 差不多,只是限制了有效范围。
先定义后使用
不管是什么编程语言,不管语法是否允许,都要秉承先定义,然后再使用的习惯,这样不会出幺蛾子。以前JavaScript比较随意,可以不定义直接使用,这样很容易乱,let 就要严格一些,let定义的变量,在定义之前是不可以用的,会报错。
console.log(v)
var v = 1;
console.log(a)
let a = 1;
运行结果:
var定义的变量不会报错,但是let定义的变量会报错。let更加的严谨。
let 的有效范围
let 只在代码块内部有效。我们举个例子来区分一下
function test() {
let arr = [1,2,3]
for (var i = 0; i<arr.length;i++) {
console.log(i)
}
console.log(i) // 3
for (let j = 0; j<arr.length;j++) {
console.log(j)
}
console.log(j) // j is not defined
}
运行结果:
var 定义的 i ,循环结束后依然可以访问,但是let 定义的 j,出了循环就无效了。
let的块级特性,写循环就更方便了,比如这样:
for (let j = 0; j<arr.length;j++) {
console.log(j)
}
for (let j = 0; j<arr.length;j++) {
console.log(j)
}
for (let j = 0; j<arr.length;j++) {
console.log(j)
}
for (let j = 0; j<arr.length;j++) {
console.log(j)
}
多次循环都可以直接定义同样的变量名字,比用var方便多了。
只是现在似乎也不需要这么写循环了,ES6对数组又增加了很多新的方法。
let 的变量可以修改
let 定义的变量,不仅可以改值,还可以改类型,这一点继承了JavaScript的非fang常fei灵zi活wo 的特点。
let aa = 0
console.log(aa) //
aa = 'aaa'
console.log(aa) //
aa = {name: 'ttt'}
console.log(aa) //
aa = [5,6,7]
console.log(aa) //
aa = function () {
console.log('变成函数')
}
console.log(aa) //
运行结果:
如果不能改类型的话,可以使用const 来定义。
const 命令
const 声明一个只读的常量,一旦声明,常量的值就不能改变。
只读常量吗?
看vue的代码里面,各种const定义的对象,哪个也不像不能改的呀。
其实这里不能改,指的是“地址(里的指针)”不能改。
只要保证地址不变,地址(里的指针)对应的内容是可以随意的。
那么具体怎么区分呢?
- 先来看看简单类型
const aa = 1;
console.log(aa) //
aa = 2; // 报错
console.log(aa) //
运行结果:
修改简单类型的值的时候会报错。
- 再来看看数组的情况
const arr = [1,2,3]
console.log(arr) // [1, 2, 3]
arr.push(5)
console.log(arr) // [1, 2, 3, 5]
arr[0] = 111
console.log(arr) // [111, 2, 3, 5]
const arr2 = [4,5,...arr]
console.log(arr2) // [4, 5, 111, 2, 3, 5]
const arr3 = [7,8] // 7,8 被覆盖
Object.assign(arr3, arr)
console.log(arr3) // [111, 2, 3, 5]
const arr4 = [7,8] //
arr4 = [...arr] // 报错
console.log(arr4) //
arr = [7,8,9] // 报错
console.log(arr) //
运行结果如下:
数组自带的各种函数都是可以运行的,不会报错,但是直接给数组赋值就不行了。因为前者没有改变地址,只是在地址里面增加了新的数据,而后者是改了一个新的地址。
- 再看看对象的情况
const foo = {title: '我是标题'}
console.log(foo) //
foo.name = '新名称'
console.log(foo) // 可以修改属性值
foo.title = '新标题'
console.log(foo) // 可以增加属性
Object.assign(foo, {age:65})
console.log(foo) // 合并对象
foo = {newTitle: '这个就不行了'} // 报错
运行结果:
只要地址(里的指针)没变,那么就可以随心所欲了。
参考书目
《ES6 标准入门》第3版
每天学习一点ES6(二)let 和 const的更多相关文章
- 开始学习es6(二) let 与 const 及 块级作用域
1.var JavaScript中,我们通常说的作用域是函数作用域,使用var声明的变量,无论是在代码的哪个地方声明的,都会提升到当前作用域的最顶部,这种行为叫做变量提升(Hoisting) cons ...
- ES6学习笔记(二十)Module 的加载实现
上一章介绍了模块的语法,本章介绍如何在浏览器和 Node 之中加载 ES6 模块,以及实际开发中经常遇到的一些问题(比如循环加载). 1.浏览器加载 传统方法 HTML 网页中,浏览器通过<sc ...
- ES6学习笔记之变量声明let,const
最近用淘宝的weex做了个项目,最近稍微闲下来了.正好很久没有接触RN了,所以趁这个机会系统的学习一下ES6的相关知识. 孔子说:没有对比就没有伤害.所以我们要拿ES6和ES5好好对比的学习.这样才能 ...
- 深入学习webpack(二)
深入学习webpack(二) 在深入学习webpack(一)中,我通过一个例子介绍了webpack的基本使用方法,下面将更为系统的学习webpack的基本概念,对于一门技术的掌握我认为系统化还是很重要 ...
- 学习javascript数据结构(二)——链表
前言 人生总是直向前行走,从不留下什么. 原文地址:学习javascript数据结构(二)--链表 博主博客地址:Damonare的个人博客 正文 链表简介 上一篇博客-学习javascript数据结 ...
- opencv学习笔记(二)寻找轮廓
opencv学习笔记(二)寻找轮廓 opencv中使用findContours函数来查找轮廓,这个函数的原型为: void findContours(InputOutputArray image, O ...
- C++Primer第5版学习笔记(二)
C++Primer第5版学习笔记(二) 第三章的重难点内容 这篇笔记记录了我在学习C++常用基本语法的学习过程,基本只记录一些重难点,对概念的描述不是一开始就详尽和准确的,而是层层深入 ...
- 两万字Vue.js基础学习笔记(二)
Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...
- JavaScript学习总结(二)数组和对象部分
pt学习总结(二)数组和对象部分 2016-09-16 分类:WEB开发.编程开发.首页精华暂无人评论 来源:trigkit4 分享到:更多1 对象部分 Object类型 Object ...
随机推荐
- Ubuntu16.04配置静态ip
1.安装好ubuntu16.04虚拟机之后,首先按照下图的步骤进行: 首先需要打开虚拟网络编辑器,点击VMnet8的虚拟网卡,如果没有这个网卡,只需在编辑虚拟机设置里面将网络适配器类型改为NAT模式, ...
- Httprunner初步学习
一:简介 一直在技术博客上看到Httprunner测试框架,但始终不太明白这个框架的具体作用,今天就花点时间来初步学习了解一下. HttpRunner 是一款面向 HTTP(S) 协议的通用测试框架, ...
- IDEA连接码云
IDEA连接码云: 1.安装Gitee插件 2.下载git.exe https://git-scm.com/download/win 3.安装git 如果是Win10专业版,可能会出错,GitBash ...
- dubbo源码调试
1.从github上clone下duboo的源码并checkout tag到2.6.5可以看到如下的结构: 其中all-dubbo的pom如下: 这里会将dubbo的其他项目在package的时候打到 ...
- VisualStudio 编写汇编代码相关设置
VS编写汇编代码方法 新建空项目,不创建解决方案 项目右键,Build Customizations,选择masm 新建源文件,后缀为.ASM 编写代码 .386 ; Tells MASM to us ...
- InnoDB 中的缓冲池(Buffer Pool)
本文主要说明 InnoDB Buffer Pool 的内部执行原理,其生效的前提是使用到了索引,如果没有用到索引会进行全表扫描. 结构 在 InnoDB 存储引擎层维护着一个缓冲池,通过其可以避免对磁 ...
- 软件工程与UML第一次作业
这个作业属于哪个课程 https://edu.cnblogs.com/campus/fzzcxy/2018SE2/ 这个作业要求在哪里 https://edu.cnblogs.com/campus/f ...
- unity官网安装教程
于今天起记录与回忆游戏开发相关一些小目标 2020-12-01 第一篇正式的博客就从软件的安装开始吧 unity个人版是免费的不用刻意去找破解版什么的 unity官网安装 1.unity.cn uni ...
- 第7.26节 Python中的@property装饰器定义属性访问方法getter、setter、deleter 详解
第7.26节 Python中的@property装饰器定义属性访问方法getter.setter.deleter 详解 一. 引言 Python中的装饰器在前面接触过,老猿还没有深入展开介绍装饰 ...
- Xray高级版白嫖破解指南
啊,阿Sir,免费的还想白嫖?? 好啦好啦不开玩笑 Xray是从长亭洞鉴核心引擎中提取出的社区版漏洞扫描神器,支持主动.被动多种扫描方式,自备盲打平台.可以灵活定义 POC,功能丰富,调用简单,支持 ...