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

Có bạn nào đó nghe bài hát "Lối nhỏ" của ĐEN VÂU chưa? Trong đó có một câu "Những thứ anh làm thường đơn giản, nên không hay được đánh giá cao". Thật sự rất hay, nhưng chốt lại một câu sau cùng là: "Vài người thường ăn hải sản, rồi lại chê bai mùi cá ao". 

Đúng như lời bài hát vậy, đừng đi cao và xa quá rồi chê bai những thứ đơn giản. Bởi không có những thứ đơn giản đến từ những bài học thì làm sao có những LTV xuất sắc. Và sau đây xin giới thiệu với các bạn những cách viêt code ngắn gọn. Tôi biết sẽ không mới, nhưng tôi cá bạn biết nhưng vẫn chưa áp dụng. Ở bài trước "15 kỹ thuật viết code dễ bảo trì" đã được các bạn có những nhận xét tích cực, thì bài viết này sẽ mang lại cho các bạn sự đơn gianr trong việc phát triển code.

1. Check giá trị boolean và gán giá trị

// bad
if (a === 'a') {
    b = true
} else {
    b = false
}

// good
b = a === 'a'

2. Đánh giá đúng tư thế nếu length Array không bằng 0

// bad
if (arr.length !== 0) {
    // todo
}

// good
if (arr.length) {
    // todo
}

3. Theo cách tương tự, hãy đánh giá tư thế đúng nếu length Array bằng 0

// bad
if (arr.length === 0) {
    // todo
}

// good
if (!arr.length) {
    // todo
}

4. Đơn giản nếu các phán đoán sử dụng biểu thức bậc ba

// bad
if (a === 'a') {
    b = a
} else {
    b = c
}

// good
b = a === 'a' ? a : c

5. Sử dụng includes để đơn giản hóa

// bad
if (a === 1 || a === 2 || a === 3 || a === 4) {
    // todo
}

// good
let arr = [1, 2, 3, 4]
if (arr.includes(a)) {
    // todo
}

6. Sử dụng một số phương pháp để xác định xem có các phần tử đáp ứng các điều kiện 

Sử dụng phương thức mảng một cách khéo léo, cố gắng tránh sử dụng vòng lặp for

// bad
let arr = [1, 3, 5, 7]
function isHasNum (n) {
    for (let i = 0; i < arr.length; i ++) {
        if (arr[i] === n) {
            return true
        }
    }
    return false
}

// good
let arr = [1, 3, 5, 7]
let isHasNum = n => arr.some(num => num === n)

// best
let arr = [1, 3, 5, 7]
let isHasNum = (n, arr) => arr.some(num => num === n)

7. Sử dụng phương thức forEach để duyệt qua mảng mà không tạo một mảng mới

// bad
for (let i = 0; i < arr.length; i ++) {
    // todo
    arr[i].key = balabala
}

// good
arr.forEach(item => {
    // todo
    item.key = balabala
})

8. Sử dụng filter() để lọc mảng ban đầu để tạo thành một mảng mới

Việc sử dụng filter() là một lợi thế so với find() trong một số trường hợp nhất đinh. Vì thế có rất nhiều bạn nhầm lẫn sử dụng, do dữ liệu kiểm tra ít, nên không cảm nhận được sử chậm trễ bởi sử dụng sai. Vì vậy tôi khuyên bạn nên tìm hiểu sự khác nhau giữa filter() và find() để hiểu hơn về vấn đề tôi nói.

// bad
let arr = [1, 3, 5, 7],
    newArr = []
for (let i = 0; i < arr.length; i ++) {
    if (arr[i] > 4) {
        newArr.push(arr[i])
    }
}

// good
let arr = [1, 3, 5, 7]
let newArr = arr.filter(n => n > 4) // [5, 7]

9. Sử dụng map()

