前端日拱一卒D9——ES6笔记之基础篇
前言
余為前端菜鳥,感姿勢水平匱乏,難觀前端之大局。遂決定循前端知識之脈絡,以興趣為引,輔以幾分堅持,望于己能解惑致知、于同道能助力一二,豈不美哉。
本系列代碼及文檔均在 此處
最近幾天有點忙,啃啃老本,把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, "&").replace(/</g, "<").replace(/>/g, ">");// 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無法轉為對象,多以出現在第一個參數位會報錯,出現在后面會被忽略。 淺拷貝,即如果源對象的某個屬性是對象,則目標對象拷貝的是該對象的引用
-
用途
- 為對象添加屬性、方法
- 克隆對象
- 合并多個對象
- 為屬性設置默認值(利用覆蓋,注意應為簡單類型)
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笔记之基础篇的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java 环境配置 maven 环境配
- 下一篇: Mybatis原理初探