Hướng dẫn insert array into array javascript - chèn mảng vào mảng javascript

Question

Có một số câu trả lời thực sự sáng tạo cho câu hỏi này ở đây. Dưới đây là một giải pháp đơn giản cho những người mới bắt đầu với các mảng. Nó có thể được thực hiện để hoạt động tất cả các trình duyệt tuân thủ ECMAScript 3, nếu muốn.

Nội dung chính Show

Phương pháp đẩy
Phương pháp không thay đổi
Phương pháp liên kết
Nhân bản với Concat

Biết điều gì đó về mối nối trước khi bắt đầu.

Mạng lưới nhà phát triển Mozilla: mảng.prototype.splice ()

Đầu tiên, hiểu hai hình thức quan trọng của

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

6.

let a1 = [1,2,3,4],
    a2 = [1,2];

Phương pháp 1) Xóa các phần tử X (Deletecount), bắt đầu từ một chỉ mục mong muốn.

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

Phương pháp 2) Xóa các phần tử sau khi chỉ số bắt đầu mong muốn đến cuối mảng.

a1.splice(2); // returns [3,4], a1 would be [1,2]

Sử dụng

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

6, mục tiêu có thể là chia

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

8 thành các mảng đầu và đuôi bằng cách sử dụng một trong hai hình thức ở trên.

Sử dụng phương pháp số 1, giá trị trả về sẽ trở thành đầu và

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

8 đuôi.

let head = a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

Bây giờ, trong một cú hích, nối đầu, cơ thể (

a1.splice(2); // returns [3,4], a1 would be [1,2]

0) và đuôi

[].concat(head, a2, a1);

Do đó, giải pháp này giống như thế giới thực hơn bất kỳ thế giới nào khác được trình bày cho đến nay. Đây không phải là những gì bạn sẽ làm với Legos? ;-) Đây là một hàm, được thực hiện bằng phương pháp #2.

/**
*@param target Array The array to be split up into a head and tail.
*@param body Array The array to be inserted between the head and tail.
*@param startIndex Integer Where to split the target array.
*/
function insertArray(target, body, startIndex)
{
    let tail = target.splice(startIndex); // target is now [1,2] and the head
    return [].concat(target, body, tail);
}

let newArray = insertArray([1, 2, 3, 4], ["a", "b"], 2); // [1, 2, "a", "b", 3, 4]

Shorter:

/**
*@param target Array The array to be split up into a head and tail.
*@param body Array The array to be inserted between the head and tail.
*@param startIndex Integer Where to split the target array.
*/
function insertArray(target, body, startIndex)
{
    return [].concat(target, body, target.splice(startIndex));
}

Safer:

/**
*@param target Array The array to be split up into a head and tail.
*@param body Array The array to be inserted between the head and tail.
*@param startIndex Integer Where to split the target array.
*@throws Error The value for startIndex must fall between the first and last index, exclusive.
*/
function insertArray(target, body, startIndex)
{
    const ARRAY_START = 0,
          ARRAY_END = target.length - 1,
          ARRAY_NEG_END = -1,
          START_INDEX_MAGNITUDE = Math.abs(startIndex);

    if (startIndex === ARRAY_START) {
        throw new Error("The value for startIndex cannot be zero (0).");
    }

    if (startIndex === ARRAY_END || startIndex === ARRAY_NEG_END) {
        throw new Error("The startIndex cannot be equal to the last index in target, or -1.");
    }

    if (START_INDEX_MAGNITUDE >= ARRAY_END) {
        throw new Error("The absolute value of startIndex must be less than the last index.");
    }

    return [].concat(target, body, target.splice(startIndex));
}

Những lợi thế của giải pháp này bao gồm:

1) Một tiền đề đơn giản chi phối giải pháp-đổ đầy một mảng trống.

2) Danh pháp đầu, cơ thể và đuôi cảm thấy tự nhiên.

3) Không có cuộc gọi kép đến

a1.splice(2); // returns [3,4], a1 would be [1,2]

1. Không cắt lát ở tất cả.

4) Không

a1.splice(2); // returns [3,4], a1 would be [1,2]

2. Rất không cần thiết.

5) Trình chuỗi phương pháp được tránh.

6) Hoạt động trong Ecmascript 3 và 5 chỉ bằng cách sử dụng

a1.splice(2); // returns [3,4], a1 would be [1,2]

3 thay vì

a1.splice(2); // returns [3,4], a1 would be [1,2]

4 hoặc

a1.splice(2); // returns [3,4], a1 would be [1,2]

5.

** 7) Đảm bảo rằng sẽ có một cái đầu và đuôi để tát vào cơ thể, không giống như nhiều giải pháp khác được trình bày. Nếu bạn đang thêm một mảng trước, hoặc sau, giới hạn, ít nhất bạn nên sử dụng ________ 26 !!!!

Lưu ý: Sử dụng Opearator lây lan

a1.splice(2); // returns [3,4], a1 would be [1,2]

7 giúp tất cả những điều này dễ thực hiện hơn nhiều.

Mảng JavaScript dễ dàng là một trong những loại dữ liệu yêu thích của tôi. Chúng năng động, dễ sử dụng và cung cấp một loạt các phương pháp tích hợp mà chúng ta có thể tận dụng.

Tuy nhiên, bạn càng có nhiều tùy chọn thì càng khó hiểu để quyết định xem bạn nên sử dụng cái nào.

Trong bài viết này, tôi muốn thảo luận về một số cách phổ biến để thêm một yếu tố vào một mảng JavaScript.

Phương pháp đẩy

