Mẹo viết code JavaScript ngắn gọn, súc tích và rõ ràng
Bạn chắc hẳn đã nhìn thấy anh chàng trong bức ảnh trên. Anh ấy đơn giản hóa mọi thứ hàng ngày - và đó chính xác là những gì chúng ta sẽ làm với JavaScript trong bài viết này.
JavaScript có rất nhiều tính năng thú vị mà hầu hết các nhà phát triển mới bắt đầu và trung cấp không biết. Tôi đã chọn ra 10 thủ thuật mà tôi sử dụng trong các dự án JavaScript hàng ngày của mình.
1. Thêm thuộc tính có điều kiện vào đối tượng
Chúng ta có thể sử dụng toán tử spread, ..., để nhanh chóng thêm thuộc tính vào đối tượng JavaScript một cách có điều kiện.
const condition = true;
const person = {
id: 1,
name: 'John Doe',
...(condition && { age: 16 }),
};
Toán tử && trả về biểu thức được đánh giá cuối cùng nếu mọi toán hạng đều đánh giá là true. Vì vậy, một đối tượng {age: 16} được trả về, sau đó sẽ được lan truyền để trở thành một phần của đối tượng person.
Nếu condtion là false thì JavaScript sẽ làm như sau:
const person = {
id: 1,
name: 'John Doe',
...(false), // evaluates to false
};
// spreading false has no effect on the object
console.log(person); // { id: 1, name: 'John Doe' }
2. Kiểm tra xem một thuộc tính có tồn tại trong một đối tượng hay không
Bạn có biết rằng chúng ta có thể sử dụng từ khóa in để kiểm tra xem một thuộc tính có tồn tại trong Đối tượng JavaScript không?
const person = { name: 'John Doe', salary: 1000 };
console.log('salary' in person); // returns true
console.log('age' in person); // returns false
3. Tên thuộc tính động trong đối tượng
Đặt thuộc tính đối tượng bằng khóa động rất đơn giản. Chỉ cần sử dụng ký hiệu ['key_name'] để thêm các thuộc tính:
const dynamic = 'flavour';
var item = {
name: 'Biscuit',
[dynamic]: 'Chocolate'
}
console.log(item); // { name: 'Biscuit', flavour: 'Chocolate' }
Thủ thuật tương tự cũng có thể được sử dụng để tham chiếu các thuộc tính đối tượng bằng một khóa động:
const keyName = 'name';
console.log(item[keyName]); // returns 'Biscuit'
4. Cấu trúc đối tượng bằng khóa động
Vì vậy, bạn biết rằng bạn có thể hủy cấu trúc một biến và đổi tên nó ngay lập tức với : notation. Nhưng bạn có biết rằng bạn cũng có thể phá hủy các thuộc tính của một đối tượng khi bạn không biết tên khóa hoặc tên khóa là động?
Trước tiên, hãy xem cách bạn có thể đổi tên các biến trong khi cấu trúc lại (cấu trúc hủy bằng bí danh).
const person = { id: 1, name: 'John Doe' };
const { name: personName } = person;
console.log(personName); // returns 'John Doe'
Bây giờ, hãy hủy cấu trúc các thuộc tính bằng một khóa động:
const templates = {
'hello': 'Hello there',
'bye': 'Good bye'
};
const templateName = 'bye';
const { [templateName]: template } = templates;
console.log(template) // returns 'Good bye'
5. Nullish Coalescing, toán tử ??
Các toán tử ?? hữu ích khi bạn muốn kiểm tra xem một biến là null hay undefined. Nó trả về toán hạng bên phải khi toán hạng bên trái của nó là null hoặc undefined, và nếu không thì trả về toán hạng bên trái của nó.
const foo = null ?? 'Hello';
console.log(foo); // returns 'Hello'
const bar = 'Not null' ?? 'Hello';
console.log(bar); // returns 'Not null'
const baz = 0 ?? 'Hello';
console.log(baz); // returns 0
Trong ví dụ thứ ba, 0 được trả về vì mặc dù 0 được coi là sai trong JavaScript, nhưng nó không phải là giá trị null hoặc undefined. Bạn có thể nghĩ rằng chúng ta có thể sử dụng dấu || ở đây nhưng có sự khác biệt giữa hai điều này:
const cannotBeZero = 0 || 5;
console.log(cannotBeZero); // returns 5
const canBeZero = 0 ?? 5;
console.log(canBeZero); // returns 0
6. Chuỗi tùy chọn (?.)
Bạn cũng ghét những lỗi như TypeError: Cannot read property ‘foo’ of null. Đây là một nỗi đau đối với mọi nhà phát triển JavaScript. Chuỗi tùy chọn đã được giới thiệu chỉ để giải quyết vấn đề này. Hãy xem:
const book = { id:1, title: 'Title', author: null };
// normally, you would do this
console.log(book.author.age) // throws error
console.log(book.author && book.author.age); // returns null (no error)
// with optional chaining
console.log(book.author?.age); // returns undefined
// or deep optional chaining
console.log(book.author?.address?.city); // returns undefined
Bạn cũng có thể sử dụng chuỗi tùy chọn với các chức năng như sau:
const person = {
firstName: 'Haseeb',
lastName: 'Anwar',
printName: function () {
return `${this.firstName} ${this.lastName}`;
},
};
console.log(person.printName()); // returns 'Haseeb Anwar'
console.log(persone.doesNotExist?.()); // returns undefined
7. Chuyển đổi Boolean sử dụng toán tử !!
Các toán tử !! có thể được sử dụng để nhanh chóng chuyển đổi kết quả của một biểu thức thành một boolean true hoặc false. Đây là cách thực hiện:
const greeting = 'Hello there!';
console.log(!!greeting) // returns true
const noGreeting = '';
console.log(!!noGreeting); // returns false
8. Chuyển đổi chuỗi và số nguyên
Nhanh chóng chuyển đổi một chuỗi thành một số bằng cách sử dụng toán tử + như sau:
const stringNumer = '123';
console.log(+stringNumer); // returns integer 123
console.log(typeof +stringNumer); // returns 'number'
Để nhanh chóng chuyển đổi một số thành một chuỗi, hãy sử dụng toán tử + theo sau bởi một chuỗi trống "":
const myString = 25 + '';
console.log(myString); // returns '25'
console.log(typeof myString); // returns 'string'
Các kiểu chuyển đổi này siêu tiện dụng nhưng chúng kém rõ ràng và dễ đọc code hơn. Vì vậy, bạn có thể phải suy nghĩ trước khi sử dụng chúng trong sản xuất. Tuy nhiên, đừng ngần ngại sử dụng chúng trong golf code.
9. Kiểm tra các giá trị sai trong một mảng
Bạn phải làm quen với filter, some và every phương pháp mảng. Nhưng bạn cũng nên biết rằng bạn có thể chỉ là Boolean phương pháp để kiểm tra các giá trị trung thực:
const myArray = [null, false, 'Hello', undefined, 0];
// filter falsy values
const filtered = myArray.filter(Boolean);
console.log(filtered); // returns ['Hello']
// check if at least one value is truthy
const anyTruthy = myArray.some(Boolean);
console.log(anyTruthy); // returns true
// check if all values are truthy
const allTruthy = myArray.every(Boolean);
console.log(allTruthy); // returns false
Đây là cách nó hoạt động. Như chúng ta biết rằng các phương thức mảng này nhận một hàm gọi lại, vì vậy chúng ta truyền Boolean như một hàm gọi lại. Bản thân Boolean nhận một đối số và trả về true hoặc false dựa trên tính xác thực của đối số. Vì vậy, chúng ta có thể nói rằng điều này:
myArray.filter(val => Boolean(val));
Giống như thế này:
myArray.filter(Boolean);
10. Làm phẳng các mảng của mảng
Có một phương thức flat trên Array nguyên mẫu cho phép bạn tạo một mảng duy nhất từ một mảng các mảng:
const myArray = [{ id: 1 }, [{ id: 2 }], [{ id: 3 }]];
const flattedArray = myArray.flat();
// returns [ { id: 1 }, { id: 2 }, { id: 3 } ]
Bạn cũng có thể xác định mức độ sâu chỉ định mức độ sâu của cấu trúc mảng lồng nhau nên được làm phẳng. Ví dụ:
const arr = [0, 1, 2, [[[3, 4]]]];
console.log(arr.flat(2)); // returns [0, 1, 2, [3,4]]
Cảm ơn vì đã đọc đến cuối. Tôi hy vọng bạn thấy những thủ thuật này hữu ích. Vui lòng thêm bất kỳ thủ thuật JavaScript nào của riêng bạn trong phần bình luận, cho tôi và những người khác!
Bài viết gốc tại đây.
Hiện tại khóa học Web Frontend + React.js tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Và trong tình hình dịch bệnh phức tạp, lớp sẽ chuyển sang học hình thức trực tuyến có tương tác, thời lượng và chất lượng không đổi, vẫn đảm bảo việc làm cho học viên tốt nghiệp.
Chi tiết khóa học: https://frontend.techmaster.vn/.
Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).
Bình luận