Nice to Meet You

I’m Hannah, a Taiwanese 30 years old front end developer.
Learning and sharing always makes me happy, and I am interested in the new things including coding and design.

Skills

  • HTML, RWD
  • JS, ES6, AngularJs, VueJs, jQuery
  • CSS, SASS, SMACSS/MVCSS
  • PHP, Wordpress
  • Git, Gulp, webpack

Experience

  • 8+ years of working experience as a web developer, now is in afusion
  • Sass / css lecturer for prototype-hacker
  • Host a conference at FEDC
Contact me
# | Oct 23 2018

JS Garden 筆記 – Array / Type

既上一篇 Function, 這一篇要來筆記 js garden 的 Array/Type, 當然一樣有看 Tommy 大大的影片導讀. 自己需要懂 js 英文專有名詞,所以有些會用英文寫囉


Array

在 object 篇已經提到過包含繼承屬性的陣列,不要使用 for...in 因為 for in loop 會連上層的 chain 全部印出來, 唯一方法是使用 hasOwnProperty 過濾掉上層的屬性,但這樣會因此慢上 20 倍.新的方法可以用 for of 取代掉

Iteration

你會發現以下例子沒什麼特別的除了 l = list.length, 先抓住 list 的長度在效能上是有幫助的喔(筆記), 這樣不用每一次都去計算 list.length , 只要第一次計算就好. 但當然若在過程中有增減陣列裡的東西就不適合先存起來

length

這蠻神奇的從來沒用過,原來 Array 的 length 是可以用來刪/加 array item 的

repeat

這邊補充一個可以讓字串重覆 N 次的方法,es6 語意多了

結論

不要用 for in 以及用 classic for 時要 cache the length property
另外強烈建議用 array literal [] 建立 Array, 因為當你是用 new Array 建立,裡面又剛好是 Number 時, 他只會建立一個 length 為 這個 Number 的陣列,裡面值並不會被建立

 

Type

下面就是一連串會讓我覺得,疑為什麼是這樣的範例, 你也許會好奇到底是左邊轉成右邊型別還是右邊轉左邊型別(答案是不一定), 想知道規則的話可以看 ecma script 其實蠻有趣的

Equality and Comparisons

Equality ==

  • NaN 跟誰比都是 false
  • 假如某一個是 x Number,那就是另一個先轉數字再比較 x == ToNumber(y)
  • 如果某一個 x 是 Booleam 那就是 ToNumber(x) == y
  • 如果某一個 x 是 Object 一個是 primitive 那就是 x == ToPrimitive(y)
  • 如果可以 Don’t use == !
  • js is weak typing, 不同 type 比較時會自動轉換 type 比較
  • There is also a performance impact when type coercion is in play 當轉換型別時就會影響效能

The Strict Equality Operator ===

  • Does not perform type coercion between its operands. 不會強制 type 轉換. 所以只要 type 不同基本上就是 false
  • 這樣寫他 performance 也會好上許多

Comparing Objects

除了會不會強制轉換型別以外, == 跟 === 運作原理是一樣的,除了在比較 Object (Array 也是 Obj 喔)
這不難懂有稍微深入 js 的都知道原始型別 Primitives 是 by value, Object 是 by reference 這個道理(可以參考這篇) 所以除非兩個 obj reference 是同一個不然比較之後一定是 false 的

Type Casting

Passing literals or non-object values will result in even more type coercion.

The typeof Operator

作者說 typeofinstanceof 是 js 上最大錯誤(疑 我還蠻常用的耶 XD),
自己覺得要搞清處再用.typeof 可檢查資料型別(尤其是 primitives 用 literal 建立時)

當使用建構式建立字串、布林或數字等值時,建立的其實不是基本型別值而是物件,因此可用 instanceof 來檢查是由哪個建構式建立的,也可檢視該物件是屬於哪個子型別

The instanceof Operator

instanceof Operator 用來檢測 constructor.prototype 是否存在於參數 object 的原型鏈上

這邊建議用法是用 toString