let,const复习

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

从新复习ES6语法知识，**参照的是阮一峰老师的 ESCMAScript6入门 es6.ruanyifeng.com/#docs/let**… 会加上一些本身的理解。不足以后，还请多多指点！

1.let命令

let和var的区分

引用

console.log(a) // Uncaught ReferenceError
console.log(b) // undefined
let a 
var b 
复制代码

从报错上咱们能看出，前者是引用错误，后者是由于能够变量提高，因此是未定义

{
  let a = 1
  var b = 2
}
console.log(b) // 2
console.log(a) // Uncaught ReferenceError: a is not defined
复制代码

一样是由于做用域和变量提高问题，致使两个结果各不相同。

for循环

1. var 声明的参数，在全局范围内使用，全局只有一个变量，每次改变，都会改变当前值，
2. let 声明的参数，只在本循环中使用，每次循环的i都是一个新的变量

for(let i = 0; i < 5; i++) {
  console.log(i) // 0 1 2 3 4
}
console.log(i) // Uncaught ReferenceError: i is not defined
复制代码

对比var

for(var i = 0; i < 5; i++) {
  console.log(i)  // 0 1 2 3 4
}
console.log(i) // 5
复制代码

var声明的参数提高到了全局，相比较，使用let会更好一些。

再看一个例子

var a = [];
for(var i = 0; i < 5; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[2]() // 5
复制代码

上边的代码，其实咱们想输出的实际上是2，但由于咱们声明使用的是var,因此没有达到咱们想要的结果，对比下let

let a = [];
for(let i = 0; i < 5; i++) {
  a[i] = function () {
    console.log(i)
  }
}
a[2]() // 2
复制代码

使用let,它的这种块级做用域就达到了咱们的目标。

变量提高的问题

变量提高的问题，咱们在最上边的例子里就有说到。这里咱们了解下暂时性死区

暂时性死区

只要块级做用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，再也不受外部的影响。

大体意思是，在代码块中，使用let变量以前，当前变量都不能使用，报ReferenceError引用错误，称之为暂时性死区

以下例子

var a = 123;

 if (true) {
   a = 'abc'; // Uncaught ReferenceError
   let a;
 }
复制代码

在上边的代码中，咱们虽然在最上层声明了var a = 123,但在块级做用域内使用了let,就造成了一个暂时性死区。所以就报了引用类型错误。

暂时性死区 - 函数

function bar(x = y, y = 2) {
  return [x, y];
}

bar(); // 报错 ReferenceError
复制代码

在函数中，虽然x前也没有let或var,可是默认了var，可是在y赋值到x的过程当中，y做为值，当前是没有声明的，所以报了ReferenceError的错

再看下边的例子

function bar(x = 2, y = x) {
  return [x, y];
}
console.log(bar()) // [2, 2]
复制代码

先声明了x并赋值，而后再声明y，并将x的值赋值给y,完美！

var a = a
let b = b // Uncaught ReferenceError
复制代码

主要看赋值的a 和b

在a中，赋值的a,自动生成了var a ,可是赋值的b，此时并无声明，整个流程应该是先拿到赋值的参数的声明，而后有值拿值，没有值就undefined,以后再去赋值

不容许重复声明

变量声明不可重复，也不能在函数内部从新声明参数。重复声明则报语法错误 SyntaxError。 如如下两种

var a
let a // SyntaxError
复制代码

function a(b) {
  let b
} // 报错
复制代码

下面的是正确的

function c(d) {
  {
    let d
  }
} // 不报错
复制代码

块级做用域

var a = new Date();
function b() {
  console.log(a) // undefined
  if (false) {
    var a = 'a'
  }
}
b()
复制代码

直接这个例子彷佛有些看不懂，不明白为啥输出的是undefined 先拆开来看

var a = new Date();
function b() {
  console.log(a) // Sun Aug 01 2021 22:00:25 GMT+0800 (中国标准时间)
  // if (false) {
  // var a = 'a'
  // }
}
b()
复制代码

如今咱们拿到的是外层的变量

而后再改

var a = new Date();
function b() {
  console.log(a) // undefined
  if (true) {
    var a = 'a'
  }
}
b()
复制代码

如今看到和true,false也无关了。 真正的缘由是由于内层变量提高会覆盖外层变量。

代码以下

var a = new Date();
function b() {
  var a
  console.log(a) // undefined
  if (true) {
    a = '123'
  }
}
b()
复制代码

变量泄露

这个问题例子就是咱们以前说到的使用var的for循环

for (var i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}
console.log(i); // 5
复制代码

但使用let后，咱们就能修改到这个问题

以下

function c() {
  let d = 5
  if(true) {
    let d = 10;
  }
  console.log(d) // 5
}
c()
复制代码

块级做用域和函数声明

ES6 引入了块级做用域，明确容许在块级做用域之中声明函数。ES6 规定，块级做用域之中，函数声明语句的行为相似于let，在块级做用域以外不可引用。

例子以下

if (true) {
  function f() {}
}

try {
  function f() {}
} catch(e) {
  // ...
}

function a() { console.log('Outside')}

(function(){
  if(false) {
    function a() { console.log('inside')}
  }
  a()
})() // TypeError: a is not a function
复制代码

容许在块级做用域内声明函数，函数声明相似于var，即会提高到全局做用域或函数做用域的头部。同时，函数声明还会提高到所在的块级做用域的头部。

function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }

  f();
}());
// Uncaught TypeError: f is not a function
复制代码

块级做用域内部，优先使用函数表达式

{
  let a = '1';
  let f = function () {
    return a;
  };
}
复制代码

const 命令

1. const声明一个只读的常量。一旦声明，常量的值就不能改变。
2. 只声明不赋值，就会报错
3. 只在声明所在的块级做用域内有效
4. 一样存在暂时性死区，只能在声明的位置后面使用。
5. 不可重复声明

如下是证实的例子

const b = {}
b.a = 'a'
b = {} // Uncaught TypeError: Assignment to constant variable.
复制代码

console.log(a) // Uncaught ReferenceError
const a = 10
复制代码

冻结对象只能冻结简单类型的数据如string ,number ,array

对象属性冻结

let constatize = (obj) => {
  Object.freeze(obj)
  Object.keys(obj).forEach((key, i) => {
    if(typeof obj[key] === 'object') {
      constatize(obj[key])
    }
  })
}

复制代码

以上就是个人所有收获了，不足之处，还请多多指教！

相关文章

let,const复习 juejin.cn/post/699147…

初学koa搭建项目 juejin.cn/post/698756…

正则表达式总结 juejin.cn/post/698615…

flex布局总结 juejin.cn/post/698497…

mongodb基础用法 juejin.cn/post/698364…

vue3搭建管理后台-项目搭建 juejin.cn/post/696802…

工厂模式，构造器模式和原型模式 juejin.cn/post/695794…