Hướng dẫn pass function to map javascript - chuyển hàm để ánh xạ javascript

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ố

values.map(squareFuncWith2); // [3, 6, 11, 18] 2

Chức năng được gọi cho mọi yếu tố của values.map(squareFuncWith2); // [3, 6, 11, 18] 3. Mỗi lần values.map(squareFuncWith2); // [3, 6, 11, 18] 2 thực thi, giá trị trả về được thêm vào values.map(squareFuncWith2); // [3, 6, 11, 18] 5.

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

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

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

Mảng values.map(squareFuncWith2); // [3, 6, 11, 18] 9 đã được kêu gọi.

Giá trị để sử dụng là // 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) 1 khi thực hiện values.map(squareFuncWith2); // [3, 6, 11, 18] 2.

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ả

values.map(squareFuncWith2); // [3, 6, 11, 18] 9 gọi hàm values.map(squareFuncWith2); // [3, 6, 11, 18] 2 được cung cấp một lần cho mỗi phần tử trong một mảng, theo thứ tự và xây dựng một mảng mới từ các kết quả.once for each element in an array, in order, and constructs a new array from the results.

values.map(squareFuncWith2); // [3, 6, 11, 18] 2 chỉ được gọi cho các chỉ mục mảng có giá trị được gán. Nó không được gọi cho các khe trống trong các mảng thưa thớt.

values.map(squareFuncWith2); // [3, 6, 11, 18] 2 được gọi với ba đối số: giá trị của phần tử, chỉ số của phần tử và đối tượng mảng được ánh xạ.

Nếu một tham số // 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) 0 được cung cấp, nó sẽ được sử dụng làm giá trị // 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) 1 của Callback. Mặt khác, giá trị // 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) 9 sẽ được sử dụng làm giá trị // 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) 1 của nó. Giá trị // 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) 1 cuối cùng có thể quan sát được bởi values.map(squareFuncWith2); // [3, 6, 11, 18] 2 được xác định theo các quy tắc thông thường để xác định // 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) 1 được nhìn thấy bởi một hàm.

Phương pháp values.map(squareFuncWith2); // [3, 6, 11, 18] 1 là một phương thức sao chép. Nó không thay đổi // 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) 1.

Phương pháp values.map(squareFuncWith2); // [3, 6, 11, 18] 1 là chung chung. Nó chỉ mong đợi giá trị // 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) 1 có thuộc tính 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 và các thuộc tính được khóa.

Phạm vi của các phần tử được xử lý bởi values.map(squareFuncWith2); // [3, 6, 11, 18] 9 được đặt trước khi gọi đầu tiên của values.map(squareFuncWith2); // [3, 6, 11, 18] 2. Các yếu tố được gán cho các chỉ mục đã được truy cập hoặc các chỉ mục bên ngoài phạm vi, sẽ không được truy cập bởi values.map(squareFuncWith2); // [3, 6, 11, 18] 2. Nếu các phần tử hiện tại của mảng được thay đổi sau cuộc gọi đến values.map(squareFuncWith2); // [3, 6, 11, 18] 9, giá trị của chúng sẽ là giá trị tại thời điểm values.map(squareFuncWith2); // [3, 6, 11, 18] 2 truy cập chúng. Các yếu tố bị xóa sau cuộc gọi đến values.map(squareFuncWith2); // [3, 6, 11, 18] 9 bắt đầu và trước khi được truy cập không được truy cập.

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

Vì values.map(squareFuncWith2); // [3, 6, 11, 18] 9 xây dựng một mảng mới, gọi nó mà không cần sử dụng mảng trả về là một mẫu chống lại; sử dụng const kvArray = [ { key: 1, value: 10 }, { key: 2, value: 20 }, { key: 3, value: 30 }, ]; const reformattedArray = kvArray.map(({ key, value}) => ({ [key]: value })); // reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], // kvArray is still: // [{key: 1, value: 10}, // {key: 2, value: 20}, // {key: 3, value: 30}] 6 hoặc const kvArray = [ { key: 1, value: 10 }, { key: 2, value: 20 }, { key: 3, value: 30 }, ]; const reformattedArray = kvArray.map(({ key, value}) => ({ [key]: value })); // reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], // kvArray is still: // [{key: 1, value: 10}, // {key: 2, value: 20}, // {key: 3, value: 30}] 7 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 })); // reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], // kvArray is still: // [{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 values.map(squareFuncWith2); // [3, 6, 11, 18] 9 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 values.map(squareFuncWith2); // [3, 6, 11, 18] 9 thông qua mảng gốc.

const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); // doubles is now [2, 8, 18] // numbers is still [1, 4, 9]

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

Phương thức values.map(squareFuncWith2); // [3, 6, 11, 18] 1 đọc thuộc tính 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 của // 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) 1 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 numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); // doubles is now [2, 8, 18] // numbers is still [1, 4, 9] 3. Điều này là do const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); // doubles is now [2, 8, 18] // numbers is still [1, 4, 9] 3 trả về const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); // doubles is now [2, 8, 18] // numbers is still [1, 4, 9] 5 (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 numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); // doubles is now [2, 8, 18] // numbers is still [1, 4, 9] 6 đã 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 numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); // doubles is now [2, 8, 18] // numbers is still [1, 4, 9] 7.

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 values.map(squareFuncWith2); // [3, 6, 11, 18] 1. 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:

var squareFuncWith2 = squarefuncwithadjustment.bind(null, 2); 0

Trong khi người ta có thể mong đợi const numbers = [1, 4, 9]; const doubles = numbers.map((num) => num * 2); // doubles is now [2, 8, 18] // numbers is still [1, 4, 9] 9, kết quả thực tế là const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); // [ 4, 9, 16 ] 0.

const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); // [ 4, 9, 16 ] 1 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 arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); // [ 4, 9, 16 ] 2 vượt qua 3 đối số:

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

Đối số thứ ba bị bỏ qua bởi ____ 71, 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:

var squareFuncWith2 = squarefuncwithadjustment.bind(null, 2); 1

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

var squareFuncWith2 = squarefuncwithadjustment.bind(null, 2); 2

Một đầu ra thay thế của phương thức bản đồ được gọi bằng const arrayLike = { length: 3, 0: 2, 1: 3, 2: 4, }; console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2)); // [ 4, 9, 16 ] 1 như một tham số chạy như sau:

var squareFuncWith2 = squarefuncwithadjustment.bind(null, 2); 3

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

Khi // 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) 9 hoặc không có gì được trả lại:

var squareFuncWith2 = squarefuncwithadjustment.bind(null, 2); 4

Xem thêm