Hướng dẫn what is map () in javascript? - bản đồ () trong javascript là gì?

Question

Phương thức

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

2 tạo ra một mảng mới được tạo ra với kết quả gọi hàm được cung cấp trên mọi phần tử trong mảng gọi.
const numbers = [1, 4, 9]; const roots = numbers.map((num) => Math.sqrt(num)); // roots is now [1, 2, 3] // numbers is still [1, 4, 9]
2 method creates a new array populated with the results of calling a provided function on every element in the calling array.

Nội dung chính Show

Thông số
Giá trị trả về
Sự mô tả
Ánh xạ một mảng các số vào một mảng của rễ vuông
Sử dụng bản đồ để định dạng lại các đối tượng trong một mảng
Ánh xạ một mảng số bằng cách sử dụng hàm chứa đối số
Gọi bản đồ () trên các đối tượng không phải là
Sử dụng bản đồ () một cách chung chung trên một cái gật đầu
Sử dụng map () trên các mảng thưa thớt
Sử dụng parseInt () với map ()
Mảng ánh xạ chứa không xác định
Thông số kỹ thuật
Tính tương thích của trình duyệt web
Tại sao bản đồ () quan trọng trong javascript?
Bản đồ () trả về trong javascript là gì?
Sự khác biệt giữa bản đồ () và?
Hàm MAP và SET trong JavaScript là gì?

Thử nó

Cú pháp

// Arrow function
map((element) => { /* … */ })
map((element, index) => { /* … */ })
map((element, index, array) => { /* … */ })

// Callback function
map(callbackFn)
map(callbackFn, thisArg)

// Inline callback function
map(function (element) { /* … */ })
map(function (element, index) { /* … */ })
map(function (element, index, array) { /* … */ })
map(function (element, index, array) { /* … */ }, thisArg)

Thông số

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3

Một hàm để thực thi cho mỗi phần tử trong mảng. Giá trị trả về của nó được thêm vào dưới dạng một phần tử duy nhất trong mảng mới.

Hàm được gọi với các đối số sau:

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

4

Phần tử hiện tại được xử lý trong mảng.

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

5

Chỉ số của phần tử hiện tại được xử lý trong mảng.

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

6

Mảng

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

2 đã được kêu gọi.

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

8 Tùy chọnOptional

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

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

9 khi thực hiện

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3. Xem phương pháp lặp.

Giá trị trả về

Một mảng mới với mỗi phần tử là kết quả của chức năng gọi lại.

Sự mô tả

Phương pháp

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

2 là một phương pháp lặp. Nó gọi hàm

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3 được cung cấp một lần cho mỗi phần tử trong một mảng và xây dựng một mảng mới từ kết quả.

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3 chỉ được gọi cho các chỉ mục mảng đã gán các giá trị. Nó không được gọi cho các khe trống trong các mảng thưa thớt.

Phương pháp

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

2 là một phương thức sao chép. Nó không thay đổi

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

9. Tuy nhiên, chức năng được cung cấp là

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3 có thể làm biến đổi mảng. Tuy nhiên, lưu ý rằng độ dài của mảng được lưu trước khi gọi đầu tiên của

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3. Vì vậy:

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3 sẽ không truy cập bất kỳ yếu tố nào được thêm vào ngoài độ dài ban đầu của mảng khi cuộc gọi đến

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

2 bắt đầu.

Các thay đổi đối với các chỉ mục đã được truy cập không khiến

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3 được gọi lại trên chúng.

Nếu một phần tử hiện có, chưa được liên kết của mảng được thay đổi bởi

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3, giá trị của nó được chuyển cho

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

3 sẽ là giá trị tại thời điểm phần tử đó được truy cập. Các yếu tố bị xóa không được truy cập.

CẢNH BÁO: Sửa đổi đồng thời của loại được mô tả ở trên thường xuyên dẫn đến mã khó hiểu và thường được tránh (ngoại trừ trong các trường hợp đặc biệt). Concurrent modifications of the kind described above frequently lead to hard-to-understand code and are generally to be avoided (except in special cases).

Phương pháp

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

2 là chung chung. Nó chỉ mong đợi giá trị

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

9 có thuộc tính

const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);

console.log(doubles); // [2, 8, 18]
console.log(numbers); // [1, 4, 9]

5 và các thuộc tính được khóa.

Vì

const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);

console.log(doubles); // [2, 8, 18]
console.log(numbers); // [1, 4, 9]

6 xây dựng một mảng mới, gọi nó mà không sử dụng mảng trả về là một mẫu chống lại; sử dụng

const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);

console.log(doubles); // [2, 8, 18]
console.log(numbers); // [1, 4, 9]

7 hoặc

const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);

