Hướng dẫn is map used for object in javascript? - bản đồ có được sử dụng cho đối tượng trong javascript không?

Question

Phản hồi của tôi phần lớn dựa trên phản hồi được đánh giá cao nhất ở đây và hy vọng mọi người đều hiểu (cũng có cùng lời giải thích về GitHub của tôi). Đây là lý do tại sao sự im lặng của anh ấy với bản đồ hoạt động:

Nội dung chính Show

Giới thiệu về đối tượng bản đồ JavaScript
Phương pháp bản đồ JavaScript hữu ích
Ví dụ bản đồ JavaScript
Tạo một đối tượng bản đồ mới
Thêm các phần tử vào bản đồ
Khởi tạo bản đồ với một đối tượng có thể lặp lại
Nhận một phần tử từ bản đồ theo khóa
Kiểm tra sự tồn tại của một phần tử bằng khóa
Nhận số lượng các phần tử trong bản đồ
Lặp lại các phím bản đồ
Lặp lại các giá trị bản đồ
Lặp lại các yếu tố bản đồ
Chuyển đổi các phím hoặc giá trị bản đồ thành một mảng
Xóa một phần tử bằng khóa
Xóa tất cả các yếu tố trong bản đồ
Chúng ta có thể sử dụng chức năng bản đồ trong đối tượng không?
Bản đồ có giống như JavaScript đối tượng không?
Bản đồ JavaScript được sử dụng để làm gì?
Đối tượng JavaScript có sử dụng Hashmap không?

Object.keys(images).map((key) => images[key] = 'url(' + '"' + images[key] + '"' +    
')');

Mục đích của hàm là lấy một đối tượng và sửa đổi nội dung gốc của đối tượng bằng cách sử dụng một phương thức có sẵn cho tất cả các đối tượng (đối tượng và mảng giống nhau) mà không trả lại một mảng. Hầu hết mọi thứ trong JS đều là một đối tượng và vì lý do đó, các yếu tố tiếp tục đi xuống đường ống thừa kế có thể có khả năng sử dụng kỹ thuật những thứ có sẵn cho những người lên đường (và điều ngược lại nó xuất hiện).

Lý do mà điều này hoạt động là do các hàm .map trả về một mảng yêu cầu bạn cung cấp lợi nhuận rõ ràng hoặc ngầm của một mảng thay vì chỉ cần sửa đổi một đối tượng hiện có. Về cơ bản, bạn lừa chương trình vào suy nghĩ đối tượng là một mảng bằng cách sử dụng Object.keys cho phép bạn sử dụng hàm bản đồ với tác động của nó trên các giá trị mà các khóa riêng lẻ được liên kết với (tôi thực sự vô tình trả về mảng nhưng đã sửa nó). Miễn là không có sự trở lại theo nghĩa thông thường, sẽ không có mảng nào được tạo bằng đối tượng ban đầu nguyên vẹn và được sửa đổi như được lập trình.

Chương trình cụ thể này lấy một đối tượng được gọi là hình ảnh và lấy các giá trị của các khóa của nó và nối các thẻ URL để sử dụng trong một hàm khác. Bản gốc là:

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

... và sửa đổi là:

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

Cấu trúc ban đầu của đối tượng còn nguyên vẹn cho phép truy cập thuộc tính bình thường miễn là không có sự trở lại. Không có nó trả lại một mảng như bình thường và mọi thứ sẽ ổn. Mục tiêu là gán lại các giá trị ban đầu (hình ảnh [khóa]) cho những gì được mong muốn và không phải là bất cứ điều gì khác. Theo như tôi biết, để ngăn chặn đầu ra mảng, phải có sự phân công lại hình ảnh [khóa] và không có yêu cầu ngầm hoặc rõ ràng để trả về một mảng (gán biến thực hiện điều này và bị trục trặc qua lại cho tôi).

EDIT:

Sẽ giải quyết phương pháp khác của anh ấy liên quan đến việc tạo đối tượng mới để tránh sửa đổi đối tượng gốc (và việc xác định lại dường như vẫn là cần thiết để tránh vô tình tạo ra một mảng làm đầu ra). Các chức năng này sử dụng cú pháp mũi tên và là nếu bạn chỉ muốn tạo một đối tượng mới để sử dụng trong tương lai.

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

Cách các chức năng này hoạt động như vậy:

MAPFN lấy hàm được thêm vào sau (trong trường hợp này (giá trị) => giá trị) và chỉ cần trả về bất cứ thứ gì được lưu trữ ở đó dưới dạng giá trị cho khóa đó (hoặc nhân với hai nếu bạn thay đổi giá trị trả về như anh ta đã làm) trong MAPFN ( obj) [khóa],