Nói đến map() thì nếu như chưa phương thức này thì thật sự đôi khi chúng ta rất mệt khi sử dụng for... Thế nhưng, ít ai biết được map() được gọi làm hàm bậc cao trong javascript, map() thường được nhắc đến với reduce() và filter(). Có nhiều lập trình viên cho rằng khi sử dụng map(), reduce() hay filter() thì có vẻ như chậm hơn for truyền thống. Đúng tôi đã check nó, và kết luận rằng chậm hơn thật. Nhưng đó là dữ liệu ít, còn nếu lên tới 100K items thì có lẽ for không có cửa để so. Lý do đó là map(), reduce() hay filter() thiết kế để xử lý những nhiệm vụ khó hơn, như sử dụng trong higher oder functions .

// bad
let arr = [1, 3, 5, 7],
    newArr = []
for (let i = 0; i < arr.length; i ++) {
    newArr.push(arr[i] + 1)
}

// good
let arr = [1, 3, 5, 7]
let newArr = arr.map(n => n + 1) // [2, 4, 6, 8]

10. Sử dụng Object.values để nhanh chóng lấy các giá trị khóa của đối tượng 

Sử dụng các phương thức đối tượng một cách khéo léo, tránh sử dụng for ... in. Xem thêm những trường hợp nên tránh sử dụng for...in

let obj = {
    a: 1,
    b: 2
}
// bad
let values = []
for (key in obj) {
    values.push(obj[key])
}

// good
let values = Object.values(obj) // [1, 2]

11. Sử dụng Object.keys để nhanh chóng lấy các keys Object

let obj = {
    a: 1,
    b: 2
}
// bad
let keys = []
for (value in obj) {
    keys.push(value)
}

// good
let keys = Object.keys(obj) // ['a', 'b']

12. Hủy cấu trúc mảng để thay thế các giá trị biến 

Sử dụng Destructuring để đơn giản hóa mã

// bad
let a = 1,
    b = 2
let temp = a
a = b
b = temp

// good
let a = 1,
    b = 2
[b, a] = [a, b]

13. Destructuring các đối tượng

// bad
setForm (person) {
    this.name = person.name
    this.age = person.age 
}

// good
setForm ({name, age}) {
    this.name = name
    this.age = age 
}

14. Đổi tên khi cấu trúc lại để đơn giản hóa việc đặt tên 

Nếu dữ liệu trả về có tên biến quá dài, bạn có thể làm như thế này

// bad
setForm (data) {
    this.one = data.aaa_bbb_ccc_ddd
    this.two = data.eee_fff_ggg
}
// good
setForm ({aaa_bbb_ccc_ddd, eee_fff_ggg}) {
    this.one = aaa_bbb_ccc_ddd
    this.two = eee_fff_ggg
}

// best
setForm ({aaa_bbb_ccc_ddd: one, eee_fff_ggg: two}) {
    this.one = one
    this.two = two
}

15. Đặt giá trị mặc định trong Destructuring

// bad
setForm ({name, age}) {
    if (!age) age = 16
    this.name = name
    this.age = age 
}

// good
setForm ({name, age = 16}) {
    this.name = name
    this.age = age 
}

16. Sử dụng toán tử || check giá trị mặc định

let person = {
    name: 'anonystick',
    age: 38
}

let name = person.name || 'anonystick'

17. Ký tự && xác định xem khóa phụ thuộc có tồn tại hay không để ngăn lỗi 'xxx của undefined '

let person = {
    name: 'anonystick',
    age: 38,
    children: {
        name: 'anonystick'
    }
}

let childrenName = person.children && person.childre.name

18. Sử dụng nối chuỗi

let person = {
    name: 'anonystick',
    age: 18
}
// bad
function sayHi (obj) {
    console.log('Hello::::' + person.name = ' ' + person.age')
}

// good
function sayHi (person) {
    console.log(`Hello::::${person.name} ${person.age}`)
}

// best
function sayHi ({name, age}) {
    console.log(`Hello::::${name} ${age}`)
}

19. Sử dụng function arrow

let arr [18, 19, 20, 21, 22]
// bad
function findStudentByAge (arr, age) {
    return arr.filter(function (num) {
        return num === age
    })
}

// good
let findStudentByAge = (arr, age)=> arr.filter(num => num === age)

Vì bài viết đơn giản cho nên rất mong sự đóng góp của các bạn. Cảm ơn!