js-es6新特性

最新推荐文章于 2024-10-17 17:58:22 发布

乖女子@@@

最新推荐文章于 2024-10-17 17:58:22 发布

阅读量795

点赞数 1

本文链接：https://blog.csdn.net/qq_43260366/article/details/115839377

版权

es6:ES6---ECMAScript2015---js语法的第六个版本；

1.定义变量

es5

关键字:var

特点(两个)：

[1]有变量提升:将所有定义的变量提升到当前作用域最顶端
- 因此[1]：可以在同一作用域多次定义相同的变量--都提升到当前作用域的最前面，被覆盖；
- 因此[2]:变量可以在声明之前访问(值为undefined)
- 举例说明：
  - ```
  console.log(a) //undefined
  var a = 100
  console.log(a) //100
  var a = 200
  console.log(a) //200
  
  // 相当于
  var a;
  console.log(a) //undefined
  a=100;
  console.log(a) //100
  a=200;
  console.log(a) //200
```

[2]没有块级作用域:分支和循环大括号里面声明的变量是‘全局’的;

举例说明

if(true){
    var b=10;
}
console.log(b); //10
// 若是具有块级作用域：块级作用域内部可以访问全局变量，但是全局作用域中不能访问局部变量(局部作用域、块级作用域中定义的变量)

es6

关键字
- 关键字1：let
- 关键字2：const
let 和const共同点
- 没有变量提升:
  - 因此[1]变量必须先声明后访问
  - 因此[2]同一变量在同一作用域不能重复定义
  - 举例说明
    - ```
    console.log(n1);//报错n1 is not defined
    let n1 = 10;
    console.log(n1);//10
```
- 有块级作用域
  - 分支和循环大括号里面声明的变量是 ‘局部’ 的，外面不能调用
  - 举例说明
    - ```
    if (true) {
        let n2 = 10;
    }
    console.log(n2);//n2 is not defined
```
let与const的区别
- let --变量--可以重新赋值；
  - ```
  let a=20;
  console.log(a);//20
  a=10;
  console.log(a);//10
```
- const-常量--不可以重新赋值(只能在定义的同时赋值一次)
  - ```
  const a = 10;
  console.log(a);
  a = 20;
  console.log(a);//Assignment to constant variable.
```
- ```
const a;
a = 20;
console.log(a);//Assignment to constant variable.
//原因是在定义的时候自动赋值为undefined
```
- 注意：const说常量是作为变量来说的，
  - 其实const是能够修改栈中的数据，若是使用const定义一个引用类型的数据(数组，对象，函数)，当我们修改堆中数据时，不会产生错误
  - 举例说明
    - ```
    <script>
         const person = {
           name: 'chaochao',
           area: 'china'
         }
         person.name = 'niuniu'
         console.log(person) //{name:'niuniu',area:'china'}
       </script>
```
- 总结：使用const定义的值若是简单数据类型，不能够直接修改，若是复杂数据类型，只要不修改其引用，就可以随便修改；

2.解构赋值

前提：解构赋值的数据类型为引用类型

[1]对象的解构赋值

es5

[1] 取出对象的值赋值给变量

<script>
      let person = {
        name: 'chaochao',
        area: 'china'
      }
      // 取出对象的值赋值给变量
      let name = person.name
      let area = person.area
      console.log(name, area) // 'chaochao', 'china'
    </script>

[2]将变量的值赋值给对象的属性