• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Foxvietnam.com
  • AloViP.Com

Ngoc.info - Chia sẻ kiến thức tin học

  • Home
  • Hệ điều hành
    • Windows
  • Domain/Host/Server
  • Internet
  • Thủ Thuật
    • Phần mềm
Home › Thủ Thuật › Thủ Thuật Website › 12 thủ thuật hữu ích khi sử dụng JavaScript

12 thủ thuật hữu ích khi sử dụng JavaScript

28/11/2017 Ngọc Hồ

12 thủ thuật hữu ích khi sử dụng JavaScript

 

Dưới đây 12 thủ thuật hữu ích khi sử dụng JavaScript mà blog jscrambler.com đã đăng tải mà mình nghĩ khá là hữu ích cho những ai đang tìm hiểu về JavaScript.  Những thủ thuật JavaScript này sẽ giúp bạn giảm lượng code cũng như làm code chạy tối ưu hơn rất nhiều.

 

1. Chuyển đổi kiểu dữ liệu sang boolean sử dụng toán tử !!

Đôi khi chúng ta cần phải kiểm tra một số biến tồn tại hoặc một giá trị hợp lệ hay không. Để xác nhận như vậy, bạn có thể sử dụng !! (toán tử phủ định đôi). Nó sẽ tự động chuyển đổi mọi kiểu dữ liệu về boolean và biến này sẽ trả về false chỉ khi nó có những giá trị như: , null, “”, undefined hoặc NaN, ngược lại nó sẽ trả về true. Để hiểu hơn về cách nó hoạt động, hãy xem ví dụ đơn giản sau:

function Account(cash) {  
    this.cash = cash;
    this.hasMoney = !!cash;
}
var account = new Account(100.50);  
console.log(account.cash); // 100.50  
console.log(account.hasMoney); // true
var emptyAccount = new Account(0);  
console.log(emptyAccount.cash); // 0  
console.log(emptyAccount.hasMoney); // false

Lưu ý rằng nếu account.cash có giá trị lớn hơn 0 thì account.hasMoney sẽ có giá trị là true.

 

2. Chuyển đổi kiểu dữ liệu sang number sử dụng toán tử +

Phương pháp  này chỉ hoạt động với chuỗi những con số, nếu không phải nó sẽ trả về NaN (Not a Number). Xem ví dụ sau:

function toNumber(strNumber) {  
    return +strNumber;
}
console.log(toNumber("1234")); // 1234  
console.log(toNumber("ACB")); // NaN

Đối với Date nó sẽ trả về timestamp:

console.log(+new Date()) // 1461288164385

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

Đối với đoạn code ví dụ sau có thể được rút gọn nó bằng cách kết hợp một biến (sẽ được xác nhận) và một hàm sử dụng && (toán tử AND) ở giữa.

if (connected) {  
    login();
}

Sau khi áp dụng rút gọn

connected && login();

Bạn có thể làm tương tự để kiểm tra nếu một vài thuộc tính hay hàm tồn tại trong object. Ví dụ đoạn code dưới đây:

user && user.login();

4. Đặt giá trị mặc định sử dụng toán tử ||

Ngày nay trong ES6 đã hỗ trợ tham số mặc định. Trong trường hợp bạn muốn giả lập tính năng này trong các trình duyệt cũ thì bạn có thể sử dụng || (toán tự OR) bằng cách chèn giá trị mặc định như là tham số thứ hai để sử dụng. Nếu tham số đầu tiên trả về false thì tham số thứ hai sẽ được sử dụng như là một giá trị mặc định. Xem ví dụ sau:

function User(name, age) {  
    this.name = name || "Oliver Queen";
    this.age = age || 27;
}
var user1 = new User();  
console.log(user1.name); // Oliver Queen  
console.log(user1.age); // 27
var user2 = new User("Barry Allen", 25);  
console.log(user2.name); // Barry Allen  
console.log(user2.age); // 25

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

Sử dụng vòng lặp for như sau để duyệt qua mảng:

for (var i = 0; i < array.length; i++) {  
    console.log(array[i]);
}