Phương thức đầu tiên và có lẽ là phương thức mảng JavaScript phổ biến nhất mà bạn sẽ gặp là PUST (). Phương thức Push () được sử dụng để thêm một phần tử vào cuối một mảng.

Giả sử bạn có một loạt các phần tử, mỗi phần tử là một chuỗi đại diện cho một nhiệm vụ bạn cần phải hoàn thành. Sẽ có ý nghĩa khi thêm các mục mới hơn vào cuối mảng để chúng tôi có thể hoàn thành các nhiệm vụ trước đó trước.

Hãy xem ví dụ ở dạng mã:

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

Được rồi, vì vậy Push đã cho chúng tôi một cú pháp đơn giản và đẹp mắt để thêm một mục vào cuối mảng của chúng tôi.

Giả sử chúng tôi muốn thêm hai hoặc ba mục tại một thời điểm vào danh sách của chúng tôi, chúng tôi sẽ làm gì sau đó? Hóa ra, Push () có thể chấp nhận nhiều yếu tố được thêm vào cùng một lúc.

const arr = ['First item', 'Second item', 'Third item'];

arr.push('Fourth item', 'Fifth item');

console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Bây giờ chúng tôi đã thêm một số nhiệm vụ vào mảng của chúng tôi, chúng tôi có thể muốn biết có bao nhiêu mục hiện đang có trong mảng của chúng tôi để xác định xem chúng tôi có quá nhiều trên đĩa của chúng tôi không.

May mắn thay, push () có giá trị trả về với độ dài của mảng sau khi (các) phần tử của chúng tôi đã được thêm vào.

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

0

Phương pháp không thay đổi

Không phải tất cả các nhiệm vụ được tạo ra bằng nhau. Bạn có thể gặp phải một kịch bản trong đó bạn đang thêm các nhiệm vụ vào mảng của mình và đột nhiên bạn gặp phải một kịch bản khẩn cấp hơn các nhiệm vụ khác.

Đã đến lúc giới thiệu người bạn của chúng tôi Unshift () cho phép chúng tôi thêm các mục vào đầu mảng của chúng tôi.

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

1

Bạn có thể nhận thấy trong ví dụ ở trên rằng, giống như phương thức push (), unSHift () trả về độ dài mảng mới để chúng tôi sử dụng. Nó cũng cho chúng ta khả năng thêm nhiều yếu tố cùng một lúc.

Phương pháp liên kết

Viết tắt cho Concatenate (để liên kết với nhau), phương thức Concat () được sử dụng để kết hợp hai mảng hai (hoặc nhiều hơn).

Nếu bạn nhớ từ phía trên, các phương thức unShift () và push () trả về chiều dài của mảng mới. Concat (), mặt khác, sẽ trả lại một mảng hoàn toàn mới.

Đây là một sự khác biệt rất quan trọng và làm cho Concat () cực kỳ hữu ích khi bạn xử lý các mảng mà bạn không muốn đột biến (như các mảng được lưu trữ ở trạng thái phản ứng).

Đây là những gì một trường hợp khá cơ bản và đơn giản có thể trông như thế nào:

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

2

Giả sử bạn có nhiều mảng bạn muốn tham gia cùng nhau. Không phải lo lắng, concat () là có để cứu ngày!

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

3

Nhân bản với Concat

Hãy nhớ làm thế nào tôi đã nói rằng Concat () có thể hữu ích khi bạn không muốn biến đổi mảng hiện tại của mình? Chúng ta hãy xem làm thế nào chúng ta có thể tận dụng khái niệm này để sao chép nội dung của một mảng thành một mảng mới.

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

4

Đáng kinh ngạc! Về cơ bản, chúng ta có thể "nhân bản" một mảng sử dụng Concat ().

Nhưng có một 'gotcha' nhỏ trong quá trình nhân bản này. Mảng mới là "bản sao nông" của mảng được sao chép. Điều này có nghĩa là bất kỳ đối tượng nào được sao chép bằng tham chiếu chứ không phải đối tượng thực tế.copied by reference and not the actual object.

Chúng ta hãy xem một ví dụ để giải thích ý tưởng này rõ ràng hơn.

let startIndex = 0, 
    deleteCount = 2;

a1.splice(startIndex, deleteCount); // returns [1,2], a1 would be [3,4]

5

Mặc dù chúng tôi không trực tiếp thực hiện bất kỳ thay đổi nào đối với mảng ban đầu của chúng tôi, nhưng mảng cuối cùng đã bị ảnh hưởng bởi những thay đổi chúng tôi đã thực hiện trên mảng nhân bản của chúng tôi!directly make any changes to our original array, the array was ultimately affected by the changes we made on our cloned array!

Có nhiều cách khác nhau để thực hiện một "bản sao sâu" của một mảng, nhưng tôi sẽ để nó cho bạn làm bài tập về nhà.

TL;DR

Khi bạn muốn thêm một phần tử vào cuối mảng của bạn, hãy sử dụng Push (). Nếu bạn cần thêm một phần tử vào phần đầu của mảng của bạn, hãy thử unShift (). Và bạn có thể sử dụng các mảng bằng cách sử dụng Concat ().

Chắc chắn có nhiều tùy chọn khác để thêm các yếu tố vào một mảng, và tôi mời bạn đi ra ngoài và tìm một số phương pháp mảng tuyệt vời hơn!

Vui lòng liên hệ với tôi trên Twitter và cho tôi biết phương thức mảng yêu thích của bạn để thêm các phần tử vào một mảng.

Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

programming javascript Array splice Splice() trong Javascript Push js