ES6學習（一）

寫在前面

最近打算學習下一些互聯網的東西也就是vue+es6這些，筆記寫在有道雲上，不利於整理以及呈現。因此一步一步挪到博客上，另外也算是複習（預習）下吧。

http://es6.ruanyifeng.com/

基本都是照抄就是了

let 

let 所聲明的變量，只在 let 所在的代碼塊內有效。這樣有個效果，循環時的的每一個let都是獨立的

eg：let經典的for循環

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 10

var a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };
}
a[6](); // 6

for循環還有一個特別之處，就是設置循環變量的那部分是一個父做用域，而循環體內部是一個單獨的子做用域。

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc

這裏就要注意循環變量在內部使用的時候，不要一當心賦值了。

暫時性死區

var tmp = 123;

if (true) {
  tmp = 'abc'; // ReferenceError
  let tmp;
}

也就是用let定義的變量，在做用域定義的那就話以前是沒辦法用的，不夠是否是在外面定義域中是否有定義。

typeof會報錯。。未定義也就undefined

typeof x; // ReferenceError
let x;

typeof undeclared_variable // "undefined"

隱蔽的死區

function bar(x = y, y = 2) {
  return [x, y];
}
bar(); // 報錯

//另外
// 不報錯
var x = x;
// 報錯
let x = x;

不容許重複聲明

如題。

塊級做用域

問題

內層變量可能會覆蓋外層變量

var tmp = new Date();

function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}

f(); // undefined

用來計數的循環變量泄露爲全局變量。注意for循環var i = 0此時能夠算在外層。

var s = 'hello';

for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}

console.log(i); // 5

 

塊級做用域與函數聲明

// 瀏覽器的 ES6 環境
function f() { console.log('I am outside!'); }
(function () {
  if (false) {
    // 重複聲明一次函數f
    function f() { console.log('I am inside!'); }
  }
  f();
}());
// Uncaught TypeError: f is not a function

由於在ES6中的函數聲明會有提高（let纔沒有提高）

// 瀏覽器的 ES6 環境
function f() { console.log('I am outside!'); }
(function () {
  var f = undefined;
  if (false) {
    function f() { console.log('I am inside!'); }
  }
  f();
}());
// Uncaught TypeError: f is not a function

const 命令

常量

簡單來講

ES6中的const

對於簡單類型的數據（數值、字符串、布爾值），值就保存在變量指向的那個內存地址，所以等同於常量。

對於複合類型的數據（主要是對象和數組），變量指向的內存地址，保存的只是一個指針，const只能保證這個指針是固定的，至於它指向的數據結構是否是可變的，就徹底不能控制了。

const foo = {};
// 爲 foo 添加一個屬性，能夠成功
foo.prop = 123;
foo.prop // 123
// 將 foo 指向另外一個對象，就會報錯
foo = {}; // TypeError: "foo" is read-only

global 對象 

引入global做爲頂層對象。也就是說，在全部環境下，global都是存在的，均可以從它拿到頂層對象。

墊片庫system.global模擬了這個提案，能夠在全部環境拿到global。

// CommonJS 的寫法
require('system.global/shim')();

// ES6 模塊的寫法
import shim from 'system.global/shim'; shim();

上面代碼能夠保證各類環境裏面，global對象都是存在的。

// CommonJS 的寫法
var global = require('system.global')();

// ES6 模塊的寫法
import getGlobal from 'system.global';
const global = getGlobal();