Day11——ES6语法补充

最新推荐文章于 2023-08-04 18:53:15 发布

Android_la

最新推荐文章于 2023-08-04 18:53:15 发布

阅读量123

点赞数

分类专栏： Vue 文章标签： ES6

本文链接：https://blog.csdn.net/qq_40634846/article/details/107405003

版权

Vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

一. 回顾
二. ES6语法补充

一. 回顾

前面学习了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>
    <!-- if和for里面都没有块级作用域 -->
    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被修改过
    //   })
    // }
    <!-- let有if和for的块级作用域-->
    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的使用和注意

注意事项：

修改const变量的值会报错
没有赋值也会报错
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>

Android_la

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day11——ES6语法补充

文章目录一. 回顾二. ES6语法补充2.1 块级作用域2.2 const的使用和注意2.3 对象字面量以及方法的增强写法2.3.1 对象字面量的增强写法2.3.2 对象方法的增强写法2.3.3 例子一. 回顾前面学习了Day10——vue的计算属性computed，今天学习ES6语法补充，方便后面的学习使用ES6新语法二. ES6语法补充2.1 块级作用域例子：<body> <button>按钮1</button> <button>按钮
复制链接

扫一扫

专栏目录