一.let命令
1.代码块作用域
(1)局部变量:在函数内部用var声明的变量叫做局部变量
局部变量只在它所在的函数内能被调用。
function test(){
var a = "xxx";
}
test();
console.log(a);
//a为局部变量,无法打印a
if(true){
var a = "xxx";
}
console.log(a);
//a为全局变量,可以打印出a
(2)代码块:一对花括号包含的区域称之为一个代码块
(3)let作用域:let只在他所在的代码块中作用
if(true){
let a = "xxx";
}
console.log(a);
//a is not defined,a无法被打印
2.预解析
(1)let命名声明的变量,必须先声明,后使用。let不存在预解析,不会将声明的let提到代码前面去。
console.log(a);
var a = 123;
//输出undefined
console.log(b);
let b = 456;
//报错
(2)预解析:用var声明的变量会被预解析到内存中,但是不会被赋值
3.let命令重复声明特点
(1)let声明的变量,在同一代码块中,不能被重复声明。会报错,不像var声明变量取值可以覆盖。
let hd = 1;
let hd = 2;
console.log(hd);
//会报错
(2)修改变量值得方法
let hd = 1;
hd = 2;
即可修改变量取值
4.let命令数据挂载问题
let命令声明的变量和函数,不再挂载到window对象中
let hd = 1;
console.log(window.hd);
//undefined
let foo = function (){
console.log('let foo');
}
window.foo();
//foo is not a function
5.let命令的应用
eg:点击li显示对应的索引值
<ul id = 'hd'>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var lis = document.getElementById("hd").getElementsByTagName('li');
//老方法
// for(var I = 0; I < lis.length; I++){
// lis[i].xuhao = I;
// lis[i].onclick = function(){
// alert(this.xuhao);
// }
// }
for(var I = 0; I < lis.length; I++){
let x = I;
lis[x].onclick = function(){
alert(x);
}
}
</script>
var arr = [];
for(let I = 0; I < 10; I++){
arr[i] = function(){
console.log(i);
}
}
arr[5]();
-->输出5;
6. let注意点,let与var的区别
(1)let没有预解析,不存在变量提升
(2)在代码块内,只要let定义变量,在之前使用都是报错。先定义完,再使用
(3) 同一个作用域里不能重复定义变量,但可赋值
(4)for循环,for循环里面是父级作用域,里面又一个。两者不是同一个作用域
for(let I = 0; I < 3; I++){
console.log(i);
}
-->输出0,1,2
for(let I = 0; I < 3; I++){
let I = "abc";
console.log(i);
}
-->输出三次abc
二.const命令
1. const命令声明的是只读的常量,一个一直存在并且不能被修改的量。
const a = 1;
a = 2;
//报错
- 但,const一个数组,通过push可以修改数组。
- const对象,也是可以修改对象属性的。
- 如果一定要锁死不修改,可以用Object.freeze(对象)冻结。
const arr = Object.freeze(['apple','banana']);
arr.push('orange');
console.log(arr);
-->报错
2. const在声明常量时必须被赋值
3. 作用域与let命令相同:只在声明所在的块级作用域内有效。
4.const也不存在预解析
const a = 12;
function show(){
console.log(a);
const a = 5;
}
show();
-->报错,说明不存在预解析,const不会被提前
三.Symbol数据类型
数据类型(基本类型、引用类型)
1.特点:独一无二
eg:非独一无二的例子
var a = 123;
var b = 123;
var x = Symbol('abc');
console.log(x);
-->输出Symbol(abc)
var y = Symbol('abc');
cosole.log(y);
-->输出Symbol(abc)
x与y虽然输出一样,但是本质并不相同
2.应用场景
(1)多人协同开发,有时会误操作,例如给下方对象中的属性覆盖赋值,有可能会影响其他操作。
let obj = {
a:1,
b:2,
c:3
}
obj.b = '123';
console.log(obj.b);
(2)应用方法
let a = Symbol('x');
let obj = {
[a]:1,
//相当于调用了symbol类型的a作为属性名
b:2,
c:3
}
obj.a = '123';
console.log(obj.a);
//相当于新加了一个属性名a
-->123
console.log(obj[a]);
//Symbol类型的属性名对应的属性值的调用方法
-->1