Hướng dẫn create new array from existing array javascript - tạo mảng mới từ javascript mảng hiện có

Question

Trong JavaScript, một mảng hai chiều chỉ là một mảng mảng. Do đó, nhân bản một chiều là không đủ. Chúng ta cũng cần sao chép tất cả các mảng phụ. Ở đây, cách chúng tôi làm điều đó:

Nội dung chính Show

Thông số
Giá trị trả về
Sự mô tả
Mảng từ một chuỗi
Mảng từ một bộ
Mảng từ bản đồ
Mảng từ một cái gật đầu
Mảng từ một đối tượng giống như mảng (đối số)
Sử dụng các hàm mũi tên và mảng.from ()
Trình tạo trình tự (phạm vi)
Gọi từ () trên các trình xây dựng không phải là
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Làm thế nào để bạn tạo một mảng từ một mảng cũ?
Làm cách nào để sao chép một mảng sang một mảng khác trong JavaScript?
Bạn có thể gán một mảng cho một mảng khác trong JavaScript không?
Làm thế nào để bạn sao chép một mảng?

function cloneGrid(grid) {
  // Clone the 1st dimension (column)
  const newGrid = [...grid]
  // Clone each row
  newGrid.forEach((row, rowIndex) => newGrid[rowIndex] = [...row])
  return newGrid
}

// grid is a two-dimensional array
const grid = [[0,1],[1,2]]
newGrid = cloneGrid(grid)

console.log('The original grid', grid)
console.log('Clone of the grid', newGrid)
console.log('They refer to the same object?', grid === newGrid)
---
The original grid [ [ 0, 1 ], [ 1, 2 ] ]
Clone of the grid [ [ 0, 1 ], [ 1, 2 ] ]
They refer to the same object? false

Hoặc nếu chúng ta thực hiện Avantage của Es6 Array.Map Hoạt động, chúng ta có thể làm cho chức năng

const cloneGrid = (grid) => [...grid].map(row => [...row])

2 thậm chí đơn giản hơn:

const cloneGrid = (grid) => [...grid].map(row => [...row])

Để biết thêm câu trả lời mở rộng, hãy đọc Cách tạo bản sao của một mảng trong JavaScript

Phương pháp tĩnh

const cloneGrid = (grid) => [...grid].map(row => [...row])

3 tạo ra một thể hiện

const cloneGrid = (grid) => [...grid].map(row => [...row])

4 mới, được sao chép nông từ một đối tượng có thể lặp lại hoặc giống như mảng.
const cloneGrid = (grid) => [...grid].map(row => [...row])
3 static method creates a new, shallow-copied

const cloneGrid = (grid) => [...grid].map(row => [...row])

4 instance from an iterable or array-like object.

Thử nó

Cú pháp

// Arrow function
Array.from(arrayLike, (element) => { /* … */ } )
Array.from(arrayLike, (element, index) => { /* … */ } )

// Mapping function
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

// Inline mapping function
Array.from(arrayLike, function mapFn(element) { /* … */ })
Array.from(arrayLike, function mapFn(element, index) { /* … */ })
Array.from(arrayLike, function mapFn(element) { /* … */ }, thisArg)
Array.from(arrayLike, function mapFn(element, index) { /* … */ }, thisArg)

Thông số

const cloneGrid = (grid) => [...grid].map(row => [...row])

5

Một đối tượng có thể lặp lại hoặc giống như mảng để chuyển đổi thành một mảng.

const cloneGrid = (grid) => [...grid].map(row => [...row])

6 Tùy chọnOptional

Hàm bản đồ để gọi vào mọi yếu tố của mảng.

const cloneGrid = (grid) => [...grid].map(row => [...row])

7 Tùy chọnOptional

Giá trị để sử dụng là

const cloneGrid = (grid) => [...grid].map(row => [...row])

8 khi thực hiện

const cloneGrid = (grid) => [...grid].map(row => [...row])

6.

Giá trị trả về

