<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var price = 100;
var price = 200;
let count = 10;
//let count = 10;
/*
let不允许在相同作用域内，重复声明同一个变量。
这样写的好处是：当你和同事同时声明相同的变量名的时候，用es5提供的var，后面的变量会覆盖前面相同名字的变量
例如上面的price；所以用let
*/
let discount = 20;
const key = 'abc123';
console.log('price=' + price)//200;
/*
let声明的变量是可以直接重新赋值的;
*/
let count1 = 10;
count1 = 11;
console.log('count1=' + count1);//11
/*
const声明的变量是不能直接重新赋值的,只能通过间接的方式是给const去赋值；
*/
const key1 = {
name: 'xyz',
age: 21
}
// console.log('key1=' + key1)//疑问为什么这种形式打印key1返回的是key1=[object Object]
console.log(key1)//这才是想要的：{name: "xyz", age: 21}
//间接改变const声明的变量值（改变里面的属性值）
key1.age = 22;
console.log(key1)//{name: "xyz", age: 22}
//注意你如果连属性值都不想被改变，就用js的Object.freeze()方法
const key2 = Object.freeze(key1);
key2.age = 23;
console.log(key2);//{name: "xyz", age: 22}
/*
window里面有个name属性是空字符串；
不改变 window里面的name属性
*/
// ES5的做法
(
function () {
var name = 'xyz';
console.log(name);//xyz
}
)();
// ES6的做法
{
let name = 'xyz';
// const name='xyz';
console.log(name) //xyz
}
/*
举个例子来证明var 和let 的具体区别:
如果你想进行ajax请求数组里面一一对应的数据用var肯定是不行的，
需要用let
*/
for (var i = 0; i < 10; i++) {//此时的i是全局变量
console.log(i);
setTimeout(function(){//模拟ajax请求过来的数据
console.log(`i:${i}`)//10个i:10
},1000)
}
console.log(`${i}我是全局变量`);
for (let j = 0; j < 10; j++) {
console.log(j);
setTimeout(function(){//模拟ajax请求过来的数据
console.log(`j:${j}`)//j:0 j:1 j:2 ... j:9
},1000)
}
/*
var变量提升；
let 和const 临时性死区
*/
console.log(color);//undefined
var color='yellow';
console.log(color1);
/*
let也是存在变量提升的，但是在这个变量（color1）声明之前，
是存在着临时性死区的，所以下面不管是let还是const都会报错。
*/
let color1='yellow';//Uncaught ReferenceError: color1 is not defined
// const color1='yellow';//Uncaught ReferenceError: color1 is not defined
/*
什么时候使用： let const var？
如果你的值会被重新更新，定义，请使用：let；
一个变量不想再被重新定义，请使用：const
ES6中最好别在用var（以前的技术了，要跟上时代呀！）
*/
</script>
</body>
</html>