Hướng dẫn Hợp nhất Mảng JavaScript. Ở đây chúng tôi thảo luận về ba cách khác nhau để hợp nhất các mảng và nhận mảng hợp nhất kết quả trong JavaScript.

Bạn đang xem : hợp nhất mảng trong javascript

JavaScript Hợp nhất mảng

Giới thiệu về Hợp nhất Mảng trong JavaScript

Trong chủ đề này, chúng ta sẽ tìm hiểu cách hợp nhất các mảng với nhau trong JavaScript. Ngoài ra, chúng ta sẽ tìm hiểu cách lấy các phần tử duy nhất trong mảng hợp nhất được kết quả hoặc loại bỏ các phần tử trùng lặp khỏi mảng hợp nhất được kết quả. Trong chủ đề này, chúng tôi sẽ giải thích ba cách khác nhau để hợp nhất các mảng và nhận mảng hợp nhất kết quả trong JavaScript.

Phương pháp 1 – Phương pháp kết hợp Javascript

Phương pháp này được sử dụng để hợp nhất hai hoặc nhiều mảng trong JavaScript. Phương thức này trả về một mảng mới và không thay đổi các mảng hiện có.

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

Cú pháp:

  const result_array = array1.concat ([item1 [, item2 [, ... [, itemN]]]])  

Thông số:

Mảng và / hoặc giá trị để nối hoặc hợp nhất thành một mảng mới.

Trở lại:

Một bản sao Mảng mới.

Ví dụ # 1

Trong ví dụ này, chúng tôi đã lấy hai mảng và đã hợp nhất chúng bằng phương thức JavaScript concat (). Cả hai mảng đều có các mục duy nhất.

  const arr1 = ['A', 'B', 'C', 'D'];
const arr2 = ['E', 'F', 'G'];
const result = arr1.concat (arr2);
console.log (kết quả);  

Đầu ra:

JavaScript Merge Arrays output 1

Như chúng ta đã thấy, phương thức concat () đã hợp nhất cả hai mảng và trả về một mảng mới với kết quả.

Ví dụ # 2

Trong ví dụ này, chúng tôi đã lấy ba mảng và đã hợp nhất chúng bằng phương thức JavaScript concat (). Tất cả các mảng ban đầu đều có các phần tử duy nhất.

  const arr1 = ['A', 'B', 'C', 'D'];
const arr2 = ['E', 'F', 'G'];
const arr3 = ['H', 'I'];
const result = arr1.concat (arr2, arr3);
console.log (kết quả);  

Đầu ra:

JavaScript Merge Arrays output 2

Như chúng ta đã thấy cú pháp của phương thức concat () rằng nó có thể hợp nhất một hoặc nhiều mảng với nhau. Và bây giờ chúng ta đã thấy điều này qua ví dụ trên về ba mảng.

Ví dụ # 3

Trong ví dụ này, chúng ta sẽ xem liệu phương thức concat có xóa các phần tử trùng lặp hay không.

  const arr1 = ['A', 'B', 'C', 'D'];
const arr2 = ['E', 'F', 'G', 'A'];
const result = arr1.concat (arr2);
console.log (kết quả);  

Đầu ra:

JavaScript Merge Arrays output 3

Như chúng ta đã thấy rằng phương thức concat giúp hợp nhất các mảng với nhau nhưng không thể xóa các phần tử trùng lặp khỏi chúng.

Ví dụ # 4

Trong ví dụ này, chúng tôi sẽ sử dụng phương pháp bộ lọc trên mảng đã hợp nhất kết quả để lấy các phần tử duy nhất trong kết quả hoặc xóa các phần tử trùng lặp khỏi kết quả.

  const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'A', 'F', 'C'];
const result = arr1.concat (arr2)
const d = result.filter ((item, pos) = & gt; result.indexOf (item) === pos)
console.log (d);  

Đầu ra:

Xem Thêm  Tự tham gia trong SQL là gì? Một giải thích với bảy ví dụ - tự tham gia sql là gì

JavaScript Merge Arrays output 4

Như chúng ta đã thấy trong ví dụ trên, để xóa các phần tử trùng lặp khỏi mảng hợp nhất được kết quả, chúng tôi đã sử dụng phương thức JavaScript filter ().

Ví dụ # 5

Trong ví dụ này, chúng tôi sẽ sử dụng một phương pháp khác để lấy các phần tử duy nhất trong kết quả hoặc xóa các phần tử trùng lặp khỏi kết quả.

 const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'A', 'F', 'C'];
console.log (Array.from (new Set (arr1.concat (arr2))));  

Đầu ra:

JavaScript Merge Arrays output 5

