文章目录
一. 回顾
前面学习了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>