ES6语法学习(一)-let和const
1.let 和 const
变量提升:
在声明变量或者函数时,被声明的变量和函数会被提升到函数最顶部;
但是如果声明的变量或者函数被初始化了,则会失去变量提升;
示例代码:
param2 = "第二个参数"
console.log(param1); // undefined
console.log(param2); // 第二个参数
var param1 = "第一个参数";
var param2;
对于变量 "param1":
它被声明且初始化了,所以失去了变量提升,在 "console.log(param1);" 语句访问 "param1" 时则会得到 "undefined" 的结果无法得到初始化的结果,但是不会报错,在 "console.log(param1);" 之前对param1进行赋值,则会在后面 的console语句中打印出你新赋的值;
对于变量 "param2":
它只是被声明了,所以直接打印则会得到 "undefined" 的结果,因为它本身就没有值,同样在 "console.log(param2);" 语句之前对他初始化,则会在console语句中得到你初始化的值;与"param1" 相比,访问 "param1" 时无法获取到它的初始化的值,但是 "param1" 在访问它的语句之前进行赋值则可以访问它的新值;"param2" 可以在任何访问它之前的语句进行初始化,并且访问的结果就是 "param2" 初始化的值;
let 命令
使用let 声明变量只会在它所在的块级区域生效,并且生效的区域是从这一条声明语句向下延伸到这一个块级区域结束;let声明的变量也不会出现变量提升;
let命令不允许对同一变量的重复声明;
示例代码:
console.log(b); // undefined
{
console.log(a); // Cannot access 'a' before initialization
console.log(b); // undefined
c = 3;
console.log(c); //
let a = 1;
var b = "这是一条字符串";
var c;
console.log(a); //
console.log(b); // 这是一条字符串
console.log(c); //
}
console.log(a);// a is not defined
console.log(b); // 这是一条字符串
console.log(c); //
对于变量 "a":
两个花括号"{}"之间的区域是使用 "let" 声明的变量 "a" 所在的块级作用域,但是 "a" 能被调用生效的区域只是从 "let a = 1;" 这条声明语句一直向下直到结尾的花括号 "}" 处,在这个范围内,a才是可以被使用的;而从开头的花括号 "{" 一直到 "let a = 1;" 之间这个无法访问到 "a" 的区域叫做 "暂时性死区";
第一条"console.log(a);" 语句提示 “不能在a初始化之前访问”,
第二条 "console.log(a);" 语句打印 '1' ,
第三条 花括号外的 "console.log(a);" 语句打印 "a未定义";
对于变 "b":
它被声明并且初始化了,在console语句中访问得到的值是 "undefined",只有在访问 "b" 的语句之前对 "b" 进行重新赋值,才能拿到 "b" 中的值;并且在花括号之外的区域也能访问到它,同样,只能在花括号包裹的整个区域的 "下方" 才能访问到;
对于变量 "c":
它与 "b" 的区别则如 上方 "变量提升" 部分所讲的一样;
const 命令
const命令与let命令一样是块级作用域,具有暂时性死区,不能对同一变量进行重复声明;
const声明的变量必须初始化,该变量的值无法更改,const定义的变量时一个只读变量;
const的本质是控制变量指向的内存地址所保存的数据不得改动,对于简单变量("字符串","布尔值","数值"),其值就保存在变量指向的存贮地址,所以这类变量是无法重新赋值的,成为一个常量;而对于复杂变量(通常是指对象与数组)变量指向的内存地址保存的是一个指向了实际数据的指针,const能保证的是这个指针指向的地址不变,却不能保证这个数据的结构不发生改变;
示例代码:
{
const b; // Missing initializer in const declaration
const a = "变量a";
const obj = {};
const arr = [];
console.log(a); // 变量a
console.log(obj); // {}
console.log(arr); // []
obj = { age: 1 }; // Assignment to constant variable.
arr = ["数据"]; // Assignment to constant variable.
obj.name = "张三";
arr.push("一个数据");
console.log(obj); // {name:"张三"}
console.log(arr); // ["一个数据"]
a = "另一个变量"; // Assignment to constant variable.
}
对变量 "a":
const初始化后赋值为 "变量a" ,第5行console语句可以访问到初始化的值,第12行代码对简单变量进行赋值则抛出一个错误:"对const类型的变量赋值";
对于变量 "b":
const声明的变量必须初始化;
对于复杂变量 "arr","obj":
第11,12行是将整个变量的指针指向了另一个地址,所以会抛出错误,而14,15行代码则是对原对象(数组)进行数据结构上的改变,obj新增一个属性,arr新增一个数据,他们的指针依旧指向原本指向的地址,只是其中的数据的结构发生了变化所以可以在第16,17行代码中打印出结果;
冻结对象
使用Object.freeze(); 方法可以将一个对象冻结使它无法添加或者修改自己的属性,但是如果是对象数据中嵌套着一个对象属性,这个嵌套的对象是不受影响的,它任然可以对自己的属性进行增删改操作;
这时则需要考虑使用递归来将整个对象进行冻结,从而真正使这个对象变成一个常量;
在第一个代码块中,obj2.obj3是不受 Object.freeze(); 影响的,将第二个代码块中的 freezeAll 方法加入进来后,obj2的全部属性以及嵌套着的对象的属性也被冻结,从而将整个obj2变成了一个常量;
示例代码:
{
let obj1 = { name: "李四" };
Object.freeze(obj1);
console.log(obj1); // {name: "李四"}
obj1.name = "张三";
console.log(obj1); // {name: "李四"}
let obj2 = { age: 14, obj3: { name: "王五" } };
Object.freeze(obj2);
obj2.obj3.age = 23;
obj2.obj3.name = "张三";
console.log(obj2.obj3); // {name: "张三", age: 23}
}
{
function freezeAll(obj) {
Object.freeze(obj);
Object.keys(obj).forEach(attr => {
if (typeof obj[attr] === "object") {
freezeAll(obj[attr]);
}
})
}
freezeAll(obj2);
console.log(obj2.obj3); // {name: "张三", age: 23}
obj2.obj3.name = "新的名字";
console.log(obj2.obj3); // {name: "张三", age: 23}
}
ES6语法学习(一)-let和const的更多相关文章
- ES6语法:var、let、const的区别详解
今天来说说es6的语法,最基础的也就是var,let,const 的用法与区别了,我们来看看他们之间的恩怨情仇. 首先来说说var,这个只要是学过js的都知道,它是用来声明一个变量的,但是它在开发中也 ...
- ES6 语法学习(一)
1.let 和 const 关键字 let 与 var 的区别有: a.let 声明的变量只在当前的块级作用域内有效(块级作用域通俗的话就是被{}包裹起来的区域声明对象的{}例外). b.let 声明 ...
- ES6 语法学习总结
第一节:什么是ES6? ES6是什么?跟JavaScript有什么关系? JavaScrip由三部分组成:分别是ECMAScript,BOM和DOM. 1)由此看出,ECMAScript是Java ...
- ES6语法 学习
ECMAScript 6,也被称为ECMAScript 2015是ECMAScript标准的最新版本.6是语言的一个重要更新,并第一次更新语言由于ES5 2009标准.现在主要JavaScript引擎 ...
- ES6 语法学习(二)
1.类的建立与继承 constructor方法是类的构造函数是默认方法,通过new命令生成对象实例时,自动调用该方法.一个类必须有constructor方法,如果没有显式定义,一个默认的constru ...
- ES6学习笔记<一> let const class extends super
学习参考地址1 学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...
- Webpack4 学习笔记三 ES6+语法降级为ES5
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 Webpack 将es6.es7语法降级为es5 需要通过 babel JavaScript编译器. 安装: npm i babel ...
- ES6语法的学习与实践
ES6是JavaScript语言的新一代标准,是ECMAScript的第六个版本,加入了很多新的功能和语法,在很多框架,如在使用Vue,React等框架的项目中一般都采用ES6语法来编写的,下面对经常 ...
- ES6学习之-let 和const命令
let 和const命令 let命令 用来声明变量,类似于var .let声明的变量 只在let命令所在的代码块内有效. 在for循环里也是如此 每次循环其实都是一个代码块 function fn() ...
随机推荐
- vue : 无法加载文件 C:\Users\ui61895076\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
说白了就是这个编辑器不能用罢了 执行以下代码 1.鼠标右击以管理员身份运行vscode; 2. 执行:get-ExecutionPolicy,显示Restricted,表示状态是禁止的; 3. 执行: ...
- 「美团面试系列」面试加分项,这样说你会JVM,面试官还能问什么
Java性能调优都是老生常谈的问题,特别当“糙快猛”的开发模式大行其道时,随着系统访问量的增加.代码的臃肿,各种性能问题便会层出不穷. 比如,下面这些典型的性能问题,你肯定或多或少都遇到过: 在进行性 ...
- MySQL的权限赋予
MySQL 赋予用户权限命令的简单格式可概括为:grant 权限 on 数据库对象 to 用户 一.grant 普通数据用户,查询.插入.更新.删除 数据库中所有表数据的权利. grant selec ...
- 修改 Ubuntu SSH 登录后的欢迎信息
主要就是几个文件: cd /etc/update-motd.d/ ls 00-header 90-updates-available 98-fsck-at-reboot 10-help-t ...
- 全卷积神经网络FCN详解(附带Tensorflow详解代码实现)
一.导论 在图像语义分割领域,困扰了计算机科学家很多年的一个问题则是我们如何才能将我们感兴趣的对象和不感兴趣的对象分别分割开来呢?比如我们有一只小猫的图片,怎样才能够通过计算机自己对图像进行识别达到将 ...
- R 基础绘图体系-基础篇
1.高水平绘图函数 生成数据 #模拟100位同学学号及三科成绩 num = seq(12340001,12340100) # 形成学号 x1 = round(runif(100,min = 80,ma ...
- 对‘sqrt’未定义的引用
首先, 引用数学库 #include<math.h> 引用数学库时,要在编译后加上-lm 是每一个都要加!! 如下: gcc su.c -o su.o -lm gcc -g su.c - ...
- dp最长不下降序列
// // Created by snnnow on 2020/4/13. // //这是dp 问题的基础题 // //最长不下降 //(导弹拦截是其例题) //那这篇文章是讲啥呢, // 主要是吧, ...
- Python 字典(Dictionary) cmp()方法
Python 字典(Dictionary) cmp()方法 描述 Python 字典的 cmp() 函数用于比较两个字典元素.高佣联盟 www.cgewang.com 语法 cmp()方法语法: cm ...
- PHP round() 函数
实例 对浮点数进行四舍五入:高佣联盟 www.cgewang.com <?php echo(round(0.60) . "<br>"); echo(round(0 ...