11 Javascript Tricks bạn sẽ khó tìm được ở các Tutorials

Cập nhật: Lượt xem: 1353 [ Javascript ]

11 Javascript Tricks bạn sẽ khó tìm được ở các Tutorials

11 Javascript Tricks bạn sẽ khó tìm được ở các Tutorials

1. Unique các giá trị trong một mảng

Set object type đã xuất hiện ở phiên bản ES6, cùng với toán tử 'spread' (...), chúng ta có thể tạo nên một array với các giá trị là unique.

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

Việc này sẽ phức tạp hơn với các phiên bản trước ES6, chắc chắn chúng ta sẽ phải dùng đến vòng lặp cùng với các logic phúc tạp hơn Thủ thuật này hoạt động đối với các mảng có chứa các kiểu nguyên thủy: undefined, null, boolean, string và number. (Nếu bạn có một mảng chứa các object, function hoặc additional array, bạn cần một cách tiếp cận khác!)

2. Short-Circuit Evaluation

Toán tử ba ngôi là một cách nhanh chóng để viết các câu lệnh đ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';

Đôi khi bạn code với cả toán tử ba ngôi cũng phức tạp hơn mức cần thiết thì thay vào đó, nên sử dụng ‘và’ && và ‘hoặc’ || toán tử logic để đánh giá các biểu thức nhất định theo cách ngắn gọn, mạch lạc hơn. Đây thường được gọi là ‘short-circuiting’ hoặc ‘short-circuit evaluation’.

Nó hoạt động như thế nào Giả sử tôi muốn return một trong hai hoặc nhiều option

Sử dụng '&&' sẽ trả về giá trị đầu tiên false hoặc 'falsy' value. Nếu mọi toán hạng evaluate là true, biểu thức evaluated cuối cùng sẽ được trả về.

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ị true hoặc ‘truthy’ đầu tiên. Nếu mọi toán hạng đánh giá là false, biểu thức evaluated 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

Ví dụ 1: Giả sử tôi muốn trả về độ dài của một biến, nhưng chúng tôi không loại biến. Chúng ta có thể sử dụng câu lệnh if / else để kiểm tra xem foo có phải là kiểu được chấp nhận hay không, nhưng điều này có thể làm code khá dài. Đánh giá ngắn mạch cho phép chúng tôi thực hiện việc này thay thế:

return (foo || []).length;

Nếu biến foo là truthy, nó sẽ được trả về. Nếu không, độ dài của mảng trống sẽ được trả về: 0.

Ví dụ 2: Bạn đã bao giờ gặp sự cố khi truy cập thuộc tính đối tượng lồng nhau chưa? Bạn có thể không biết liệu đối tượng hoặc một trong các thuộc tính phụ có tồn tại hay không và điều này có thể gây ra lỗi.

Giả sử chúng tôi muốn truy cập thuộc tính có tên là data trong this.state, nhưng dữ liệu là undefined cho đến khi đoạn code này của chúng ta có dữ liệu được truyền vào.

Tùy thuộc vào nơi chúng ta sử dụng nó, việc gọi this.state.data có thể gây lỗi. Để giải quyết vấn đề này, chúng ta có thể đặt nó trong một điều kiện:

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

Vậy có cách này để viết ngắn gọn đỡ dài dòng hơn không. Câu trả lời là có và rất đơn giản nhé

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

Chúng tôi refactor code ở trên để sử dụng &&. Câu lệnh 'Fetching Data' && this.state.data sẽ trả về this.state.data cho dù nó undefined hay không. Điều này là do 'Fetching Data' là 'truethy' và vì vậy && sẽ luôn vượt qua nó khi nó đặt ở đầu.

3. Convert to Boolean

Bên cạnh các giá trị boolean thông thường true và false, JavaScript cũng coi tất cả các giá trị khác là 'truthy' hoặc 'falsy'. Trong Javascript các giá trị sau sẽ được tính là 'falsy' : 0""null',NaN, undefined. Và còn lại sẽ được tính là truethy. 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 !, cũng sẽ chuyển đổi kiểu thành "boolean".

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

4. Convert to String

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

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

5. Convert to Number

Điều ngược lại có thể đạt được nhanh chóng 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 boolean thành số, như sau:

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