console.log(doubles); // [2, 8, 18]
console.log(numbers); // [1, 4, 9]

8 thay thế.

Ví dụ

Ánh xạ một mảng các số vào một mảng của rễ vuông

Mã sau đây lấy một mảng các số và tạo một mảng mới chứa rễ vuông của các số trong mảng đầu tiên.

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

Sử dụng bản đồ để định dạng lại các đối tượng trong một mảng

Mã sau đây lấy một mảng các đối tượng và tạo ra một mảng mới chứa các đối tượng mới được định dạng lại.

const kvArray = [
  { key: 1, value: 10 },
  { key: 2, value: 20 },
  { key: 3, value: 30 },
];

const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value }));

console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]
console.log(kvArray);
// [
//   { key: 1, value: 10 },
//   { key: 2, value: 20 },
//   { key: 3, value: 30 }
// ]

Ánh xạ một mảng số bằng cách sử dụng hàm chứa đối số

Mã sau đây cho thấy cách

const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);

console.log(doubles); // [2, 8, 18]
console.log(numbers); // [1, 4, 9]

6 hoạt động khi một hàm yêu cầu một đối số được sử dụng với nó. Đối số sẽ tự động được gán từ mỗi phần tử của mảng dưới dạng các vòng

const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);

console.log(doubles); // [2, 8, 18]
console.log(numbers); // [1, 4, 9]

6 thông qua mảng gốc.

const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);

console.log(doubles); // [2, 8, 18]
console.log(numbers); // [1, 4, 9]

Gọi bản đồ () trên các đối tượng không phải là

Phương thức

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

2 đọc thuộc tính

const numbers = [1, 4, 9];
const doubles = numbers.map((num) => num * 2);

console.log(doubles); // [2, 8, 18]
console.log(numbers); // [1, 4, 9]

5 của

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

9 và sau đó truy cập vào từng chỉ mục số nguyên.

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
// [ 4, 9, 16 ]

Sử dụng bản đồ () một cách chung chung trên một cái gật đầu

Ví dụ này cho thấy cách lặp lại thông qua một tập hợp các đối tượng được thu thập bởi

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
// [ 4, 9, 16 ]

4. Điều này là do

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
// [ 4, 9, 16 ]

4 trả về

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
// [ 4, 9, 16 ]

6 (là một tập hợp các đối tượng).

Trong trường hợp này, chúng tôi trả về tất cả các giá trị của

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
// [ 4, 9, 16 ]

7 đã chọn trên màn hình:

const elems = document.querySelectorAll("select option:checked");
const values = Array.prototype.map.call(elems, ({ value }) => value);

Một cách dễ dàng hơn sẽ là phương pháp

const arrayLike = {
  length: 3,
  0: 2,
  1: 3,
  2: 4,
};
console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));
// [ 4, 9, 16 ]

8.

Sử dụng map () trên các mảng thưa thớt

Một mảng thưa thớt vẫn còn thưa thớt sau

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

2. Các chỉ số của các khe trống vẫn còn trống trong mảng được trả về và chức năng gọi lại sẽ không được gọi trên chúng.

console.log(
  [1, , 3].map((x, index) => {
    console.log(`Visit ${index}`);
    return x * 2;
  })
);
// Visit 0
// Visit 2
// [2, empty, 6]

Sử dụng parseInt () với map ()

(Lấy cảm hứng từ bài đăng trên blog này)

Người ta thường sử dụng cuộc gọi lại với một đối số (phần tử đang đi qua). Một số chức năng nhất định cũng thường được sử dụng với một đối số, mặc dù chúng có các đối số tùy chọn bổ sung. Những thói quen này có thể dẫn đến những hành vi khó hiểu.

Consider:

["1", "2", "3"].map(parseInt);

Trong khi người ta có thể mong đợi

const elems = document.querySelectorAll("select option:checked");
const values = Array.prototype.map.call(elems, ({ value }) => value);

0, kết quả thực tế là

const elems = document.querySelectorAll("select option:checked");
const values = Array.prototype.map.call(elems, ({ value }) => value);

1.

const elems = document.querySelectorAll("select option:checked");
const values = Array.prototype.map.call(elems, ({ value }) => value);

2 thường được sử dụng với một đối số, nhưng mất hai. Thứ nhất là biểu thức và thứ hai là radix cho chức năng gọi lại,

const elems = document.querySelectorAll("select option:checked");
const values = Array.prototype.map.call(elems, ({ value }) => value);

3 chuyển 3 đối số:

phần tử
Chỉ số
Mảng

Đối số thứ ba bị bỏ qua bởi ____ 52, nhưng không phải là câu nói thứ hai! Đây là nguồn gốc của sự nhầm lẫn có thể.

