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

Để giúp các bạn mới về javascript thì bài này sẽ giúp các bạn hiểu "Các mẹo hữu ích để viết JavaScript ngắn gọn và hiệu quả hơn". 

Trước tiên vào 9 thủ thuật javascript thì chúng tôi khuyên các bạn mới học nên có một danh sách lưu trữ những thủ thuật mà các developer khác đã chia sẻ. Mặc dù có nhiểu các thủ thuật sẽ không được như ý muốn nhưng nó cũng giúp các bạn mới học có một khái niệm dễ hình dung hơn so với những người đã có kinh nghiệm.

 Trước đây chúng ta cũng lướt qua bài "7 Thủ Thuật JavaScript Hữu Ích" và nhiều phản hồi đa số giúp các bạn tốt hơn, nay xin phép các bạn, chúng ta tiếp tục hành trình trở thành developer javascript. 

Dưới đây là 9 mẹo giúp các bạn viết JavaScript ngắn gọn và hiệu quả hơn. 

1. Format JSON Code

JSON

Bạn có thể đã sử dụng JSON.stringify trước đây, nhưng bạn có nhận ra rằng nó cũng có thể giúp bạn một format đẹp hơn khi output ra không? Phương thức stringify() có hai tham số tùy chọn: 

replacer function, bạn có thể sử dụng để lọc JSON được hiển thị và giá trị không gian.

space giúp bạn lấy một số nguyên cho số lượng khoảng trắng bạn muốn hoặc một chuỗi (chẳng hạn như '\ t' để chèn các tab) và nó có thể giúp đọc dữ liệu JSON được tìm nạp dễ dàng hơn rất nhiều. 

Ví dụ :

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, '\t'));
// Result:
// '{
//     "alpha": A,
//     "beta": B
// }'

2. Get the Last Item(s) in an Array

ARRAYS

 Phương thức trong array là slice() có thể lấy các số nguyên âm và nếu được cung cấp, nó sẽ lấy các giá trị từ cuối mảng thay vì bắt đầu.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(array.slice(-1)); // Result: [9]
console.log(array.slice(-2)); // Result: [8, 9]
console.log(array.slice(-3)); // Result: [7, 8, 9]

Bạn nào có thời gian đọc qua bài "Splice, Split Và Slice Trong Javascript"  để hiểu rõ hơn về các method này.

3. Truncate an Array - Cắt gọn một array

ARRAYS 

Có một điều này nếu bạn muốn loại bỏ các giá trị từ cuối một mảng một cách triệt để, thì không cần phải sử dụng slice () hoặc splice (). Chỉ cần:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;
console.log(array); // Result: [0, 1, 2, 3]

Note: Lưu ý rằng thủ thuật này chỉ hoạt động cho array.length chứ không phải cho các loại khác có length property (chẳng hạn như String hoặc Function) 

4. Quick Rounding - Làm tròn số

Trước đây Nếu bạn muốn chuyển đổi một số float thành một số nguyên, bạn có thể sử dụng Math.floor (), Math.ceil () hoặc Math.round (). Nhưng cũng có một cách nhanh hơn bằng cách sử dụng |, toán tử bitwise ‘hoặc bit.

console.log(23.9 | 0);  // Result: 23
console.log(-23.9 | 0); // Result: -23

Hành vi của | khác nhau tùy thuộc vào việc bạn có xử lý các số dương hay âm hay không, do đó, tốt nhất chỉ nên sử dụng phím tắt này nếu bạn chắc chắn. Remove sô cuối thì sao? Thông thường chúng ta sẽ thực hiện điều này như code dưới.

let str = "1553"; 
Number(str.substring(0, str.length - 1)); // output 155

Thay vào đó, toán tử bitwise hoặc bit cho phép chúng ta viết:

console.log(1553 / 10   | 0)  // Result: 155
console.log(1553 / 100  | 0)  // Result: 15
console.log(1553 / 1000 | 0)  // Result: 1

Cân nhắc với trường hợp bạn chắc chắn. =]]

5. Convert to Number

TYPE CONVERSION 

