JavaScript 簡單/不簡單 (小Tips分享)

簡單的生活從不簡單
簡單的選擇永遠知易行難

「(英)原文連接」, 我並無一字一句的翻譯，添加了一些我平時看到的知識一併分享。

若是你是一個和我同樣才入門的小白，這裏的分享的一些JS技巧和陷阱能夠幫助你更好的學習和理解它。

若是你已是個一言不和就開車的老司機了，那麼也能夠再看看，也許這裏有你以前沒關注到的小技巧。

1.你是否嘗試過給numbers類型的數組排序❓

咱們都知道， Javascript 提供了sort函數給咱們使用， 那麼咱們來排一下

[101,2,5,100].sort()
// [ 100, 101, 2, 5 ] .複製代碼

是否是和咱們期待的不t太同樣

The default sort order is according to string Unicode code points.

默認排序規則是數組元素 字符 的 Unicode 編碼排序的，也就是說數組元素會被當作字符串，而後按照字符串的 Unicode 編碼進行升序排列。

那麼若是咱們想按照數字的大小排序，你應該這樣作

[101,2,5,100].sort((a, b) => a - b)
//[2, 5, 100, 101]複製代碼

附加題(來源知乎)

給定一個List(數組)， 元素都是正整數， 要求返回這些元素組成的最大數；
如[5, 2, 31, 3]則返回53312；

這裏分享一下個人思路：

• 講數組進行排序（在地鐵上想到的）
• 怎麼判斷兩個數的順序的，好比31和3; 那麼咱們可讓它們以字符形式分別進行交叉相加，如'331' 和'313',而後根據字符大小規則進行比對
• 而後再使用join 函數將數組組成咱們要的結果

我實現的代碼以下:

[5, 2, 31, 3].sort((a, b) => {
    return ('' + b + a) - ('' + a  + b)  
}).join('')複製代碼

2. new Date() 很是棒👍

new Date()能夠這樣玩：

• 無參調用（被當作普通函數使用）：返回當前日期和時間。

  new Date()
  Wed Dec 14 2016 02:27:18 GMT+0800 (CST)複製代碼

• 一個參數(x): 返回1970-01-01加上x毫秒的時間， 熟悉Unix的朋友都知道

  new Date(1000)
  Thu Jan 01 1970 08:00:01 GMT+0800 (CST)複製代碼

• 猜一猜new(1, 1, 1)返回的是什麼？
  答案是： 1901-2-01

new Date(1, 1, 1)
Fri Feb 01 1901 00:00:00 GMT+0800 (CST)複製代碼

• 第一個1，表明1901年。

  Integer value representing the year. Values from 0 to 99 map to the years 1900 to 1999

• 第二個1，表明二月。
  是否是很奇怪，爲何是二月？ （阿 二月，你比一月多一月）
  實際上是這樣的,月份索引也是從0開始，可是沒有零月啊， 因此0表明一月，那麼1就是二月咯

  Integer value representing the month, beginning with 0 for January to 11 for December.

• 第三個1，代碼月份中的第幾天

因而我試了一下：

new Date(1, 1, 29)
 Fri Mar 01 1901 00:00:00 GMT+0800 (CST)複製代碼

不是說好表明一個月的第幾天嗎，怎麼第29號沒了，變成了3月1號，那我生日還過不過阿。
好吧，其實1900年的2月的確沒有29號，由於1900年平年 😯
那麼順手把閏年的公式背一背吧

• 普通年能被4整除且不能被100整除的爲閏年。如2004年就是閏年,1900年不是閏年 世紀年能被400整除的是閏年。如2000年是閏年，1900年不是閏年

function isLeapYear(year) {
  return !(year % (year % 100 ? 4 : 400));
}複製代碼

3. 爲何沒有所有替換？

let s = "bob"
const replaced = s.replace('b', 'l')
replaced === "lob" // first match only
s === "bob" // original string is remained unchanged複製代碼

咱們都知道replace方法只會替換第一個，那麼若是我要替換所有呢？

使用帶有/ g的正則表達式：

"bob".replace(/b/g, 'l') === 'lol' // replace all occurences複製代碼

有空多看看正則表達式，它還有一個外號： 瑞士軍刀；

留個題目（來源DIV.io），你們能夠評論答案

將ThisNimojs-JavaScript使用正則替換成 TJhaivsaNSicmroijpst

4. 相等不相等