và sau đó xác định lại giá trị ban đầu được liên kết với khóa trong kết quả [khóa] = MAPFN (OBJ) [khóa]

và trả về hoạt động được thực hiện trên kết quả (bộ tích lũy nằm trong các giá đỡ được bắt đầu ở cuối hàm .reduce).

Tất cả những điều này đang được thực hiện trên đối tượng đã chọn và vẫn không thể có một yêu cầu ngầm cho một mảng được trả về và chỉ hoạt động khi chỉ định lại các giá trị theo như tôi có thể nói. Điều này đòi hỏi một số thể dục dụng cụ tinh thần nhưng làm giảm các dòng mã cần thiết như có thể thấy ở trên. Đầu ra hoàn toàn giống như có thể thấy dưới đây:

{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-   
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain: 
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}

Hãy nhớ rằng điều này đã làm việc với những người không phải là người. Bạn có thể nhân đôi bất kỳ đối tượng nào bằng cách trả về giá trị trong hàm MAPFN.

Tóm tắt: Trong hướng dẫn này, bạn sẽ tìm hiểu về đối tượng bản đồ JavaScript ánh xạ khóa thành một giá trị.: in this tutorial, you will learn about the JavaScript Map object that maps a key to a value.

Giới thiệu về đối tượng bản đồ JavaScript

Trước ES6, chúng ta thường sử dụng một đối tượng để mô phỏng bản đồ bằng cách ánh xạ một khóa đến giá trị của bất kỳ loại nào. Nhưng sử dụng một đối tượng làm bản đồ có một số tác dụng phụ:

Một đối tượng luôn có một khóa mặc định như nguyên mẫu.
Khóa của một đối tượng phải là một chuỗi hoặc biểu tượng, bạn không thể sử dụng một đối tượng làm khóa.
Một đối tượng không có thuộc tính đại diện cho kích thước của bản đồ.

ES6 cung cấp một loại bộ sưu tập mới gọi là

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0 giải quyết các thiếu sót này.

Theo định nghĩa, một đối tượng

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0 giữ các cặp giá trị khóa. Các phím là duy nhất trong bộ sưu tập bản đồ. Nói cách khác, một khóa trong một đối tượng bản đồ chỉ xuất hiện một lần.

Các khóa và giá trị của bản đồ có thể là bất kỳ giá trị nào.

Khi lặp lại một đối tượng

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0, mỗi lần lặp lại trả về một mảng 2 thành viên là

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

3. Thứ tự lặp theo thứ tự chèn tương ứng với thứ tự trong đó mỗi cặp giá trị khóa lần đầu tiên được chèn vào bản đồ bằng phương thức

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

4.

Để tạo

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0 mới, bạn sử dụng cú pháp sau:

let map = new Map([iterable]);
Code language: JavaScript (javascript)

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

6 chấp nhận một đối tượng có thể lặp lại tùy chọn có các phần tử là các cặp giá trị khóa.

Phương pháp bản đồ JavaScript hữu ích

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

7 - Loại bỏ tất cả các phần tử khỏi đối tượng bản đồ.

& nbsp; ________ 38 - Xóa một phần tử được chỉ định bởi khóa. Nó trả về nếu phần tử nằm trong bản đồ, hoặc sai nếu nó không.
& nbsp; ________ 39 - Trả về một đối tượng lặp mới có chứa một mảng
```
const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);
```
3 cho mỗi phần tử trong đối tượng bản đồ. Thứ tự của các đối tượng trong bản đồ giống như thứ tự chèn.

& nbsp; ________ 41-gọi một cuộc gọi lại cho mỗi cặp giá trị khóa trong bản đồ theo thứ tự chèn. Tham số này tùy chọn đặt giá trị

{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-   
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain: 
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}

2 cho mỗi cuộc gọi lại.

& nbsp; get (khóa) - Trả về giá trị được liên kết với khóa. Nếu khóa không tồn tại, nó sẽ trả về không xác định.
& nbsp; có (khóa) - trả về true nếu một giá trị liên quan đến khóa tồn tại hoặc sai.
& nbsp; ________ 43 - Trả về một trình lặp mới có chứa các phím cho các phần tử theo thứ tự chèn.
& nbsp; ________ 44 - Đặt giá trị cho khóa trong đối tượng bản đồ. Nó trả về chính đối tượng bản đồ do đó bạn có thể chuỗi phương pháp này với các phương thức khác.
& nbsp; ________ 45 Trả về một đối tượng lặp mới có chứa các giá trị cho từng phần tử theo thứ tự chèn.

