Xóa các đối tượng trùng lặp khỏi mảng javascript es5

Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cách loại bỏ các đối tượng trùng lặp khỏi một mảng bằng JavaScript

Chúng tôi đang sử dụng các phương thức es6

let courseArray = [
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
  { id: 1, name: "javascript" },
];

7 và

let courseArray = [
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
  { id: 1, name: "javascript" },
];

8 để loại bỏ các đối tượng trùng lặp khỏi một mảng, trong đó việc so sánh đối tượng được thực hiện bằng cách sử dụng thuộc tính

xem xét chúng ta có một mảng các đối tượng với

let courseArray = [
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
  { id: 1, name: "javascript" },
];

9 và

let simpleArray = [1, 4, 5, 1, 1, 1];
simpleArray = simpleArray.filter[
  [element, i] => i === simpleArray.indexOf[element]
];
console.log[simpleArray]; //[ 1, 4, 5 ]

0 nhưng cùng một id đang lặp lại hai lần

const arr = [
  { id: 1, name: "king" },
  { id: 2, name: "master" },
  { id: 3, name: "lisa" },
  { id: 4, name: "ion" },
  { id: 5, name: "jim" },
  { id: 6, name: "gowtham" },
  { id: 1, name: "jam" },
  { id: 1, name: "lol" },
  { id: 2, name: "kwick" },
  { id: 3, name: "april" },
  { id: 7, name: "sss" },
  { id: 8, name: "brace" },
  { id: 8, name: "peiter" },
  { id: 5, name: "hey" },
  { id: 6, name: "mkl" },
  { id: 9, name: "melast" },
  { id: 9, name: "imlast" },
  { id: 10, name: "glow" }
];

Đây là cách triển khai của tôi để xóa các đối tượng trùng lặp khỏi một mảng

function getUnique[arr, comp] {

                    // store the comparison  values in array
   const unique =  arr.map[e => e[comp]]

                  // store the indexes of the unique objects
                  .map[[e, i, final] => final.indexOf[e] === i && i]

                  // eliminate the false indexes & return unique objects
                 .filter[[e] => arr[e]].map[e => arr[e]];

   return unique;
}

console.log[getUnique[arr,'id']];

Trong đoạn mã trên, chúng tôi đang sử dụng mẫu chuỗi trong đó đầu ra của một phương thức

let courseArray = [
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
  { id: 1, name: "javascript" },
];

7 sẽ là đầu vào của một phương thức

let courseArray = [
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
  { id: 1, name: "javascript" },
];

7 khác

Các ví dụ bên dưới lấy một mảng các đối tượng hoặc kiểu nguyên thủy làm đầu vào, xóa các mục trùng lặp khỏi mảng và trả về mảng mới không trùng lặp

Nếu một mảng chứa các kiểu nguyên thủy, thật đơn giản để lọc ra các Bản sao. Nếu một mảng chứa các đối tượng, chúng ta phải lọc các bản sao bằng cách sử dụng xác thực kiểm tra cặp khóa và giá trị

Loại bỏ trùng lặp là nhiệm vụ hàng ngày của lập trình viên trong quá trình phát triển ứng dụng

Chúng ta hãy khai báo một đối tượng mảng để loại bỏ tất cả các đối tượng trùng lặp trong một mảng

let courseArray = [
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
  { id: 1, name: "javascript" },
];

Có nhiều cách chúng ta có thể loại bỏ các bản sao khỏi một mảng

Những cách sau đây chúng ta có thể loại bỏ trùng lặp

Rất dễ dàng để loại bỏ các giá trị trùng lặp khỏi một mảng đơn giản gồm các giá trị nguyên thủy như

let simpleArray = [1, 4, 5, 1, 1, 1];
simpleArray = simpleArray.filter[
  [element, i] => i === simpleArray.indexOf[element]
];
console.log[simpleArray]; //[ 1, 4, 5 ]

3 và

let simpleArray = [1, 4, 5, 1, 1, 1];
simpleArray = simpleArray.filter[
  [element, i] => i === simpleArray.indexOf[element]
];
console.log[simpleArray]; //[ 1, 4, 5 ]

4. Ví dụ này phù hợp với các kiểu nguyên thủy -

let simpleArray = [1, 4, 5, 1, 1, 1];
simpleArray = simpleArray.filter[
  [element, i] => i === simpleArray.indexOf[element]
];
console.log[simpleArray]; //[ 1, 4, 5 ]

3,

let simpleArray = [1, 4, 5, 1, 1, 1];
simpleArray = simpleArray.filter[
  [element, i] => i === simpleArray.indexOf[element]
];
console.log[simpleArray]; //[ 1, 4, 5 ]

0 và

let simpleArray = [1, 4, 5, 1, 1, 1];
simpleArray = simpleArray.filter[
  [element, i] => i === simpleArray.indexOf[element]
];
console.log[simpleArray]; //[ 1, 4, 5 ]