// These are ok
'abc' === 'abc' // true
1 === 1         // true

// These are not
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1}   // false
{} === {}           // false複製代碼

緣由：[1,2,3]和[1,2,3]是兩個單獨的數組。 它們剛好包含相同的值。 它們是不一樣的引用;

這裏我相信大部分人都是理解的；

主要是基本類型的比較和引用類型的比較的不一樣；

咱們再看多看一個東西： ==

[10] ==  10      // 爲 true
[10] === 10      // 爲 false

'10' ==  10      // 爲 true
'10' === 10      // 爲 false

 []  ==  0       // 爲 true
 []  === 0       // 爲 false

 ''  ==  false   // 爲 true 但 true == "a" 爲false
 ''  === false   // 爲 false複製代碼

== (或者 !=) 操做在須要的狀況下自動進行了類型轉換（隱式強制轉換）。=== (或 !==)操做不會執行任何轉換

隱式強制轉換的規則（來源justjavac）：

• 當 JavaScript 須要一個布爾值時（例如：if 語句),隱式轉換爲布爾：「truthy」和「falsy」
  下面的值被轉換爲 false：
  • undefined, null
  • Boolean: false
  • Number: -0, +0, NaN
  • String: ‘’
• 對象的隱式轉換
  只有在 JavaScript 表達式或語句中須要用到數字或字符串時，對象才被隱式轉換。 當須要將對象轉換成數字時，須要如下三個步驟：
  • 調用 valueOf()。若是結果是原始值（不是一個對象），則將其轉換爲一個數字。
  • 調用 toString() 方法。若是結果是原始值，則將其轉換爲一個數字。
  • 不然，拋出一個類型錯誤。
• 字符串的隱式轉換
  • 加運算符+ 由於只要其中一個操做數是字符串，那麼它就執行鏈接字符串的操做（而不是加法操做，即便它們是數字）

5.Array 的類型？

typeof {} === 'object'  // true
typeof 'a' === 'string' // true
typeof 1 === number     // true
// But....
typeof [] === 'object'  // true複製代碼

原做者提供了使用Array.isArray()方法用來檢測數組類型

這裏多提供幾種

const arr = ['l', 'o', 'v', 'e']

 // instanceof
 arr instanceof Array

 // constructor
 arr.constructor === Array

 // Object.prototype.toString
 Object.prototype.toString.call(o) === '[object Array]'

 // 結合兼容性和穩定性的最終版本

function isArray(arr){
  return Array.isArray ? Array.isArray(arr) : Object.prototype.toString.call(arr) === "[object Array]"
}複製代碼

6. 又是你！ 😪 閉包

先看個🌰:

const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
  Greeters.push(function () { return console.log(i) })
}

Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10複製代碼

指望輸出的1， 2， 3沒了，全都變成了10；

這裏有倆個解決方案

• 使用ES6提供的let, 關於let的技巧能夠看ES2015相關的介紹，這裏不囉嗦了
• 使用bind方法

  Greeters.push(console.log.bind(null, i))複製代碼

固然，還可使用IIFE的方式，不過這倆種是原做者最喜歡的方式；

7. 細說bind

你以爲這個🌰會輸出什麼？

class Foo {
  constructor (name) {
    this.name = name
  }

  greet () {
    console.log('hello, this is ', this.name)
  }

  someThingAsync () {
    return Promise.resolve()
  }

  asyncGreet () {
    this.someThingAsync()
    .then(this.greet)
  }
}

new Foo('dog').asyncGreet()複製代碼

答案是： Cannot read property 'name' of undefined

緣由是greet的上下文環境並不是dog;

如今我這樣作：

asyncGreet () {
  this.someThingAsync()
  .then(this.greet.bind(this))
}複製代碼

這樣就確保擁有正確的上下文環境了

固然，你也能夠這樣作

class Foo {
  constructor (name) {
    this.name = name
    this.greet = this.greet.bind(this)
  }
}複製代碼

...好像React的中這種綁定很常見（譯者說的）

若是你熟悉ES2015，那麼你不會忘了它=>， 箭頭函數

asyncGreet () {
  this.someThingAsync()
  .then(() => {
    this.greet()
  })
}複製代碼

也許有些地方翻譯的不恰當，也許有些觀點可能由於個人知識還不夠豐富致使了錯誤，你們能夠指出，我立刻修改。 謝謝你們的觀看；