Một số thủ thuật trong Javascript

Trong bài viết này mình sẽ tổng hợp những thủ thuật hay được sử dụng trong javascript những thủ thuật này được mình tìm hiểu sưu tầm trên mạng, hy vọng sẽ giúp ích cho các bạn trong quá trình học.

1. Toán tử 3 ngôi (Ternary Operator)

Sử dụng khi cần rút ngắn đoạn if..else thành 1 dòng. Thay vì

const x = 100
let result
if (x < 1000) {
  result = 'nhỏ hơn 1000'
} else {
  result = 'lớn hơn hoặc bằng 1000'
}

Thành

const x = 100
const result = (x < 1000) ? 'nhỏ hơn 1000' : 'lớn hơn hoặc bằng 1000'

2. Shorthand Evaluate

Khi gán giá trị của biến cho biến khác, chúng ta thường muốn đảm bảo rằng giá trị biến đó không null, không undefinded hoặc rỗng, vì vậy mà cần phải viết một loạt điều kiện để kiểm tra:

let variable2;
if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     variable2 = variable1
} else {
    variable2 = ''
}

Thành

const variable2 = variable1  || ''

3. Khai báo biến

Khai báo biến tốt nhất là khai báo khi bắt đầu 1 function. Cách viết sau sẽ giúp bạn tiết kiệm được thời gian cũng như số dòng khi khai báo

let x
let y
let z = 3

Thành

let x, y, z = 3

4. Bỏ qua toán tử so sánh bằng trong If

Khi điều kiện là so sánh bằng, trong trường hợp biến đã được định nghĩa trước và quy ước kiểu là Boolean, ta có thể bỏ qua toán tử so sánh == hoặc ===

if (isTurnOn === true)

Thành

if (isTurnOn)

Hoặc nếu trong trường hợp giá trị cần là false

if (!isTurnOn)

5. Decimal base exponents

Để biểu diễn số hàng triệu, hàng tỉ, thay vì viết một đống con số 0, ta có thể viết thành kiểu là số thực phẩy động (float type).

for (let i = 0; i < 100000; i++) { }

Thành

for (let i = 0; i < 1e5; i++) { }
# giá trị các biểu thức sau đều là true
1e0 === 1
1e1 === 10
1e2 === 100
1e3 === 1000
1e4 === 10000
1e5 === 100000

6. Object property

ES6 cung cấp cho ta khả năng gán property cho object dễ dàng hơn. Nếu tên key trùng luôn với tên biến

const id = 1, name = 'kentrung'
const obj = { 
  id: id, 
  name: name
}

Thành

const id = 1, name = 'kentrung'
const obj = { 
  id, 
  name
}

1. Chuyển một string number thành kiểu number bằng dấu +

var a = '10'
console.log(typeof(a))  // string
console.log(typeof(+a)) // number

2. Vòng lặp trong mảng

Cách cũ chúng ta hay viết

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
for (var i = 0; i < array.length; i++) {
  console.log(array[i])
}

Nếu làm như vậy cứ ứng với một vòng lặp sẽ phải tính lại chiều dài của mảng array như vậy sẽ ảnh hưởng tới hiệu suất của hệ thống. Thay vì thế, chúng ta có thể khởi tạo một biến gán giá trị là chiều dài của mảng, từ đó sẽ dễ dàng hơn trong vòng lặp.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var length = array.length
for (var i = 0; i < length; i++) {
  console.log(array[i])
}

Hoặc ngắn gọn hơn

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
for (var i = 0, length = array.length; i < length; i++) {
  console.log(array[i])
}

3. Sắp xếp ngẫu nhiên các phần tử trong mảng

var list = ['trung', 9, 'ken', 6, 'love']
list.sort(function() {  
  return Math.random() - 0.5
})
// ['trung', 'love', 6, 9, 'ken']

4. Sắp xếp tăng dần trong mảng number