Một ví dụ

const cloneGrid = (grid) => [...grid].map(row => [...row])

4 mới.

Sự mô tả

const cloneGrid = (grid) => [...grid].map(row => [...row])

3 cho phép bạn tạo

const cloneGrid = (grid) => [...grid].map(row => [...row])

4S từ:

các đối tượng có thể lặp lại (các đối tượng như

// Arrow function
Array.from(arrayLike, (element) => { /* … */ } )
Array.from(arrayLike, (element, index) => { /* … */ } )

// Mapping function
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

// Inline mapping function
Array.from(arrayLike, function mapFn(element) { /* … */ })
Array.from(arrayLike, function mapFn(element, index) { /* … */ })
Array.from(arrayLike, function mapFn(element) { /* … */ }, thisArg)
Array.from(arrayLike, function mapFn(element, index) { /* … */ }, thisArg)

3 và

// Arrow function
Array.from(arrayLike, (element) => { /* … */ } )
Array.from(arrayLike, (element, index) => { /* … */ } )

// Mapping function
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

// Inline mapping function
Array.from(arrayLike, function mapFn(element) { /* … */ })
Array.from(arrayLike, function mapFn(element, index) { /* … */ })
Array.from(arrayLike, function mapFn(element) { /* … */ }, thisArg)
Array.from(arrayLike, function mapFn(element, index) { /* … */ }, thisArg)

4); Hoặc, nếu đối tượng không được xác định,

Các đối tượng giống như mảng (các đối tượng có thuộc tính

// Arrow function
Array.from(arrayLike, (element) => { /* … */ } )
Array.from(arrayLike, (element, index) => { /* … */ } )

// Mapping function
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

// Inline mapping function
Array.from(arrayLike, function mapFn(element) { /* … */ })
Array.from(arrayLike, function mapFn(element, index) { /* … */ })
Array.from(arrayLike, function mapFn(element) { /* … */ }, thisArg)
Array.from(arrayLike, function mapFn(element, index) { /* … */ }, thisArg)

5 và các phần tử được lập chỉ mục).

const cloneGrid = (grid) => [...grid].map(row => [...row])

3 Không bao giờ tạo ra một mảng thưa thớt. Nếu đối tượng

const cloneGrid = (grid) => [...grid].map(row => [...row])

5 bị thiếu một số thuộc tính chỉ mục, chúng sẽ trở thành

// Arrow function
Array.from(arrayLike, (element) => { /* … */ } )
Array.from(arrayLike, (element, index) => { /* … */ } )

// Mapping function
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

// Inline mapping function
Array.from(arrayLike, function mapFn(element) { /* … */ })
Array.from(arrayLike, function mapFn(element, index) { /* … */ })
Array.from(arrayLike, function mapFn(element) { /* … */ }, thisArg)
Array.from(arrayLike, function mapFn(element, index) { /* … */ }, thisArg)

8 trong mảng mới.

const cloneGrid = (grid) => [...grid].map(row => [...row])

3 có tham số tùy chọn

const cloneGrid = (grid) => [...grid].map(row => [...row])

6, cho phép bạn thực thi hàm

Array.from('foo');
// [ "f", "o", "o" ]

1 trên mỗi phần tử của mảng được tạo.

Rõ ràng hơn,

Array.from('foo');
// [ "f", "o", "o" ]

2 có kết quả tương tự như

Array.from('foo');
// [ "f", "o", "o" ]

3, ngoại trừ việc nó không tạo ra một mảng trung gian và MAPFN chỉ nhận được hai đối số (phần tử, chỉ mục) mà không có toàn bộ mảng, vì mảng vẫn đang được xây dựng.

Lưu ý: Điều này đặc biệt quan trọng đối với các lớp con mảng nhất định, như các mảng được đánh máy, vì mảng trung gian nhất thiết sẽ có các giá trị bị cắt ngắn để phù hợp với loại thích hợp. This is especially important for certain array subclasses, like typed arrays, since the intermediate array would necessarily have values truncated to fit into the appropriate type.

