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…