Trong ví dụ này, chúng tôi đã chuyển mảng hợp nhất kết quả của mình sang JavaScript Set vì Bộ có thuộc tính để loại bỏ các phần tử trùng lặp, nhưng chúng trả về tập hợp thay vì mảng. Vì vậy, bằng cách sử dụng Array. từ, chúng tôi đã chuyển đổi kết quả của mình từ tập hợp thành mảng.

Phương pháp 2 – Toán tử Spread Javascript

Sử dụng toán tử này, mỗi mảng được mở rộng để cho phép các giá trị của mảng được đặt trong mảng mới.

Cú pháp:

  Đối với Mảng và Chuỗi:
[... tên_mảng, '6'];  

Ví dụ # 1

Trong ví dụ này, chúng ta sẽ xem toán tử trải rộng javaScript hoạt động như thế nào trong việc hợp nhất các mảng.

  const arr1 = ['A', 'B', 'C', 'D'];
const arr2 = ['E', 'F', 'G'];
const arr3 = ['H', 'I'];
const result = [... arr1, ... arr2, ... arr3];
console.log (kết quả);  

Đầu ra:

output 6

Trong ví dụ này, chúng ta đã học cách sử dụng JavaScript để truyền bá cú pháp để hợp nhất các mảng. Nhưng đây không phải là lựa chọn thích hợp của các nhà phát triển và không được khuyến khích sử dụng vì trên các tập dữ liệu lớn, phương thức này sẽ hoạt động chậm hơn so với phương thức JavaScript concat ().

Ví dụ # 2

Trong ví dụ này, chúng ta sẽ xem liệu phương thức cú pháp spread có xóa các phần tử trùng lặp hay không.

  const arr1 = ['A', 'B', 'C', 'D'];
const arr2 = ['E', 'F', 'G', 'A'];
const result = [... arr1, ... arr2];
console.log (kết quả);  

Đầu ra:

output 7

Như chúng ta đã thấy rằng phương thức cú pháp spread giúp hợp nhất các mảng với nhau nhưng không thể xóa các phần tử trùng lặp khỏi chúng.

Ví dụ # 3

Trong ví dụ này, chúng ta sẽ xem cách lấy các phần tử duy nhất trong kết quả hoặc xóa các phần tử trùng lặp khỏi kết quả.

  const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'A', 'F', 'C'];
const arr3 = [... new Set ([... arr1, ... arr2])];
console.log (arr3);  

Đầu ra:

output 8

Trong ví dụ này, chúng tôi đã chuyển mảng hợp nhất kết quả của mình sang JavaScript Set vì Bộ có thuộc tính để loại bỏ các phần tử trùng lặp, nhưng chúng trả về tập hợp thay vì mảng. Vì vậy, bằng cách xác định Mảng, chúng tôi đã chuyển đổi kết quả của mình từ tập hợp thành mảng.

Phương pháp 3 – Phương pháp đẩy mảng Javascript

Phương thức này thêm một hoặc nhiều mục vào cuối mảng và trả về độ dài của mảng mới.

Xem Thêm  Mô hình hộp CSS - hộp viền nền css

Cú pháp:

  array_name.push (item1 [, ... [, itemN]])  

Thông số:

ItemN – Các mục cần thêm vào cuối mảng.

Trở lại:

Độ dài mới của mảng mà phương thức push này đã được gọi.

Ví dụ # 1

Trong ví dụ này, chúng ta sẽ xem phương thức đẩy Array hoạt động như thế nào trong việc hợp nhất các mảng.

  const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'A', 'F', 'C'];
const lengthofcombinedarray = arr1.push (... arr2);
console.log (arr1);
console.log (lengthofcombinedarray);  

Đầu ra:

output 9

Ví dụ # 2

Trong ví dụ này, chúng tôi sẽ hướng dẫn cách lấy các phần tử duy nhất trong kết quả hoặc xóa các phần tử trùng lặp khỏi kết quả.

  const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'A', 'F', 'C'];
arr1.push (... arr2);
const result = [... new Set (arr1)]
console.log (kết quả);  

Đầu ra:

output 10

Kết luận – Mảng hợp nhất JavaScript

Trong một số ngôn ngữ lập trình, chúng tôi sử dụng một toán tử bổ sung để hợp nhất các mảng với nhau, nhưng JavaScript cung cấp các phương thức khác nhau mà chúng tôi có thể sử dụng để hợp nhất các mảng. Vì vậy, chúng ta đã tìm hiểu ba cách khác nhau trong JavaScript để hợp nhất các mảng với nhau.

Các bài báo được đề xuất