1

• Đã khai báo một mảng số có giá trị trùng lặp
• Lặp lại từng phần tử trong một mảng bằng phương thức

  let simpleArray = [1, 4, 5, 1, 1, 1];
  simpleArray = simpleArray.filter[
    [element, i] => i === simpleArray.indexOf[element]
  ];
  console.log[simpleArray]; //[ 1, 4, 5 ]
  

  2

• let simpleArray = [1, 4, 5, 1, 1, 1];
  simpleArray = simpleArray.filter[
    [element, i] => i === simpleArray.indexOf[element]
  ];
  console.log[simpleArray]; //[ 1, 4, 5 ]
  

  2 có phương thức gọi lại chấp nhận các phần tử và indexOf
• Kiểm tra vị trí của từng phần tử trong mảng bằng phương thức

  let simpleArray = [1, 4, 5, 1, 1, 1];
  simpleArray = simpleArray.filter[
    [element, i] => i === simpleArray.indexOf[element]
  ];
  console.log[simpleArray]; //[ 1, 4, 5 ]
  

  4
• nếu

  let simpleArray = [1, 4, 5, 1, 1, 1];
  simpleArray = simpleArray.filter[
    [element, i] => i === simpleArray.indexOf[element]
  ];
  console.log[simpleArray]; //[ 1, 4, 5 ]
  

  4 trả về một vị trí chỉ mục hợp lệ, hãy trả về một mảng không trùng lặp

let simpleArray = [1, 4, 5, 1, 1, 1];
simpleArray = simpleArray.filter[
  [element, i] => i === simpleArray.indexOf[element]
];
console.log[simpleArray]; //[ 1, 4, 5 ]

let simpleArray = [1, 4, 5, 1, 1, 1];
simpleArray = simpleArray.filter[
  [element, i] => i === simpleArray.indexOf[element]
];
console.log[simpleArray]; //[ 1, 4, 5 ]

6 là một cấu trúc dữ liệu mới được giới thiệu trong

let simpleArray = [1, 4, 5, 1, 1, 1];
simpleArray = simpleArray.filter[
  [element, i] => i === simpleArray.indexOf[element]
];
console.log[simpleArray]; //[ 1, 4, 5 ]

7, ngôn ngữ javascript mới nhất. Nó không chấp nhận trùng lặp

Ví dụ sử dụng các tính năng bên dưới của ngôn ngữ ES6

function getUnique[arr, comp] {

                    // store the comparison  values in array
   const unique =  arr.map[e => e[comp]]

                  // store the indexes of the unique objects
                  .map[[e, i, final] => final.indexOf[e] === i && i]

                  // eliminate the false indexes & return unique objects
                 .filter[[e] => arr[e]].map[e => arr[e]];

   return unique;
}

console.log[getUnique[arr,'id']];

2

Ví dụ dưới đây giải thích về những điều sau đây

• Mảng chuỗi đã khai báo có trùng lặp cho các ví dụ này
• Đã tạo đối tượng

  let simpleArray = [1, 4, 5, 1, 1, 1];
  simpleArray = simpleArray.filter[
    [element, i] => i === simpleArray.indexOf[element]
  ];
  console.log[simpleArray]; //[ 1, 4, 5 ]
  

  8 bằng cách sử dụng toán tử và hàm tạo

  let simpleArray = [1, 4, 5, 1, 1, 1];
  simpleArray = simpleArray.filter[
    [element, i] => i === simpleArray.indexOf[element]
  ];
  console.log[simpleArray]; //[ 1, 4, 5 ]
  

  9 chấp nhận các giá trị mảng
• sử dụng các giá trị kết quả đã đặt

  
  function getUnique[arr, comp] {
  
                      // store the comparison  values in array
     const unique =  arr.map[e => e[comp]]
  
                    // store the indexes of the unique objects
                    .map[[e, i, final] => final.indexOf[e] === i && i]
  
                    // eliminate the false indexes & return unique objects
                   .filter[[e] => arr[e]].map[e => arr[e]];
  
     return unique;
  }
  
  console.log[getUnique[arr,'id']];
  

  20 trả về một mảng và được sao chép sang một mảng mới
• Cuối cùng, trả về mảng mới không trùng lặp

Phương thức lodash

function getUnique[arr, comp] {

                    // store the comparison  values in array
   const unique =  arr.map[e => e[comp]]

                  // store the indexes of the unique objects
                  .map[[e, i, final] => final.indexOf[e] === i && i]

                  // eliminate the false indexes & return unique objects
                 .filter[[e] => arr[e]].map[e => arr[e]];

   return unique;
}

console.log[getUnique[arr,'id']];

21 và