Thuộc tính

// Arrow function
Array.from(arrayLike, (element) => { /* … */ } )
Array.from(arrayLike, (element, index) => { /* … */ } )

// Mapping function
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

// Inline mapping function
Array.from(arrayLike, function mapFn(element) { /* … */ })
Array.from(arrayLike, function mapFn(element, index) { /* … */ })
Array.from(arrayLike, function mapFn(element) { /* … */ }, thisArg)
Array.from(arrayLike, function mapFn(element, index) { /* … */ }, thisArg)

5 của phương pháp

Array.from('foo');
// [ "f", "o", "o" ]

5 là

Array.from('foo');
// [ "f", "o", "o" ]

6.

Phương pháp

const cloneGrid = (grid) => [...grid].map(row => [...row])

3 là một phương pháp nhà máy chung. Ví dụ: nếu một lớp con của

const cloneGrid = (grid) => [...grid].map(row => [...row])

4 kế thừa phương thức

Array.from('foo');
// [ "f", "o", "o" ]

5, phương thức

Array.from('foo');
// [ "f", "o", "o" ]

5 được kế thừa sẽ trả về các trường hợp mới của lớp con thay vì các trường hợp

const cloneGrid = (grid) => [...grid].map(row => [...row])

4. Trên thực tế, giá trị

const cloneGrid = (grid) => [...grid].map(row => [...row])

8 có thể là bất kỳ hàm tạo hàm nào chấp nhận một đối số duy nhất đại diện cho độ dài của mảng mới. Khi một điều có thể được thông qua là

const cloneGrid = (grid) => [...grid].map(row => [...row])

5, hàm tạo được gọi không có đối số; Khi một đối tượng giống như mảng được truyền, hàm tạo được gọi với độ dài chuẩn hóa của đối tượng giống mảng.

// Arrow function
Array.from(arrayLike, (element) => { /* … */ } )
Array.from(arrayLike, (element, index) => { /* … */ } )

// Mapping function
Array.from(arrayLike, mapFn)
Array.from(arrayLike, mapFn, thisArg)

// Inline mapping function
Array.from(arrayLike, function mapFn(element) { /* … */ })
Array.from(arrayLike, function mapFn(element, index) { /* … */ })
Array.from(arrayLike, function mapFn(element) { /* … */ }, thisArg)
Array.from(arrayLike, function mapFn(element, index) { /* … */ }, thisArg)

5 cuối cùng sẽ được đặt lại khi lặp lại kết thúc. Nếu giá trị

const cloneGrid = (grid) => [...grid].map(row => [...row])

8 không phải là hàm tạo hàm, thì hàm tạo

const cloneGrid = (grid) => [...grid].map(row => [...row])

4 được sử dụng thay thế.

Ví dụ

Mảng từ một chuỗi

Array.from('foo');
// [ "f", "o", "o" ]

Mảng từ một bộ

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

Mảng từ bản đồ

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

Mảng từ một cái gật đầu

// Create an array based on a property of DOM Elements
const images = document.querySelectorAll('img');
const sources = Array.from(images, (image) => image.src);
const insecureSources = sources.filter((link) => link.startsWith('http://'));

Mảng từ một đối tượng giống như mảng (đối số)

function f() {
  return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

Sử dụng các hàm mũi tên và mảng.from ()

// Using an arrow function as the map function to
// manipulate the elements
Array.from([1, 2, 3], (x) => x + x);
// [2, 4, 6]

// Generate a sequence of numbers
// Since the array is initialized with `undefined` on each position,
// the value of `v` below will be `undefined`
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

Trình tạo trình tự (phạm vi)

// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP, etc.)
const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step));

// Generate numbers range 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

// Generate numbers range 1..10 with step of 2
range(1, 10, 2);
// [1, 3, 5, 7, 9]

// Generate the alphabet using Array.from making use of it being ordered as a sequence
range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map((x) => String.fromCharCode(x));
// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