Nếu bạn làm việc với các mảng lớn thì đoạn code này sẽ tính toán lại kích cỡ của mảng sau mỗi lần lặp và sẽ gây ra tình trạng delay. Bạn có thể cache array.length trong một biến để dùng nó thay vì gọi array.length trong mỗi lần lặp:

var length = array.length;  
for (var i = 0; i < length; i++) {  
    console.log(array[i]);
}

Đoạn code trên sau khi được làm gọn

for (var i = 0, length = array.length; i < length; i++) {  
    console.log(array[i]);
}

 

Tham khảo thêm  Hướng dẫn sử dụng PuTTY để kết nối SSH vào server Linux

6. Nhận diện các thuộc tính trong một object

Thủ thuật này vô cùng hữu ích khi bạn cần kiểm tra nếu một vài thuộc tính tồn tại hay không và nó giúp tránh chạy các hàm hay thuộc tính chưa định nghĩa (undefined). Nếu bạn định viết code chạy trên đa trình duyệt thì bạn cũng có thể sử dụng kỹ thuật này. Ví dụ, hãy tưởng tượng rằng bạn cần viết code mà tương thích với IE6 và bạn muốn sử dụng document.querySelector() để lấy một vài phần tử bằng ID của chúng. Tuy nhiên, trong trình duyệt này thì hàm đó không tồn tại, vậy nên để kiểm tra xem hàm này có tồn tại không bạn có thể sử dụng toán tử in, xem ví dụ:

if ('querySelector' in document) {  
    document.querySelector("#id");
} else {
    document.getElementById("id");
}

 

Trong trường hợp này, nếu không có hàm querySelector trong document, chúng ta có thể sử dụng document.getElementById() thay thế.

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

Array.prototype.slice(begin, end) có thể cắt mảng khi bạn đặt tham số begin và end. Nhưng nếu bạn không nhập tham số end, hàm này sẽ tự động đặt giá trị lớn nhất cho mảng. Tôi nghĩ rằng ít người biết được hàm này có thể chấp nhận giá trị âm, và nếu bạn đặt tham số begin là một số âm thì bạn sẽ lấy ra các phần tử cuối cùng từ mảng:

var array = [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]

 

Tham khảo thêm  Khắc phục lỗi "/cgi-sys/defaultwebpage.cgi" khi chuyển hosting

8. Cắt ngắn mảng

Kỹ thuật này có thể khóa kích cỡ mảng, điều này rất hữu ích để xóa một vài phần tử của mảng dựa trên số phần tử mà bạn muốn. Ví dụ, nếu bạn có một mảng với 10 phần tử nhưng bạn chỉ muốn lấy 5 phần tử đầu tiên thì bạn có thể cắt ngắn mảng, làm nó nhỏ hơn bằng cách đặt array.length = 5. Xem ví dụ sau:

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]

 

9. Thay thế toàn bộ

Hàm String.replace() cho phép sử dụng String và Regex để thay thế chuỗi, nhưng hàm này chỉ thay thế các chuỗi con xuất hiện đầu tiên. Nhưng bạn có thể giả lập một hàm replaceAll() bằng cách sử dụng /g ở cuối Regex:

var string = "john john";  
console.log(string.replace(/hn/, "ana")); // "joana john"  
console.log(string.replace(/hn/g, "ana")); // "joana joana"

 

10. Gộp các mảng

Nếu bạn cần gộp hai mảng thì có thể sử dụng hàm Array.concat():

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


Tuy nhiên, hàm này không phải là cách thích hợp nhất để gộp các mảng lớn vì nó sẽ tốn rất nhiều bộ nhớ do tạo ra một mảng mới. Trong trường hợp này, bạn có thể sử dụng Array.push.apply(arr1, arr2). Thay vì tạo ra một mảng mới thì nó sẽ gộp mảng thứ hai vào mảng thứ nhất từ đó giảm việc sử dụng bộ nhớ:

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

 

Tham khảo thêm  Hướng dẫn sử dụng PuTTY để kết nối SSH vào server Linux

11. Chuyển NodeList thành mảng

