Tóm Tắt
Phương thức map – Đối tượng Array trong JavaScript
Đối tượng Array trong JavaScript cung cấp cho người sử dụng rất nhiều các phương thức (hàm) tiện ích, hỗ trợ người dùng có thể thao tác với các dữ liệu mảng một cách dễ dàng hơn. Bài viết này sẽ giới thiệu về Phương thức map – Đối tượng Array trong JavaScript
Mục đích Phương thức map – Đối tượng Array trong JavaScript
Phương thức map() là phương thức trong đối tượng Array trong JavaScript bắt đầu được hỗ trợ bắt đầu từ phiên bản ECMAScript 5.
Phương thức này hỗ trợ sử dụng 1 hàm đầu vào callback để tạo ra một mảng mới từ mảng cũ theo nghiệp vụ cụ thể nào đó.
Phương thức map không làm thay đổi mảng ban đầu.
Phương thức map trả về một mảng mới theo nghiệp vụ xử lý của hàm callback.
Cú pháp Phương thức map – Đối tượng Array trong JavaScript
1
2
3
let
newArray
=
arr
.
map
(
callback
(
currentValue
[
,
index
[
,
array
]
]
)
{
// return element for newArray, after executing something
}
[
,
thisArg
]
)
;
Tham số (Parameters):
callback: Hàm để tạo ra phần tử cho mảng mới, nhận vào ba tham số
currentValue : Giá trị của phần tử trong mảng đang được xử lý
indexOptional : Index của phần tử trong mảng đang được xử lý
arrayOptional: Mảng đang được gọi với map
thisArgOptional : Giá trị gán cho từ khóa this bên trong callback.
Giá trị trả về (Return Value) :
Một mảng mới với phần tử là kết quả của hàm callback.
Chú ý:
– Mảng trả về có cùng số phần tử với mảng ban đầu, nếu map được sẽ trả về theo nghiệp vụ, ngược lại sẽ trả về undefined or nothing. Kiểu dữ liệu của các phần tử của mảng trả về phụ thuộc vào nghiệp vụ xử lý trong callback (xem ví dụ 3)
– Bởi vì hàm map() sẽ tạo ra một mảng mới nên khi không cần xử lý gì trên một mảng mới đó mà chỉ cần xử lý nghiệp vụ tương tự, thì trong javascript bạn có thể sử dụng hàm forEach hoặc vòng lặp for-of để thay thế.
– Phương thức map() chỉ được thêm vào đặc tả ECMA-262 với phiên bản lần thứ 5; nên nếu trường hợp cần sử dụng nó cho các trình duyệt không hỗ trợ CMAScript 5, bạn có thể work around bằng cách thêm vào đoạn code bên dưới vào đầu script của bạn, cho phép sử dụng hàm map tại những nơi mà nó không được hỗ trợ sẵn:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if
(
!
Array
.
prototype
.
map
)
{
Array
.
prototype
.
map
=
function
(
callback
/*, thisArg*/
)
{
var
T
,
A
,
k
;
if
(
this
==
null
)
{
throw
new
TypeError
(
‘this is null or not defined’
)
;
}
// 1. Let O be the result of calling ToObject passing the |this|
// value as the argument.
var
O
=
Object
(
this
)
;
// 2. Let lenValue be the result of calling the Get internal
// method of O with the argument “length”.
// 3. Let len be ToUint32(lenValue).
var
len
=
O
.
length
&
gt
;
&
gt
;
&
gt
;
0
;
// 4. If IsCallable(callback) is false, throw a TypeError exception.
// See: http://es5.github.com/#x9.11
if
(
typeof
callback
!==
‘function’
)
{
throw
new
TypeError
(
callback
+
‘ is not a function’
)
;
}
// 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
if
(
arguments
.
length
&
gt
;
1
)
{
T
=
arguments
[
1
]
;
}
// 6. Let A be a new array created as if by the expression new Array(len)
// where Array is the standard built-in constructor with that name and
// len is the value of len.
A
=
new
Array
(
len
)
;
// 7. Let k be 0
k
=
0
;
// 8. Repeat, while k < len
while
(
k
&
lt
;
len
)
{
var
kValue
,
mappedValue
;
// a. Let Pk be ToString(k).
// This is implicit for LHS operands of the in operator
// b. Let kPresent be the result of calling the HasProperty internal
// method of O with argument Pk.
// This step can be combined with c
// c. If kPresent is true, then
if
(
k
in
O
)
{
// i. Let kValue be the result of calling the Get internal
// method of O with argument Pk.
kValue
=
O
[
k
]
;
// ii. Let mappedValue be the result of calling the Call internal
// method of callback with T as the this value and argument
// list containing kValue, k, and O.
mappedValue
=
callback
.
call
(
T
,
kValue
,
k
,
O
)
;
// iii. Call the DefineOwnProperty internal method of A with arguments
// Pk, Property Descriptor
// { Value: mappedValue,
// Writable: true,
// Enumerable: true,
// Configurable: true },
// and false.
// In browsers that support Object.defineProperty, use the following:
// Object.defineProperty(A, k, {
// value: mappedValue,
// writable: true,
// enumerable: true,
// configurable: true
// });
// For best browser support, use the following:
A
[
k
]
=
mappedValue
;
}
// d. Increase k by 1.
k
++
;
}
// 9. return A
return
A
;
}
;
}
Đặc tả kỹ thuật Phương thức map – Đối tượng Array trong JavaScript
Về mặt trình duyệt, Phương thức map – Đối tượng Array trong JavaScript được hỗ trợ của trên các phiên bản trình duyệt như sau:
Trình duyệt Chrome có hỗ trợ.
Trình duyệt Edge hỗ trợ từ phiên bản 9.0
Trình duyệt Firefox hỗ trợ từ phiên bản 1.5
Trình duyệt Safari có hỗ trợ.
Trình duyệt Opera có hỗ trợ.
Về mặt ngôn ngữ lập trình Javascript, Phương thức map – Đối tượng Array trong JavaScript tuân theo đặc tả ngôn ngữ kịch bản được tiêu chuẩn hóa bởi Ecma International: ECMAScript 5
Ví dụ sử dụng Phương thức map – Đối tượng Array trong JavaScript
Ví dụ 1: Sử dụng hàm map với nghiệp vụ là tính căn bậc 2 của các phần tử
1
2
// Mảng số nguyên
var
numbers
=
[
1
,
4
,
9
]
;
Sử dụng hàm Math.sqrt với nghiệp vụ xử lý là tính căn bậc 2 các phần tử của mảng ban đầu, bạn có thể sử dụng dạng đầy đủ hoặc rút gọn như bên dưới:
1
2
3
4
5
6
7
// Sử dụng hàm map dạng đầy đủ
let
roots
=
numbers
.
map
(
function
(
num
)
{
return
Math
.
sqrt
(
num
)
}
)
;
// Sử dụng hàm map dạng rút gọn
// var roots = numbers.map(Math.sqrt);
Kết quả mảng numbers không thay đổi, mảng mới nhận roots mỗi phần tử là căn bậc 2 của mảng ban đầu:
1
2
3
4
alert
(
numbers
)
;
alert
(
roots
)
;
// mảng roots: [1, 2, 3]
// mảng numbers vẫn là: [1, 4, 9]
Ví dụ 2: Từ mảng ban đầu chế mảng khác
Giả sử ta có mảng JSON ban đầu:
1
2
3
let
kvArray
=
[
{
key
:
1
,
value
:
10
}
,
{
key
:
2
,
value
:
20
}
,
{
key
:
3
,
value
:
30
}
]
Ta có thể format như sau:
1
2
3
4
5
let
reformattedArray
=
kvArray
.
map
(
obj
=&
gt
;
{
let
rObj
=
{
}
rObj
[
obj
.
key
]
=
obj
.
value
return
rObj
}
)
Kết quả nhận được là:
1
2
3
4
5
// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}],
// kvArray is still:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]
Ví dụ 3: Trả về undefined or nothing nêu không map được.
Giả sử ta có mảng Hotgirl như sau:
1
2
// Mảng các đối tượng JSON về hotgirl
var
arrayHotgirlJSON
=
[
{
name
:
“Ngọc Trinh”
,
age
:
25
}
,
{
name
:
“Quỳnh Thư”
,
age
:
20
}
,
{
name
:
“Nguyễn Thoại Nghi”
,
age
:
15
}
]
;
Ta cần lấy danh sách tên các Hotgirltrên 20 tuổi bằng hàm nghiệm vụ như sau:
1
2
3
4
5
function
checkAge
(
curEl
)
{
if
(
curEl
.
age
&
gt
;
20
)
return
curEl
.
name
;
}
Gọi hàm map:
1
2
// Gọi hàm map
var
result
=
arrayHotgirlJSON
.
map
(
checkAge
)
;
Sau hàm nghiệp vụ này ta sẽ nhận được mảng tên của các Hotgirl , những phần từ nào map được hay thỏa mãn nghiệp vụ sẽ là tên của Hotgirl , những phần tử không map được sẽ trả về undefined, mảng nhận được là:
1
[
“Ngọc Trinh”
,
undefined
,
undefined
]
Tải sample : Tại đây
Phản hồi
Phản hồi