function getUnique[arr, comp] {

                    // store the comparison  values in array
   const unique =  arr.map[e => e[comp]]

                  // store the indexes of the unique objects
                  .map[[e, i, final] => final.indexOf[e] === i && i]

                  // eliminate the false indexes & return unique objects
                 .filter[[e] => arr[e]].map[e => arr[e]];

   return unique;
}

console.log[getUnique[arr,'id']];

22 trả về một mảng bằng cách loại bỏ đối tượng trùng lặp courseArray

Phương thức

function getUnique[arr, comp] {

                    // store the comparison  values in array
   const unique =  arr.map[e => e[comp]]

                  // store the indexes of the unique objects
                  .map[[e, i, final] => final.indexOf[e] === i && i]

                  // eliminate the false indexes & return unique objects
                 .filter[[e] => arr[e]].map[e => arr[e]];

   return unique;
}

console.log[getUnique[arr,'id']];

21 lặp lại từng phần tử và gọi hàm gọi lại cho từng phần tử. Cung cấp logic thuộc tính đối tượng để kiểm tra các đối tượng trùng lặp

Mảng kết quả có cùng thứ tự với khóa học đầu vàoArray

function getUnique[arr, comp] {

                    // store the comparison  values in array
   const unique =  arr.map[e => e[comp]]

                  // store the indexes of the unique objects
                  .map[[e, i, final] => final.indexOf[e] === i && i]

                  // eliminate the false indexes & return unique objects
                 .filter[[e] => arr[e]].map[e => arr[e]];

   return unique;
}

console.log[getUnique[arr,'id']];

9

Các bản sao mảng ES5 bằng cách sử dụng giảm và một số phương thức với ví dụ

Phương thức mảng

function getUnique[arr, comp] {

                    // store the comparison  values in array
   const unique =  arr.map[e => e[comp]]

                  // store the indexes of the unique objects
                  .map[[e, i, final] => final.indexOf[e] === i && i]

                  // eliminate the false indexes & return unique objects
                 .filter[[e] => arr[e]].map[e => arr[e]];

   return unique;
}

console.log[getUnique[arr,'id']];

24 là một trong những phương thức để giảm mảng phần tử Nó có một cuộc gọi lại được gọi cho từng mục trong quá trình lặp

Cuộc gọi lại chấp nhận bộ tích lũy và các giá trị hiện tại.

function getUnique[arr, comp] {

                    // store the comparison  values in array
   const unique =  arr.map[e => e[comp]]

                  // store the indexes of the unique objects
                  .map[[e, i, final] => final.indexOf[e] === i && i]

                  // eliminate the false indexes & return unique objects
                 .filter[[e] => arr[e]].map[e => arr[e]];

   return unique;
}

console.log[getUnique[arr,'id']];

25 là mảng tạm thời sẽ được cập nhật giá trị dựa trên từng phần tử. bình đẳng đối tượng được kiểm tra với giá trị thuộc tính và logic như sau

let courseArray = [
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
  { id: 1, name: "javascript" },
];

2

Và đầu ra

let courseArray = [
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
  { id: 1, name: "javascript" },
];

3

Phương thức uniq gạch dưới

Nếu ứng dụng của bạn phụ thuộc vào thư viện

function getUnique[arr, comp] {

                    // store the comparison  values in array
   const unique =  arr.map[e => e[comp]]

                  // store the indexes of the unique objects
                  .map[[e, i, final] => final.indexOf[e] === i && i]

                  // eliminate the false indexes & return unique objects
                 .filter[[e] => arr[e]].map[e => arr[e]];

   return unique;
}

console.log[getUnique[arr,'id']];

26, phương pháp này rất đơn giản để loại bỏ các phần tử trùng lặp khỏi một mảng

Phương thức

function getUnique[arr, comp] {

                    // store the comparison  values in array
   const unique =  arr.map[e => e[comp]]

                  // store the indexes of the unique objects
                  .map[[e, i, final] => final.indexOf[e] === i && i]

                  // eliminate the false indexes & return unique objects
                 .filter[[e] => arr[e]].map[e => arr[e]];

   return unique;
}

console.log[getUnique[arr,'id']];

21 chấp nhận một mảng đầu vào và gọi lại. Cuộc gọi lại chấp nhận một đối tượng kiểm tra logic duy nhất. Mã bên dưới kiểm tra xem từng phần tử và giá trị của nó có giống với đối tượng khác không

let courseArray = [
  { id: 1, name: "javascript" },
  { id: 2, name: "typescript" },
  { id: 11, name: "angular" },
  { id: 1, name: "javascript" },
];

6

Sự kết luận

Trong hướng dẫn này, Bạn đã học được nhiều cách để loại bỏ các phần tử trùng lặp khỏi một mảng trong javascript và TypeScript

Làm cách nào để xóa các mục trùng lặp trong một mảng?

JSON Stringify có xóa trùng lặp không?