10 thủ thuật thú vị và hữu dụng trong JavaScript

10 thủ thuật thú vị và hữu dụng trong JavaScript

Trong bài viết này mình sẽ chia sẻ cho các bạn 10 thủ thuật thú vị và hữu dụng trong JavaScript, các mẹo và thủ thuật sau đây có thể sẽ giúp các bạn giảm số lượng code phải viết đồng thời tối ưu đoạn code của bạn

1. Convert sang kiểu Boolean bằng toán tử !!

Đôi khi chúng ta phải kiểm tra xem 1 biến có tồn tại hay không, hay là biến có chứa một giá trị valid hay không. Để thực hiện việc này chúng ta có thể sử dụng toán tử  !!  một cách đơn giản như  !!variable  , nó sẽ chuyển toàn bộ kiểu dữ liệu của biến thành kiểu Boolean và biến này sẽ trả về  false  khi nó có một trong các giá trị:  0null""undefined , hoặc  NaN , còn lại sẽ trả về  true . Một ví dụ khá đơn giản:

function Classroom(student) { this.student = student; this.hasStudent = !!student; } var classroom = new Classroom(20); console.log(classroom.student); // 20 console.log(classroom.hasStudent); // true var empty_classroom = new Classroom(0); console.log(empty_classroom.student); // 0 console.log(empty_classroom.hasStudent); // false
Code language:JavaScript(javascript)

Trong trường hợp này, nếu giá trị của  classroom.student  lớn hơn 0 thì  classroom.hasStudent  sẽ có giá trị là  true

2. Convert sang số bằng toán tử +

Thủ thuật này khá đơn giản, nhưng chỉ sử dụng được cho 1  String  chứa toàn số, còn lại sẽ trả về  NaN

function to_number(str_number) { return +str_number; } console.log(to_number("1234")); // 1234 console.log(to_number("ACB")); // NaN
Code language:JavaScript(javascript)

Thủ thuật này còn có thể áp dụng cho kiểu  Date , trong trường hợp này sẽ trả về Timestamp

console.log(+new Date()) //1521080043502
Code language:JavaScript(javascript)

3. Câu lệnh điều kiện rút gọn

Một đoạn code quen thuộc:

if (conected) { login(); }

Đoạn code trên có thể viết ngắn gọn thành một dòng bằng cách sử dùng  &&  như sau:

conected && login();

Bạn cũng có thể là tương tự để kiểm tra sự tồn tại của 1 thuộc tính hay 1 function trong một Object

user && user.login();
Code language:CSS(css)

4. Gán giá trị mặc định bằng toán tử ||

Hiện nay trong ES6 có tính năng gán giá trị mặc định. Để sử dụng tính năng này ở các Browsers cũ hơn bạn có thể sử dụng toán tử  ||  bằng cách dùng giá trị mặc định như là tham số thứ 2. Nếu tham số đầu trả về  false  thì tham số thứ hai sẽ được dùng làm giá trị mặc định.

function User(name, age) { this.name = name || "Pham Van A"; this.age = age || 27; } var user1 = new User(); console.log(user1.name); // Pham Van A console.log(user1.age); // 27 var user2 = new User("Le Thi C", 20); console.log(user2.name); // Le Thi C console.log(user2.age); // 20
Code language:JavaScript(javascript)

5. Caching array.length trong vòng lặp

Một vòng lặp  for  thường gặp:

for (var i = 0; i < array.length; i++) { console.log(array[i]); }
Code language:PHP(php)

Nếu bạn làm việc với mảng nhỏ thì ko có vẫn đề gì nhưng khi làm việc với mảng lớn, đoạn code này sẽ tính lại kích thước của mảng trong mỗi lần lặp. Điều này sẽ khiến mỗi vòng lặp chậm đi một chút. Để tránh điều này, ta có thể cache  array.length  vào một biến như sau:

for (var i = 0, length = array.length; i < length; i++) { console.log(array[i]); }
Code language:PHP(php)
10 thủ thuật thú vị và hữu dụng trong JavaScript

6. Trộn mảng

Nếu bạn muốn xáo trộn vị trí của các phần tử trong mảng mà không cần đoạn code quá phức tạp thì chỉ cần chạy 1 đoạn code nhỏ này:

var list = [1, 2, 3, 4, 5]; console.log(list.sort(function() { return Math.random() - 0.5 })); // [3, 1, 2, 5, 4]
Code language:JavaScript(javascript)

7. Lấy phần tử cuối của mảng

Một hàm của JS là  slice(begin, end)  có khả năng cắt mảng khi truyền vào hai tham số  begin  và  end  . Nếu bạn không truyền vào tham số  end  thì hàm sẽ tự động lấy giá trị max của mảng. Tuy nhiên hàm này cũng có thể nhận giá trị âm, nếu truyền giá trị âm vào tham số  begin  thì hàm sẽ trả về các phần tử tính từ cuối mảng.

var array = [1, 2, 3, 4, 5, 6]; console.log(array.slice(1)); // [2,3,4,5,6] console.log(array.slice(-1)); // [6] console.log(array.slice(-2)); // [5,6] console.log(array.slice(-3)); // [4,5,6]
Code language:PHP(php)

8. Cắt mảng

Thủ thuật này có thể cắt được mảng theo số lượng phần tử bạn muốn lấy, ví dụ bạn có 1 mảng có 6 phần tử, nhưng bạn chỉ muốn lấy 3 phần tử đầu tiên. Bạn có thể cắt mảng bằng cách gán  array.length = 3

var array = [1, 2, 3, 4, 5, 6]; console.log(array.length); // 6 array.length = 3; console.log(array.length); // 3 console.log(array); // [1,2,3]
Code language:PHP(php)

9. Thay thế toàn bộ

Hàm  replace()  giúp chúng ta thay thế chuỗi bằng cách sử dụng String và Regex, về cơ bản hàm này chỉ thay thế kết quả đầu tiên. Chúng ta có thể khiến nó thay thế toàn bộ kết quả trong chuỗi bằng các dùng  /g  ở cuối đoạn REGEX:

var string = "john john"; console.log(string.replace(/hn/, "ana")); // "joana john" console.log(string.replace(/hn/g, "ana")); // "joana joana"
Code language:JavaScript(javascript)

10. Merge mảng

Nếu bạn muốn hợp 2 mảng lại với nhau có thể dùng hàm  concat()

var array1 = [1, 2, 3]; var array2 = [4, 5, 6]; console.log(array1.concat(array2)); // [1,2,3,4,5,6];
Code language:JavaScript(javascript)

Tuy nhiên cách này không phù hợp với các mảng lớn vì nó sẽ tốn khá nhiều bộ nhớ bằng cách tạo ra một mảng mới. Bạn có thể dùng hàm  push.apply(arr1, arr2)  để nối 2 mảng lại với nhau, thay vì tạo 1 mảng mới như cách đầu tiên.

var array1 = [1, 2, 3]; var array2 = [4, 5, 6]; console.log(array1.push.apply(array1, array2)); // [1,2,3,4,5,6];
Code language:JavaScript(javascript)

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

CodeGym Full-stack

Leave a Reply

Your email address will not be published. Required fields are marked *