Cannot access ‘xxx‘ before initialization 以及var、let、const的区别

代码

let newStory = '今天气温 34 摄氏度，:inserta:出去遛弯。当走到:insertb:门前时，突然就:insertc:。人们都惊呆了，李雷全程目睹但并没有慌，因为:inserta:是一个 130 公斤的胖子，天气又辣么热。'
if (document.getElementById("american").checked) {
   let strWeight = newStory.match(/一个 (\S*) 公斤/)[1];
   let newStory = newStory.replace(strWeight + ' 公斤', weight + ' 英镑').replace(strTemperature + ' 摄氏度', temperature + ' 华氏度');
}

错误原因

在块作用域内，let声明的变量被提升，但变量只是创建被提升，初始化并没有被提升，在初始化之前使用变量，就会形成一个暂时性死区。

var、let、const的区别

变量提升

通俗来说，变量提升是指在 JavaScript 代码执行过程中，JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的行为。变量被提升后，会给变量设置默认值为 undefined。

• var 

        不管变量声明是写在哪里，最后都会被提到作用域的顶端。

console.log(num) //undefined
var num = 1 
//相当于如下代码
var num
console.log(num)
num = 1

函数声明提升，第一个提升的是var fn ，此时fn是一个变量，还没有赋值为一个函数，所以是不能执行fn方法的。

//相当于在此处声明var fn
fn()
var fn = function () {
	console.log(1)  
}
// 输出结果：Uncaught TypeError: fn is not a function

foo()
function foo () {
	console.log(2)
}
// 输出结果：2

• let,const

        let、const存在一个暂时性死区（暂时性死区：创建了变量但是没有初始化，没法使用变量,"Cannot access 'value' before initialization”），只在变量创建阶段有提升，在初始化阶段没有提升，形成的暂时性死区。

变量提升的优点

• 解析和预编译过程中的声明提升可以提高性能，让函数可以在执行时预先为变量分配栈空间；
• 声明提升还可以提高JS代码的容错性，使一些不规范的代码也可以正常执行。

作用域

var 没有块级作用域的概念，如果想搞出来一个保护内部变量的方法，可以使用闭包解决 ； let、const 有块级作用域的概念。

块级作用域

块级作用域就是使用一对大括号包裹的一段代码，比如函数、判断语句、循环语句，甚至一个单独的{}都可以被看作是一个块级作用域（注意，对象声明中的{}不是块级作用域）。简单来说，如果一种语言支持块级作用域，那么其代码块内部定义的变量在代码块外部是访问不到的，并且等该代码块中的代码执行完成之后，代码块中定义的变量会被销毁。 ​

重复声明

var 可以重复声明同一个变量，let、const不能，const声明的变量不能直接修改值。

const

const声明一个只读的常量。一旦声明，常量的值就不能改变。const一旦声明变量，就必须立即初始化，不能留到以后赋值。

注意：不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。
对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
‼但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。

const a = ['123'];
a = ['456'];
console.log(a);

=>报错"Assignment to constant variable."