Tổng hợp các javascript và những thủ thuật hay dành cho developer phần 5. Tiếp tục lần này mình sẽ tổng hợp thêm một số thủ thuật mà đôi khi các developer quên hay chẳng bao giờ dùng đến.Các bạn hãy cùng mình tìm hiểu nhé.

1. If với nhiều điều kiện

Bạn có thể lưu nhiều giá trị trong mảng và sau đó sử dụng phương thức Include. [code lang=”javascript”] //longhand if (x === ‘abc’ || x === ‘def’ || x === ‘ghi’ || x ===’jkl’) { //logic } //shorthand if ([‘abc’, ‘def’, ‘ghi’, ‘jkl’].includes(x)) { //logic } [/code]

2. If true … else

Với điều kiện if else đơn giản thì bạn có thể sử dụng các toán tử ternary để viết ngắn gọn [code lang=”javascript”] if (x > 100) { variable = true; } else { variable = false; } // Shorthand let variable = (x > 10) ? true : false; //Hoặc let variable = x > 10; console.log(variable); [/code]

3. Khai báo biến

Khi bạn muốn khai báo hai biến có giá trị chung hoặc kiểu chung, thì có thể viết ngắn gọn như sau. [code lang=”javascript”] //Longhand let variable1; let variable2 = 1; //Shorthand let variable1, variable2 = 1; [/code]

4. Kiểm tra Null, Undefined, Empty

Khi bạn tạo biến mới, và bạn muốn kiểm tra xem biến mà bạn đang tham chiếu đến, giá trị của nó có phải là empty hoặc undefined hay không. JavaScript có một cách viết tắt để thực hiện được chức năng này. [code lang=”javascript”] // Longhand if (variable1 !== null || variable1 !== undefined || variable1 !== ”) { let variable2 = variable1; } // Shorthand let variable2 = variable1 || ”; [/code]

5. Kiểm tra giá trị Null và gán giá trị mặc định

[code lang=”javascript”] let variable1 = null, variable2 = variable1 || ‘default value’; console.log("null check", variable2); // output là "default value" [/code] 6. Kiểm tra giá trị Undefined và gán giá trị mặc định [code lang=”javascript”] let variable1 = undefined, variable2 = variable1 || ‘default value’; console.log("null check", variable2); // output là "default value" [/code]

7. Gán giá trị cho nhiều biến

Khi bạn xử lý nhiều biến và muốn gán các giá trị khác nhau cho các biến khác nhau, kỹ thuật viết tắt này rất hữu ích. [code lang=”javascript”] //Longhand let variable1, variable2, variable3; variable1 = 1; variable2 = 2; variable3 = 3; //Shorthand let [variable1, variable2, variable3] = [1, 2, 3]; [/code]

8. Toán tử gán

Chúng ta sẽ xử lý rất nhiều toán tử số học trong khi lập trình. Và đây là một kỹ thuật hữu ích để gán toán tử cho các biến JavaScript. [code lang=”javascript”] variable1 = variable1 + 1; variable2 = variable2 – 1; variable3 = variable3 * 10; // Shorthand variable1++; variable2–; variable3 *= 10; [/code]

9. If Presence Shorthand

[code lang=”javascript”] // Longhand if (variable1 === true) or if (variable1 !== "") or if (variable1 !== null) // Shorthand //Nó sẽ kiểm tra string empty,null và undefined if (variable1) [/code] Đây là một cách viết tắt khá phổ biến. Nhưng cần lưu ý Nếu variable1 có bất kỳ giá trị nào, nó sẽ vào logic sau vòng lặp if, nên toán tử này chủ yếu được sử dụng để kiểm tra null hoặc undefined.

10. Toán tử AND (&&) cho nhiều điều kiện

Nếu bạn chỉ gọi một hàm nếu biến là true thì bạn có thể sử dụng toán tử && [code lang=”javascript”] //Longhand if (variable1) { callMethod(); } //Shorthand variable1 && callMethod(); 11. Vòng lặp for shorthand // Longhand for (var i = 0; i < testData.length; i++) // Shorthand for (let i in dataTest) hoặc for (let i of testData) [/code]

12. Comparison Returns