Đây là hướng dẫn về Hợp nhất Mảng JavaScript. Ở đây chúng ta thảo luận về khái niệm cơ bản, ba cách khác nhau để hợp nhất các mảng và nhận mảng hợp nhất kết quả trong JavaScript. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề hợp nhất mảng trong javascript

Powerful JavaScript Tips And Tricks That You Should Know (Part 8) #shorts

alt

  • Tác giả: Code with Palash
  • Ngày đăng: 2021-05-07
  • Đánh giá: 4 ⭐ ( 3601 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript Tips (Part 8) | In this short video, we will see how we can merge two arrays in JavaScript. This could be very useful in various scenarios like if we are working with multiple APIs and each one is returning an array and we can merge all the results into one array using the solutions given here. Enjoy!

    🔔 Subscribe for more tips just like this: https://www.youtube.com/codewithpalash?sub_confirmation=1

    ‍💻 CodePen Demos Collection:
    + https://codepen.io/collection/yrybOY

    📝 Helpful Links:
    + Array concat() Method – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
    + Spread Syntax (…) – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

    “JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use JavaScript on the client side for web page behavior, often incorporating third-party libraries. All major web browsers have a dedicated JavaScript engine to execute the code on users’ devices. JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard. It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM).”

    Keywords:
    shorts
    javascript
    tipsandtricks
    code with palash,
    code with palash 2022,
    html for beginners,
    html tips & tricks,
    html tips and tricks,
    html tips,
    html tricks and tips,
    html tricks,
    html tutorial for beginners,
    html tutorial,
    html,
    9 extremely powerful javascript hacks,
    advanced excel tricks,
    backend web development,
    best tips & tricks,
    best video for web development,
    best visual studio code extensions,
    best vscode extensions,
    coding html,
    css extension,
    css extensions for vscode,
    css tips and tricks,
    css,
    extensions vscode css,
    extensions,
    full stack web development,
    javascript best practices,
    javascript for beginners,
    javascript tips and tricks 2020,
    javascript tips and tricks,
    javascript tips,
    javascript tricks and hacks,
    javascript tricks for website,
    javascript tricks you didn’t know,
    javascript tricks,
    code with palash,
    javascript tutorial,
    javascript tutorials,
    javascript,
    learn html,
    learn javascript tricks,
    learn javascript,
    learn web development,
    tips & tricks,
    tips and tricks,
    tips,
    top 10 extensions for vscode,
    top 10 vscode extensions,
    top tips & tricks,
    top visual studio code extensions,
    tricks in javascript,
    tricks,
    visual studio code extensions,
    vs code extension,
    vs code extensions,
    vscode css extension,
    vscode css,
    vscode extension development,
    vscode extension,
    vscode extensions for web developers,
    vscode extensions,
    vscode tutorial,
    vscode,
    web application development,
    web developer roadmap,
    web developer,
    web development (project),
    web development 2021,
    web development 2022,
    web development course,
    web development guide,
    web development roadmap 2022,
    web development roadmap,
    web development training,
    web development tutorial for beginners,
    web development tutorial,
    web development,

    Happy Coding!

Mảng array trong Javascript

  • Tác giả: kungfutech.edu.vn
  • Đánh giá: 5 ⭐ ( 9975 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Array, hay được gọi là mảng, là kiểu dữ liệu mà giá trị của nó chứa nhiều giá trị khác. Mỗi giá trị của mảng được gọi là element (phần tử)

Mảng trong javascript là gì ? Cách khai báo và truy xuất giá trị của mảng.

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 4 ⭐ ( 6436 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng trong javascript là gì ? Tại sao phải sử sụng mảng ? Và sử dụng như thế nào ? Đáp án đã có trong bài viết này  và mình là anymous-4 :v. .

Mảng trong JavaScript | JS ARRAY

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 4 ⭐ ( 8719 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học Javascript này, bạn sẽ tìm hiểu về Mảng (Hay còn gọi là Array), cách tạo và thao tác với Mảng trong JavaScript.

Cách hợp nhất hai mảng trong JavaScript và các mục không trùng lặp

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 2602 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Để chỉ hợp nhất các mảng (mà không loại bỏ trùng lặp) Sử dụng phiên bản…

Cách hợp nhất các mảng trong Vanilla JavaScript (ES5 và ES6)

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 4 ⭐ ( 9590 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tìm hiểu về mảng trong JavaScript

  • Tác giả: itzone.com.vn
  • Đánh giá: 4 ⭐ ( 8308 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The ITZone platform Vietnam is the community for anyone interested in news, training seminars, presentations etc in the IT industry

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách kết nối Cơ sở dữ liệu MySQL với Trang web PHP - php kết nối với mysql

By ads_php