前端日拱一卒D9——ES6筆記之基礎篇

前言

餘為前端菜鳥，感姿勢水平匱乏，難觀前端之大局。遂決定循前端知識之脈絡，以興趣為引，輔以幾分堅持，望於己能解惑致知、於同道能助力一二，豈不美哉。

本系列程式碼及文件均在 此處

最近幾天有點忙，啃啃老本，把long long ago的東西拿出來翻一翻。

lesson1 introduce

新的語法成為標準的過程

• stage

  Stage 0 - Strawman（展示階段）
  Stage 1 - Proposal（徵求意見階段）
  Stage 2 - Draft（草案階段）
  Stage 3 - Candidate（候選人階段）
  Stage 4 - Finished（定案階段）
  複製程式碼

babel

• .babelrc

  npm install --save-dev babel-preset-latest
  {
      presets: [
          "latest",
          "react",
          "stage-2"
      ],
      plugins: []
  }
  # presets的值集有latest，react，stage-0 to stage-3（對應不同階段的提案，選擇一個）
  複製程式碼

• babel-cli

  # -s生成sourcemap，-o指定檔案，-d指定目錄
  babel example.js -o compiled.js -s
  # babel-node提供支援ES6的REPL環境，目標檔案不需要考慮轉碼
  babel-node es6.js
  複製程式碼

• babel-register

  提供一個鉤子，在require載入`.js`, `.jsx`, `.es`, `.es6`字尾的檔案時先用babel實時轉碼，需在require別的檔案前先require該模組
  require("babel-register");
  require("./index.js");
  複製程式碼

• babel-core

  需要呼叫babel的api時，需要require該模組
  var babel = require('babel-core');
  // 字串轉碼
  babel.transform('code();', options);
  複製程式碼

• babel-polyfill

  預設情況下babel只轉句法，不轉一些es6新的物件以及方法，這種情況下需要在指令碼頭部引入該模組轉換使其可用
  import 'babel-polyfill';
  複製程式碼

• Traceur

  google提供的babel替代品
  複製程式碼

lesson2 let/const

TDZ

只在宣告的塊級作用域域內有效、不可重複宣告、TDZ

• 迴圈體和迴圈條件中的i有單獨的作用域

  for (let i = 0; i < 3; i++) {
    let i = 'abc';
    console.log(i); //輸出3次
  }
  複製程式碼

• TDZ

  // 在該區域內let/const定義的變數，只有等到宣告以後才可以獲取/使用
  if (true) {
    // TDZ開始
    tmp = 'abc'; // ReferenceError
    console.log(tmp); // ReferenceError
    let tmp; // TDZ結束
    console.log(tmp); // undefined
    tmp = 123;
    console.log(tmp); // 123
  }
  複製程式碼

  注意：帶來的問題是typeof不再絕對安全

塊級作用域

• 沒有塊級作用域的問題

  // 場景1
  var tmp = new Date();
  function f() {
    console.log(tmp);
    if (false) {
      var tmp = 'hello world';
    }
  }
  f(); // undefined因為變數提升，所以在函式執行的上下文中找到了tmp的定義，但是沒有完成賦值，所以是undefined
  // 場景2 典型的for迴圈將i變成了全域性變數
  複製程式碼

• 塊級作用域

  • 告別醜陋的IIFE
  • 對於es6的瀏覽器環境還說，函式宣告類似於var，可以理解成先函式變數提升var f = undefined，然後再繼續後面，所以以下程式碼是會報錯的

    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
    複製程式碼

  • do提案

    在程式碼塊前加do，返回最後執行表示式的值
    let x = do {
      let t = f();
      t * t + 1;
    };
    複製程式碼

const

• freeze 對於複雜型別變數，const保證的是指向該變數的記憶體空間的地址是不變的，變數若是可寫的是可以修改變數的屬性值的。 要想凍結變數，需使用Object.freeze()凍結物件及物件所有屬性，如下：

  var constantize = (obj) => {
  Object.freeze(obj);
      Object.keys(obj).forEach( (key, i) => {
          if ( typeof obj[key] === 'object' ) {
          constantize( obj[key] );
          }
      });
  };
  複製程式碼

• var function let const class 前兩者宣告的全域性變數依然是頂層物件（window/global）的屬性，後三者不再是，從 ES6 開始，全域性變數將逐步與頂層物件的屬性脫鉤

提案

