var和let和const
var和let的使用:
在ES5中,if 和for的都没有作用域,想要有作用域必须要借助function的作用域(ES5中只有function有作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</body>
<script src="let和const.js"></script>
</html>
{
var func;
if (true) {
var name = 'why';
func = function () {
console.log(name);
}
// func()
}
name = 'what'
//在中间可以修改name的值
//ES5的缺陷
func()
// if 的块级作用域必须要借助function
}
在下面代码的第 10 行中的var i = 1,在所有地方的i都会赋值为 1,无论在括号内还是括号外都是 1
{
// for块级作用域必须要借用function
var btns = document.getElementsByTagName('button')
// for(var i = 0; i <btns.length;i++){
// btns[i].addEventListener('click',function(){
// console.log('第'+i +'个按钮被点击');
// })
// }
for (var i = 0; i < btns.length; i++) {
(function (num) {
btns[i].addEventListener('click', function () {
console.log('第' + num + '个按钮被点击');
})
})(i)
//而闭包可以实现,因为函数自己有自己的作用域,不会受外面的影响,只找属于自己的i
}
}
{
console.log('-------ES6定义的let有块级作用域');
let btns = document.getElementsByTagName('button');
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '个按钮被点击');
})
}
}
var和let的使用的范例
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6]()
输出10
若将var改成let
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6]()
输出6
for (let f = 0; f < 3; f++) {
let f = 'abc';
console.log(f);
}
var 命令会发生“变量提升”现象, 即变量可以在声明之前使用,值为 undefined 。声明了未初始化
function fn() {
var a = 1;
var a = 2;
}
两个let或是一个let一个var会报错
{
var fn = [];
for (let i = 0; i < 5; i++) {
fn[i] = function (x) {
return x * i;
};
}
console.log(fn[2](10));
}
输出20,若改为var ,则输出50
const的用法
一旦给const修饰的标识符被赋值后,不能修改
const name = 'why'
name = 'abc'
在使用const 定义标识符,必须进行赋值
const name,//直接写会报错
常量的含义是指向的对象不能修改,但是可以改变对象内部的属性
const obj = {
name: 'whr',
age: 18,
height: 1.55
}
obj.name = 'ww';
obj.age = 22;
console.log(obj);
对象字面量的增强写法
ES5的写法
const name = 'wwww';
const age = 22;
const height = 1.5
//ES5的写法
const obj = {
name: name,
age: age,
height: height,
run: function () {
console.log('running1');
},
eat: function () {
console.log('eating1');
}
}
console.log(obj);
ES6的语法糖
//ES6的写法
const obj = {
name,
age,
height,
run() {
},
eat() {
}
}
console.log(obj);