Điều ngược lại có thể nhanh chóng đạt được bằng cách sử dụng toán tử cộng +.

let int = "15";
int = +int;
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

Điều này cũng có thể được sử dụng để chuyển đổi booleans thành số, như sau:

console.log(+true);  // Return: 1
console.log(+false); // Return: 0

Cũng có thể

const int = ~~"15"
console.log(int); // Result: 15
console.log(typeof int); Result: "number"

6. Convert to String

TYPE CONVERSION 

Để nhanh chóng chuyển đổi một số chuỗi, chúng ta có thể sử dụng toán tử nối + theo sau là một bộ dấu ngoặc kép trống "".

const val = 1 + "";
console.log(val); // Result: "1"
console.log(typeof val); // Result: "string"

7. Convert to Boolean

TYPE CONVERSION 

Bên cạnh các giá trị boolean thông thường là true và false, JavaScript cũng coi tất cả các giá trị khác là truey hoặc falsy.. Trừ khi được định nghĩa khác, tất cả các giá trị trong JavaScript là truthy, ngoại trừ những gía trị 0, "", null, undefined, NaN và tất nhiên có false đều là falsy value. 

Lần trước chúng ta cũng có bài về Falsy Values Javascript Là Gì? Cách Remove Falsy Values Trong Array Javascript?  mời các bạn đọc nếu cần bổ sung thêm. Chúng ta có thể dễ dàng chuyển đổi giữa true và false bằng cách sử dụng toán tử phủ định là ! , cũng sẽ chuyển đổi loại thành "boolean". ví dụ :

const true  = !0;
const false = !1;
const alsoFalse = !!0;
console.log(true); // Result: true
console.log(typeof true); // Result: "boolean"

Kiểu chuyển đổi loại này có thể có ích trong các câu lệnh có điều kiện như if(!false) mà chính tôi cũng hay sử dụng điều đó.

8. Filter Unique Values

ARRAYS 

Kiểu đối tượng Set đã được giới thiệu trong ES6 và cùng với ..., ‘spread’ operator, chúng ta có thể sử dụng nó để tạo một mảng mới chỉ với các giá trị duy nhất.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // Result: [1, 2, 3, 5]

Nếu như trước đó các bạn chưa học ES6 thì những xử lý như thế này thường nhiều dòng mã hơn. Trong blog https://anonystick.com có rất nhiều bài học về es6 các bạn nên bỏ thời gian để tham khảo thêm. 

9. Short-Circuit Evaluation

CONDITIONALS 

Thay thế :

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetching Data';
}

nên sử dụng

return (this.state.data || 'Fetching Data');

Toán tử ternary là một cách nhanh chóng để viết các câu điều kiện đơn giản (và đôi khi không đơn giản), như sau:

x > 100 ? 'Above 100' : 'Below 100';
x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

Nhưng đôi khi các bạn lại bối rối trước ternary thì dưới đây cũng là một dạng so sánh giúp bạn dễ hình dung hơn.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Result: 3
console.log(0 && null); // Result: 0

Sử dụng && sẽ trả về giá trị sai hoặc ‘falsy’ value đầu tiên. Nếu mọi toán hạng ước lượng là true, biểu thức được đánh giá cuối cùng sẽ được trả về. Tiếp: Sử dụng | | sẽ trả về giá trị true đầu tiên hoặc ‘truthy’ value. Nếu mọi toán hạng ước lượng thành false, biểu thức được đánh giá cuối cùng sẽ được trả về.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Result: 1
console.log(0 || null); // Result: null

Kết Luận. 

Xong, nếu như bạn có đọc tới đây thì tôi xin chúc mừng bạn, Để trở thành một developer giỏi bạn phải đi qua những bài học như thế này. Bài học này không những giúp các bạn có những mẹo mới về cách xử lý trong javascript và nó còn đem đến nhiều bài học mà chúng tôi đã back link trên bài viết. 

Và qua đó bạn có tểh thêm được những bài học bổ ích khác và từ đó bạn có thể hơn một người khác nếu như không đọc những bài viết dạng thế này. Chúc các bạn thành công!