• 考慮到不同環境下頂層物件不同，提案在語言標準層面引入global物件作為頂層物件，即所有環境下global物件都是存在的，如下

  // 將頂層物件放入變數global中
  // CommonJS 的寫法
  var global = require('system.global')();
  
  // ES6 模組的寫法
  import getGlobal from 'system.global';
  const global = getGlobal();
  複製程式碼

lesson3 解構

陣列解構

• 陣列解構的本質是模式匹配，只要某種資料結構具有Iterator介面，就都可以採用陣列形式解構。egs: Array, Set, Generator.

  // 解構賦值設定預設值是根據右側是否===undefined來決定右側是否有值，有則覆蓋預設值
  let [i = 1] = [] // 1
  let [i = 1] = [undefined] // 1
  let [i = 1] = [null] // null
  // 下例可以看出預設值先設定，再進行解構賦值
  let [x = 1, y = x] = [1, 2]; // x=1; y=2
  複製程式碼

  [a, b, c] = arr equals a = arr[0] b = arr[1]

物件解構

• 物件的解構賦值需要變數與物件屬性名相同，本質是先找到同名的屬性，然後把值賦給對應的變數

  // foo是匹配模式，不是變數，sss是被賦值的變數
  let { foo: sss, bar: ddd } = { foo: "aaa", bar: "bbb" };
  foo // foo is not defined
  sss // "aaa"
  // 預設值生效的條件是，物件的屬性值嚴格等於undefined，結構失敗為undefined
  let { x = 2 } = { x: null }
  x// null
  // 如果解構模式是巢狀的物件，父屬性不存在時會報錯
  let {foo: {bar}} = {baz: 'baz'}
  // 理解下面的為三次解構 node.loc node.loc.start node.loc.start.line
  let { loc, loc: { start }, loc: { start: { line }} } = node
  複製程式碼

  原來專案裡天天寫的const {a, b} = this.state是解構賦值！ let {a:c, b:d} = obj equals c = obj.a d = obj.b

字串、數值、布林值、null、undefined

• 如下

  let [a,b,c] = 'skt'
  let {length: len} = 'skt'
  複製程式碼

• 如下

  // 等號右邊先轉為物件再進行解構賦值，故undefined和null會報錯
  let {toString: s} = 123;
  s === Number.prototype.toString // true
  複製程式碼

用途

• 交換變數值

  [x, y] = [y, x]
  複製程式碼

• 從函式返回多個值

• 函式引數的定義、預設值

    // 引數是一組有次序的值
    function f([x, y, z]) { ... }
    f([1, 2, 3]);
    // 引數是一組無次序的值
    function f({x, y, z}) { ... }
    f({z: 3, y: 2, x: 1});
  複製程式碼

• 提取JSON資料

  let { id, status, data: number } = jsonData;
  複製程式碼

• 遍歷map

  // 獲取key、value
  for (let [key, value] of map) {
    console.log(key + " is " + value);
  }
  複製程式碼

• 獲取輸入模組的指定方法

  const { SourceMapConsumer, SourceNode } = require("source-map");
  複製程式碼

lesson4 字串擴充套件

• unicode表示 js中，可以用\uxxxx表示字元，xxxx為該字元的Unicode碼位。js內部，字元以UTF-16格式儲存，即每個字元為2個位元組(0x0000-0xFFFF)，對於需要4位元組儲存的例如漢字，在處理時可能會出現誤判。

• codePointAt

  // 判斷是否為4位元組組成
  function is32Bit(c) {
    return c.codePointAt(0) > 0xFFFF;
  }
  複製程式碼

• String.fromCodePoint 返回碼點對應字元，支援4位元組，即32位UTF-16字元

• 字串遍歷 for ... of ...遍歷字串，可以做到支援32位UTF-16字元

• 提案 at charAt返回的是UTF-16字元的前兩個位元組，提案at可以支援4位元組UTF-16字元，需要墊片庫支援

• include(), startsWith(), endsWith() 字面理解，注意可以傳一個下標引數，表示查詢位置

• repeat(), padStart(5, s = ''), padEnd(5, e = '') padStart填充在前，padEnd填充在後，若原字串長度大於第一個引數，則不填充返回原字串，若加起來大於第一個引數則保留原，去除需新增的多餘的。

  '123456'.padStart(10, '0') // "0000123456"
  '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
  複製程式碼

