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>