Có thể có những ngữ cảnh nào đó + sẽ được hiểu là toán tử nối hơn là toán tử cộng. Khi điều đó xảy ra (và bạn muốn trả về một số nguyên, không phải một số thực), thì bạn có thể sử dụng hai dấu ngã: ~~. Dấu ngã, được gọi là 'toán tử NOT bitwise', là một toán tử tương đương vớ i -n - 1. Vì vậy, ví dụ, ~ 15 bằng -16. Sử dụng hai dấu ngã liên tiếp sẽ phủ nhận thao tác một cách hiệu quả, bởi vì — ( — n — 1) — 1 = n + 1 — 1 = n . Nói cách khác, ~ — 16 = 15.

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

Mặc dù tôi không thể nghĩ ra nhiều trường hợp sử dụng, nhưng toán tử NOT bitwise cũng có thể được sử dụng trên boolean: ~true = -2 and ~false = -1.

6. Quick Powers

Kể từ ES7, có thể sử dụng toán tử 'mũ' ** như một cách viết tắt cho 'mũ', nhanh hơn so với viết Math.pow (2, 3). Đây là công cụ đơn giản, nhưng nó nằm trong danh sách vì không có nhiều hướng dẫn được cập nhật để bao gồm toán tử này!

console.log(2 ** 3); // Result: 8

Không nên nhầm lẫn ký hiệu này với ký hiệu ^, thường được sử dụng để biểu thị số mũ, nhưng trong JavaScript là toán tử XOR bitwise. Ở các bản trước ES7, việc sử dụng shorthand cho tính số mũ chỉ có thể sử dụng cho 2 mũ. Vì nó có thể sử dụng toán tử dịch bit trái <<.

// The following expressions are equivalent:
Math.pow(2, n);
2 << (n - 1);
2**n;

7. Quick Float to Integer

Nếu bạn muốn chuyển đổi một 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 để cắt ngắn một số thực thành một số nguyên bằng cách sử dụng |, toán tử OR bitwise.

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 đang xử lý số dương hay số âm, vì vậy tốt nhất chỉ nên sử dụng shortcut này nếu bạn chắc chắn. Nói một cách chính xác, thao tác này loại bỏ bất cứ thứ gì đứng sau dấu thập phân, cắt bớt một số thực thành một số nguyên.

Xóa các chữ số cuối cùng Toán tử OR bitwise cũng có thể được sử dụng để loại bỏ bất kỳ số lượng chữ số nào ở cuối một số nguyên. Điều này có nghĩa là chúng tôi không phải sử dụng mã như thế này để chuyển đổi giữa các loại:

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

Thay vào đó, toán tử OR bitwise 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

8. Automatic Binding in Classes

Chúng ta có thể sử dụng arrow notation ES6 trong các class methods và bằng cách làm như vậy, binding được ngụ ý. Điều này thường sẽ lưu một số code trong class constructor của tôi và tôi có thể bỏ qua các biểu thức lặp đi lặp lại như: this.myMethod = this.myMethod.bind(this)

import React, { Component } from React;
export default class App extends Compononent {
  constructor(props) {
  super(props);
  this.state = {};
  }
myMethod = () => {
    // This method is bound implicitly!
  }
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

9. Truncate an Array

Nếu bạn muốn xóa các giá trị khỏi phần cuối của một mảng một cách triệt để, có nhiều lựa chọn thay thế nhanh hơn là sử dụng splice(). Ví dụ: nếu bạn biết kích thước của mảng ban đầu của mình, bạn có thể xác định lại thuộc tính độ dài của nó, như sau:

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

Đây là một giải pháp đặc biệt ngắn gọn. Tuy nhiên, tôi thấy thời gian chạy của phương thức slice() thậm chí còn nhanh hơn. Nếu tốc độ là mục tiêu chính của bạn, hãy xem xét sử dụng một cái gì đó như sau:

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

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

Phương thức mảng slice() có thể nhận các số nguyên âm và nếu được cung cấp, nó sẽ nhận các giá trị từ cuối mảng chứ không phải 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]

11. Format JSON Code

Cuối cùng, 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 thụt lề JSON cho bạn không?

Phương thức stringify() nhận hai tham số tùy chọn: một hàm thay thế, bạn có thể sử dụng để lọc JSON được hiển thị và một giá trị space.
Giá trị khoảng trắng nhận một số nguyên cho số khoảng cách bạn muốn hoặc một chuỗi (chẳng hạn như '\ t' để chèn tab) và nó có thể giúp đọc dữ liệu JSON dễ dàng hơn rất nhiều.

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

Kết

Bài viết trên trình bài một số trick giúp bạn làm việc với javascript dễ dàng hơn, hi vọng bạn sẽ áp dụng tốt với các dự án của mình nhé.

Bài viết tham khảo : 11 JavaScript Tricks You Won’t Find in Most Tutorials