• 模板字串

• 標籤模板

  let total = 30;
  let msg = passthru`The total is ${total} (${total*1.05} with tax)`;
  // ['The total is ', ' ', ' (', ' with tax)'], 30, 31.5
  function passthru(literals, ...values) {
  let output = "";
  let index;
  for (index = 0; index < values.length; index++) {
      output += literals[index] + values[index];
  }
  output += literals[index]
  return output;
  }
  msg // "The total is 30 (31.5 with tax)"
  複製程式碼

  過濾字串

  let message =
  SaferHTML`<p>${sender} has sent you a message.</p>`;
  
  function SaferHTML(templateData) {
  let s = templateData[0];
  for (let i = 1; i < arguments.length; i++) {
      let arg = String(arguments[i]);
  
      // Escape special characters in the substitution.
      s += arg.replace(/&/g, "&amp;")
              .replace(/</g, "&lt;")
              .replace(/>/g, "&gt;");
  
      // Don't escape special characters in the template.
      s += templateData[i];
  }
  return s;
  }
  複製程式碼

  其他用途有：i18n、模板處理、引入其他語言等

  // 下面的hashTemplate函式
  // 是一個自定義的模板處理函式
  let libraryHtml = hashTemplate`
  <ul>
      #for book in ${myBooks}
      <li><i>#{book.title}</i> by #{book.author}</li>
      #end
  </ul>
  `;
  複製程式碼

lesson5 數值擴充套件

• 0o/0O 八進位制 0b/0B 二進位制
• Number.isFinite Number.isNaN 與全域性isFinite、isNaN的差別在於前者只對數值有效，非數值一律返回false後者是先將非數值轉化為數值再判斷。
• Number.ParseInt Number.ParseFloat Number.isInteger 逐步減少全域性性方法，使得語言逐步模組化
• Number.EPSILON 可以接受的最小誤差範圍
• isSafeInteger

  Number.isSafeInteger(9007199254740993)
  // false
  Number.isSafeInteger(990)
  // true
  Number.isSafeInteger(9007199254740993 - 990)
  // true
  9007199254740993 - 990
  // 返回結果 9007199254740002
  // 正確答案應該是 9007199254740003
  複製程式碼

  9007199254740993不是一個安全整數，但是Number.isSafeInteger會返回結果，顯示計算結果是安全的。這是因為，這個數超出了精度範圍，導致在計算機內部，以9007199254740992的形式儲存
• Math物件擴充套件
  • 指數運算子**
  • 提案 Integer

lesson6 函式擴充套件

引數設定預設值、rest引數

• basic

• with解構

  function m1({x = 0, y = 0} = {}) {
      return [x, y];
  }
  function m2({x, y} = { x: 0, y: 0 }) {
      return [x, y];
  }
  複製程式碼

  理解二者區別即可，其餘可參見解構

• 函式的length屬性：未指定預設值的引數個數

• 引數一旦設定了預設值，函式在宣告初始化時會形成單獨的作用域，初始化結束後釋放掉。

  let x = 1
  function m(y=x){
      let x = 2
      console.log(y)
  }
  m()// 1
  // 如果全域性x不存在會報錯，第二行相當於發生了let y = x, x指向全域性的x, 不受內部x影響
  
  var x = 1;
  function foo(x, y = function() { x = 2; }) {
  var x = 3;
  y();
  console.log(x);
  }
  // 理解：這裡有三個作用域，三個x，各不相干 3
  // 去掉var以後引數中的兩個x和函式體內x是一樣的，外部還是不變 2
  複製程式碼

• 應用 指定引數必傳，否則報錯，即給引數賦值一個預設的函式拋錯的結果，沒傳時得到的是這個丟擲的錯 用預設賦值undefined表示該引數可省略

• 函式的length不包含rest引數

• rest引數之後不能再有引數

• 只要引數使用了預設值、解構賦值、或者擴充套件運算子，就不能顯式指定嚴格模式

箭頭函式

• 注意

  • 箭頭函式體內的this指向函式定義時的物件，不是對應執行時的物件
  • 不可以當做建構函式
  • 不可以使用yield
  • 不可以使用arguments
  • 不可以使用bind、call、apply來改變箭頭函式this指向

