teleren/devto huggingface dataset:
Pen Note - A Flutter Markdown Editor Log 2
Tags: flutter, 100daysofcode, markdown, dart
Published: 2021-05-13 10:48:52

# Pen Note
##### A multi-platform markdown editor, created using Flutter


Hey guys it's been roughly a week I think since my last post here but I finally have an update to show regarding Pen Note.

So firstly I added all the other screens except two (empty and error state), I switched up a few things for the time being instead of linking it with a database I started off using the local storage to store all notes in the future I'll just send that file to the database for storage.

Following that I managed to add the edit, create and delete note functions and they can use more work but for the time being it's okay, however I'll be the first to day that it has a few bugs regarding the fetching from storage, I'll have to attend to in the near future but that's all for now. Let me know what you think below, don't forget to star the [repository](https://github.com/MeshaMakes/PenNote) and donate if you can I appreciate your support.




Edit Screen (Mobile)             |  Preview Screen (Mobile)
:-------------------------:|:-------------------------:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2m5iwifzjwdicr36rof.jpg)  |  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovb3d5or9v85t5e5xjjn.jpg)
---
 
> ###### Tell me down below what you think and any features I could possibly add to it in the future

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/Z8Z860Z55)


![Thank you image](https://steamcdn-a.akamaihd.net/steamcommunity/public/images/clans/32193639/37697d2c0376739048f5e612f1ed837dd4f62075.jpg)
NodeJS/Express + Bootstrap Filter List + JQuery example
Tags: node, express, bootstrap, jquery
Published: 2021-05-13 10:43:07

https://grokonez.com/node-js/nodejs-express-bootstrap-filter-list-jquery

NodeJS/Express + Bootstrap Filter List + JQuery example

In the tutorial, we show how to implement Bootstrap Filter List with JQuery and NodeJS/Express RestAPIs.

Related posts:
- <a href="https://grokonez.com/node-js/nodejs-restapis-how-to-create-nodejs-express-restapis-post-get-put-delete-requests">NodeJs/Express RestAPIs – POST/GET/PUT/DELETE requests</a>
- <a href="https://grokonez.com/node-js/nodejs-express-bootstrap-filter-table-jquery#Setting_up_NodeJSExpress_project">NodeJS/Express + Bootstrap Filter Table + JQuery</a>

<!--more-->
<h2>Goal</h2>
Bootstrap does NOT support a typical component for filtering. So we can use JQuery to filter elements:

<pre><code class="language-javascript">
// do Filter on View
$("#inputFilter").on("keyup", function() {
    var inputValue = $(this).val().toLowerCase();
    $("#customerList li").filter(function() {
    	$(this).toggle($(this).text().toLowerCase().indexOf(inputValue) > -1)
    });
});</code></pre>

We create a NodeJS/Express project as below structure:

<pre><code class="language-javascript">
/NodeJS-Express-Bootstrap-Filter-List-JQuery
	/app
		/controllers
			customer.controller.js
		/routes
			customer.route.js
	/node_modules
	/resources
		/static
			/js
				load-data-filter-list.js
	/views
		404.html
		index.html
	package.json
	package-lock.json
	server.js
</code></pre>

Run above project then makes a request <code>http://localhost:8081</code>

-> Bootstrap view:

<img src="https://grokonez.com/wp-content/uploads/2018/05/NodeJS-Express-JQuery-Bootstrap-Filter-List-browser-network-view.png" alt="NodeJS-Express-JQuery-Bootstrap-Filter-List-browser-network-view" width="746" height="566" class="alignnone size-full wp-image-12313" />

-> Filter data:

<img src="https://grokonez.com/wp-content/uploads/2018/05/NodeJS-Express-JQuery-Bootstrap-Filter-List-browser-network-filter.png" alt="NodeJS-Express-JQuery-Bootstrap-Filter-List-browser-network-filter" width="739" height="280" class="alignnone size-full wp-image-12314" />

More at:

https://grokonez.com/node-js/nodejs-express-bootstrap-filter-list-jquery

NodeJS/Express + Bootstrap Filter List + JQuery example
Editorconfig Cheat Sheet
Tags: editorconfig, cheatsheet
Published: 2021-05-13 10:35:06


### References

- <https://EditorConfig.org>
### Full example

```ini
# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# 4 space indentation
[*.py]
indent_style = space
indent_size = 4

# Tab indentation (no size specified)
[*.js]
indent_style = tab

# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2

# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
```

### Properties

```ini
indent_style = {space|tab}
indent_size = {4|tab}
tab_width = 2
end_of_line = {cr|lf|crlf}
charset = {utf-8|utf-16be|utf-16le|latin1}
trim_trailing_whitespace = false
insert_final_newline = true
max_line_length = 80
```

### Short example
{: .-prime}

```ini
# editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
tab_width = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
```

This example should be fine for most projects indented by 2 spaces. See: [animate.css editorconfig](https://github.com/daneden/animate.css/blob/master/.editorconfig)

### Reference
* [Editorconfig Cheat Sheet](https://cheatsheetmaker.com/editorconfig) - [Cheat Sheet Maker](https://cheatsheetmaker.com)
Sql Joins Cheat Sheet
Tags: sql, cheatsheet
Published: 2021-05-13 10:34:12


### Diagram

```
SELECT * FROM `A` INNER JOIN `B`
```

```
┌────────┐
│ A  ┌───┼────┐
│    │ ∩ │    │
└────┼───┘  B │
     └────────┘
```

| Join             | What            |
| ----             | ----            |
| Inner join       | `∩`             |
| Left outer join  | `A` + `∩`       |
| Right outer join | `∩` + `B`       |
| Full outer join  | `A` + `∩` + `B` |
### Example

```
SELECT * FROM order_items \
  LEFT OUTER JOIN orders \
  ON order_items.order_id = orders.id
```

Joins are typically added to `SELECT` statements to add more columns and records.

### Reference
* [Sql Joins Cheat Sheet](https://cheatsheetmaker.com/sql-joins) - [Cheat Sheet Maker](https://cheatsheetmaker.com)
Screen Resolutions Cheat Sheet
Tags: cheatsheet, css, screen
Published: 2021-05-13 10:32:24


### [Resolutions] Tablet

| Resolution | DPPX | Actual resolution | DPPI    | Actual PPI | Size | Devices          |
| ---        | ---- | ---               | ---     | ---        | ---- | ---              |
| 1024 x 768 | @2x  | 2048 x 1536       | 163 ppi | 326 ppi    | 7.9" | iPad Mini Retina |
| 1024 x 768 | @2x  | 2048 x 1536       | 132 ppi | 264 ppi    | 9.7" | iPad Air         |

### [Resolutions] Mobile

| Resolution | DPPX | Actual resolution | DPPI    | Actual PPI | Size | Devices                    |
| ---        | ---  | ---               | ---     | ---        | ---  | ---                        |
| 320 x 480  | @1x  | 320 x 480         | 163 ppi | 163 ppi    | 3.5" | iPhone 2G/3G/3GS           |
| 320 x 480  | @2x  | 640 x 960         | 163 ppi | 326 ppi    | 3.5" | iPhone 4/4S                |
| 320 x 568  | @2x  | 640 x 1136        | 163 ppi | 326 ppi    | 4"   | iPhone 5/5C/5S             |
| 320 x 568  | @2x  | 640 x 1136        | 163 ppi | 326 ppi    | 4"   | iPhone SE                  |
| 375 x 667  | @2x  | 750 x 1334        | 163 ppi | 326 ppi    | 4.7" | iPhone 6/6S/7/8/SE2        |
| 414 x 736  | @3x  | 1242 x 2208       | 133 ppi | 401 ppi    | 5.5" | iPhone 6+/6S+/7+/8+        |
| 414 x 896  | @2x  | 828 x 1792        | 162 ppi | 326 ppi    | 6.1" | iPhone Xr/11               |
| 375 x 812  | @3x  | 1125 x 2436       | 152 ppi | 458 ppi    | 5.8" | iPhone X/Xs/11 Pro         |
| 414 x 896  | @3x  | 1242 x 2688       | 162 ppi | 458 ppi    | 6.5" | iPhone Xs Max/11 Pro Max   |
| ---        | ---  | ---               | ----    | ---        | ---  | ---                        |
| 360 x 640  | @2x  | 720 x 1280        | 153 ppi | 306 ppi    | 4.8" | Galaxy S3                  |
| 360 x 640  | @3x  | 1080 x 1920       | 147 ppi | 441 ppi    | 5"   | Galaxy S4                  |
| 360 x 640  | @3x  | 1080 x 1920       | 144 ppi | 432 ppi    | 5.1" | Galaxy S5                  |
| 360 x 640  | @4x  | 1440 x 2560       | 144 ppi | 577 ppi    | 5.1" | Galaxy S6/Edge             |

### Resolutions

### Reference
* [Screen Resolutions Cheat Sheet](https://cheatsheetmaker.com/screen-resolutions) - [Cheat Sheet Maker](https://cheatsheetmaker.com)
101 Cheat Sheet
Tags: 101js, cheatsheet
Published: 2021-05-13 10:29:47


### Reference

- <https://github.com/tjmehta/101>
### [Examples] Function composition

```js
isFloat = passAll(isNumber, compose(isInteger, not))
// n => isNumber(n) && not(isInteger(n))
```

```js
function doStuff (object, options) { ... }

doStuffForce = curry(flip(doStuff))({ force: true })
```

### [Arrays] Grouping

```js
groupBy(list, 'id')
indexBy(list, 'id')
```

### [Arrays] Finding

```js
find(list, x => x.y === 2)
findIndex(list, x => ...)
includes(list, 'item')
last(list)
```

```js
find(list, hasProps('id'))
```

### [Functions] Converge

```js
converge(and, [pluck('a'), pluck('b')])(x)
```

```js
// → and(pluck(x, 'a'), pluck(x, 'b'))
```

See:
[converge](https://github.com/tjmehta/101#converge)

### [Functions] And/or

```js
passAll(f, g)       // x => f(x) && g(x)
passAny(f, g)       // x => f(x) || g(x)
```

See:
[passAll](https://github.com/tjmehta/101#passall),
[passAny](https://github.com/tjmehta/101#passany)

### [Functions] Composition

```js
compose(f, g)       // x => f(g(x))
curry(f)            // x => y => f(x, y)
flip(f)             // f(x, y) --> f(y, x)
```

See:
[compose](https://github.com/tjmehta/101#compose),
[curry](https://github.com/tjmehta/101#curry),
[flip](https://github.com/tjmehta/101#flip)

### [Functions] Simple functions

| `and(x, y)` | `x && y` |
| `or(x, y)` | `x || y` |
| `xor(x, y)` | `!(!x && !y) && !(x && y)` |
| `equals(x, y)` | `x === y` |
| `exists(x)` | `!!x` |
| `not(x)` | `!x` |

Useful for function composition.

See:
[and](https://github.com/tjmehta/101#and),
[equals](https://github.com/tjmehta/101#equals),
[exists](https://github.com/tjmehta/101#exists)

### [Objects] Get values

```js
values(state)
```

### [Objects] Keypath check

```js
hasKeypaths(state, ['user'])
hasKeypaths(state, { 'user.profile.name': 'john' })
```

See:
[hasKeypaths](https://github.com/tjmehta/101#haskeypaths)

### Reference
* [101 Cheat Sheet](https://cheatsheetmaker.com/101) - [Cheat Sheet Maker](https://cheatsheetmaker.com)
Express.Js Cheat Sheet
Tags: express, cheatsheet
Published: 2021-05-13 10:28:51


### [Request & response] Response

```js
res.redirect('/')
res.redirect(301, '/')
```

```js
res.set('Content-Type', 'text/html')
```

```js
res.send('hi')
res.send(200, 'hi')
```

```js
res.json({ a: 2 })
```
### [Request & response] Request

```js
// GET  /user/tj
req.path         //=> "/user/tj"
req.url          //=> "/user/tj"
req.xhr          //=> true|false
req.method       //=> "GET"
req.params
req.params.name  //=> "tj"
req.params[0]
```

```js
// GET /search?q=tobi+ferret
req.query.q // => "tobi ferret"
```

```js
req.cookies
```

```js
req.accepted
// [ { value: 'application/json', quality: 1, type: 'application', subtype: 'json' },
//   { value: 'text/html', quality: 0.5, type: 'text',subtype: 'html' } ]
```

```js
req.is('html')
req.is('text/html')
```

```js
req.headers
req.headers['host']
req.headers['user-agent']
req.headers['accept-encoding']
req.headers['accept-language']
```

### Helpers

```js
app.locals({
  title: "MyApp",
})
```

### Wares

```js
app.use(express.static(__dirname + '/public'))
app.use(express.logger())
```

### Config

```js
app.configure('production', function() {
  app.set...
})
```

### Env

```js
app.get('env')
```

### Settings

```js
app.set('x', 'yyy')
app.get('x') //=> 'yyy'

app.enable('trust proxy')
app.disable('trust proxy')

app.enabled('trust proxy') //=> true
```

### Reference
* [Express.Js Cheat Sheet](https://cheatsheetmaker.com/expressjs) - [Cheat Sheet Maker](https://cheatsheetmaker.com)
Javascript Date Cheat Sheet
Tags: javascript, cheatsheet
Published: 2021-05-13 10:27:59


### [Date] Setters

| Method                       | Result |
| ---                          | ---    |
| `.setDate` _(val)_           |        |
| `.setDay` _(val)_            |        |
| `.setFullYear` _(val)_       |        |
| `.setMonth` _(val)_          |        |
| ---                          | ---    |
| `.setHours` _(val)_          |        |
| `.setMinutes` _(val)_        |        |
| `.setSeconds` _(val)_        |        |
| `.setMilliseconds` _(val)_   |        |
| ---                          | ---    |
| `.setTime` _(val)_           |        |
| `.setTimezoneOffset` _(val)_ |        |

See the getters list.
### [Date] Getters

| Method                 | Result            |
| ---                    | ---               |
| `.getDate()`           | `1..31`           |
| `.getDay()`            | `0..6` (sun..sat) |
| `.getFullYear()`       | `2014`            |
| `.getMonth()`          | `0..11`           |
| ---                    | ---               |
| `.getHours()`          |                   |
| `.getMinutes()`        |                   |
| `.getSeconds()`        |                   |
| `.getMilliseconds()`   |                   |
| ---                    | ---               |
| `.getTime()`           | ms since epoch    |
| `.getTimezoneOffset()` |                   |

UTC versions are also available (eg, `.getUTCDate()`, `.getUTCDay()`, etc).

### [Date] Conversion

| Method                   | Result                                      |
| ---                      | ---                                         |
| `d.toString()`           | `"Mon Dec 29 2014 00:58:28 GMT+0800 (PHT)"` |
| `d.toTimeString()`       | `"00:58:46 GMT+0800 (PHT)"`                 |
| `d.toUTCString()`        | `"Sun, 28 Dec 2014 16:58:59 GMT"`           |
| ---                      | ---                                         |
| `d.toDateString()`       | `"Thu Jan 10 2013"`                         |
| `d.toISOString()`        | `"2013-01-09T16:00:00.000Z"`                |
| `d.toLocaleString()`     | `"12/29/2014, 12:57:31 AM"`                 |
| `d.toLocaleTimeString()` | `"12:57:31 AM"`                             |
| ---                      | ---                                         |
| `d.getTime()`            | `1419785527580`                             |

Accessing
---------

### [Date] Constructor

```js
// Now
new Date()
```

```js
// ms since epoch
new Date(1419785527580)
```

```js
// Date format
new Date("May 17, 1995 03:24:00")
```

```js
// ISO date format
new Date("2013-03-01T01:10:00")
```

```js
new Date(2014, 2, 1, 13, 0, 59, 0)
```

### Date

### Reference
* [Javascript Date Cheat Sheet](https://cheatsheetmaker.com/javascript-date) - [Cheat Sheet Maker](https://cheatsheetmaker.com)
Jquery Cdn Cheat Sheet
Tags: jquery, cdn, cheatsheet
Published: 2021-05-13 10:27:19


### Google jQuery

```html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
```
### Reference
* [Jquery Cdn Cheat Sheet](https://cheatsheetmaker.com/jquery-cdn) - [Cheat Sheet Maker](https://cheatsheetmaker.com)
Build Website with ReactJS, Styled-components and GSAP for Scrolling Animations
Tags: react, javascript, webdev, beginners
Published: 2021-05-13 10:25:10

Hi there,

Recently, I saw an website with cool scrolling effects and so I have decided to create website in ReactJS with cool scrolling animations using GSAP.

Here is the Demo Link:
https://agency-website-eta.vercel.app/

For this project I have used these libraries,
▶️ reactjs
▶️ GSAP for scrolling animations
▶️ Styled-Components
▶️ React-slick and slick-carousel for Carousal

First I have created design in Figma, and used some of it's awesome plugins and resources. I have listed all the resources used in this website in the github ReadMe file.

Here is the tutorial how I have created this website!

{% youtube aAEfBxcGpJ8 %} 

Things that I have learned building this project,
▶️ Good Folder structure for React Projects
▶️ How to create Hamburger Menu with only css
▶️ How we can leverage advantages of component structure
▶️ How to use GSAP in React JS for awesome animations while scrolling
▶️ Uses of Lazy and suspence in reactJS
▶️ Many awesome CSS animations etc.

> You can use this to learn or for your portfolio and if you want to use it else where small credit would be appreciated (not compulsory), just check license of all images and other assets before using it commercially.

I will try to improve it's speed and performance.
I haven't added react-router yet but if you want to create more pages then you can add it and feel free to create more sections.

Any suggestions are welcomed!

### Thanks For Reading😄

Feel free to visit my youtube channel: 
####[@CodeBucks](https://www.youtube.com/channel/UCeYt6blRBKuNrEg_-282fSA)

Follow me on Instagram where I'm sharing lot's of useful resources!
####[@code.bucks](https://www.instagram.com/code.bucks/) 😉
Bootstrap 4 Card Images – NodeJS/Express RestAPIs
Tags: bootstrap, node, express, restapi
Published: 2021-05-13 10:23:27

https://grokonez.com/node-js/bootstrap-4-card-images-nodejs-express-restapis

Bootstrap 4 Card Images – NodeJS/Express RestAPIs

In the tutorial, we will show you how to use new feature Bootstrap 4 Card Images to create cards with images from NodeJS/Express RestAPIs.

Related posts:
- <a href="https://grokonez.com/node-js/nodejs-express-bootstrap-image">NodeJS/Express – Bootstrap Image example</a>

<!--more-->
<h2>Goal</h2>
We create a NodeJS/Express project as below structure:

<pre><code class="language-javascript">
/NodeJS-Express-Bootstrap4-Card-Image
	/node_modules
	/resources
		/static
			/images
				jsa_about.png
				jsa_about_overlay.png
	/views
		404.html
		index.html
	package.json
	package-lock.json
	server.js
</code></pre>

Run above project then makes a request <code>http://localhost:8081</code>

-> Bootstrap view:

<img src="https://grokonez.com/wp-content/uploads/2018/05/NodeJS-Express-Bootstrap-4-Card-Image-view.png" alt="NodeJS-Express-Bootstrap-4-Card-Image-view" width="747" height="388" class="alignnone size-full wp-image-12380" />

To achieve above result, We use a new feature <strong>Card Images</strong> of Bootstrap 4:

<ul>
<li><code>.card-img-top</code> is used to place an image at top inside the card</li>
<li><code>.card-img-bottom</code> is used to place an image at bottom inside the card</li>
<li><code>.card-img-overlay</code> is used to turn an image into a card background and add text on top of the image</li>
</ul>

Details implementation:

– Setup Bootstrap 4:

More at:
https://grokonez.com/node-js/bootstrap-4-card-images-nodejs-express-restapis

Bootstrap 4 Card Images – NodeJS/Express RestAPIs
Map 和 Object 的区别
Published: 2021-05-13 10:19:42

---
title: Map 和 Object 的区别
published: true
---

![ss](https://biubiubiu.frontend.obs.cn-east-3.myhuaweicloud.com/blog/map-object-comparison.jpeg)

众所周知 `JavaScript` 的 `Object` 和 `Map` 这两种数据结构很相似，
但深究底层原理来看，这两者本质上还是存在了不少差异，通过区别比较能帮助我们更好地理解它们的用处和使用场景。

## 键类型

### Object

`Object` 的键必须是 `String` 或 `Symbol` 类型，并默认调用 `toString` 方法将键转化为 `String` 类型，因此可能会存在[同名键覆盖问题](#键唯一性)。

> 注：`Array` 和 `Function` 本质是对 `Object` 的继承，因此都有对应的 `toString` 方法。

#### 对象键

将对象作为键时会调用 `Object.toString` 方法将其转化为对象字符串 (`"[object Object]"`)。

```js
({}.toString()); // "[object Object]"

var obj = {};
obj[{}] = "ok";
console.log(JSON.stringifpwdy(obj)); // {"[object Object]":"ok"}
```

#### 数组键

将数组作为键时会调用 `Array.toString` 方法将其转化为空字符串 (`""`)。

```js
[].toString(); // ""

var obj = {};
obj[[]] = "ok";
console.log(JSON.stringify(obj)); // {"":"ok"}
```

#### 函数键

将函数作为键时会调用 `Function.toString` 方法将其转化为函数字符串 (`"() => {}"`)。

```js
(function test() => {}).toString(); // "() => {}"

var obj = {};
obj[() => {}] = "ok";
console.log(JSON.stringify(obj)); // {"() => {}":"ok"}
```

### Map

`Map` 支持任意类型的键。

> Map objects are collections of key/value pairs where both the keys and values may be arbitrary ECMAScript language values.

![map存储结构](https://biubiubiu.frontend.obs.cn-east-3.myhuaweicloud.com/blog/map-structure.png)

## 键唯一性

### Object 同名键覆盖

由于 `Object` 的键默认会调用 `toString` 方法，因此当前键如果是空对象（`{}`）或者空数组（`[]`）的话，多次赋值会出现被覆盖的情况。

```js
var obj = {};
obj[{}] = "step1";
obj[{}] = "step2";
console.log(JSON.stringify(obj)); // {"[object Object]":"step2"}
```

### Map 唯一键

在 `Map` 中每个键都是唯一的，在存储过程中 `Map` 会对存入键的 `类型` 或 `引用` 进行比较。假设当前 `Map` 存入了两个空对象（`{}`），两者类型相同，但在 `栈` 中引用的内存地址不同，那么 `Map` 就会认定为是两个独立键，示例如下：

![Map唯一键](https://biubiubiu.frontend.obs.cn-east-3.myhuaweicloud.com/blog/map-unique-key.png)

## 遍历次序

#### Object 无序

在遍历 `Object` 后得到的结果是一个无序列表。

```js
var obj = { 1: 1, 2: 2, a: "a", f: "f" };
console.log(Object.keys(obj)); // ["1", "2", "a", "f"]

obj = { a: "a", 1: 1, 2: 2, f: "f" };
console.log(Object.keys(obj)); // ["1", "2", "a", "f"]
```

#### Map 有序

在遍历 `Map` 后得到的结果是一个有序列表。

```js
var map = new Map();

map.set(1, 1);
map.set("a", "a");
map.set(2, 2);
console.log([...map.values()]); // [1, "a", 2]
```

## 可遍历

### Object

`Object` 没有实现遍历器（`@@iterator`）接口，无法使用 `for of` 遍历，但可以用 `for in` 等方法遍历。当然，`Object` 原生不支持但可以扩展 `@@iterator` 实现遍历，详见 [iterator](/docs/javascript/iterator)。

```js
var obj = { a: "a", 1: 1, 2: 2, f: "f" };

for (key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key);
  }
}

console.log(Object.keys(obj)); //  ["1", "2", "a", "f"]
```

### Map

`Map` 内部实现了遍历器（`@@iterator`）接口，可以使用 `for of` 遍历。

> Map.prototype [ @@iterator ] ( )

```js
var map = new Map();

map.set(1, 1);
map.set("a", "a");
map.set(2, 2);

for (item of map) {
  console.log(item);
}
```

## 继承关系

从原型链继承结构中，我们可以看到 `Map` 底层实际上是继承自 `Object` ，即 `Map` 是 `Object` 的实例对象，反之 `Object` 并不是 `Map` 的实例对象。

![map继承关系](https://biubiubiu.frontend.obs.cn-east-3.myhuaweicloud.com/blog/map-extend.png)

## 参考文档

[ECMA 官方文档](https://262.ecma-international.org/10.0/#sec-keyed-collections)