var points = [40, 100, 1, 5, 25, 10]
points.sort(function(a, b) {
  return a - b
})
// [1, 5, 10, 25, 40, 100]

5. Sắp xếp giảm dần trong mảng number

var points = [40, 100, 1, 5, 25, 10]
points.sort(function(a, b) {
  return b - a
})
// [100, 40, 25, 10, 5, 1]

6. Sắp xếp theo bảng chữ cái trong mảng string

var fruits = ["Banana", "Orange", "Apple", "Mango"]
fruits.sort()
// ["Apple", "Banana", "Mango", "Orange"]

7. Sắp xếp ngược lại bảng chữ cái trong mảng string

var fruits = ["Banana", "Orange", "Apple", "Mango"]
fruits.sort()    // ["Apple", "Banana", "Mango", "Orange"]
fruits.reverse() // ["Orange", "Mango", "Banana", "Apple"]

8. Sắp xếp một array object trong javascript

Giá trị của những object này có thể là chuỗi hoặc số. Hàm này có hai tham số — key để sắp xếp theo đó, và thứ tự của kết quả.

const bands = [
  { genre: 'Rap', band: 'Migos', albums: 2 },
  { genre: 'Pop', band: 'Coldplay', albums: 4, awards: 13 },
  { genre: 'Rock', band: 'Breaking Benjamins', albums: 1 }
]

// hàm cho sắp xếp động
function compareValues(key, order = 'asc') {
  return function(a, b) {
    if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
      // không tồn tại tính chất trên cả hai object
      return 0
    }
    const varA = (typeof a[key] === 'string') ? a[key].toUpperCase() : a[key]
    const varB = (typeof b[key] === 'string') ? b[key].toUpperCase() : b[key]
    let comparison = 0;
    if (varA > varB) {
      comparison = 1
    } else if (varA < varB) {
      comparison = -1
    }
    return (
      (order == 'desc') ? (comparison * -1) : comparison
    )
  }
}

// array được sắp xếp theo band nhạc, mặc định theo thứ tự tăng dần
bands.sort(compareValues('band'))
 
// array được sắp xếp theo band nhạc, thứ tự giảm dần
bands.sort(compareValues('band', 'desc'))
 
// array được sắp xếp theo album, thứ tự tăng dần
bands.sort(compareValues('albums'))

9. Remove object from array by object property

Xóa một object trong mảng dựa trên thuộc tính của object đó.

// source: http://stackoverflow.com/questions/16491758/remove-objects-from-array-by-object-property

// we have an array of objects, we want to remove one object using only the id property
var apps = [
  { id: 34, name: 'My App', another: 'thing' }, 
  { id: 37, name: 'My New App', another: 'things' }
]
// get index of object with id = 69
var removeIndex = apps.map(function (item) { 
  return item.id
}).indexOf(69)

// remove object
apps.splice(removeIndex, 1)

10. Clear hoặc cắt ngắn (truncate) một array

Chỉ bằng cách thay đổi length, bạn có thể clear hoặc truncate một array mà ko cần reassign nó.

const arr = [11, 22, 33, 44, 55, 66];
// truncanting
arr.length = 3
console.log(arr) // [11, 22, 33]
// clearing
arr.length = 0
console.log(arr)    // []
console.log(arr[2]) // undefined

11. Set giá trị mặc định của parameter với object destructuring

Nhiều khi, bạn cần phải truyền một object với các giá trị mặc định cho một hàm kiểu như:

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 })

function doSomething(config) {
  const foo = config.foo !== undefined ? config.foo : 'Hi'
  const bar = config.bar !== undefined ? config.bar : 'Yo!'
  const baz = config.baz !== undefined ? config.baz : 13
  // ...
}

Đây là một cách cũ nhưng hiệu quả. Cách trên vẫn chạy bình thường, tuy nhiên lại dài dòng một cách ko cần thiết. Với object destructuring của es6, bạn có thể viết ngắn gọn lại như sau:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) {
  // ...
}

