ECMAScript6学习笔记 ——let、const、变量解构赋值

时间:2022-06-07 08:12:53

let

  • 不存在变量提升
  • 通过let声明的变量仅在块级作用域内有效
  • 不允许在同一个作用域内重复声明一个变量
防止值公用
var oUl = document.querySelectorAll('ul>li');
for(let i=0,len=oUl.length;i<len;i+=1){
oUl[i].onclick = function(){
console.log(`text:${this.innerText} index:${i}`);
};
}

ECMAScript6学习笔记 ——let、const、变量解构赋值

不用再使用自执行函数了,兴奋。

typeof不再安全

直接typeof一个不存在的变量

console.log(typeof x); //undefined

而如果typeof一个后定义的let变量,则会报错

console.log(typeof x); //Uncaught ReferenceError: x is not defined
let x = 1;

解决方法:

try{
console.log(x);
}catch(err){
console.log(err);
}
let x = 1;
注意点

尽管通过let声明的变量不存在变量名提升,但只要在一个块级作用域中使用了let,那么就算这个let在定义之前使用,也不会到外部查找同名的变量。

var a = 10;
if(true){
console.log(a);
let a = 12;
}

不能在定义之前使用

a = 10;
console.log(a); //Uncaught ReferenceError: a is not defined
let a = 15;

块级作用域

在大括号中通过let或函数声明的变量不存在变量名提升,但因为一些历史原因,函数可能还是会存在变量提升的问题。

const

  • 定义一个常量,不可更改,并且在初始化时就得赋值,不然报错。
  • 只在当前作用域内有效
  • 不存在变量提升
  • 在同一个作用域中,不可重复声明
  • 当值是一个对象时,对象的值还是可以改变的,只是说引用不可改变
只在当前作用域内有效
const a = 10;
{
const a = 15;
console.log(a); //15
}
console.log(a); //10
当值是一个对象时
const obj = {
name:'zmz',
love:[1,2,3]
}; console.log(obj.name); //zmz
obj.name = 'o-o';
console.log(obj.name); //o-o

如果不想让其进行修改,可以使用Object.freeze方法

const obj = Object.freeze({
name:'zmz',
love:[1,2,3]
}); console.log(obj.name); //zmz
obj.name = 'o-o';
console.log(obj.name); //zmz
从es6开始新增的一些声明命令,其变量名不再属于*对象window

变量解构赋值

按照一定的模式进行赋值

数组解构赋值
var [a,b] = [1,2];
console.log(a,b); // 1 2

左边变量,右边值,一一对应

var [a,...b] = [1,2,3,4,5];
console.log(a,b); // 1 [2,3,4,5]

...会将后面剩余的所有参数当作一个数组,但为了方便阅读,也可以用一个括号将值阔起来,如下代码

var [a,[...b]] = [1,[2,3,4,5]];
console.log(a,b); // 1 [2,3,4,5]

直接用...和使用[]还是有区别的,如下

var [a,[...b],c] = [1,[2,3,4,5],6];
console.log(a,b,c); // 1 [2,3,4,5] 6

而直接用...的

var [a,...b,c] = [1,2,3,4,5,6];
console.log(a,b,c); // Uncaught SyntaxError: Rest element must be last element in array

报错了。

...的真正目的
var [a,...b] = [1,[2],3,4];
console.log(a,b); //1 [Array[1], 3, 4]

...所做的两件事,将剩余的所有参数归为所有,并且其自身是一个数组。

解构不成功的值

当解构不成功值为undefined

var [a,b] = [1];
console.log(a,b); //1 undefined
当值多余时

属于不完全解构,只解构需要的。

默认值

只有当值全等与undefined时才会起作用

var [a,b = 2] = [1];
console.log(a,b); //1 2 var [a,b = 2] = [1,null];
console.log(a,b); //1 null

默认值也可以引用解构赋值中的其他变量,但是这个变量必须已经声明

let [a,b = a] = [1];
console.log(a,b); //1 1 let [a = b,b = 1] = [];
console.log(a,b); //Uncaught ReferenceError: b is not defined

对象解构赋值

对象的解构,变量和属性名对应即可,跟顺序无关。

var {a} = {haha:'haha',a:'hello'};
console.log(a); //hello

也可以起一个别名

var {haha:a} = {haha:'haha',a:'hello'};
console.log(a); //haha

最后被赋值的是a,而不是haha

对象解构也可以使用默认值。

字符串解构
var [a,b,c] = 'haa';
console.log(a,b,c); //h a a

解构的用途

1、简写
var {log,info,time,timeEnd} = console;

time('time');
log('Hello');
timeEnd('time');

ECMAScript6学习笔记 ——let、const、变量解构赋值

2、使接口更友好,并且与顺序无关
function fn({name,age,hello}){
hello(name,age);
} fn({
name:'老王',
age:23,
hello:function(name,age){
console.log('This is ' + name + ' ' + age); // This is 老王 23
}
});
3、交换变量
var a = 1;
var b = 2;
[a,b] = [b,a];
console.log(a,b); //2 1
4、函数默认值
function fn({a = 1,b}){
console.log(a,b); // 1 2
}
fn({b:2});
5、只取需要的值
var arr = [
{
title:1111,
love:{
one:'one_1',
two:'two_1'
}
},
{
title:2222,
love:{
one:'one_2',
two:'two_2'
}
}
]; for(let {title,love:{two}} of arr){
console.log(title,two);
}

ECMAScript6学习笔记 ——let、const、变量解构赋值

完。