Phương thức
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. 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]
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]
3Mộ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]
4Phầ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]
5Chỉ 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]
6Mả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ọnOptionalGiá 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:
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 đếnconst 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.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]
- Các thay đổi đối với các chỉ mục đã được truy cập không khiến
3 được gọi lại trên chú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]
- 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
3, giá trị của nó được chuyển choconst 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.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]
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]
0Mả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]
1Thông số kỹ thuật
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