Dưới đây là một ví dụ ngắn gọn về các bước lặp:

// parseInt(string, radix) -> map(parseInt(value, index))
/* first iteration  (index is 0): */ parseInt("1", 0); // 1
/* second iteration (index is 1): */ parseInt("2", 1); // NaN
/* third iteration  (index is 2): */ parseInt("3", 2); // NaN

Sau đó, hãy nói về các giải pháp.

const returnInt = (element) => parseInt(element, 10);

["1", "2", "3"].map(returnInt); // [1, 2, 3]
// Actual result is an array of numbers (as expected)

// Same as above, but using the concise arrow function syntax
["1", "2", "3"].map((str) => parseInt(str)); // [1, 2, 3]

// A simpler way to achieve the above, while avoiding the "gotcha":
["1", "2", "3"].map(Number); // [1, 2, 3]

// But unlike parseInt(), Number() will also return a float or (resolved) exponential notation:
["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300]

// For comparison, if we use parseInt() on the array above:
["1.1", "2.2e2", "3e300"].map((str) => parseInt(str)); // [1, 2, 3]

Một đầu ra thay thế của phương thức bản đồ được gọi bằng

const elems = document.querySelectorAll("select option:checked");
const values = Array.prototype.map.call(elems, ({ value }) => value);

2 dưới dạng tham số chạy như sau:

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

0

Mảng ánh xạ chứa không xác định

Khi

const elems = document.querySelectorAll("select option:checked");
const values = Array.prototype.map.call(elems, ({ value }) => value);

6 hoặc không có gì được trả lại:

const numbers = [1, 4, 9];
const roots = numbers.map((num) => Math.sqrt(num));

// roots is now     [1, 2, 3]
// numbers is still [1, 4, 9]

1

Thông số kỹ thuật

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

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

Tại sao bản đồ () quan trọng trong javascript?

Bản đồ JavaScript tạo ra một mảng mới, chứa các kết quả từ lần lặp qua các phần tử của mảng và gọi hàm được cung cấp một lần cho mỗi phần tử theo thứ tự. Đó là một cấu trúc dữ liệu quan trọng có nhiều cách sử dụng thiết yếu. Lưu ý: yếu như bản đồ, nhưng tất cả các khóa trong yếu là đối tượng.creates a new array, which contains the results from the iteration over the elements of the array and calls the provided function once for each element in order. It's an important data structure that has many essential uses. Note: WeakMap is similar to Map , but all keys in a WeakMap are objects.

Bản đồ () trả về trong javascript là gì?

Giá trị trả về: Nó trả về một mảng mới và các phần tử của mảng là kết quả của hàm gọi lại.a new array and elements of arrays are result of callback function.

Sự khác biệt giữa bản đồ () và?

Phương thức Bản đồ () trả về một mảng mới, trong khi phương thức foreach () không trả về một mảng mới.Phương thức bản đồ () được sử dụng để biến đổi các phần tử của một mảng, trong khi phương thức foreach () được sử dụng để lặp qua các phần tử của một mảng.. The map() method is used to transform the elements of an array, whereas the forEach() method is used to loop through the elements of an array.

Hàm MAP và SET trong JavaScript là gì?

Bản đô.Phương thức SET () được sử dụng để thêm các cặp giá trị khóa vào đối tượng MAP.Nó cũng có thể được sử dụng để cập nhật giá trị của một khóa hiện có.Mỗi giá trị phải có một khóa duy nhất để chúng được ánh xạ chính xác.used to add key-value pairs to a Map object. It can also be used to update the value of an existing key. Each value must have a unique key so that they get mapped correctly.

programming javascript Map TypeScript New Map JavaScript object.map javascript Array map JavaScript Map in nodejs map() trong javascript Map in Java Hashmap JS

Hướng dẫn what is map () in javascript? - bản đồ () trong javascript là gì?

Thử nó

Cú pháp

Thông số

Giá trị trả về

Sự mô tả

Ví dụ

Ánh xạ một mảng các số vào một mảng của rễ vuông

Sử dụng bản đồ để định dạng lại các đối tượng trong một mảng

Ánh xạ một mảng số bằng cách sử dụng hàm chứa đối số

Gọi bản đồ () trên các đối tượng không phải là

Sử dụng bản đồ () một cách chung chung trên một cái gật đầu

Sử dụng map () trên các mảng thưa thớt

Sử dụng parseInt () với map ()

Mảng ánh xạ chứa không xác định

Thông số kỹ thuật

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

Xem thêm

Tại sao bản đồ () quan trọng trong javascript?

Bản đồ () trả về trong javascript là gì?

Sự khác biệt giữa bản đồ () và?

Hàm MAP và SET trong JavaScript là gì?

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