前言

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

本系列代碼及文檔均在 此處

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

lesson1 introduce

新的語法成為標準的過程

• stageStage 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'; // ReferenceErrorconsole.log(tmp); // ReferenceErrorlet tmp; // TDZ結束console.log(tmp); // undefinedtmp = 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) {// 重復聲明一次函數ffunction 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 可以接受的最小誤差范圍
• isSafeIntegerNumber.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 = 2console.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)

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

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的前端日拱一卒D9——ES6笔记之基础篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。