新的变量声明关键字let与const
let ⽤法:声明⼀个变量
特点:
只在声明的代码块内有效 {}
let
{
for(var i=1;i<=10;i++){}
console.log(i);//var 定义是全局作用域
for(let j=1;j<=10;j++){}
console.log(j);//j is not defined let声明是块级作用域
}
在同⼀作⽤域内不允许重复声明
if(true){
// let c = 10;//Identifier 'c' has already been declared
let c =20;
var d = 10;
var d = 20;
console.log(d);
}
没有变量提升
暂时性死区(在声明变量之前无法操作或读取这个变量)
!(function(){
console.log(b);//undefined
var b = 10
/*
JS域解析,变量声明被提升了
var b
console.log(b)
b=10
*/
})()
!(function(){
console.log(b);//Cannot access 'b' before initialization初始化之前无法访问‘b’
let b=10
})()
const用法:声明并初始化一个只读的变量(可理解为常量)
特点:同let命令
注意事项:
变量声明的同时必须立即赋值
如声明的是简单类型的数据,变量的值不可改变
实质:保证变量指向的内存地址所保存的数据不允许改动。
// const 只能保证指针固定
/*
只是保证内存地址是不变的(对于简单数据类型,字符串、数字、布尔型等数据就保存在
相应内存地址上,而复杂类型,如对象、数组等,实际上只是保存了指向其的指针 )
*/
{
// const a =1;//"a" is read-only
// a=2
var obj = {
name:'xiaoming'
}
const constobj = obj;
console.log(constobj.name);//xiaoming
obj.name='Jim'
console.log(constobj.name);//Jim
}
Symbol
对象的属性名容易产生命名冲突,为保证键名的唯一性,故es6引入Symbol这种新的原始数据类型确保创建的每个变量都是独一无二的
特点
Symbol类型的数据是类似字符串的数据类型,由于Symbol函数返回的值是原始类型的数据,不是对象,故Symbol函数前不能使用new命令,否则会报错。
let a1 = 'xxx'
let a2 = 'xxx'
console.log(a1===a2);//true
let a1 = Symbol('xxx')
let a2 = Symbol('xxx')
console.log(a1===a2);//false
console.log(a1);//Symbol(xxx)
// Symbol.for()这个API会在全局查找指定的变量,如果不存在就会创建一个并且把Symbol赋值到这个变量里,
// 如果存在就把找到Symbol值赋值到变量里
let a1 = Symbol.for('xxx')
let a2 = Symbol.for('xxx')
console.log(a1===a2);//true
应用场景:Symbol作为对象key
let obj = {
a1:'123',
b1:'456',
a1:'789'
}
console.log(obj);//{a1: "789", b1: "456"}
let a1=Symbol('a1')
let obj = {
[a1]:'123',
b1:'456',
a1:'789'
}
console.log(obj);//{b1: "456", a1: "789", Symbol(a1): "123"}
解构赋值
数组解构
/* 解构赋值可以理解为赋值操作的语法糖,
它是针对数组或者对象进行模式匹配,然后对其中的变量进行赋值 */
{
let a,b,c
[a,b,c] = [1,2,3]
console.log(a,b,c);//1 2 3
let a,b,c
[a,b,c=6] = [1,2]
console.log(a,b,c);//1 2 6
}
// ... 为es6中的扩展运算符(展开)
{
let a,other
[a,...other] = [1,2,3,4,5,6]
console.log(a);//1
console.log(other);//[2, 3, 4, 5, 6]
// [a,...[2, 3, 4, 5, 6]] => [1,2,3,4,5,6]
}
{//取第一和第三个值(占位)
let a,b
[a,,b] = [1,2,3]
console.log(a,b);//1 3
}
对象解构
{
let a,b
({a,b}={a:3,b:4}) //()区分块级作用域和对象
/* ({a:a,b:b}={a:3,b:4}) */
console.log(a,b);//3 4
let num,total
({a:num,b:total}={a:3,b:4})
console.log(num,total);//3 4
}
// 应用场景:后端返回数据与前端变量名不同
{
function fn(){
return {
name:'xiaoming',
nameList:{
name:'JIM'
}
}
}
let b = fn();
let {name:person,nameList:{name:otherperson}}=b
console.log(name,otherperson);//xiaoming JIM
}