Bạn cũng có thể sử dụng phép so sánh trong câu lệnh return. [code lang=”javascript”] // Longhand let test; function checkReturn() { if (!(test === undefined)) { return test; } else { return callMe(‘test’); } } var data = checkReturn(); console.log(data); //output test function callMe(val) { console.log(val); } // Shorthand function checkReturn() { return test || callMe(‘test’); } [/code]

13. Arrow Function

Arrow Function là một tính năng mới được giới thiệu trong ES6. Nó giúp bạn tạo các hàm một cách gọn gàng hơn rất nhiều. [code lang=”javascript”] //Longhand function add(a, b) { return a + b; } //Shorthand const add = (a, b) => a + b; [/code]

14. Short Function Calling

Chúng ta có thể sử dụng ternary operator để thực hiện chức năng này. [code lang=”javascript”] // Longhand function test1() { console.log(‘test1’); }; function test2() { console.log(‘test2’); }; var test3 = 1; if (test3 == 1) { test1(); } else { test2(); } // Shorthand (test3 === 1? test1:test2)(); [/code]

15. Switch Shorthands

Bạn có thể lưu các điều kiện trong key-value objects và sử dụng dựa trên các điều kiện. [code lang=”javascript”] // Longhand switch (data) { case 1: test1(); break; case 2: test2(); break; case 3: test(); break; // And so on… } // Shorthand var data = { 1: test1, 2: test2, 3: test }; data[something] && data[something](); [/code]

16. Implicit Return

Với việc sử dụng Arrow Function, chúng ta có thể trả về giá trị trực tiếp mà không cần phải viết câu lệnh return. [code lang=”javascript”] //Longhand function add(a, b) { return a + b; } //Shorthand const add = (a, b) => a + b; [/code]

17. Lũy thừa cơ số thập phân

[code lang=”javascript”] // Longhand for (var i = 0; i < 100; i++) { … } // Shorthand for (var i = 0; i < 1e2; i++) { [/code]

18. Default Parameter Values

ES6 cho phép đặt giá trị mặc định cho tham số khi khai báo hàm. [code lang=”javascript”] //Longhand function add(variable1, variable2) { if (variable1 === undefined) variable1 = 1; if (variable2 === undefined) variable2 = 2; return variable1 + variable2; } //shorthand add = (variable1 = 1, variable2 = 2) => (variable1 + variable2); add() //output: 3 [/code]

19. Toán tử Spread

[code lang=”javascript”] //longhand // joining arrays dùng concat const data = [1, 2, 3]; const array1 = [4 ,5 , 6].concat(data); //shorthand // joining arrays const data = [1, 2, 3]; const array1 = [4 ,5 , 6, …data]; console.log(array1); // [ 4, 5, 6, 1, 2, 3] Clone array dùng spread //longhand // cloning arrays const array1 = [1, 2, 3]; const array2 = array1.slice() //shorthand // cloning arrays const array1 = [1, 2, 3]; const array2 = […array1]; [/code]

20. Template Literals

Thay vì sử dụng nhiều toán tử + để nối nhiều biến trong một string thì bạn có thể sử dụng Template Literals [code lang=”javascript”] //longhand const welcome = ‘Hi ‘ + variable1 + ‘ ‘ + variable2 + ‘.’ //shorthand const welcome = `Hi ${variable1} ${variable2}`; [/code]

21. Multi-line String

Khi bạn xử lý một chuỗi nhiều dòng trong code, bạn có thể thực hiện cách này: [code lang=”javascript”] //longhand const data = ‘string text line 1\n’ + ‘string text line 2’ //shorthand const data = `string text line 1 string text line 2` [/code]

22. Gán thuộc tính Object

[code lang=”javascript”] let variable1 = ‘a’; let variable2 = ‘b’; //Longhand let obj = {variable1: variable1, variable2: variable2}; //Shorthand let obj = {variable1, variable2}; [/code]

23. Chuyển String thành Number

[code lang=”javascript”] //Longhand let variable1 = parseInt(‘456’); let variable2 = parseFloat(‘456.9′); //Shorthand let variable1 = +’456′; let variable2 = +’456.9’; [/code]

24. Destructuring Assignment

[code lang=”javascript”] //longhand const variable1 = this.data.variable1; const variable2 = this.data.variable2; const variable2 = this.data.variable3; //shorthand const { variable1, variable2, variable3 } = this.data; [/code]