A lightweight JavaScript game engine
git clone git://soophie.de/game-engine
blob: fdf0a3dba3ed712bc20c8f688bda99f28874dc84 (7135 bytes)[doc][blame][raw]
1
<!DOCTYPE html>2
<html lang="en" dir="ltr">3
<head>4
<meta charset="utf-8">5
<meta name="viewport" content="width=device-width, initial-scale=1.0">6
<meta name="author" content="typable">7
<meta name="keywords" content="">8
<meta name="description" content="">9
<meta name="robots" content="noindex, nofollow">10
<meta name="google" content="notranslate">11
<title>git.typable</title>12
<link href="/asset/img/favicon.png" rel="shortcut icon" type="image/png">13
<link href="/asset/css/style.css" rel="stylesheet">14
<script src="/asset/js/index.js" type="module"></script>15
</head>16
<body>17
<main class="container-fluid">18
<div class="row">19
<div class="container">20
<aside>21
<h4 data-rel="top">JavaScript ES6 Features</h4>22
<ul>23
<li data-rel="introduction">Introduction</li>24
<li data-rel="scoping">Scoping</li>25
<li data-rel="constants">Constants</li>26
<li data-rel="extended-parameter-handling">Extended Parameter Handling</li>27
<li data-rel="template-literals">Template Literals</li>28
<li data-rel="enhanced-object-properties">Enhanced Object Properties</li>29
<li data-rel="destructuring-assignment">Destructuring Assignment</li>30
<li data-rel="modules">Modules</li>31
<li data-rel="classes">Classes</li>32
<li data-rel="promises">Promises</li>33
<li data-rel="internationalization-localization">Internationalization & Localization</li>34
</ul>35
</aside>36
<ul class="breadcrumb">37
<li><a href="/">Home</a></li>38
<li><a href="/blog">Blog</a></li>39
<li>JavaScript ES6 Features</li>40
</ul>41
<h1>JavaScript ES6 Features</h1>42
<p class="subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>43
<h2 data-ref="introduction">Introduction</h2>44
<p class="subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>45
<p>Source: <a href="http://es6-features.org">ES6 Features</a></p>46
<h2 data-ref="scoping">Scoping</h2>47
<code><pre><span class="c">for</span>(<span class="c">let</span> <span class="n">item</span> <span class="c">of</span> <span class="n">document</span>.<span class="p">querySelectorAll</span>(<span class="s">'.item'</span>)) {48
<span class="n">item</span>.<span class="n">onclick</span> = <span class="c">function</span>() {49
<span class="n">console</span>.<span class="p">log</span>(<span class="s">'Index: '</span> + <span class="n">item</span>.<span class="n">dataset</span>.<span class="n">index</span>);50
}51
}</pre></code>52
<h2 data-ref="constants">Constants</h2>53
<code><pre><span class="c">const</span> <span class="n">id</span> = <span class="s">'cache.custom'</span>;</pre></code>54
<h2 data-ref="extended-parameter-handling">Extended Parameter Handling</h2>55
<h4>Default Parameter Values</h4>56
<code><pre><span class="c">function</span> <span class="n">f</span>(<span class="n">x</span> = <span class="n">5</span>, <span class="n">b</span> = <span class="c">true</span>) { ... }</pre></code>57
<div class="space-1"></div>58
<h4>Rest Parameter</h4>59
<code><pre><span class="c">function</span> <span class="n">f</span>(<span class="n">x</span>, <span class="n">y</span>, ...<span class="n">a</span>) { ... }</pre></code>60
<div class="space-1"></div>61
<h4>Spread Parameter</h4>62
<code><pre><span class="c">const</span> <span class="n">a</span> = [<span class="n">1</span>, <span class="n">2</span>, ...<span class="n">params</span>];</pre></code>63
<code><pre><span class="n">f</span>(...<span class="n">a</span>);</pre></code>64
<h2 data-ref="template-literals">Template Literals</h2>65
<h4>String Interpolation</h4>66
<code><pre><span class="c">const</span> <span class="n">s</span> = <span class="s">`Hello </span><span class="c">${</span><span class="n">user</span>.<span class="n">name</span><span class="c">}</span><span class="s">!`</span>;</pre></code>67
<div class="space-1"></div>68
<h4>Custom Interpolation</h4>69
<code><pre><span class="n">foo</span><span class="s">`Hello </span><span class="c">${</span><span class="n">user</span>.<span class="n">name</span><span class="c">}</span><span class="s">!`</span>;71
<span class="c">function</span> <span class="n">foo</span>(<span class="n">strings</span>, ...<span class="n">props</span>) {72
<span class="x">// Handle interpolation</span>73
}</pre></code>74
<h2 data-ref="enhanced-object-properties">Enhanced Object Properties</h2>75
<h4>Property Shorthand</h4>76
<code><pre><span class="c">const</span> <span class="n">x</span> = <span class="n">5</span>, <span class="n">y</span> = <span class="n">0</span>;77
<span class="c">const</span> <span class="n">p</span> = { <span class="n">x</span>, <span class="n">y</span> };</pre></code>78
<h2 data-ref="destructuring-assignment">Destructuring Assignment</h2>79
<h4>Array Matching</h4>80
<code><pre><span class="c">const</span> [<span class="n">a</span>, , <span class="n">c</span>] = [<span class="n">1</span>, <span class="n">2</span>, <span class="n">3</span>];</pre></code>81
<div class="space-1"></div>82
<h4>Object Matching & Deep Matching</h4>83
<code><pre><span class="c">const</span> { <span class="n">x</span>, <span class="n">y</span> } = { <span class="n">x</span>: <span class="n">5</span>, <span class="n">y</span>: <span class="n">0</span>, <span class="n">b</span>: <span class="c">false</span> };84
<span class="c">const</span> { <span class="n">event</span>: { <span class="n">type</span> }, <span class="n">b</span>: <span class="n">valid</span> } = { <span class="n">event</span>: { <span class="n">type</span>: <span class="s">'click'</span> }, <span class="n">b</span>: <span class="c">true</span> };</pre></code>85
<div class="space-1"></div>86
<h4>Parameter Context Matching</h4>87
<code><pre><span class="c">function</span> <span class="n">f</span>({ <span class="n">name</span>, <span class="n">email</span> }) { ... }</pre></code>88
<h2 data-ref="modules">Modules</h2>89
<h4>Value Export & Import</h4>90
<div class="space-1"></div>91
<h4>Default & Wildcard</h4>92
<h2 data-ref="classes">Classes</h2>93
<h4>Static Members</h4>94
<div class="space-1"></div>95
<h4>Getter & Setter</h4>96
<h2 data-ref="promises">Promises</h2>97
<h4>async & await</h4>98
<div class="space-1"></div>99
<h4>Promise Combination</h4>100
<h2 data-ref="internationalization-localization">Internationalization & Localization</h2>101
<h4>Number Formatting</h4>102
<div class="space-1"></div>103
<h4>Currency Formatting</h4>104
<div class="space-1"></div>105
<h4>Date & Time Formatting</h4>106
</div>107
</div>108
</main>109
<footer class="container-fluid">110
<div class="row">111
<div class="container">112
<p>© typable 2021</p>113
<a href="https://www.buymeacoffee.com/typable">Donate</a>114
<a href="https://typable.dev/imprint">Imprint</a>115
<a href="https://typable.dev/terms">Terms</a>116
</div>117
</div>118
</footer>119
</body>120
</html>