Gọi từ () trên các trình xây dựng không phải là

Phương thức

Array.from('foo');
// [ "f", "o", "o" ]

5 có thể được gọi trên bất kỳ hàm xây dựng nào chấp nhận một đối số duy nhất đại diện cho độ dài của mảng mới.

const cloneGrid = (grid) => [...grid].map(row => [...row])

0

Khi giá trị

const cloneGrid = (grid) => [...grid].map(row => [...row])

8 không phải là một hàm tạo, một đối tượng

const cloneGrid = (grid) => [...grid].map(row => [...row])

4 đơn giản được trả về.

const cloneGrid = (grid) => [...grid].map(row => [...row])

1

Thông số kỹ thuật

Sự chỉ rõ
Thông số kỹ thuật ngôn ngữ Ecmascript # sec-array.from # sec-array.from

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Xem thêm

Làm thế nào để bạn tạo một mảng từ một mảng cũ?

Có nhiều cách để tạo ra một mảng mới thực sự từ một mảng cũ trong JavaScript hiện đại (ES6 hoặc xa hơn) ...

Sử dụng cú pháp lan truyền (bản sao nông).

Sử dụng JSON: Phương pháp hoàn hảo cho bất kỳ kịch bản nào (bản sao sâu).

Sử dụng lát () (bản sao nông).

Sử dụng từ () (bản sao nông).

Sử dụng Concat () (bản sao nông).

Làm cách nào để sao chép một mảng sang một mảng khác trong JavaScript?

Nếu các mảng của bạn không lớn, bạn có thể sử dụng phương thức Push () của mảng mà bạn muốn thêm giá trị. Phương thức Push () có thể lấy nhiều tham số để bạn có thể sử dụng phương thức application () để truyền mảng để được đẩy dưới dạng một tập hợp các tham số chức năng. Đặt newArray = []; NewArray. đẩy.use the push() method of the array to which you want to add values. The push() method can take multiple parameters so you can use the apply() method to pass the array to be pushed as a collection of function parameters. let newArray = []; newArray. push.

Bạn có thể gán một mảng cho một mảng khác trong JavaScript không?

Để nối một mảng này vào một mảng khác, hãy gọi phương thức Concat () trên mảng thứ nhất, chuyển nó là mảng thứ hai dưới dạng tham số, ví dụ:const Arr3 = ARR1.Concat (ARR2).Phương thức Concat sẽ hợp nhất hai mảng và sẽ trả về một mảng mới.

Làm thế nào để bạn sao chép một mảng?

Bạn có thể sử dụng một vòng lặp và sao chép các thành phần của một đến một.Sử dụng phương pháp nhân bản để nhân bản một mảng.Sử dụng phương thức ArrayCopy () của lớp hệ thống.Sử dụng các phương thức Copyof () hoặc CopyOfRange () của lớp mảng.Use the clone method to clone an array. Use arraycopy() method of System class. Use copyOf() or copyOfRange() methods of Arrays class.

programming javascript Array from js Copy array JavaScript array.from object For array JS

Hướng dẫn create new array from existing array javascript - tạo mảng mới từ javascript mảng hiện có

Thử nó

Cú pháp

Thông số

Giá trị trả về

Sự mô tả

Ví dụ

Mảng từ một chuỗi

Mảng từ một bộ

Mảng từ bản đồ

Mảng từ một cái gật đầu

Mảng từ một đối tượng giống như mảng (đối số)

Sử dụng các hàm mũi tên và mảng.from ()

Trình tạo trình tự (phạm vi)

Gọi từ () trên các trình xây dựng không phải là

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Xem thêm

Làm thế nào để bạn tạo một mảng từ một mảng cũ?

Làm cách nào để sao chép một mảng sang một mảng khác trong JavaScript?

Bạn có thể gán một mảng cho một mảng khác trong JavaScript không?

Làm thế nào để bạn sao chép một mảng?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội