程序员社区

ES6补充的一些语法

1.块级作用域-let和var

变量作用域:变量在什么范围内是可用的
在ES5之前if和for是没有块级作用域的概念的,所以我们必须借助function的作用域来解决应用外面变量的问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <button>按钮1</button>
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <button>按钮5</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const btns = document.getElementsByTagName("button")
  //如果这里用var定义变量i,那么每次点击按钮控制台输出的i都是5
  for(let i=0;i<btns.length;i++){
    btns[i].addEventListener('click',function () {
      console.log('第' + i + '个按钮被点击');
    })
  }
  //ES5中的闭包函数也可以实现上面的效果,就是麻烦一点
  // for(var i=0;i<btns.length;i++){
  //   (function(num) {
  //     btns[i].addEventListener('click',function () {
  //       console.log('第' + num + '个按钮被点击');
  //     })
  //   })(i)
  // }
</script>
</body>
</html>

2.const的使用

2.1.使用const修饰的标识符为常量,不可以再赋值,我们可以利用const来保证数据的安全性
在ES6开发中,建议优先使用const,只有需要改变某个标识符的时候才用let
2.2.const在使用的时候必须赋初值
2.3.常量的含义是指向的对象不能修改,但是可以改变对象内部的属性

const obj = {
	name: 'Bill',
	age: 45,
}
obj.name = 'kobe';	//这是可以改变的

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

js创建对象的方式 :
1.new Object();
2. 对象字面量:var obj={…}
对象字面量:包围在一个花括号”{}“中的0个或多个键值对。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<script src="../js/vue.js"></script>
<script>
  //1.属性的增强写法
  const name = 'Bill Gates';
  const age = 18;
  const height = 1.88;
  //ES5的写法
  // const obj = {
  //   name: name,
  //   age: age,
  //   height: height,
  // }
  //ES6增强写法
  const obj = {
    name,
    age,
    height,
  }//给obj添加name、age、height三个属性,值从同名变量找
  console.log(obj);
  //2.函数的增强写法
  //ES5的写法
  // const obj2 = {
  //   run: function (){
  //    
  //   },
  //   eat: function () {
  //    
  //   }
  // }
  //ES6的增强写法
  const obj2 = {
    run(){
      
    },
    eat(){
      
    }
  }
</script>
</body>
</html>

赞(0) 打赏
未经允许不得转载:IDEA激活码 » ES6补充的一些语法

一个分享Java & Python知识的社区