ES6中的let和const和解构赋值

2021-3-24 前端达人

ES6中的let和const和解构赋值

什么是ES6?

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。

为什么要使用ES6?

每一次标准的诞生都意味着语言的完善，功能的加强。js语言本身也有一些令人不满的地方

1.变量提升特性增加了程序运行的不可预测性。

变量提升可以简单看以下代码了解下:

console.log(a);

var a=1;

//console.log(a)会输出undefined

这段代码也可以这样表示

var a;

console.log(a);

a=10;

//依旧输出undefined

这就是变量提升!

2.语法过于松散，实现相同的功能，不同的人可以会写出不同的代码，阅读性较低。

所以：ES6 ,目标是使JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。我们没有理由不去学习ES6。

let关键字

ES6中新增的用于声明变量的关键字。主要是替代var。

特征：1.let声明的变量只在所处的块级有效，具有块级作用域！在ES6之前JS只有全局作用域和局部作用域。

块级作用域：通俗来讲就是在一对大括号中产生的作用域，块级作用域中的变量只能在大括号中访问，在大括号外面是访问不到的。

可以看以下代码：

if(true){

let a=10;

console.log(a);//输出10

}

console.log(a);//报错提示a没有定义

{

let b=10;

console.log(b);//输出10

}

console.log(b);//报错提示b没有定义

if(true){

let c=20;

console.log(c)//输出20

if(true){

let d=30;

console.log(c)//输出 20

}

console.log(d);//报错d没有定义

}

在for循环中也起到作用，根据不同的需求选择let和var！

例如：

for(var i=0;i<10;i++){}

console.log(i) //输出10

for(let j=0;j<10;j++){}

console.log(j) //报错 j没有定义

好处：在业务逻辑比较复杂的时候，可以放在内层变量覆盖外层变量！

2.存在let 一开始就会形成封闭的作用域使用let命名声明变量前，变量不可用，必须先声明后使用，不存在变量提升

例如:

if(true){

console.log(temp);//报错

let temp=1;

}`

3.let 不允许重复声明在一个作用域内。

例如：

if(true){

let temp;

console.log(temp);//报错Identifier 'temp' has already been declared

let temp=1;

}

if(true){

var temp=10;

let temp=5;

console.log(temp);//报错错误和上面一致

}

但是不在一个作用域内可以例如：

{

let x=10;

console.log(x);//输出10

}

{

let x=5;

console.log(5);//输出5

}

const关键字

const一般用来声明常量，声明一个只读的常量。

特征：1.一旦声明其值不能改变必须立即初始化

例如：

const a; //这样什声明会直接报错！！！

1

这样声明没有初始化会直接报错！

2.对于对象：存的不是对象的本身，而是对象的引用，引用地址，地址不变，对象可拓展！

例如：

const foo={y:10};

foo.x=100;

console.log(foo.x);//输出100

1

2

3

对象可以扩展

但是对象不能改变

例如：foo={n:1000}; 会报错！

作用域：

var v1=100;

function f1(){

console.log(v1,v2); //undefined no defined

var v1=110;

let v2=200;

function f2(){

let v3=300;

console.log(v1,v2,v3);//110 200 300

}

f2();

console.log(v1,v2,v3);// 110 200 no defined

}

f1();

console.log(v1,v2,v3);// 100 no defined no defined

可以向外面作用域找不可以向里面作用域找内层变量可能会覆盖外层变量

let和var的本质区别：浏览器的顶层对象为window Node的为global，var定义的变量会关联到顶层对象中，let和const不会！

例如：

var a =100;

console.log(window.a); // 100

let b=100;

console.log(window.b); //undefined

1

2

3

4

如何选择const和let:数据需要变化用let 数据不需要变化用const

解构赋值：ES6中允许从数组中提值，按照对应位置，对变量赋值，对象也可以实现解构！

例如：

{
let a,b,c;
[a,b]=[1,2];
console.log(a,b,c); //输出 1 2 undefined
}

{
let a,b,c;
[a,b,...c]=[1,2,3,4,5,6];
console.log(a);//输出1
console.log(b);//输出2
console.log(c);//输出[3,4,5,6]
}
{
let a,b,c;
[a,b,c=3]=[1,2];
console.log(a,b,c);//输出1 2 3
}
{
let a,b;
[a,b]=[1,2];
[a,b]=[b,a]
console.log(a,b);//输出 2 1
}
{
let a,b;
({a,b}={a:1,b:2})
console.log(a,b);//输出 1 2
}
{
function fun(){
return [1,2,3,4,5,6]
};
let a,b;
[a,,,,b]=fun();
console.log(a,b);//输出1 5
}
{
let o={p:42,q:true};
let {p,q}=o;
console.log(p,q);//输出 42 true
}
{
let {a=10,b=5}={a:3};
console.log(a,b);//输出 3 5
}

{
let metaData={
title:'abc',
test:[{
title:'test',
desc:'description'
}]
}
let {title:esTitle,test:[{title:cnTitle}]}=metaData;
console.log(esTitle,cnTitle);//输出abc test
}