Hợp nhất các mảng javascript độc đáo

Vài ngày trước, tôi đã viết một mã liên quan đến việc hợp nhất hai mảng lớn mà không trùng lặp. Phản ứng đầu tiên của tôi là viết một hàm rút gọn khởi tạo bộ tích lũy, lặp lại mọi phần tử và kiểm tra xem nó đã có trong mảng chưa

tốc độ hiệu suất. 0. 2749999985098839 mili giây

Giải pháp này hoạt động tốt với tôi, nhưng tôi tự hỏi liệu tôi có thể cải thiện hiệu suất thêm một chút hay không và kết quả là tôi có một vài giải pháp

Đối với mục đích thử nghiệm, mỗi phương pháp được mô tả sử dụng cùng một mảng

Ngoài ra, tôi sẽ kiểm tra tốc độ thực thi ở cuối mỗi chức năng với hiệu suất. Hiện nay()

Cách truyền thống để hoàn thành tác vụ là khởi tạo một mảng kết quả trống có chứa các mục kết quả, tạo một vòng lặp cho mỗi mảng phải được hợp nhất và lưu trữ phần tử hiện tại trong mảng kết quả nếu nó không có mặt. Sự hiện diện được kiểm tra bằng indexOf sẽ trả về -1 nếu không

tốc độ hiệu suất. 0. 41500001680105925 mili giây

Sử dụng ES5, chúng ta có thể hợp nhất hai mảng đầu vào mà không loại bỏ các bản sao với. concat() và sau đó lặp lại qua mảng kết quả và loại bỏ các bản sao bằng cách sử dụng indexOf

tốc độ hiệu suất. 0. 5300000193528831 mili giây

Nhìn chung, phương pháp rút gọn lúc đầu vẫn có hiệu suất tốt hơn. Giữa hai giải pháp cuối cùng không có sự khác biệt đáng kể về độ phức tạp và tốc độ thực thi, nhưng giải pháp thứ hai rõ ràng hơn và dễ đọc hơn. Chúng ta có thể tiến thêm một bước và tính đến tính năng Bộ ES6, tính năng này lấy tất cả các giá trị từ một đối tượng có thể lặp lại, trong trường hợp của chúng ta là một mảng, nhưng vì mọi phần tử trong một bộ phải là duy nhất trong bộ sưu tập, nên nó sẽ bỏ qua các bản sao mà không có bất kỳ

Khi tạo Tập hợp, hãy nhớ rằng null được coi là không xác định và đó là một khái niệm khác với mảng. một Tập hợp là một "bộ sưu tập có khóa" trong khi bộ thứ hai là một "bộ sưu tập được lập chỉ mục"

Đây là mã

tốc độ hiệu suất. 0. 13499998021870852 mili giây

Vì chúng tôi không muốn kết quả là một Tập hợp mới, chúng tôi sẽ chỉ hủy cấu trúc nó thành một mảng

Giải pháp cuối cùng là những gì tôi đang tìm kiếm, nó dễ đọc nhất và có độ phức tạp thấp nhất, mang lại hiệu suất tuyệt vời so với hai giải pháp kia. Cuối cùng tôi đã đưa đoạn mã đó vào ứng dụng của mình để trừu tượng hóa nó thành một chức năng mới. Cảm ơn, tôi hy vọng điều này đủ hữu ích;)

Trong bài viết này, mình sẽ giới thiệu 3 cách để lọc phần tử

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

// Step 1
const uniqueSet = new Set(array);
// Set { '🐣', 1, 2, 3 }

// Step 2
const backToArray = [...uniqueSet];
// ['🐣', 1, 2, 3]

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

// Step 1
const uniqueSet = new Set(array);
// Set { '🐣', 1, 2, 3 }

// Step 2
const backToArray = [...uniqueSet];
// ['🐣', 1, 2, 3]

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

// 1: "Set"
[...new Set(array)];

// 2: "Filter"
array.filter(item, index) => array.indexOf(item) === index);

// 3: "Reduce"
array.reduce(unique, item) =>
    unique.includes(item) ? unique : [...unique, item], []);
    
// RESULT: 
// ['🐣', 1, 2, 3];

1. Use Set

Hãy để mình bắt đầu trước bằng cách giải thích

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

// Step 1
const uniqueSet = new Set(array);
// Set { '🐣', 1, 2, 3 }

// Step 2
const backToArray = [...uniqueSet];
// ['🐣', 1, 2, 3]

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

// Step 1
const uniqueSet = new Set(array);
// Set { '🐣', 1, 2, 3 }

// Step 2
const backToArray = [...uniqueSet];
// ['🐣', 1, 2, 3]