• this指向的固定化，並不是因為箭頭函式內部有繫結this的機制，實際原因是箭頭函式根本沒有自己的this，導致內部的this就是外層程式碼塊的this

  const headAndTail = (head, ...tail) => [head, tail];
  headAndTail(1, 2, 3, 4, 5) // [1,[2,3,4,5]]
  複製程式碼

其他

• 雙冒號運算子

  obj::func === func.bind(obj)
  foo::bar(...arguments) === bar.apply(foo, arguments)
  複製程式碼

• 尾呼叫優化

  // 函式f的最後一步為函式g呼叫
  function f(x){
    return g(x);
  }
  複製程式碼

  函式呼叫會在記憶體在生成呼叫記錄，即呼叫幀，如A函式中呼叫B函式，則會在A的呼叫幀上方形成B的呼叫幀，B呼叫完後，返回至A才會消失。尾呼叫實際上已經不用儲存外層A的呼叫幀了，可以優化。 只有不再用到外層函式的內部變數，內層函式的呼叫幀才會取代外層函式的呼叫幀，否則就無法進行“尾呼叫優化”

• 尾遞迴優化

  // 非尾遞迴
  function Fibonacci (n) {
    if ( n <= 1 ) {return 1};
    return Fibonacci(n - 1) + Fibonacci(n - 2);
  }
  // 尾遞迴
  function Fibonacci2 (n , ac1 = 1 , ac2 = 1) {
    if( n <= 1 ) {return ac2};
    return Fibonacci2 (n - 1, ac2, ac1 + ac2);
  }
  
  傳統遞迴需要儲存相當多的呼叫幀，尾遞迴只儲存一個，節省記憶體，避免發生棧溢位
  複製程式碼

• 柯里化 將多引數函式變成單引數形式（具體下次再論）

• es2017支援函式最後一個引數尾逗號

• 在不需要錯誤例項的時候，提案try...catch...選單catch塊不需要引數

lesson7 陣列擴充套件

擴充套件運算子

• ... 可以理解為rest引數的逆運算，將陣列轉化為逗號分隔的引數序列，如Math.max(...[14, 3, 77])

• 複製陣列（直接賦值是引用，指向相同地址）

  // es5
  a1 = [1,2];    a2 = a1.concat()
  // es6
  a1 = [1,2];    a2 = [...a1]
  複製程式碼

• 合併陣列

• 與解構結合 擴充套件運算子用於陣列賦值時，只能作為最後一個引數

  const [a, ...b] = [1,2,3,4]
  複製程式碼

• 字串

  // 生成陣列
  [...'hello']
  // 返回字串正確長度，相容4位元組UTF-16編碼的Unicode字元
  function length(str) {
  return [...str].length;
  }
  複製程式碼

• 實現了 Iterator 介面的物件（下回分解）

• Map Set Generator（下回分解）

Array方法

• Array.from() 將arraylike物件和可遍歷物件轉為陣列

  // Array.prototype.slice
  Array.from
  // Array.from(arrayLike).map(x => x * x)
  // 接收第二個引數，類似map，可用於如NodeList物件等處理，獲取dom節點的屬性
  Array.from(arrayLike, x => x * x)
  Array.from([1, , 2, , 3], (n) => n || 0)
  // 第三個引數，可以繫結this
  複製程式碼

  ...呼叫的是遍歷器介面（Symbol.iterator），若物件沒有部署這個介面，就不能轉化為陣列，Array.from可以轉換任何有length屬性的物件

  因吹斯聽

  Array.from({ length: 2 }, () => 'jack')
  效果：第一個引數為第二個引數（函式）指定執行次數
  複製程式碼

• Array.of 總是返回引數值組成的陣列，如果沒有引數，就返回一個空陣列

  // 彌補建構函式Array()的不足（1-2個引數時）
  function ArrayOf(){
      return [].slice.call(arguments);
  }
  複製程式碼

• copyWithin 用途不明

• find findIndex 前者返回第一個值/undefined，後者返回位置/-1

• fill 陣列填充，可以指定起始、結束位置

• keys() values() entries() 用於遍歷陣列，返回遍歷器物件，可以使用for...of迴圈也可以手動呼叫遍歷器物件的next方法。分別對應 鍵、值、鍵值對（[0,'a']）

• includes() 判斷陣列中是否包含某個值，解決了indexOf對NaN的誤判（因為NaN!==NaN，indexOf是===判斷）

• 空位，es6上述陣列擴充套件對空位處理比較一致，值設為undefined，遍歷時視為存在

