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() ...
随机推荐
- Ethical Hacking - Web Penetration Testing(5)
LOCAL FILE INCLUSION Allows an attacker to read ANY file on the same server. Access files outside ww ...
- day10:函数的实参&形参
函数的参数 (参数:配合函数运算的值)参数: (1)形参:形式参数,在函数的定义处 (2)实参:实际参数,在函数的调用处 形参: 普通形参(位置) , 默认形参 , 普通收集形参 ...
- 简单分析 ztree 源码
为了把 SVG标注 代码抽成一个库,我要学习一下 ztree 是怎么写的. 开始正文. 这只是一个很简单的版本,以后可能会详细分析... (function ($) { var settings = ...
- Kubernetes的10个基本事实!你知道几个?k8s与Docker又有何不同?
无论您是Kubernetes的新手还是只是想获得更多知识,这篇文章都会帮到您! Kubernetes是一个增长的趋势.近年来,K8s技术经历了从小型开源Google项目到Cloud Native Co ...
- Azure Traffic Manager(二) 基于权重与基于优先级的路由策略为我们的Web项目提供负载均衡
一,引言 上一片文章我们使用 Azure Traffic Manager 分发用户请求,同时演示了两种路由策略,“Performance”,“Geographic”的两种方式,今天我们继续讲解 Tra ...
- GitHub 热点速览 Vol.29:程序员资料大全
作者:HelloGitHub-小鱼干 摘要:有什么资料比各种大全更吸引人的呢?先马为敬,即便日后"挺尸"收藏夹,但是每个和程序相关的大全项目都值得一看.比如国内名为小傅哥整理的 J ...
- 题解 洛谷 P5465 【[PKUSC2018]星际穿越】
首先考虑题目的性质,发现点向区间连的边为双向边,所以也就可以从一个点向右跳到区间包含该点的点,如图所示: 但事实上向后跳其实是不优的,可以有更好的方法来节省花费: 因此我们发现一个点跳到其前一个区间的 ...
- Java7/8 中的 HashMap 和 ConcurrentHashMap
Java7 HashMap 数组+链表 Java7 ConcurrentHashMap Segment数组+HashEntry数组链表+ReenTrantLock分段锁 Java8 HashMa ...
- API返回延迟,FPM重启后恢复之后又重现 问题解决方案
背景 最近在提供后台API时,提供了一个简单逻辑的接口 部署在测试环境,自测没问题,提交测试 突然有一天,接口响应延迟严重,几乎每次都是3-4秒返回 这对于一个接口来说,肯定是有问题的 于是便有了以下 ...
- JPA第二天
学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"springdata"获取视频和教程资料! b站在线视 ...