5,321
edits
JavaScript: Difference between revisions
→Map
(→Map) |
|||
| (8 intermediate revisions by the same user not shown) | |||
| Line 3: | Line 3: | ||
==Usage== | ==Usage== | ||
For basic dom manipulation, see [https://htmldom.dev/ https://htmldom.dev/]. | |||
===Inputs=== | ===Inputs=== | ||
| Line 92: | Line 93: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
==Promises== | ===Promises=== | ||
Added in ES2015 (ES6)<br> | |||
See [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promises]<br> | See [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise Promises]<br> | ||
In general, a function returns a promise if it needs to perform asyncronous tasks.<br> | In general, a function returns a promise if it needs to perform asyncronous tasks.<br> | ||
| Line 114: | Line 116: | ||
}); | }); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
===Async-await=== | |||
Added in ES2017<br> | |||
See [https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await Async_await]<br> | |||
Async functions return implicit promises. They allow you to use keyword <code>await</code> to get results from other promises or functions. | |||
==Compilation== | ==Compilation== | ||
| Line 173: | Line 180: | ||
===Map=== | ===Map=== | ||
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map | [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map MDN Map] | ||
[https://www.ecma-international.org/ecma-262/10.0/index.html#sec-map-objects ES2019 (ES10) Map Specification] | |||
This is your typical hashmap. | |||
<syntaxhighlight lang="js"> | <syntaxhighlight lang="js"> | ||
let myMap = new Map(); | let myMap = new Map(); | ||
let keyObj | let keyObj = {}; | ||
// Set value | // Set value | ||
| Line 200: | Line 210: | ||
* Do not use <code>[]</code> to get or set from the map | * Do not use <code>[]</code> to get or set from the map | ||
* Iterating over a Map will be in order of insertion | * Iterating over a Map will be in order of insertion | ||
;Saving as json | |||
See [https://2ality.com/2015/08/es6-map-json.html es6 map json]<br> | |||
<syntaxhighlight lang="javascript"> | |||
const data = JSON.stringify([...myMap]); | |||
myMap = new Map(JSON.parse(data)); | |||
</syntaxhighlight> | |||
===Set=== | ===Set=== | ||
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set MDN Set] | |||
<syntaxhighlight lang="js"> | |||
let my_set = new Set(); | |||
// Returns the set itself | |||
my_set.add(key); | |||
my_set.has(key); | |||
my_set.clear(); | |||
// Returns if key has in the set | |||
my_set.delete(key); | |||
</syntaxhighlight> | |||
===WeakMap=== | ===WeakMap=== | ||
| Line 221: | Line 253: | ||
==Modules== | ==Modules== | ||
These days, we can use modules for everything. | |||
===Getting Started=== | ===Getting Started=== | ||
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules MDN Guide to Modules]<br> | [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules MDN Guide to Modules]<br> | ||
Example Module | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
// Import three.js as a module. webpack will resolve this. | |||
import * as THREE from 'three'; | |||
// Import MyClass as a module. webpack will resolve this. | |||
import MyClass from "./MyClass.js"; | |||
// Pretend we're writing another class | |||
export default class MyOtherClass { | |||
constructor() {} | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||