Nếu bạn chạy hàm document.querySelectorAll(“p”), nó sẽ trả về một mảng chứa các phần tử DOM – NodeList object. Nhưng object này không có toàn bộ các hàm của mảng như: sort(), reduce(), map(), filter(). Trong trường hợp bạn muốn sử dụng các hàm này và nhiều hàm sẵn có khác của mảng, bạn cần chuyển NodeList thành mảng. Để thực hiện kĩ thuật này bạn chỉ cần dùng hàm: [].slice.call(elements)

var elements = document.querySelectorAll("p"); // NodeList  
var arrayElements = [].slice.call(elements); // Now the NodeList is an array  
var arrayElements = Array.from(elements); // This is another way of converting NodeList to Array

 

12. Xáo trộn các phần tử trong mảng

Để xáo trộn các phần tử của mảng mà không cần sử dụng các thư viện riêng như Lodash, bạn chỉ cần sử dụng thủ thuật:

var list = [1, 2, 3];  
console.log(list.sort(function() {  
    return Math.random() - 0.5
})); // [2,1,3]

 

5/5 - (1 vote)
Chia sẻ bài viết nếu bạn thấy hay và có ích

Bạn thích bài viết này?

Đăng ký ngay với Ngoc.info để nhận email thông báo bài viết mới hàng tuần nhé!

Bạn đã đăng ký thành công! Vui lòng check email để xác nhận!

About the Author: Ngọc Hồ

Yêu thích kỹ thuật công nghệ, máy tính, thích chia sẻ và những bản nhạc hòa tấu.
Tôi trên: Facebook / Twitter / Google+ / My Blog

Bài viết bạn nên xem

  • file-htaccessThay đổi thông số trong PHP bằng file .htaccess
  • puttyHướng dẫn sử dụng PuTTY để kết nối SSH vào server Linux
  • Khắc phục lỗi “/cgi-sys/defaultwebpage.cgi” khi chuyển hosting

  • Chuyên mục Thủ Thuật Website
  •  
  • Tag thủ thuật sử dụng JavaScript
  • Bình luận Cancel reply

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

    ĐĂNG KÝ BẢN TIN

    Đăng ký để nhận thông báo bài viết mới nhất qua email

    Đăng ký thành công. Vui lòng check email để xác nhận!

    Bài mới

    AtlasVPN – Dịch vụ truy cập web bị chặn dành cho máy tính và smartphone

    file-htaccess

    Thay đổi thông số trong PHP bằng file .htaccess

    Gmail-unsubscriber-2

    Hủy đăng ký theo dõi để tránh nhận email quảng cáo

    Linode

    Linode tự động trừ tiền trong thẻ Credit Card

    putty

    Hướng dẫn sử dụng PuTTY để kết nối SSH vào server Linux

    Zoc-Termina-ket-noi-VPS

    Hướng dẫn kết nối SSH bằng công cụ ZOC Terminal

    Được xem nhiều

    • web-hosting-cpanel-linux Quản trị cPanel trên CentOS và cách cài đặt
    • install-sentora Sentora – Control Panel miễn phí tốt nhất
    • hosting miễn phí Những hosting miễn phí tốt nhất đáng để thử
    • Centos Web Panel Centos Web Panel (CWP) và hướng dẫn cài đặt
    • Đăng ký ProtonMail, dịch vụ Email bảo mật nhất thế giới hiện nay

    Bình luận của độc giả

    • Lanhhh on Sentora – Control Panel miễn phí tốt nhất
    • filaa on Hủy đăng ký theo dõi để tránh nhận email quảng cáo
    • Tien Dung Dao on Cài đặt Vesta Control Panel trên Centos 6
    • Phần mềm quản lý bán hàng on Sentora – Control Panel miễn phí tốt nhất

    • Facebook
    • Google+
    • Instagram
    • Twitter

    Chia sẻ & Học hỏi
    Contact: beethv@ngoc.info

    Giới thiệu
    Liên hệ
    Bản quyền
    Quyền riêng tư
    Điều khoản sử dụng

    Made with in Vietnam Copyright © 2023 · Ngọc Hồ · All Right Reserved DMCA.com Protection Status