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

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}`);
  };
}

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

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');

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);
}

完。