ES6學習筆記（一）：變量賦值和基本數據類型

時間 2019-12-10

原文原文鏈接

let和const

let和const不存在變量提高

變量必定要在聲明後使用，不然報錯。es6

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

變量i是var聲明的，在全局範圍內都有效。因此每一次循環，新的i值都會覆蓋舊值，致使最後輸出的是最後一輪的i的值。ajax

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

上面代碼中，變量i是let聲明的，當前的i只在本輪循環有效，因此每一次循環的i其實都是一個新的變量，因此最後輸出的是6。json

暫時性死區（temporal dead zone，簡稱TDZ）

只要塊級做用域內存在let或const命令,則變量會被綁定在這個區域內,不受外層做用域的變量影響。凡在聲明以前使用了變量,則會報錯。
注意,若是使用了let或const,typeof 就不安全了數組

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

不容許重複聲明

let a = 10;
var a = 1; //Uncaught SyntaxError: Identifier 'a' has already been declared

或安全

let a = 10;
let a = 1; //Uncaught SyntaxError: Identifier 'a' has already been declared

塊級做用域與函數聲明

而且ES6規定，塊級做用域之中，函數聲明語句的行爲相似於let，在塊級做用域以外不可引用。數據結構

const

const只保證變量指向的地址不變,不保證該地址的數據不變。async

const foo = {};
foo.prop = 123;

console.log(foo.prop); // 123

foo = {}; // TypeError: "foo" is read-only

若是真的想將對象凍結，應該使用Object.freeze方法。函數

const foo = Object.freeze({});

// 常規模式時，下面一行不起做用；
// 嚴格模式時，該行會報錯
foo.prop = 123; // Can't add property prop, object is not extensible

變量解構

解構必須左右解構相同

1.解構失敗則是undefined,若有默認值則取默認值
2.左右解構不一樣則拋error測試

// 報錯
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

上面的表達式都會報錯，由於等號右邊的值，要麼轉爲對象之後不具有Iterator接口（前五個表達式），要麼自己就不具有Iterator接口（最後一個表達式）。ui

事實上，只要某種數據結構具備Iterator接口，均可以採用數組形式的解構賦值。例如set數據類型和Generate函數

默認值

解構賦值容許默認值,在定義的時候直接賦值便可

var [x=1]=[,3];
console.log(x) // x = 1

注意，ES6內部使用嚴格相等運算符（===），判斷一個位置是否有值。因此，若是一個數組成員不嚴格等於undefined，默認值是不會生效的。

對象的解構賦值

對象的解構與數組有一個重要的不一樣:數組的元素是按序排列的，取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。

對象解構賦值的內部機制:先找到同名屬性，而後再賦給對應的變量。真正被賦值的是後者，而不是前者。

var {foo,bar} = {foo:'aaa',bar:'bbb'}
等價於
var {foo:foo,bar:bar} = {foo:'aaa',bar:'bbb'}

默認值生效的條件一樣是，對象的屬性值嚴格等於undefined。

注意賦值時不能讓大括號在行首

var x;
{x} = {x: 1}; // 會報錯,由於JavaScript引擎會將{x}理解成一個代碼塊

var x;
({x} = {x:1}); // 正確寫法

字符串的解構賦值

字符串也能夠解構賦值。這是由於此時，字符串被轉換成了一個相似數組的對象。

數值和布爾值的解構賦值

解構賦值時，若是等號右邊是數值和布爾值，則會先轉爲對象。

函數的解構賦值

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

注意對比與下面代碼的區別
function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]
此處是給{x,y}這個對象設置了默認值,而不是給x,y分別設置了默認值

解構賦值的7種常見用法

1.變量交換

[x, y] = [y, x];

2.從函數返回多個值

function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();

3.函數參數的定義

function f([x, y, z]) { ... }
f([1, 2, 3]);

4.提取JSON數據

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

5.函數參數默認值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};
// 指定參數的默認值，就避免了在函數體內部再寫var foo = config.foo || 'default foo';這樣的語句。

6.遍歷Map結構

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

7.輸入模塊的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

String

字符串編碼{}

es5中超過ffff值的Unicode字符只能用兩個字節表示,可是es6增長了大括號方式

es5:
"\uD842\uDFB7"
// "𠮷"

"\u20BB7"
// " 7"

es6:
"\u{20BB7}"
// "𠮷"

還能夠在變量中拼接Unicode編碼

let hello = 123;
hell\u{6F} // 123

新增方法

1.codePointAt 獲取字符的碼點,10進制
codePointAt方法是測試一個字符由兩個字節仍是由四個字節組成的最簡單方法。

function is32Bit(c) {
  return c.codePointAt(0) > 0xFFFF;
}

is32Bit("𠮷") // true
is32Bit("a") // false

2.String.fromCodePoint() 返回傳入碼點的對於字符
3.字符串Iterator接口新增,能夠用for of遍歷字符串
4..at()能返回給定位置的字符串,容許超過FFFF的字符被返回,es5中對應的是charAt
5.includes() 判斷字符串中是否包含傳入的字符
6.startsWith() 判斷字符串的起點是不是傳入的字符
7.endsWith() 判斷字符串的終點是不是傳入的字符
8.repeate() 重複某字符
9.padStart() 補全開頭
10.padEnd() 補全結尾