IT工程師數位筆記本

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

完。