5 là một đối tượng dữ liệu mới được giới thiệu trong ES6. Because

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

// Step 1
const uniqueSet = new Set(array);
// Set { '🐣', 1, 2, 3 }

// Step 2
const backToArray = [...uniqueSet];
// ['🐣', 1, 2, 3]

5 only for you save the value duy nhất. Khi bạn đưa nó vào trong một mảng, nó sẽ xóa tất cả các giá trị trùng lặp

Được rồi, quay lại đoạn mã ở trên và kiểm tra xem có chuyện gì xảy ra. Có 2 điều sẽ xảy ra ở đây

1. Đầu tiên, chúng ta tạo mới một phần tử

   const array = ['🐣', 1, 2, '🐣', '🐣', 3];
   
   // Step 1
   const uniqueSet = new Set(array);
   // Set { '🐣', 1, 2, 3 }
   
   // Step 2
   const backToArray = [...uniqueSet];
   // ['🐣', 1, 2, 3]
   

   5 và đưa nó vào một mảng. Vì

   const array = ['🐣', 1, 2, '🐣', '🐣', 3];
   
   // Step 1
   const uniqueSet = new Set(array);
   // Set { '🐣', 1, 2, 3 }
   
   // Step 2
   const backToArray = [...uniqueSet];
   // ['🐣', 1, 2, 3]
   

   5 chỉ cho phép giá trị duy nhất, tất cả trùng lặp sẽ bị xóa

2. Bây giờ các giá trị trùng lặp đã bị mất, chúng tôi sẽ chuyển đổi lại sang một mảng bằng cách sử dụng phép toán

   const array = ['🐣', 1, 2, '🐣', '🐣', 3];
   
   Array.from(new Set(array));
   
   // ['🐣', 1, 2, 3]
   

   1

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

// Step 1
const uniqueSet = new Set(array);
// Set { '🐣', 1, 2, 3 }

// Step 2
const backToArray = [...uniqueSet];
// ['🐣', 1, 2, 3]

Change Set to a array using Array. từ

Hoặc bạn có thể sử dụng Array. from to change a

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

// Step 1
const uniqueSet = new Set(array);
// Set { '🐣', 1, 2, 3 }

// Step 2
const backToArray = [...uniqueSet];
// ['🐣', 1, 2, 3]

2. Use filter

Để hiểu được tùy chọn này, chúng ta sẽ đi qua 2 phương thức đang làm.

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

Array.from(new Set(array));

// ['🐣', 1, 2, 3]

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

Array.from(new Set(array));

// ['🐣', 1, 2, 3]

Chỉ số

Phương thức

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

Array.from(new Set(array));

// ['🐣', 1, 2, 3]

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

array.indexOf('🐣'); // 0
array.indexOf('1'); // 1
array.indexOf('2'); // 2
array.indexOf('3'); // 5

lọc

Phương thức

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

Array.from(new Set(array));

// ['🐣', 1, 2, 3]

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

Array.from(new Set(array));

// ['🐣', 1, 2, 3]

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

Array.from(new Set(array));

// ['🐣', 1, 2, 3]

Hãy đi từng bước và xem chuyện gì xảy ra

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

array.filter((item, index) => {

    console.log(
        // a. Item
        item,
        // b. Index
        index, 
        // c. indexOf
        array.indexOf(item),
        // d. Condition
        array.indexOf(item) === index,
   );
   
   return array.indexOf(item) === index
});

Bên dưới là đầu ra từ bảng điều khiển. log only on on. Repeat value is place index notmatch with

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

Array.from(new Set(array));

// ['🐣', 1, 2, 3]

Replicate value

Chúng ta cũng có thể sử dụng bộ lọc phương thức để lấy ra các giá trị trùng lặp từ mảng. Chúng ta cũng có thể làm điều này bằng cách đơn giản điều chỉnh điều kiện của chúng ta như sau

const array = ['🐣', 1, 2, '🐣', '🐣', 3];

array.filter((item, index) => array.indexOf(item) !== index);

// ['🐣', '🐣'];

lặp lại, nếu chúng ta lặp lại các bước bên trên và nhìn ra đầu

3. Sử dụng Giảm

Sử dụng phương thức reduce là để giảm số phần tử của mảng và tổ hợp (kết hợp) chúng vào mảng cuối cùng dựa trên một hàm giảm hàm số mà bạn đã đưa vào

Trong trường hợp này, hàm reduce của chúng ta sẽ kiểm tra xem cuối cùng của mảng có chứa mục hay không. If it not, write item that into the last array. Mặt khác, bỏ qua phần tử đó và chỉ trả lại một mảng cuối cùng của chúng ta (về cơ bản bỏ qua phần tử đó)