侧边栏壁纸
博主头像
soulballad博主等级

技术文章记录及总结

  • 累计撰写 169 篇文章
  • 累计创建 26 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录
Vue

0.ES6语法

soulballad
2022-01-17 / 0 评论 / 0 点赞 / 51 阅读 / 638 字
温馨提示:
本文最后更新于 2022-05-30,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

1. 块级作用域

变量作用域:变量在什么范围内可用.

ES5中的var没有块级作用域(if/for)
ES6中的let有块级作用(if/for)

ES5之前因为if和for都没有块级作用域的概念, 所以在很多时候, 我们都必须借助于function的作用域来解决应用外面变量的问题.
ES6中,加入了let, let它是有if和for的块级作用域.

1.1 var的作用域

// 没有块级作用域
{
    var name = 'why';
    console.log(name); // why
}
console.log(name); // why

1.1.1 if的块级

没有块级作用域引起的问题: if的块级

var func;
if (true) {
    var name = 'why';
    func = function () {
        console.log(name); // kobe
    }
}
name = 'kobe'
func()
console.log(name); // kobe

1.1.2 for的块级

没有块级作用域引起的问题: for的块级

由于没有块级作用域,每次点击都显示 “第5个按钮被点击”

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
</body>
<script>
    var btns = document.getElementsByTagName('button')
    for (var i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
            console.log('第' + i + '个按钮被点击'); // 第5个按钮被点击
        })
    }
</script>

ES5中针对该问题的解决方案:闭包

为什么闭包可以解决问题: 函数是一个作用域.

var btns = document.getElementsByTagName('button');
for (var i=0; i<btns.length; i++) {
  (function (num) { // 0
    btns[i].addEventListener('click', function () {
      console.log('第' + num + '个按钮被点击');
    })
  })(i)
}

ES6中的写法,直接使用let

const btns = document.getElementsByTagName('button')
for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', function () {
    console.log('第' + i + '个按钮被点击');
  })
}

2. const使用

使用const修饰的标识符为常量, 不可以再次赋值

注意:

  1. 注意一: 一旦给const修饰的标识符被赋值之后,不能修改
  2. 注意二: 在使用const定义标识符,必须进行赋值
  3. 注意三: 常量的含义是指向的对象不能修改,但是可以改变对象内部的属性。

建议: 在ES6开发中,优先使用const, 只有需要改变某一个标识符的时候才使用let

3. 对象字面量的增强写法

ES6中,对对象字面量进行了很多增强

属性初始化简写和方法的简写:

image-20220116140815342

0

评论区