Và kể cả bạn muốn cho object config là optional, điều đó có thể thực hiện dễ dàng bằng cách:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) {
  // ...
}

12. Object destructuring với phần tử của mảng

Bạn có thể assign các phần tử của mảng tới từng biến riêng biệt bằng cách dùng object destructuring:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York'
const { 2: country, 4: state } = csvFileLine.split(',')

13. Switch với các khoảng giá trị

Một trick đơn giản để so sánh các khoảng giá trị trong câu lệnh switch:

function getWaterState(tempInCelsius) {
  let state
  
  switch (true) {
    case (tempInCelsius <= 0): 
      state = 'Solid'
      break
    case (tempInCelsius > 0 && tempInCelsius < 100): 
      state = 'Liquid'
      break
    default: 
      state = 'Gas'
  }
  return state
}

14. Await nhiều hàm async với async/await

Bạn có thể đợi nhiều hàm async xử lý xong bằng cách sử dụng Promise.all:

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

15. Tạo pure object

Bạn có thể tạo một 100% pure object, ko kế thừa bất kì property hay method nào từ Object ( ví dụ constructor, toString() ...)

const pureObject = Object.create(null)
console.log(pureObject);                 // {}
console.log(pureObject.constructor)      // undefined
console.log(pureObject.toString)         // undefined
console.log(pureObject.hasOwnProperty)   // undefined

16. Format JSON code

JSON.stringify ko chỉ đơn giản là biến một object thành string. Bạn có thể làm đẹp output JSON với nó:

const obj = { 
  foo: { 
    bar: [11, 22, 33, 44], 
    baz: { bing: true, boom: 'Hello' } 
  } 
}

// Tham số thứ 3 là số space để indent output JSON
JSON.stringify(obj, null, 2); 
// "{
//   "foo": {
//     "bar": [
//         11,
//         22,
//         33,
//         44
//      ],
//      "baz": {
//          "bing": true,
//          "boom": "Hello"
//      }
//   }
// }"

17. Remove các phần tử bị trùng khỏi mảng

Bằng cách sử dụng Set của ES2015 và spread operator, bạn có thể dễ dàng remove các phần tử trùng nhau trong mảng:

const removeDuplicateItems = arr => [...new Set(arr)]
removeDuplicateItems([42, 'foo', 42, 'foo', true, true])
// [42, 'foo', true]

18. Flatten mảng đa chiều

Bạn có thể dễ dàng flatten một array bằng spread operator:

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); 
// [11, 22, 33, 44, 55, 66]

Tuy nhiên, cách trên chỉ hoạt động với mảng 2 chiều. Nhưng bằng cách sử dụng đệ quy, bạn có thể khiến nó hoạt động trên mảng nhiều hơn 2 chiều:

function flattenArray(arr) {
  const flattened = [].concat(...arr);
  return flattened.some(item => Array.isArray(item)) ? 
    flattenArray(flattened) : flattened;
}

const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); 
// [11, 22, 33, 44, 55, 66, 77, 88, 99]

19. Truthy / False

• Falsy values là các giá trị liệt kê bên dưới
• Còn lại là truthy (cả object rỗng, mảng rỗng)

false	Giá trị Boolean false
0, -0, 0n	Các giá trị Number 0
'', "", ``	Chuỗi rỗng: nháy đơn, nháy đôi, backtick
null, undefined	Giá trị Null, Undefined
NaN	Giá trị Number NaN

const name = 'Easy Frontend' // truthy
console.log(!name) // false
console.log(!!name) // true

const name = '' // falsy
console.log(!name) // true
console.log(!!name) // false

// cách dùng !! hoặc Boolean
const student = { id: 1, name: 'kentrung' }
const hasStudent1 = !!student?.id // true
const hasStudent2 = Boolean(student?.id) // true