Javascript Tips

網路上有很多實用且讓 code 更簡潔的 Javascript 的技巧，此篇即用來記載可以實作在實務上的技巧

串接字串

當不確定變數型態為何，使用+(加號)進行變數相加，結果可能會是有疑慮的

下述會由左到右進行進行計算，所以數字 1 + 2 = 3，但數字碰到字串進行相加會轉成字串，所以變成 ‘33’

const a = 1
const b = 2
const c = '3'

console.log(a + b + c) // "33"

可以使用''.concat(param1, param2,...,param3)

const a = 1
const b = 2
const c = '3'
const d = true
const e = null
const f = undefined

console.log(a + b + c + d + e + f) // "123truenullundefined"

字串轉數字

通常會用 Number 或是 parseInt 轉成數字

const a = Number('123')
const b = parseInt('456')

console.log(a, b) //123 456

使用加號會更簡單(若該字串無法轉成數字，則回傳 NaN)

const a = +'123'
const b = +'456'
const c = +'null'

console.log(a, b) //123 456 NaN

找出陣列的最大值與最小值

Math 有提供 max、min 找出最大值及最小值

const max = Math.max(5, 4, 8, 7)
const min = Math.min(5, 4, 8, 7)

console.log(max, min) //8 4

在陣列中尋找則可以使用 Function.prototype.apply()、spread operator

// Function.prototype.apply()
let max = Math.max.apply(null, [5, 4, 8, 7])
let min = Math.min.apply(null, [5, 4, 8, 7])

console.log(max, min) //8 4

// spread operator
max = Math.max(...[5, 4, 8, 7])
min = Math.min(...[5, 4, 8, 7])

console.log(max, min) //8 4

判斷式是否符合眾多值的其中之一

使用 or operator 可以達成這樣的要求，但是程式碼會太攏長

if (
  fruit === 'apple' ||
  fruit === 'banana' ||
  fruit === 'lemon' ||
  fruit === 'watermelon'
) {
  dosomething()
}

使用indexOf、includes，我偏好使用 includes

const fruit = ['apple', 'banana', 'lemon', 'watermelon']

if (fruit.indexOf(param) !== -1) {
  dosomething()
}

if (fruit.includes(param)) {
  dosomething()
}

陣列唯一值

const arr = [...new Set([1, 2, 3, 3, 6, 6])]
console.log(arr) // [1, 2, 3, 6]

傳遞空參數給 method

傳遞空參數給 method 這個方法，我通常會在 method 使用預設值帶過，不過看到有人分享別種方法

若直接傳遞空參數的話，會出現錯誤

function someMethod(param1, param2, param3) {
	console.log(param1, param2, param3) // Error: Unexpected token ,
}

someMethod(1, ,3)

陣列是一個鬆散且可以接收空值

console.log([1, , 2]) // [1, empty, 2]

利用這種陣列這種特性傳遞參數

function someMethod(param1, param2, param3) {
  console.log(param1, param2, param3) // 1 undefined 3
}

someMethod(...[1, , 3])

這種傳遞參數的寫法真的很特別

Object.is() 相等比較

做運算元的比較，通常使用 == 或是 ===

Object.is()是在 ES6 出的方法，在解決+0、-0、NaN的比較是很好的解決方案

先看 === operator 的比較

+0 與 -0 預期是 false, 但值是 true
NaN 與 NaN 預期是 true, 但值是 false

const condition1 = +0 === -0
const condition2 = NaN === NaN

console.log(condition1, condition2) //true false

Object.is()在比較+0、-0、NaN的結果，是符合預期的

const condition1 = Object.is(+0, -0)
const condition2 = Object.is(NaN, NaN)

console.log(condition1, condition2) //false true

比較表： View

參考資料：

Coding Diary