Chào Codementor!
Tôi đang bắt đầu loạt bài này, trong đó trong mỗi bài viết, tôi sẽ chia sẻ những mẩu tin nhỏ về khả năng tuyệt vời của mã hóa Javascript để làm cho kho lưu trữ của bạn sạch hơn và đẹp hơn. Vui thích!

Nó đơn giản như thế này:

const array = [1, 2, null, '', 4, 6, 22];
const fullArray = array.filter((a) => a);

Điều này sẽ loại bỏ null và '' yếu tố.
Tuy nhiên, (a) => a có mùi một chút. Tuy nhiên, bạn chỉ có thể làm điều này:

const fullArray = array.filter(Boolean);

Và nó cũng làm điều tương tự!
Coi chừng 0 là một giá trị sai và cũng sẽ bị xóa, thật đáng buồn. Chỉ sử dụng điều này nếu bạn biết nguồn dữ liệu của mình sẽ không cung cấp cho bạn những vấn đề này.

Nếu bạn không biết Array Dest Structure là gì, bạn thực sự làm, đặc biệt nếu bạn sử dụng React Hooks, vì nó được tích hợp sẵn:

const [state, setState] = useState();

Điều này đang hủy cấu trúc giá trị trả về của useState, là một mảng với phần tử đầu tiên là một biến và phần tử thứ hai là một hàm. Đây là phiên bản viết tắt của câu nói:

const stateArray = useState();
const state = stateArray[0];
const setState = stateArray[1];

Và bạn có thể thấy mã dễ dàng hơn bao nhiêu. Theo tôi, nó cũng hấp dẫn hơn về mặt thẩm mỹ.
Nhưng hãy đưa sức mạnh này lên cấp độ tiếp theo. Giả sử bạn cần đặt một loạt các biến ở đầu phạm vi của mình, chẳng hạn như:

let principalValue = 0;
let term = 20;
let interestRate = 12.5;
let monthlyPayment = 5000;

Và như thế. Có, bạn có thể viết tắt nó như thế này:

let principalValue = 0,
  term = 20,
  interestRate = 12.5,
  monthlyPayment = 5000;

Nhưng bạn CŨNG có thể làm điều này:

let [principalValue, term, interestRate, monthlyPayment] = [0, 20, 12.5, 5000];

Cái mà tôi thấy là ngắn gọn hơn rất nhiều và nó đi kèm với một số tính năng tiện lợi, chẳng hạn như nếu bạn cần chuyển đổi từng giá trị theo một cách nào đó, bạn sẽ không phải làm điều này:

let principalValue = transform(0),
  term = transform(20),
  interestRate = transform(12.5),
  monthlyPayment = transform(5000);

Bạn chỉ có thể làm điều này:

let [principalValue, term, interestRate, monthlyPayment] = [
  0, 20, 12.5, 5000,
].map(transform);

và việc thêm nhiều biến không làm tăng mã của bạn! Điều gì sẽ xảy ra nếu bạn muốn một hàm biến đổi khác nhau cho mỗi giá trị? giản dị:

const transformMap = {
  0: transform,
  1: transform1,
  2: transform2,
  3: transform3,
};

let [principalValue, term, interestRate, monthlyPayment] = [
  0, 20, 12.5, 5000,
].map((value, index) => transformMap[index](value));

Ở đây chúng tôi tận dụng index đối số của phương thức bản đồ để móc giá trị vào đúng hàm biến đổi của nó.

Cấu trúc đối tượng cũng mạnh mẽ như vậy, đặc biệt nếu bạn đang tìm kiếm các giá trị lồng nhau:

const {
  user: {
    firstName,
    lastName,
    mainInterest: {
      type,
      description,
      category: { name },
    },
  },
} = data;

Bây giờ mỗi biến name, type, description, firstName, lastName có thể truy cập được. Nhịp đập chắc chắn:

const name = user.mainInterest.category.name;
const description = user.mainInterest.description;

Tóm lại, tôi cực kỳ yêu thích sức mạnh của hàm hủy và muốn chia sẻ nó với bạn!

Vì vậy, tôi sử dụng cái này mọi lúc. Giả sử tôi muốn định hình một mảng nhưng tôi cũng muốn lấy siêu dữ liệu từ mảng đó. Một cách để làm như vậy là:

const shapedUsers = users.map((user) => shape(user));
const activeUserCount = shapedUsers.filter((user) => user.isActive).length;
const underageUserCount = shapedUsers.filter((user) => user.age < 18).length;
const userDetails = shapedUsers.reduce(
  (details, user) => [...details, user.details],
  [],
);

Điều này thật tuyệt, nhưng nếu tôi có 100 người dùng, tôi đang ánh xạ qua mảng 000 lần và điều này có thể diễn ra rất chậm. Một cách tốt hơn để làm điều đó (sử dụng cấu trúc mảng như chúng ta đã thấy ở trên!) Là:

let [activeUserCount, underageUserCount, userDetails] = [0, 0, []];

const shapedUsers = users.map((user) => {
  activeUserCount += user.isActive ? 1 : 0;
  underageUserCount += user.age < 18 ? 1 : 0;
  userDetails.push(user.details);

  return shape(user);
});

Tôi xem qua mảng một lần và xây dựng mọi biến tôi cần. Sau đó, tôi có thể dễ dàng thêm vào mảng giá trị ban đầu của mình và tùy chỉnh theo nhu cầu của mình.

Chúng tôi đã học được một số điều thú vị khi làm việc với mảng. Tôi hy vọng bạn có thể triển khai những điều này trong mã của riêng bạn và thực sự gây ấn tượng với những người bạn cần!

Cho đến lần sau, chúc bạn mã hóa vui vẻ!

~ Sean