es6语法01-为什么会出现let和const的，与var的区别，何时使用以及模板字符串

本文链接：https://blog.youkuaiyun.com/m0_61547956/article/details/125014150

本文探讨了ES6中let和const的引入原因，详细阐述了它们与var的区别，如let的块级作用域、无变量提升，以及const声明常量的特性。同时，介绍了模板字符串的便捷之处，它简化了字符串拼接的过程，提高了代码可读性。建议在编程时默认使用const，仅在变量需要修改时使用let。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var中有变量提升，还可以重复声明。

let中的特点

1.没有变量提升

2.是一个块级作用域（比如在for循环中）

3.不能重复声明

const的特点

除了具有上述let的特点之外，还有声明常量的作用，一旦被声明不可以被更改，如果一个对象声明为了常量，那么这个对象不可以被更改，但是常量内部的属性可以被更改。

const person={
      name:'xiaoma'
}
//不能够这样
person = {
   age:12
}
//但是可以修改对象内部的属性
person.name = 'alex'

作用一

const arr = []
for(var i = 0;i<10;i++){
    arr[i]=function(){
    return i;
}
console.log(arr[5]);
//最后输出10，因为var 有变量提升
但是如果var i=0改为let i=0,结果就正确，输出5
因为let没有变量提升而且是个块级作用域，相当于
{let i = 0}
{let i = 1}
{let i = 2}
{let i = 3}
{let i = 4}
...
{let i =10}
因为let在代码块中都有自己的作用域，所以在for循环中的表达式中使用let它的每一个值都会单独存在一个独立的作用域中不会被覆盖掉

作用二

不会污染全局变量

// let RegExp = 10;

// var RegExp = 10; 都是10

console.log(RegExp); //10

console.log(window.RegExp); //还是返回函数

何时使用

默认情况下使用const,只有知道值一定会被修改的时候使用let

模板字符串

es6之前拼接字符串写很多引号很麻烦"<ul><li><p id="+id+">"+name+"</p></li></ul>";

es6把要插入的html元素放到反引号里面，变量用${}包含。

    <div class="box">
        <!-- <ul>
            <li>
                <p id="1">小马</p>
            </li>
        </ul> -->

    </div>
const box = document.querySelector(.box);
let id = 1;
let name='xiaoma';
box.innerHTML = "<ul><li><p id="+id+">"+name+"</p></li></ul>";
es6
//tab键上的反引号
let htmlstr = `<ul>
             <li>
               <p id=${id}>${name}</p>
             </li>
            </ul>`;
box.innerHTML = htmlstr;