ES6的一些基本补充

April 16, 2020

2206 views

1381 words

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

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

</body>
</html>

这个是一个非常经典的例子，你无论点击那个按钮输出的都是5，这就是var没有for块级作用域引来的问题，而要解决这个问题我们就可以用es6语法中的let关键词就可解决了。

const的使用
使用该关键字注意以下条件就是了：

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

对象字面量的增强写法
ES5正常的建立对象的字面量的方法

 const obj = new Object()

 const obj = {
  name: 'why',
  age: 18,
  run: function () {
     console.log('在奔跑');
   },
  eat: function () {
    console.log('在次东西');
  }
 }

1.ES6属性的增强写法

  const name = 'why';
  const age = 18;
  const height = 1.88

 //ES5的写法
const obj = {
   name: name,
   age: age,
   height: height
 }
//ES6的写法
const obj = {
  name,
   age,
   height,
 }

 console.log(obj);

2.函数的增强写法

  // ES5的写法
 const obj = {
  run: function () {

   },
   eat: function () {

   }
 }
//ES6的写法，直接省略了function
  const obj = {
    run() {

    },
    eat() {

    }
  }

ES6的一些基本补充