Ví dụ bản đồ JavaScript

Hãy cùng lấy một số ví dụ về việc sử dụng một đối tượng bản đồ.

Tạo một đối tượng bản đồ mới

Giả sử bạn có một danh sách các đối tượng

{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-   
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain: 
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}

6 như sau:

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

Giả sử rằng bạn phải tạo một bản đồ người dùng và vai trò. Trong trường hợp này, bạn sử dụng mã sau:

let userRoles = new Map();
Code language: JavaScript (javascript)

{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-   
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain: 
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}

7 là một thể hiện của đối tượng

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0 và loại của nó là một đối tượng như được minh họa trong ví dụ sau:

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Code language: JavaScript (javascript)

Thêm các phần tử vào bản đồ

Để gán vai trò cho người dùng, bạn sử dụng phương thức

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

4:

userRoles.set(john, 'admin');
Code language: JavaScript (javascript)

Phương pháp

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

4 ánh xạ người dùng

let map = new Map([iterable]);
Code language: JavaScript (javascript)

1 với vai trò

let map = new Map([iterable]);
Code language: JavaScript (javascript)

2. Vì phương thức

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

4 có thể chuỗi, bạn có thể lưu một số gõ như trong ví dụ này:

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

0

Khởi tạo bản đồ với một đối tượng có thể lặp lại

Như đã đề cập trước đó, bạn có thể chuyển một đối tượng có thể lặp lại cho hàm tạo

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

6:

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

1

Nhận một phần tử từ bản đồ theo khóa

Nếu bạn muốn xem vai trò của

let map = new Map([iterable]);
Code language: JavaScript (javascript)

5, bạn sẽ sử dụng phương pháp

let map = new Map([iterable]);
Code language: JavaScript (javascript)

6:

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

2

Nếu bạn vượt qua một khóa không tồn tại, phương thức

let map = new Map([iterable]);
Code language: JavaScript (javascript)

6 sẽ trả về

let map = new Map([iterable]);
Code language: JavaScript (javascript)

8.

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

3

Kiểm tra sự tồn tại của một phần tử bằng khóa

Để kiểm tra xem một khóa có tồn tại trong bản đồ không, bạn sử dụng phương thức

let map = new Map([iterable]);
Code language: JavaScript (javascript)

9.

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

4

Nhận số lượng các phần tử trong bản đồ

Thuộc tính

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

0 trả về số lượng mục của đối tượng MAP.

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

5

Lặp lại các phím bản đồ

Để có được các khóa của đối tượng

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0, bạn sử dụng phương thức

{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-   
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain: 
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}

3.

{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-   
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain: 
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}

3 trả về một đối tượng lặp mới có chứa các khóa của các phần tử trong bản đồ.

Ví dụ sau đây hiển thị tên người dùng của người dùng trong đối tượng bản đồ

{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-   
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain: 
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}

7.

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

6

Output:

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

7

Lặp lại các giá trị bản đồ

Tương tự, bạn có thể sử dụng phương thức

{snow: "https://www.trbimg.com/img-5aa059f5/turbine/bs-   
md-weather-20180305", sunny: "http://www.cubaweather.org/images/weather-
photos/l…morning-east-Matanzas-city-Cuba-20170131-1080.jpg", rain: 
"https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg"}

5 để lấy đối tượng Iterator chứa các giá trị cho tất cả các phần tử trong bản đồ:

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

8

Output:

var images = { 
snow: 'https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305', 
sunny: 'http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-east-   
Matanzas-city- Cuba-20170131-1080.jpg', 
rain: 'https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg' };

9

Lặp lại các yếu tố bản đồ

Ngoài ra, phương thức

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

9 trả về một đối tượng lặp có chứa một mảng

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

7 của mỗi phần tử trong đối tượng

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0:

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

0

Để làm cho việc lặp lại tự nhiên hơn, bạn có thể sử dụng phá hủy như sau:

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

1

Ngoài vòng lặp

let john = {name: 'John Doe'},
    lily = {name: 'Lily Bush'},
    peter = {name: 'Peter Drucker'};
Code language: JavaScript (javascript)

9, bạn có thể sử dụng phương thức

let userRoles = new Map();
Code language: JavaScript (javascript)

0 của đối tượng bản đồ:

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

2

Chuyển đổi các phím hoặc giá trị bản đồ thành một mảng

Đôi khi, bạn muốn làm việc với một mảng thay vì một đối tượng có thể lặp lại, trong trường hợp này, bạn có thể sử dụng toán tử lây lan.

Ví dụ sau đây chuyển đổi các phím cho từng phần tử thành một mảng các phím:

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

