Day11——ES6语法补充

「爱情、让人受尽委屈。」 2023-02-27 10:59 2阅读 0赞

### 文章目录 ###

*  一. 回顾
 *  二. ES6语法补充
 *   *  2.1 块级作用域
     *  2.2 const的使用和注意
     *  2.3 对象字面量以及方法的增强写法
     *   *  2.3.1 对象字面量的增强写法
         *   *  2.3.2 对象方法的增强写法
         *  2.3.3 例子

# 一. 回顾 #

前面学习了[Day10——vue的计算属性computed][Day10_vue_computed]，今天学习ES6语法补充，方便后面的学习使用ES6新语法

# 二. ES6语法补充 #

## 2.1 块级作用域 ##

例子：

<body>
    
      <button>按钮1</button>
      <button>按钮2</button>
      <button>按钮3</button>
      <button>按钮4</button>
      <button>按钮5</button>
    
    
      <script>  var btns = document.getElementsByTagName('button'); // for(var i = 0; i < btns.length; i++){ // btns[i].addEventListener('click', function () { // console.log('第' + i + '个按钮被点击 ');//不论点击哪个按钮，因为没有块级作用域，for中的i与btns[i]中的i不同，因为i被修改过 // }) // }  for(let i = 0; i < btns.length; i++){ btns[i].addEventListener('click', function () { console.log('第' + (i+1) + '个按钮被点击 '); }) } </script>
    
    </body>

**总结：能用let定义变量就用let，尽量不要使用var**

## 2.2 const的使用和注意 ##

注意事项：

1.  修改const变量的值会报错
2.  没有赋值也会报错
3.  const指向的对象不能修改，但是可以改变对象内部的属性

例子：

<body>
    <script> const i = 0; i = 32;//修改const变量的值会报错 const num;//没有赋值也会报错 //const指向的对象不能修改，但是可以改变对象内部的属性 const obj = { name: 'kobe', age: 20 } obj.name = 'bryant'; obj.age = 22; </script>
    </body>

**总结：如果定义的变量不变，就尽量用const，比较安全。否则使用let。**

## 2.3 对象字面量以及方法的增强写法 ##

### 2.3.1 对象字面量的增强写法 ###

语法：将变量的名称作为key，变量的值作为值

例子:

const name = 'zhangsan';
      const age = 12;
      const obj2 = { 
        name,//将name变量的名称作为key，name变量的值作为值
        age
      }

#### 2.3.2 对象方法的增强写法 ####

语法:

xxx(){ 
    
        }

例子:

const obj4 = { 
        run(){ 
    
        },
        eat(){ 
          console.log('hhh');
        }
      }

### 2.3.3 例子 ###

<body>
    <script>
      //普通写法
      const obj = { 
        name: 'zhangsan',
        age: 12,
        run: function () { 
          console.log('在奔跑');
        },
        eat: function () { 
          console.log('在吃东西');
        }
      }
    
      //属性的增强写法
      const name = 'zhangsan';
      const age = 12;
      const obj1 = { 
        name: name,
        age: age
      }
    
      //ES6的对象字面量增强写法
      const obj2 = { 
        name,//将name变量的名称作为key，name变量的值作为值
        age
      }
    
      //ES5的方法写法
      const obj3 = { 
        run: function () { 
    
        },
        eat: function () { 
    
        }
      }
    
      //ES6的方法增强写法
      const obj4 = { 
        run(){ 
    
        },
        eat(){ 
          console.log('hhh');
        }
      }
    
    </script>
    </body>

[Day10_vue_computed]: https://blog.csdn.net/qq_40634846/article/details/107403392