lesson8 物件擴充套件

寫法

• 屬性、方法簡寫

  { a } { a() {} }
  複製程式碼

• 屬性名錶達式、方法名錶達式

  { ['a' + 'bc']: 'a' }
  { ['a' + 'bc']() {} }
  // 注意屬性名為物件時，會自動轉為字串`[object Object]`
  複製程式碼

• 方法名name

  // 這種情況下`obj.foo.name`會報錯
  const obj = {
      get foo() {},
      set foo(x) {}
  };
  // 正確寫法
  const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
  descriptor.get.name // get foo
  // special
  (new Function()).name // "anonymous"
  doSomething.bind().name // "bound doSomething"
  複製程式碼

方法

Object.is

• 比較

  // 除了下列情況外和===的表現一致
  +0 === -0 //true
  NaN === NaN // false
  Object.is(+0, -0) // false
  Object.is(NaN, NaN) // true
  複製程式碼

Object.assign

• 用於物件合併，將源物件的所有可列舉屬性複製到目標物件

  Object.assign(target, source1, source2);
  複製程式碼

• 注意 非物件出現在第一個引數會被轉為物件，出現在後面只有字串會以字元陣列形式參與合併。（因為只有字串的包裝物件，會產生可列舉屬性） 對於undefined和null無法轉為物件，多以出現在第一個引數位會報錯，出現在後面會被忽略。 淺拷貝，即如果源物件的某個屬性是物件，則目標物件拷貝的是該物件的引用

• 用途

  • 為物件新增屬性、方法
  • 克隆物件

  // 只克隆原有可列舉屬性
  function clone(origin) {
      return Object.assign({}, origin);
  }
  // 保持繼承鏈
  function clone(origin) {
      let originProto = Object.getPrototypeOf(origin);
      return Object.assign(Object.create(originProto), origin);
  }
  複製程式碼

  • 合併多個物件
  • 為屬性設定預設值（利用覆蓋，注意應為簡單型別）

Object.getOwnPropertyDescriptors

• 返回指向物件的所有自身屬性的描述物件
• 由於Object.assign是賦值拷貝，所以無法正確拷貝物件的get和set方法，所以需要有方式去獲取描述物件，再結合defineProperties進行
• 結合Object.create使用，淺拷貝

Object.getPropertyOf, Object.setPropertyOf, __proto__

• __proto__

  obj = Object.create(someOtherObj);
  obj.__proto__ = someOtherObj;
  複製程式碼

• Object.setPrototypeOf(obj, proto) 將proto物件設為obj的原型，第一個引數為undefined和null時報錯，非物件時自動轉

• Object.getPrototypeOf(obj)

super

• 指向當前物件的原型物件，只有物件的方法的簡寫模式中有效，否則報錯
• super.foo等同於Object.getPrototypeOf(this).foo

Object.keys, Object.values, Object.entries

• Object.entries 用途：new Map(Object.entries(obj))

屬性的可列舉和遍歷

可列舉

• 獲取屬性的描述物件

  let obj = { foo: 123 };
  Object.getOwnPropertyDescriptor(obj, 'foo')
  //  {
  //    value: 123,
  //    writable: true,
  //    enumerable: true,
  //    configurable: true
  //  }
  複製程式碼

• 忽略 enumerable為false的操作

  for ... in // 會返回繼承的屬性
  Object.keys()
  JSON.stringify()
  Object.assign()
  複製程式碼

• 遍歷

  for ... in // 遍歷自身和繼承的**可列舉**屬性，不包含Symbol屬性
  Object.keys // 返回一個陣列，只包含自身所有**可列舉**屬性，不包含Symbol屬性
  Object.getOwnPropertyNames(obj) // 返回一個陣列，包含物件自身的**所有**屬性，不包含Symbol屬性
  Object.getOwnPropertySymbols(obj) // 返回一個陣列，包含物件本身的所有Symbol屬性
  Reflect.ownKeys(obj) // 返回一個陣列，包含自身**所有鍵名**
  // 共性：遍歷順序為 數值鍵-字串鍵-Symbol屬性
  複製程式碼

擴充套件運算子

Null傳導運算子（提案）

• obj?.prop, obj?.[expr], func?.(...args), new C?.(...args)

雖發表於此，卻畢竟為一人之言，又是每日學有所得之筆記，內容未必詳實，看官老爺們還望海涵。