3

Output:

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

4

Và sau đây chuyển đổi các giá trị của các phần tử thành một mảng:

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

5

Đầu ra

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

6

Xóa một phần tử bằng khóa

Để xóa một mục trong bản đồ, bạn sử dụng phương thức

let userRoles = new Map();
Code language: JavaScript (javascript)

1.

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

7

Xóa tất cả các yếu tố trong bản đồ

Để xóa tất cả các mục trong đối tượng

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0, bạn sử dụng phương thức

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

7:

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

8

Do đó, kích thước của bản đồ bây giờ là bằng không.

var images = { 
snow: url('https://www.trbimg.com/img-5aa059f5/turbine/bs-md-weather-20180305'),     
sunny: url('http://www.cubaweather.org/images/weather-photos/large/Sunny-morning-   
east-Matanzas-city- Cuba-20170131-1080.jpg'), 
rain: url('https://i.pinimg.com/originals/23/d8
/ab/23d8ab1eebc72a123cebc80ce32b43d8.jpg') 
};

9

Yếu

A

let userRoles = new Map();
Code language: JavaScript (javascript)

4 tương tự như

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0 ngoại trừ các khóa của

let userRoles = new Map();
Code language: JavaScript (javascript)

4 phải là đối tượng. Điều đó có nghĩa là khi một tham chiếu đến một khóa (một đối tượng) nằm ngoài phạm vi, giá trị tương ứng sẽ tự động được giải phóng khỏi bộ nhớ.

A

let userRoles = new Map();
Code language: JavaScript (javascript)

4 chỉ có các phương thức tập hợp con của đối tượng

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0:

let userRoles = new Map();
Code language: JavaScript (javascript)

9

& nbsp; ________ 44

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Code language: JavaScript (javascript)

1

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

8

Dưới đây là sự khác biệt chính giữa

const mapper = (obj, mapFn) => Object.keys(obj).reduce((result, key) => {
                result[key] = mapFn(obj)[key];
                return result;
            }, {});

var newImages = mapper(images, (value) => value);

0 và

console.log(typeof(userRoles)); // object
console.log(userRoles instanceof Map); // true
Code language: JavaScript (javascript)

4:

Các yếu tố của một điểm yếu không thể được lặp lại.
Không thể xóa tất cả các yếu tố cùng một lúc.
Không thể kiểm tra kích thước của một yếu.

Trong hướng dẫn này, bạn đã học được cách làm việc với đối tượng bản đồ JavaScript và các phương pháp hữu ích của nó để thao tác các mục trong bản đồ.

Hướng dẫn này có hữu ích không?

Chúng ta có thể sử dụng chức năng bản đồ trong đối tượng không?

.map () có thể được sử dụng để lặp lại thông qua các đối tượng trong một mảng và, theo cách tương tự như các mảng truyền thống, sửa đổi nội dung của từng đối tượng riêng lẻ và trả về một mảng mới. Việc sửa đổi này được thực hiện dựa trên những gì được trả về trong chức năng gọi lại. map() can be used to iterate through objects in an array and, in a similar fashion to traditional arrays, modify the content of each individual object and return a new array. This modification is done based on what is returned in the callback function.

Bản đồ có giống như JavaScript đối tượng không?

Trong đối tượng, loại dữ liệu của trường khóa bị giới hạn ở số nguyên, chuỗi và ký hiệu. Trong khi trong bản đồ, trường khóa có thể thuộc bất kỳ loại dữ liệu nào (số nguyên, một mảng, thậm chí là một đối tượng!) Trong bản đồ, thứ tự ban đầu của các phần tử được bảo tồn. Điều này không đúng trong trường hợp của các đối tượng.

Bản đồ JavaScript được sử dụng để làm gì?

Bản đồ trong JavaScript là gì?MAP là một tập hợp các cặp khóa/giá trị có thể sử dụng bất kỳ loại dữ liệu nào làm khóa hoặc giá trị và ghi nhớ thứ tự của các mục của nó.Nó được sử dụng để lặp lại tất cả các yếu tố trong một mảng, dẫn đến một mảng mới.to iterate over all the elements in an array, which results in a new array.

Đối tượng JavaScript có sử dụng Hashmap không?

Mặc dù JavaScript không có lớp Hashtable bản địa, nhưng nó có các đối tượng gốc và Hashmap (MAP) cung cấp chức năng tương tự khi tổ chức các cặp khóa/giá trị.it does have native Objects and Hashmaps(Map) that offer similar functionality when it comes to organizing key/value pairs.

programming javascript Object map JavaScript map Loop object JavaScript Map TypeScript Array map JavaScript