ES6语法第一天

目录

一、声明变量的方式

1、作用域

2、变量提升

3、值的可修改性

4、重复声明

二、各种变量声明方式的优缺点

1、var的优缺点

优点：

缺点：

2、let的优缺点

优点：

缺点：

3、const的优缺点

优点：

缺点：

暂时性死区

三、解构赋值

 1、数组的对应赋值

2、数组的剩余参数

3、对象的解构赋值

4、交换变量的值

---

一、声明变量的方式

        JavaScript 中用于声明变量的关键字为var，let，const，它们之间有一些重要的区别。

1、作用域

        var 具有函数作用域，如果在函数外部声明，则具有全局作用域。这意味着在一个函数内部使用 var 声明的变量，在该函数外部也可以访问到。

   let 和 const 具有块级作用域，它们只在声明它们的代码块内部可见。这有助于避免变量污染和命名冲突。

2、变量提升

  var声明的变量会发生变量提升，即在声明之前就可以访问到这个变量，但此时变量的值为 undefined。

  let 和 const 声明的变量不会发生变量提升，如果在声明之前访问这些变量，会抛出一个引用错误（ReferenceError）。

3、值的可修改性

  var 和 let 声明的变量，其值是可以修改的。

      const 声明的变量，其值是不可以修改的。需要注意的是，如果 const 声明的是一个对象或数组，虽然不能修改其引用，但可以修改其内部的属性或元素。

4、重复声明

  var 允许在同一作用域内重复声明同一个变量。

  let 和 const 不允许在同一作用域内重复声明同一个变量

二、各种变量声明方式的优缺点

1、var的优缺点

优点：

        兼容性好：var 是 JavaScript 最早的变量声明方式，几乎所有浏览器和环境都支持

        函数作用域：var 声明的变量具有函数作用域，这在某些情况下可以简化代码。

缺点：

        变量提升：var 声明的变量会发生变量提升，可能导致意外的行为。

        作用域污染：var 声明的变量容易在全局作用域中造成污染，增加命名冲突的风险。

         重复声明：var 允许在同一作用域内重复声明同一个变量，可能导致意外的覆盖。

2、let的优缺点

优点：

        块级作用域：let 声明的变量具有块级作用域，有助于避免变量污染和命名冲突。

        无变量提升：let 声明的变量不会发生变量提升，使代码更易读、更安全。

缺点：

        兼容性：虽然现代浏览器普遍支持 let，但在一些旧版浏览器中可能不支持。

3、const的优缺点

优点：

        不可变性：const 声明的变量在赋值后不能被重新赋值，这有助于保持数据的不变性，减少因意外修改而导致的错误。

        块级作用域：与 let 类似，const 也具有块级作用域，有助于避免变量污染和命名冲突。

        提高代码可读性：使用 const 声明的变量表明这个变量的值不应该被修改，这使得代码更容易阅读和理解。

缺点：

        值的修改限制：虽然 const 声明的变量不能被重新赋值，但如果它是一个对象或数组，其内部的属性或元素仍然可以被修改。这可能导致一些难以发现的错误。

        兼容性：与 let 类似，虽然现代浏览器普遍支持 const，但在一些旧版浏览器中可能不支持。

        必须初始化：const 声明的变量必须在声明时进行初始化，否则会抛出语法错误。这要求我们在编写代码时更加注意变量的初始化。

暂时性死区

        由于在代码块开始到let和const声明之前的区域中尝试访问let和const声明变量会导致错误。

        这是因为 let 和 const 声明的变量存在“暂时性”和“块级”两个特性：

        1. 暂时性：let 和 const 声明的变量不会被提升到作用域顶部，而是在声明的那一刻才被创建。在这之前，变量是不可访问的。

        2. 块级：let 和 const 声明的变量具有块级作用域，即它们只在声明它们的代码块内部有效。

        因此，在 let 或 const 声明之前访问这些变量会导致引用错误。这就是所谓的暂时性死区。

tips：

        var  全局作用域  变量提升 值可以改 可以不赋值  可以重复声明

        let  块级作用域  变量不提升 值可以改 可以不赋值  不可以重复声明

        const 块级作用域  变量不提升 值不可以改 必须赋值  不可以重复声明

三、解构赋值

        ES6允许从对象或数组中按照对应的位置进行赋值

 1、数组的对应赋值

        在数组中可以将变量和数据进行对应来完成快速赋值，顺序为从前往后进行对应，在变量对应的数据量不足时返回undefined。

      var [a, b, c, d] = [1, 2, 3, 4]  
      //var a=1,b=2,c=3,d=4

      // 数据不够 返回undefined
      var [e, f] = [5]

2、数组的剩余参数

        当数据量过多而变量较少时，按照顺序进行赋值，使用 （" ... "+变量） 可以用一个变量代表多个值

  var [g, ...h] = [1, 2, 3, 4, 5, 6]
  console.log(g, h);
  // ...h  h=[2,3,4,5,6]

  function fn(b, ...a) {
    console.log(a);
  }

3、对象的解构赋值

        对于对象，对应的值为key返回的内容，和数组一样变量少于数据量不赋值，变量多于数据量无值

  let obj = {
    name: "a",
    age: 18,
    sex: "nan"
  }
  let { name, age, sex, i } = obj 
  //let name=obj.name,age=obj.age,sex=obj.sex
  console.log(name, age, sex, i);
  // i是不存在值的，和数组的对应方式一样

4、交换变量的值

        快速交换变量a，b中的值

  let a = 5, b = 6
  [a, b] = [b, a]