Nội dung bài viết
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!