Video học lập trình mỗi ngày

Modern JavaScript Cheatsheet - Tipjs chia sẻ một bài post rất hữu ích về các tính năng của JavaScript. Bài viết này sẽ có thể được update mỗi ngày, vì tính năng JavaScript vô số kể, cho nên nếu có miss một tính năng nào đó thì tipjs cũng mong có sự đóng góp của các bạn.

Destructuring Assignment

Destructuring Assignment là một cú pháp cho phép tách dữ liệu được lưu trữ bên trong (nested) Objects hoặc Arrays (tổng quát hơn là các iterable values) và gán chúng cho các biến riêng biệt.

Đọc thêm: Sử dụng Destructuring Assignment javascript like a pro

let [first, last] = ['first name', 'last name']
// or
let {first, last} = {
  first: 'first name',
  last: 'last name'
}

String methods

String in javascript có lẽ là một trong những tính năng thường sử dụng nhất trong mỗi ứng dụng của mỗi devjs.

Đọc thêm: Tipjs - 5 cách chuyển value sang string trong javascript

"hello world".includes("world") // true
"hello world".startsWith("hello") // true
"hello world".endsWith("world") // true
parseFloat("123").toFixed(2) // "123.00"

Arrow function

Đọc thêm: ES6 Arrow Functions Cheatsheet

const getName = user => user.name
const funcName = name => {
  // do something
  return name
}

Array methods

Array method trong javascript. Ngôn ngữ nào cũng vậy, phải nắm những chức năng quan trọng để giải quyết nhanh hơn chư không riêng gì về javascript. Giờ đây qua bài viết này các bạn lịa co thể trang bị thêm cho mình những bí kíp tuy nhỏ nhưng võ công lại thượng thừa.

Đọc thêm: Method array cần biết trong javascript

const numbers = [1, 2, 3]
numbers.map(n => n * 2) // [2, 4, 6]
numbers.filter(n => n % 2 === 0) // [2]
numbers.reduce((prev, next) => prev + next, 0) // 6
numbers.find((n) => n > 2) // 3

Array manipulation

Đọc thêm: Let's talk splice, split and slice in javascript

// Delete at index
array.splice(index, 1)

// Insert at index
array.splice(index, 0, newItem)

// find index
[1, 2, 3].indexOf(3) // 2; return -1 if not found

// concat
let array3 = array1.concat(array2) // [1].concat([2]) is [1, 2]

// new array
let array4 = [1, 2, 3, 4, 5].slice(2, 4) // [3, 4]

Spread operator

Chúng ta sẽ nỗ lực giải thích (...) làm gì trong JavaScript. Hy vọng, điều này sẽ loại bỏ sự mập mờ trong khái niệm này cho các bạn, và cho những developer sẽ tìm thấy bài viết này trong tương lai và có cùng câu hỏi. Đây là một trong những tính năng mới thú vị của ECMA6 của Javascript; (...) là một trong những chức năng Javascript mới này.

Đọc thêm: Spread operator in JavaScript

const array1 = [1, 2]
const array2 = [...array1, 3, 4] // [1, 2, 3, 4]

const funcName = (x, ...params) => {
  console.log(x)
  console.log(params)
}

funcName(1, 2, 3, 4)
// 1
// [2, 3, 4]

Object Spread

Đọc thêm: Sử dụng Object Spread Operator trong javascript

const options = {
  ...defaults,
  show: true
}

Array Spread

Đọc thêm: Sử dụng Arrays Spread Operator trong javascript

const array3 = [
  ...array1,
  ...array2,
  'newItem'
]

Iterate

Đọc thêm: Sự khác biệt giữa for...in, for...of and forEach trong javascript

for (let i of [1, 2, 3]) {
  console.log(i)
}
// 1
// 2
// 3

for (let [index, value] of ['hi', 'hello', 'world'].entries()) {
  console.log(index, value)
}
// 0 "hi"
// 1 "hello"
// 2 "world"

const obj = {key1: 'hi', key2: 'hello', key3: 'world'};
for (let key in obj) {
  console.log(key, obj[key])
}
// or
for (let [key, value] of Object.entries(obj)) {
  console.log(key, value)
}
// key1 hi
// key2 hello
// key3 world

Create promise

Thật ra do có nhiều các bạn thần thánh Promise cho nên cho nó là thứ cao siêu và thần thánh. Đúng là nó cao siêu thật nhưng nó không thần thánh và khó hiểu hoặc khó sử dụng như vậy. Thực tế là promise là một special JavaScript object cũng giống như các object khác mà thôi.

Đọc thêm: [Series Callback javascript] - Phần 2: Promise là gì? Khi nào sử dụng Promise ?

const funcName = params => {
  return new Promise((resolve, reject) => {
    // ....
    // do something
    // if success
    resolve(result)
    // if fail
    reject(error)
  })
}
funcName('test')
  .then(result => {
    // ...
  })
  .catch(error => {
    // ...
  })
  .finally(() => {
    // ...
  })

All promise

Promise all sẽ reject ngay khi có một Promise trong Array đưa vào return về reject. Điều đó có nghĩa là, xem ví dụ dưới đây:

Đọc thêm: Promise.all javascript giúp tôi xử lý performance thế nào?

let promises = []
// func1 and func2 returns a promise
promises.push(func1())
promises.push(func2())

Promise.all(promises).then(allResult => {
  let [result1, resul2] = allResult
  // ...
})

Async-await

Bạn đã sử dụng Async / await như thế nào kể từ khi được giới thiệu bới ES7? Hay là code chạy thành công là xem như là thoả mãn? Chúng ta cũng đi một vài ví dụ để thấy có thể bạn đã mắc sai lầm trong khi sử dụng Async / await trong code của bạn?

Đọc thêm: JavaScript async/await: Sai lầm trong cách sử dụng?

const funcName = async () => {
  const data = await fetchData()
  return data
}

funcName()
  .then(result => {
    // ...
  })
  .catch(error => {
    // ...
  })
  .finally(() => {
    // ...
  })

Generator

function * countdown(n) {
  for (let i = n; i > 0; --i) {
    yield i
  }
}
[...countdown(3)] // [ 3, 2, 1 ]

//
let gen = countdown(3)
gen.next() // 3
gen.next() // 2
Browser:

encodeURIComponent() // Encodes a URI into UTF-8
decodeURIComponent() // Decodes

window

Đọc thêm: Sổ tay Lập trình DOM trong HTML

const formData = new window.FormData()
formData.append('file', data)

window.localStorage.getItem(key)
window.localStorage.setItem(key, data)

// download excel file
const xhr = new window.XMLHttpRequest()
const applicationType = 'application/vnd.ms-excel; charset=UTF-8'
xhr.open('GET', url, true)
xhr.responseType = 'blob'
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8')
xhr.onload = function(e) {
  if (this.status === 200) {
    let blob = new window.Blob([this.response], { type: applicationType })
    let downloadUrl = window.URL.createObjectURL(blob)
    let a = document.createElement('a')
    a.href = downloadUrl
    a.download = fileName
    a.click()
  }
}
xhr.onreadystatechange = e => {
  if (xhr.readyState === 4) {
    // 
  } else if (xhr.readyState === 3) {
    //
  })
}

Resource: cyanhall