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
}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务