981 lines
62 KiB
HTML
981 lines
62 KiB
HTML
<!doctype html>
|
||
<html class='NoJs' lang='en'><head>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta charset='utf-8'>
|
||
<meta content='width=device-width, initial-scale=1.0' name='viewport'>
|
||
<link href='./assets/favicon.png' rel='shortcut icon'>
|
||
<meta content='/es6.html' name='app:pageurl'>
|
||
|
||
|
||
<title>ES2015+ cheatsheet</title>
|
||
<meta content='ES2015+ cheatsheet' property='og:title'>
|
||
<meta content='ES2015+ cheatsheet' property='twitter:title'>
|
||
<meta content='article' property='og:type'>
|
||
|
||
|
||
|
||
<meta content='https://assets.devhints.io/previews/es6.jpg?t=20231011104129' property='og:image'>
|
||
<meta content='https://assets.devhints.io/previews/es6.jpg?t=20231011104129' property='twitter:image'>
|
||
<meta content='900' property='og:image:width'>
|
||
<meta content='471' property='og:image:height'>
|
||
|
||
|
||
|
||
<meta content="One-page guide to ES2015+: usage, examples, and more. A quick overview of new JavaScript features in ES2015, ES2016, ES2017, ES2018 and beyond." name="description">
|
||
<meta content="One-page guide to ES2015+: usage, examples, and more. A quick overview of new JavaScript features in ES2015, ES2016, ES2017, ES2018 and beyond." property="og:description">
|
||
<meta content="One-page guide to ES2015+: usage, examples, and more. A quick overview of new JavaScript features in ES2015, ES2016, ES2017, ES2018 and beyond." property="twitter:description">
|
||
|
||
|
||
<link rel="canonical" href="https://devhints.io/es6">
|
||
<meta name="og:url" content="https://devhints.io/es6">
|
||
|
||
|
||
|
||
|
||
|
||
<meta content='Devhints.io cheatsheets' property='og:site_name'>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<meta content='JavaScript' property='article:section'>
|
||
|
||
|
||
|
||
|
||
<meta content='Featured' property='article:tag'>
|
||
|
||
|
||
|
||
|
||
<script async src='https://www.googletagmanager.com/gtag/js?id=G-N7TC6B227L'></script>
|
||
<script>
|
||
|
||
window.dataLayer=window.dataLayer||[];
|
||
function gtag(){dataLayer.push(arguments)};
|
||
gtag('js',new Date());
|
||
gtag('config','G-N7TC6B227L');
|
||
</script>
|
||
|
||
|
||
|
||
<meta property='page:depth' content='1'>
|
||
|
||
|
||
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
|
||
<script>(function(H){H.className=H.className.replace(/\bNoJs\b/,'WithJs')})(document.documentElement)</script>
|
||
|
||
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>
|
||
|
||
<!--[if lt IE 9]><script src='https://cdnjs.cloudflare.com/ajax/libs/nwmatcher/1.2.5/nwmatcher.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.js'></script><script src='https://cdn.rawgit.com/gisu/selectivizr/1.0.3/selectivizr.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js'></script><![endif]-->
|
||
|
||
|
||
<!-- critical css -->
|
||
<style id='critical-css'>*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{cursor:default;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-break:break-word}body{margin:0}h1{font-size:2em;margin:.67em 0}dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{margin:0}hr{height:0;overflow:visible}main{display:block}nav ol,nav ul{list-style:none;padding:0}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe,img{border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}table{border-collapse:collapse}button,input,select{margin:0}button{overflow:visible;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}fieldset{border:1px solid #a0a0a0;padding:.35em .75em .625em}input{overflow:visible}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}select{text-transform:none}textarea{margin:0;overflow:auto;resize:vertical}[type=checkbox],[type=radio]{padding:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}details,dialog{display:block}dialog{background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}dialog:not([open]){display:none}summary{display:list-item}canvas{display:inline-block}template{display:none}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[hidden]{display:none}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0,0,0,0);position:absolute}body,html{background:#f1f3f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;line-height:1.6;color:#345;overflow-x:hidden}body{font-size:13px;padding:0;margin:0}@media (min-width:480px) and (max-width:768px){body{font-size:calc(13px + 1*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){body{font-size:calc(14px + 0*(100vw - 768px)/512)}}@media (min-width:1280px){body{font-size:14px}}code,pre{font-family:cousine,SFMono-Regular,Consolas,Menlo,Liberation Mono,Ubuntu Mono,Courier,monospace;letter-spacing:-.03em}pre{font-size:.96em}:not(pre):not(code){-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:#26648e}a:visited{color:#15234d}a:hover{color:#3ac1cb}@media (max-width:580px){.hint--bottom:after,.hint--bottom:before{display:none}}html.WithJs .post-content{opacity:0}html.WithJs .intro-content,html.WithJs .pages-list,html.WithJs .post-content.-wrapified{opacity:.98}html.WithJs.LoadDone .intro-content,html.WithJs.LoadDone .pages-list,html.WithJs.LoadDone .post-content.-wrapified{opacity:1;transition:opacity .1s linear .1s}.MarkdownBody.MarkdownBody a+em{opacity:.5}.MarkdownBody code{color:#567;font-size:.96em}.MarkdownBody code,.MarkdownBody pre{font-family:cousine,SFMono-Regular,Consolas,Menlo,Liberation Mono,Ubuntu Mono,Courier,monospace}.MarkdownBody pre.-box-chars{line-height:1.32}.MarkdownBody pre.-figlet{line-height:1;font-size:11px}.MarkdownBody pre{box-shadow:none;border-left:0;overflow:hidden;overflow-x:auto;background:#fff;font-size:.96em;line-height:1.5}.MarkdownBody pre.-wrap{white-space:pre-wrap}.MarkdownBody pre>code{color:#111;max-height:auto;padding:0;background:transparent;overflow:visible;font-size:1em}.MarkdownBody .line-highlight{transform:translate3d(0,2px,0);background:linear-gradient(90deg,rgba(20,175,131,.05) 25%,transparent)}.MarkdownBody .line-highlight[data-end]{margin-top:0}.MarkdownBody .line-highlight:after,.MarkdownBody .line-highlight:before{display:none}.MarkdownBody p.-crosslink,.MarkdownBody p.-setup,.MarkdownBody pre.-setup,.MarkdownBody ul.-setup{background:#f8f9fa}.token.keyword,.token.tag{color:#26648e}.token.tag{color:#1d406e}.token.attr-value,.token.boolean,.token.number,.token.regex,.token.string,.token.value{color:#14af83}.token.attr-name,.token.function{color:#2e90ae}.token.operator,.token.punctuation{color:#669}.token.comment{color:#569}.MarkdownBody h2{padding:0;position:relative;font-size:30.0697899531px;line-height:1.2;font-weight:200;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0 0 24px}@media (max-width:768px){.MarkdownBody h2{margin-bottom:8px;margin-top:32px}}@media (max-width:480px){.MarkdownBody h2{margin-bottom:8px;margin-top:32px}}@media (min-width:480px) and (max-width:768px){.MarkdownBody h2{font-size:calc(30.06979px + 4.03976*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.MarkdownBody h2{font-size:calc(34.10955px + 1.80275*(100vw - 768px)/512)}}@media (min-width:1280px){.MarkdownBody h2{font-size:35.9122988248px}}.MarkdownBody h2:target{color:#745fb5}.MarkdownBody h3{padding:0;margin:0 0 16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:17.1925px;font-weight:400;color:#745fb5}@media (min-width:480px) and (max-width:768px){.MarkdownBody h3{font-size:calc(17.1925px + 1.6459*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.MarkdownBody h3{font-size:calc(18.8384px + 0.3262*(100vw - 768px)/512)}}@media (min-width:1280px){.MarkdownBody h3{font-size:19.1646px}}.MarkdownBody a,.MarkdownBody a:visited{color:#26648e;text-decoration:none}.MarkdownBody a:hover{text-decoration:underline}.MarkdownBody em{font-style:normal;color:#567}.MarkdownBody iframe{border:0;margin:0;width:100%}.local-anchor{margin-left:-.9em;margin-right:.1em;padding:0 .1em}.MarkdownBody .local-anchor,.MarkdownBody .local-anchor:visited{color:#567;text-decoration:inherit;opacity:.5}.MarkdownBody .local-anchor:target,.MarkdownBody :target>.local-anchor{color:#745fb5;opacity:1}.MarkdownBody .local-anchor:focus,.MarkdownBody .local-anchor:hover{color:#fff;background:#745fb5;opacity:1;text-decoration:inherit}.MarkdownBody.MarkdownBody img{max-width:100%}.MarkdownBody.MarkdownBody p.-crosslink>a{display:block;text-decoration:none;color:#745fb5;border-bottom:0;box-shadow:none;margin:-16px;padding:16px}.MarkdownBody.MarkdownBody p.-crosslink>a:visited{color:#745fb5}.MarkdownBody.MarkdownBody p.-crosslink>a:before{content:"";display:inline-block;vertical-align:middle;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23FFF' d='M85 277.375h259.704L225.002 397.077 256 427l171-171L256 85l-29.922 29.924 118.626 119.7H85v42.75z'/%3E%3C/svg%3E") 50%/16px 16px no-repeat;height:16px;width:16px;margin-right:16px;width:32px;height:32px;line-height:32px;border-radius:50%}.MarkdownBody.MarkdownBody p.-crosslink>a:before,.MarkdownBody.MarkdownBody p.-crosslink>a:visited:before{background-color:#745fb5;color:#fff}.MarkdownBody.MarkdownBody p.-crosslink>a:focus,.MarkdownBody.MarkdownBody p.-crosslink>a:hover{color:#673d85}.MarkdownBody.MarkdownBody p.-crosslink>a:focus:before,.MarkdownBody.MarkdownBody p.-crosslink>a:hover:before{background-color:#673d85}.MarkdownBody table{width:100%}.MarkdownBody table tr+tr{border-top:1px solid rgba(85,102,119,.18)}.MarkdownBody table tbody+tbody{border-top:1px solid rgba(85,102,119,.3)}.MarkdownBody table td,.MarkdownBody table th{padding:8px 16px;vertical-align:top;text-align:left}.MarkdownBody table tr td:last-child,.MarkdownBody table tr th:last-child{text-align:right}.MarkdownBody table td:first-child{white-space:nowrap}.MarkdownBody table td>code{font-size:.96em}.MarkdownBody table td:first-child>code{color:#35a}.MarkdownBody table a,.MarkdownBody table a:visited{color:#35a;text-decoration:none}.MarkdownBody table td:first-child>code~em{font-size:11.3043478261px;font-style:normal;color:#567}@media (min-width:480px) and (max-width:768px){.MarkdownBody table td:first-child>code~em{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.MarkdownBody table td:first-child>code~em{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){.MarkdownBody table td:first-child>code~em{font-size:11.9658119658px}}.MarkdownBody table thead{display:none}.MarkdownBody table thead th{font-weight:400;color:#745fb5}.MarkdownBody table.-shortcuts-right td:last-child>code,.MarkdownBody table.-shortcuts td:first-child>code{font-size:1rem;padding:5px 6px 5px 8px;background:#f8f9fa;border-radius:3px;margin-right:2px;letter-spacing:.1em;color:#345}.MarkdownBody table.-left-align tr td,.MarkdownBody table.-left-align tr td:last-child,.MarkdownBody table.-left-align tr th{text-align:left}.MarkdownBody table.-headers thead{display:table-header-group;border-bottom:1px solid rgba(85,102,119,.3)}.MarkdownBody table.-key-values tbody tr td+td code{display:block;text-align:left}.MarkdownBody table.-css-breakdown tr td,.MarkdownBody table.-css-breakdown tr td:last-child,.MarkdownBody table.-css-breakdown tr th{text-align:left}.MarkdownBody table.-css-breakdown tr td{font-size:14.95px;white-space:nowrap}@media (min-width:480px) and (max-width:768px){.MarkdownBody table.-css-breakdown tr td{font-size:calc(14.95px + 1.29*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.MarkdownBody table.-css-breakdown tr td{font-size:calc(16.24px + 0.14*(100vw - 768px)/512)}}@media (min-width:1280px){.MarkdownBody table.-css-breakdown tr td{font-size:16.38px}}.MarkdownBody table.-css-breakdown tr td:not(:last-child){padding-right:4px}.MarkdownBody table.-css-breakdown tr td:not(:first-child){padding-left:4px}.MarkdownBody table.-css-breakdown tr:last-child{background:#f8f9fa}.MarkdownBody table.-css-breakdown tr:last-child td{font-size:11.3043478261px;color:#567;white-space:auto}@media (min-width:480px) and (max-width:768px){.MarkdownBody table.-css-breakdown tr:last-child td{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.MarkdownBody table.-css-breakdown tr:last-child td{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){.MarkdownBody table.-css-breakdown tr:last-child td{font-size:11.9658119658px}}.MarkdownBody table.-bold-first tr>td:first-child{font-weight:700}.MarkdownBody table.-no-wrap td,.MarkdownBody table.-no-wrap th{white-space:nowrap}.MarkdownBody table.-mute-em td em,.MarkdownBody table.-mute-em th em{opacity:.5}.MarkdownBody table.-mute-em td em>code,.MarkdownBody table.-mute-em th em>code{margin-right:.5em}.MarkdownBody table tr.separator>td{padding:0;height:4px;background:rgba(85,102,119,.18);box-shadow:inset 0 1px 0 rgba(85,102,119,.3),inset 0 2px 4px rgba(85,102,119,.18)}.MarkdownBody ul.-six-column{display:flex;flex-wrap:wrap}.MarkdownBody ul.-six-column>li{flex:0 0 16.6666666667%}@media (max-width:480px){.MarkdownBody ul.-six-column>li{flex:0 0 50%}}@media (max-width:768px){.MarkdownBody ul.-six-column>li{flex:0 0 25%}}.MarkdownBody ul.-four-column{display:flex;flex-wrap:wrap}.MarkdownBody ul.-four-column>li{flex:0 0 25%}@media (max-width:480px){.MarkdownBody ul.-four-column>li{flex:0 0 50%}}@media (max-width:768px){.MarkdownBody ul.-four-column>li{flex:0 0 33.3333333333%}}.back-button{text-decoration:none;width:48px;height:48px;line-height:46px;text-align:center;display:inline-block;border-radius:50%;transition:all .1s linear}@media (max-width:480px){.back-button{width:32px;height:32px;line-height:30px}}.back-button,.back-button:visited{color:#567}.back-button:focus,.back-button:hover{color:#fff;background:#745fb5;opacity:1}.back-button:before{content:"";display:inline-block;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23345' d='M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.7H427v-42.75z'/%3E%3C/svg%3E") 50%/24px 24px no-repeat;height:24px;width:24px;vertical-align:middle}.back-button:focus:before,.back-button:hover:before{display:inline-block;vertical-align:middle;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23FFF' d='M427 234.625H167.296l119.702-119.702L256 85 85 256l171 171 29.922-29.924-118.626-119.7H427v-42.75z'/%3E%3C/svg%3E") 50%/24px 24px no-repeat;height:24px;width:24px}@media (max-width:480px){.back-button:before{font-size:16px}}.body-area{max-width:1232px;margin:0 auto;padding:16px}@media (max-width:480px){.body-area{padding:16px}}.body-area.-slim{max-width:740px}.h3-section>.body>.gatsby-highlight>pre,.h3-section>.body>pre{margin:0;padding:16px}@media (max-width:768px){.h3-section>.body{overflow-x:auto}}.h3-section>.body{background:#fff;box-shadow:0 6px 8px rgba(85,102,119,.03),0 1px 1px rgba(85,102,119,.4)}@media (max-width:480px){.h3-section>.body{margin:0 -16px;box-shadow:0 1px 1px rgba(85,102,119,.55)}}@media (min-width:481px){.h3-section>.body{border-radius:2px}.h3-section>.body>:first-child{border-top-left-radius:3px;border-top-right-radius:3px}.h3-section>.body>:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px}}.h3-section>h3{margin-top:8px;margin-bottom:16px;white-space:nowrap;overflow:hidden}@media (max-width:768px){.h3-section>h3{margin-top:0}}.h3-section>h3:after{margin-left:24px;content:"";display:inline-block;vertical-align:middle;width:100%;height:1px;background:linear-gradient(90deg,rgba(116,95,181,.2),transparent 80%)}.h3-section>.body>ul{margin:0;padding:0;list-style-type:none}.h3-section>.body>ul>li{padding:8px 8px 8px 36px;position:relative}.h3-section>.body>ul>li>p{margin:0;padding:0}.h3-section>.body>ul>li:before{content:"";position:absolute;display:inline-block;width:4px;height:4px;background:#567;border-radius:50%;left:16px;top:18px}.h3-section>.body>ul>li+li{border-top:1px solid rgba(85,102,119,.18)}.h3-section>.body>p{padding:16px;margin:0}.h3-section>.body>h4{font-size:11.3043478261px;margin:0;padding:4px 16px;font-weight:400;background:#f8f9fa;color:#567}@media (min-width:480px) and (max-width:768px){.h3-section>.body>h4{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.h3-section>.body>h4{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){.h3-section>.body>h4{font-size:11.9658119658px}}.h3-section>.body>h4+*{border-top:1px solid rgba(85,102,119,.18)}.h3-section>.body p{background:#f8f9fa;color:#345}.h3-section>.body p a,.h3-section>.body p a:visited{color:#345;text-decoration:none;border-bottom:1px solid rgba(85,102,119,.18)}.h3-section>.body p a:hover{color:#26648e}.h3-section>.body>:not(:first-child){border-top:1px solid rgba(85,102,119,.18)}.h3-section>.body>p+p,.h3-section>.body>p+p:not(:first-child){margin-top:-1.5em;border-top:0}@media (min-width:481px){.h3-section.-prime>.body{border-radius:2px;box-shadow:0 6px 8px rgba(85,102,119,.03),0 1px 1px rgba(85,102,119,.4),0 8px 12px rgba(58,193,203,.1)}}ul.-also-see.-also-see.-also-see{display:flex;flex-wrap:wrap;background:#f8f9fa}ul.-also-see.-also-see.-also-see>li{flex:1 0 20%;padding:24px;border-top:1px solid rgba(85,102,119,.3)}ul.-also-see.-also-see.-also-see>li+li{border-left:1px solid rgba(85,102,119,.3)}ul.-also-see.-also-see.-also-see,ul.-also-see.-also-see.-also-see>li{list-style-type:none}ul.-also-see.-also-see.-also-see>li:before{display:none}ul.-also-see.-also-see.-also-see>li>a{font-size:14.95px;display:block}@media (min-width:480px) and (max-width:768px){ul.-also-see.-also-see.-also-see>li>a{font-size:calc(14.95px + 1.29*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){ul.-also-see.-also-see.-also-see>li>a{font-size:calc(16.24px + 0.14*(100vw - 768px)/512)}}@media (min-width:1280px){ul.-also-see.-also-see.-also-see>li>a{font-size:16.38px}}ul.-also-see.-also-see.-also-see>li>em{font-size:11.3043478261px;display:block}@media (min-width:480px) and (max-width:768px){ul.-also-see.-also-see.-also-see>li>em{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){ul.-also-see.-also-see.-also-see>li>em{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){ul.-also-see.-also-see.-also-see>li>em{font-size:11.9658119658px}}.h3-section.-intro>.body>p{font-size:14.95px}@media (min-width:480px) and (max-width:768px){.h3-section.-intro>.body>p{font-size:calc(14.95px + 1.29*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.h3-section.-intro>.body>p{font-size:calc(16.24px + 0.14*(100vw - 768px)/512)}}@media (min-width:1280px){.h3-section.-intro>.body>p{font-size:16.38px}}.h3-section.-intro>.body>ul>li{padding-left:16px;position:relative}.h3-section.-intro>.body>ul>li:before{display:none}.h3-section.-intro>.body>ul>li>a{font-size:14.95px;display:block;font-weight:700}@media (min-width:480px) and (max-width:768px){.h3-section.-intro>.body>ul>li>a{font-size:calc(14.95px + 1.29*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.h3-section.-intro>.body>ul>li>a{font-size:calc(16.24px + 0.14*(100vw - 768px)/512)}}@media (min-width:1280px){.h3-section.-intro>.body>ul>li>a{font-size:16.38px}}.h3-section.-intro>.body>ul>li>a:before{content:"";display:inline-block;vertical-align:middle;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23969BCF' d='M85 277.375h259.704L225.002 397.077 256 427l171-171L256 85l-29.922 29.924 118.626 119.7H85v42.75z'/%3E%3C/svg%3E") 50%/24px 24px no-repeat;height:24px;width:24px;position:absolute;right:16px;top:50%;margin-top:-12px}.h3-section.-intro>.body>ul>li:hover>a:before{display:inline-block;vertical-align:middle;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23745FB5' d='M85 277.375h259.704L225.002 397.077 256 427l171-171L256 85l-29.922 29.924 118.626 119.7H85v42.75z'/%3E%3C/svg%3E") 50%/24px 24px no-repeat;height:24px;width:24px}.h3-section.-intro>.body>ul>li>a:after{content:"";position:absolute;display:block;top:0;left:0;bottom:0;right:0}.h3-section.-intro>.body>ul>li em{color:#567}.h3-section-list{margin:0 -16px}@media (max-width:1264px){.h3-section-list{margin-left:-8px;margin-right:-8px}}.h3-section-list:after{content:"";display:table;clear:both;zoom:1}.h3-section-list>.h3-section{padding:16px;float:left;width:100%}@media (max-width:1264px){.h3-section-list>.h3-section{padding:8px}}@media (min-width:769px){.h3-section-list>.h3-section{padding-top:0}}@media (min-width:769px){.h3-section-list.-two-column>.h3-section,.h3-section-list>.h3-section{width:50%}}.h3-section-list.-one-column>.h3-section{width:100%}.h3-section-list.-one-column>.h3-section+.h3-section{margin-top:16px}@media (min-width:769px){.h3-section-list.-three-column>.h3-section{width:50%}}@media (min-width:961px){.h3-section-list.-three-column>.h3-section{width:33.33%}}@media (min-width:769px){.h3-section-list.-left-reference>.h3-section{width:50%}}@media (min-width:961px){.h3-section-list.-left-reference>.h3-section{width:66.67%}.h3-section-list.-left-reference>.h3-section:first-child{width:33.33%}}.HeadlinePub .carbon-img,.HeadlinePub .carbon-poweredby,.HeadlinePub .carbon-text{text-decoration:none}.HeadlinePub .carbon-poweredby,.HeadlinePub .carbon-text{padding-top:4px;padding-bottom:4px}.HeadlinePub .carbon-img>img{width:130px;height:100px;box-shadow:0 6px 8px rgba(85,102,119,.03),0 1px 1px rgba(85,102,119,.4);border-radius:3px;background:rgba(85,102,119,.2);color:transparent}.HeadlinePub .carbon-img:hover img{transform:translate3d(0,-1px,0);box-shadow:0 6px 8px rgba(85,102,119,.03),0 1px 1px rgba(85,102,119,.4),0 8px 12px rgba(58,193,203,.1)}.HeadlinePub .carbon-text,.HeadlinePub .carbon-text:visited{color:#345}.HeadlinePub .carbon-text:after{content:" "}.HeadlinePub .carbon-poweredby:hover,.HeadlinePub .carbon-text:hover{color:#26648e}.HeadlinePub .carbon-poweredby,.HeadlinePub .carbon-poweredby:visited{display:block;margin-top:8px;white-space:nowrap;color:#567}.HeadlinePub{position:relative;display:block;margin-left:auto;margin-right:auto}.HeadlinePub #carbonads~.placeholder{opacity:0;transition:opacity .25s linear;pointer-events:none}.HeadlinePub>.placeholder{background-image:linear-gradient(92deg,rgba(85,102,119,.1),rgba(85,102,119,.17) 15%,rgba(85,102,119,.1) 30%);background-size:450px 100%;animation:placeholder-swish 2.5s ease-in-out infinite;border-radius:3px;position:absolute;display:block}.HeadlinePub>.placeholder.-one{left:0;top:0;width:130px;height:100px}.HeadlinePub>.placeholder.-four,.HeadlinePub>.placeholder.-three,.HeadlinePub>.placeholder.-two{left:154px;top:6px;height:8px;width:226px}.HeadlinePub>.placeholder.-three{top:28px}.HeadlinePub>.placeholder.-four{top:50px;width:63.28px}.HeadlinePub #carbonads{position:relative;z-index:1}.HeadlinePub,.HeadlinePub>div>span{display:block;width:380px;height:100px;text-align:left}.HighlightPubFirstLine .HeadlinePub>div>span:first-line{font-weight:700}.HeadlinePub>div>span:after{content:"";display:table;clear:both;zoom:1}.HeadlinePub .carbon-img{float:left;margin-right:24px}#carbonads{animation:pub-text-enter .5s ease-out}@keyframes placeholder-swish{0%{background-position:-150px 0}50%{background-position:300px 0}to{background-position:300px 0}}@keyframes pub-text-enter{0%{opacity:0;transform:scale(.9)}to{opacity:1}}.main-heading{padding:0;margin:64px 0 24px;position:relative}@media (max-width:768px){.main-heading{margin-bottom:8px;margin-top:32px}}@media (max-width:480px){.main-heading{margin-bottom:8px;margin-top:32px}}.main-heading{margin-top:0;margin-bottom:0}.main-heading>h1{font-size:39.767297213px;line-height:1.2;font-weight:200;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;text-align:center}@media (min-width:480px) and (max-width:768px){.main-heading>h1{font-size:calc(39.7673px + 6.13051*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.main-heading>h1{font-size:calc(45.89781px + 3.26254*(100vw - 768px)/512)}}@media (min-width:1280px){.main-heading>h1{font-size:49.1603458612px}}.main-heading>h1>em{font-style:normal;color:#89a}.main-heading>.pubbox{margin-top:16px;text-align:center}@media (min-width:769px){.main-heading>.pubbox{margin-top:24px;margin-bottom:24px}}@media (min-width:769px){.UseCompactHeader .main-heading{display:flex;align-items:flex-end;margin-bottom:32px}.UseCompactHeader .main-heading>h1{flex:1 0 auto;text-align:left;padding-right:32px}.UseCompactHeader .main-heading>.pubbox{flex:0 0 auto;margin-top:0;margin-bottom:0}}.PreviewMode .main-heading{margin-top:16px}.page-actions{margin:0;padding:0;height:32px}.page-actions>.link.link>a{display:inline-block;height:32px;line-height:32px;vertical-align:top;width:auto}.page-actions>li{margin:0;padding:0;list-style-type:none}.page-actions>li>a,.page-actions>li>a:visited{color:#567;text-decoration:none}.page-actions>li>a:focus,.page-actions>li>a:focus>.text,.page-actions>li>a:hover,.page-actions>li>a:hover>.text{color:#745fb5}.page-actions>li>a>.text{font-size:11.3043478261px;display:none}@media (min-width:480px) and (max-width:768px){.page-actions>li>a>.text{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.page-actions>li>a>.text{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){.page-actions>li>a>.text{font-size:11.9658119658px}}.page-actions>li>a>.text.-visible{display:inline}.page-actions+.page-actions{margin-left:8px}.page-actions>.facebook>a:before,.page-actions>.github>a:before,.page-actions>.twitter>a:before{content:"";vertical-align:middle}.page-actions>.facebook>a:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23345' d='M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z'/%3E%3C/svg%3E") 50%/16px 16px no-repeat}.page-actions>.facebook>a:before,.page-actions>.twitter>a:before{display:inline-block;vertical-align:middle;height:16px;width:16px}.page-actions>.twitter>a:before{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23345' d='M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z'/%3E%3C/svg%3E") 50%/16px 16px no-repeat}.page-actions>.github>a:before{display:inline-block;vertical-align:middle;background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23345' d='M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z'/%3E%3C/svg%3E") 50%/16px 16px no-repeat;height:16px;width:16px}.page-actions>.github>a:hover:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath fill='%23FFF' d='M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z'/%3E%3C/svg%3E")}.page-actions>.facebook>a:before,.page-actions>.twitter>a:before{width:32px;height:32px}.page-actions>.github>a:before{position:relative;top:-2px}.page-actions>.link.-button>a{box-shadow:inset 0 0 0 1px rgba(85,102,119,.3);border-radius:2px;padding:0 16px;margin:0 8px;transition:all .1s linear}.page-actions>.link.-button>a>.text{margin-left:4px;position:relative;top:-1px}.page-actions>.link.-button>a:focus,.page-actions>.link.-button>a:hover{background:linear-gradient(5deg,#745fb5,#9066b8);box-shadow:0 1px 1px rgba(85,102,119,.55)}.page-actions>.link.-button>a:focus,.page-actions>.link.-button>a:focus>.text,.page-actions>.link.-button>a:hover,.page-actions>.link.-button>a:hover>.text{color:#fff}@media (max-width:768px){.page-actions>.link{margin-left:16px}}.page-actions>.link:first-child>a{margin-left:0}.page-actions>.link:last-child>a{margin-right:0}.top-nav,.top-nav>.container{height:64px;line-height:64px;text-align:center;position:relative}@media (max-width:480px){.top-nav>.container{height:32px;line-height:32px;margin-top:8px}.top-nav{height:48px;padding:8px 0;border-bottom:1px solid rgba(85,102,119,.3);margin-bottom:8px}}.top-nav>.container{padding-left:16px;padding-right:16px;max-width:1232px;margin:0 auto}@media (max-width:480px){.top-nav>.container{padding-left:16px;padding-right:16px}}.top-nav>.container{display:flex;align-items:center;position:relative}.top-nav>.container>.left{flex:0 0 auto;line-height:32px}.top-nav>.container>.brand{flex:1 1 auto}.top-nav>.container>.actions{flex:0 0 auto;display:flex}.top-nav>.container>.brand{font-size:11.3043478261px;display:inline-block;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-decoration:none}@media (min-width:480px) and (max-width:768px){.top-nav>.container>.brand{font-size:calc(11.30435px + 0.76462*(100vw - 480px)/288)}}@media (min-width:768px) and (max-width:1280px){.top-nav>.container>.brand{font-size:calc(12.06897px + -0.10315*(100vw - 768px)/512)}}@media (min-width:1280px){.top-nav>.container>.brand{font-size:11.9658119658px}}.top-nav>.container>.brand,.top-nav>.container>.brand:visited{color:#345}.top-nav>.container>.brand:hover{color:#745fb5}@media (max-width:480px){.top-nav>.container>.brand{display:none}.top-nav>.container>.actions{margin-left:auto}}@media (min-width:481px){.top-nav>.container>.actions{position:absolute;right:16px;top:16px}}@media (min-width:481px) and (max-width:480px){.top-nav>.container>.actions{right:16px}}@media (min-width:481px){.top-nav>.container>.left{position:absolute;left:16px;top:16px}}@media (min-width:481px) and (max-width:480px){.top-nav>.container>.left{left:16px}}@media (min-width:1232px){.top-nav>.container>.left>.home{position:relative;left:-16px}}</style>
|
||
|
||
<!-- allow disabling critical CSS optimization by passing ?nocrit=1 -->
|
||
<script id='critical-css-disable'>if (~window.location.search.indexOf('nocrit')){;[].slice.call(document.querySelectorAll('#critical-css')).map(function(e){e.parentNode.removeChild(e)})}</script>
|
||
|
||
<!-- deferred css -->
|
||
<script id='deferred-css'>;(function(links){(requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame||(function(fn){window.addEventListener('load',fn)}))(function(){var h=document.getElementsByTagName('head')[0],l,i;for (i=0;i<links.length;i++){l=document.createElement('link');l.rel='stylesheet';l.href=links[i];h.appendChild(l);}})})([
|
||
'https://fonts.googleapis.com/css?family=Cousine',
|
||
'./assets/2017/style.css?t=20231011104129'
|
||
])</script>
|
||
<noscript id='deferred-css-fallback'>
|
||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Cousine'>
|
||
<link rel='stylesheet' href='./assets/2017/style.css?t=20231011104129'>
|
||
</noscript>
|
||
|
||
<script type='application/ld+json'>
|
||
{
|
||
"@context": "http://schema.org",
|
||
"@type": "NewsArticle",
|
||
"mainEntityOfPage": {
|
||
"@type": "WebPage",
|
||
"@id": "https://google.com/article"
|
||
},
|
||
"headline": "ES2015+ cheatsheet",
|
||
"image": [ "https://assets.devhints.io/previews/es6.jpg?t=20231011104129" ],
|
||
"description": "One-page guide to ES2015+: usage, examples, and more. A quick overview of new JavaScript features in ES2015, ES2016, ES2017, ES2018 and beyond."
|
||
}
|
||
</script>
|
||
<script type='application/ld+json'>
|
||
{
|
||
"@context": "http://schema.org",
|
||
"@type": "BreadcrumbList",
|
||
"itemListElement": [{
|
||
"@type": "ListItem",
|
||
"position": 1,
|
||
"item": {
|
||
"@id": "https://devhints.io/#javascript",
|
||
"name": "JavaScript"
|
||
}
|
||
},{
|
||
"@type": "ListItem",
|
||
"position": 2,
|
||
"item": {
|
||
"@id": "https://devhints.io/es6",
|
||
"name": "ES2015+"
|
||
}
|
||
}]
|
||
}
|
||
</script>
|
||
|
||
|
||
</head><body class='UseCompactHeader HighlightPubFirstLine'>
|
||
|
||
|
||
<nav class='top-nav' data-js-no-preview role='navigation'>
|
||
<div class='container'>
|
||
|
||
<div class='left'>
|
||
<a class='home back-button' href='.'></a>
|
||
</div>
|
||
|
||
|
||
<a class='brand' href='.'>
|
||
Devhints.io
|
||
</a>
|
||
|
||
|
||
<div class='actions'>
|
||
|
||
<ul class="social-list social page-actions">
|
||
<li class="facebook link hint--bottom" data-hint="Share on Facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=https://devhints.io/es6.html" target="share"><span class="text"></span></a></li>
|
||
<li class="twitter link hint--bottom" data-hint="Share on Twitter"><a href="https://twitter.com/intent/tweet?text=The%20ultimate%20cheatsheet%20for%20ES2015+.%20https://devhints.io/es6.html" target="share"><span class="text"></span></a></li>
|
||
|
||
</ul>
|
||
|
||
|
||
|
||
<ul class='page-actions'>
|
||
<li class='link github -button hint--bottom' data-hint='Edit this page on GitHub'>
|
||
<a href='https://github.com/rstacruz/cheatsheets/blob/master/es6.md'>
|
||
<span class='text -visible'>Edit</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<div class='body-area'>
|
||
<header class='main-heading -center' role='banner'>
|
||
<h1 class='h1'>ES2015+ <em>cheatsheet</em></h1>
|
||
|
||
<div class='pubbox' data-js-no-preview>
|
||
|
||
<div class='HeadlinePub' role='complementary'>
|
||
<script async src='https://pubsrv.devhints.io/carbon.js?serve=CE7IK5QM&placement=devhintsio' id="_carbonads_js"></script>
|
||
<span class='placeholder -one'></span>
|
||
<span class='placeholder -two'></span>
|
||
<span class='placeholder -three'></span>
|
||
<span class='placeholder -four'></span>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</header>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class='intro-content MarkdownBody'>
|
||
<p>A quick overview of new JavaScript features in ES2015, ES2016, ES2017, ES2018 and beyond.</p>
|
||
|
||
</div>
|
||
|
||
|
||
<main class='post-content MarkdownBody' data-js-main-body data-js-anchors role='main'>
|
||
<h3 id="block-scoping">Block scoping</h3>
|
||
|
||
<h4 id="let">Let</h4>
|
||
|
||
<pre data-line="2,4"><code class="language-js">function fn () {
|
||
let x = 0
|
||
if (true) {
|
||
let x = 1 // only inside this `if`
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<h4 id="const">Const</h4>
|
||
|
||
<pre><code class="language-js">const a = 1
|
||
</code></pre>
|
||
|
||
<p><code>let</code> is the new <code>var</code>. Constants work just like <code>let</code>, but can’t be reassigned.
|
||
See: <a href="https://babeljs.io/learn-es2015/#let--const">Let and const</a></p>
|
||
|
||
<h3 id="backtick-strings">Backtick strings</h3>
|
||
|
||
<h4 id="interpolation">Interpolation</h4>
|
||
|
||
<pre><code class="language-js">const message = `Hello ${name}`
|
||
</code></pre>
|
||
|
||
<h4 id="multiline-strings">Multiline strings</h4>
|
||
|
||
<pre><code class="language-js">const str = `
|
||
hello
|
||
world
|
||
`
|
||
</code></pre>
|
||
|
||
<p>Templates and multiline strings.
|
||
See: <a href="https://babeljs.io/learn-es2015/#template-strings">Template strings</a></p>
|
||
|
||
<h3 id="binary-and-octal-literals">Binary and octal literals</h3>
|
||
|
||
<pre><code class="language-js">let bin = 0b1010010
|
||
let oct = 0o755
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://babeljs.io/learn-es2015/#binary-and-octal-literals">Binary and octal literals</a></p>
|
||
|
||
<h3 id="new-methods">New methods</h3>
|
||
|
||
<h4 id="new-string-methods">New string methods</h4>
|
||
|
||
<pre><code class="language-js">"hello".repeat(3)
|
||
"hello".includes("ll")
|
||
"hello".startsWith("he")
|
||
"hello".padStart(8) // " hello"
|
||
"hello".padEnd(8) // "hello "
|
||
"hello".padEnd(8, '!') // hello!!!
|
||
"\u1E9B\u0323".normalize("NFC")
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://babeljs.io/learn-es2015/#math--number--string--object-apis">New methods</a></p>
|
||
|
||
<h3 id="classes">Classes</h3>
|
||
|
||
<pre><code class="language-js">class Circle extends Shape {
|
||
</code></pre>
|
||
|
||
<h4 id="constructor">Constructor</h4>
|
||
|
||
<pre data-line="1"><code class="language-js"> constructor (radius) {
|
||
this.radius = radius
|
||
}
|
||
</code></pre>
|
||
|
||
<h4 id="methods">Methods</h4>
|
||
|
||
<pre data-line="1"><code class="language-js"> getArea () {
|
||
return Math.PI * 2 * this.radius
|
||
}
|
||
</code></pre>
|
||
|
||
<h4 id="calling-superclass-methods">Calling superclass methods</h4>
|
||
|
||
<pre data-line="2"><code class="language-js"> expand (n) {
|
||
return super.expand(n) * Math.PI
|
||
}
|
||
</code></pre>
|
||
|
||
<h4 id="static-methods">Static methods</h4>
|
||
|
||
<pre data-line="1"><code class="language-js"> static createFromDiameter(diameter) {
|
||
return new Circle(diameter / 2)
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Syntactic sugar for prototypes.
|
||
See: <a href="https://babeljs.io/learn-es2015/#classes">Classes</a></p>
|
||
|
||
<h3 id="exponent-operator">Exponent operator</h3>
|
||
|
||
<pre data-line="1"><code class="language-js">const byte = 2 ** 8
|
||
// Same as: Math.pow(2, 8)
|
||
</code></pre>
|
||
|
||
<h2 class="-three-column" id="promises">Promises</h2>
|
||
|
||
<h3 id="making-promises">Making promises</h3>
|
||
|
||
<pre data-line="1"><code class="language-js">new Promise((resolve, reject) => {
|
||
if (ok) { resolve(result) }
|
||
else { reject(error) }
|
||
})
|
||
</code></pre>
|
||
|
||
<p>For asynchronous programming.
|
||
See: <a href="https://babeljs.io/learn-es2015/#promises">Promises</a></p>
|
||
|
||
<h3 id="using-promises">Using promises</h3>
|
||
|
||
<pre data-line="2,3"><code class="language-js">promise
|
||
.then((result) => { ··· })
|
||
.catch((error) => { ··· })
|
||
</code></pre>
|
||
|
||
<h3 id="using-promises-with-finally">Using promises with finally</h3>
|
||
|
||
<pre data-line="4"><code class="language-js">promise
|
||
.then((result) => { ··· })
|
||
.catch((error) => { ··· })
|
||
.finally(() => { // logic independent of success/error })
|
||
</code></pre>
|
||
|
||
<p>The handler is called when the promise is fulfilled or rejected.</p>
|
||
|
||
<h3 id="promise-functions">Promise functions</h3>
|
||
|
||
<pre><code class="language-js">Promise.all(···)
|
||
Promise.race(···)
|
||
Promise.reject(···)
|
||
Promise.resolve(···)
|
||
</code></pre>
|
||
|
||
<h3 id="async-await">Async-await</h3>
|
||
|
||
<pre data-line="2,3"><code class="language-js">async function run () {
|
||
const user = await getUser()
|
||
const tweets = await getTweets(user)
|
||
return [user, tweets]
|
||
}
|
||
</code></pre>
|
||
|
||
<p><code>async</code> functions are another way of using functions.</p>
|
||
|
||
<p>See: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a></p>
|
||
|
||
<h2 class="-three-column" id="destructuring">Destructuring</h2>
|
||
|
||
<h3 id="destructuring-assignment">Destructuring assignment</h3>
|
||
|
||
<h4 id="arrays">Arrays</h4>
|
||
|
||
<pre data-line="1"><code class="language-js">const [first, last] = ['Nikola', 'Tesla']
|
||
</code></pre>
|
||
|
||
<h4 id="objects">Objects</h4>
|
||
|
||
<pre data-line="1"><code class="language-js">let {title, author} = {
|
||
title: 'The Silkworm',
|
||
author: 'R. Galbraith'
|
||
}
|
||
</code></pre>
|
||
|
||
<p>Supports for matching arrays and objects.
|
||
See: <a href="https://babeljs.io/learn-es2015/#destructuring">Destructuring</a></p>
|
||
|
||
<h3 id="default-values">Default values</h3>
|
||
|
||
<pre><code class="language-js">const scores = [22, 33]
|
||
const [math = 50, sci = 50, arts = 50] = scores
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">// Result:
|
||
// math === 22, sci === 33, arts === 50
|
||
</code></pre>
|
||
|
||
<p>Default values can be assigned while destructuring arrays or objects.</p>
|
||
|
||
<h3 id="function-arguments">Function arguments</h3>
|
||
|
||
<pre data-line="1"><code class="language-js">function greet({ name, greeting }) {
|
||
console.log(`${greeting}, ${name}!`)
|
||
}
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">greet({ name: 'Larry', greeting: 'Ahoy' })
|
||
</code></pre>
|
||
|
||
<p>Destructuring of objects and arrays can also be done in function arguments.</p>
|
||
|
||
<h3 id="default-values-1">Default values</h3>
|
||
|
||
<pre data-line="1"><code class="language-js">function greet({ name = 'Rauno' } = {}) {
|
||
console.log(`Hi ${name}!`);
|
||
}
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">greet() // Hi Rauno!
|
||
greet({ name: 'Larry' }) // Hi Larry!
|
||
</code></pre>
|
||
|
||
<h3 id="reassigning-keys">Reassigning keys</h3>
|
||
|
||
<pre data-line="1"><code class="language-js">function printCoordinates({ left: x, top: y }) {
|
||
console.log(`x: ${x}, y: ${y}`)
|
||
}
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">printCoordinates({ left: 25, top: 90 })
|
||
</code></pre>
|
||
|
||
<p>This example assigns <code>x</code> to the value of the <code>left</code> key.</p>
|
||
|
||
<h3 id="loops">Loops</h3>
|
||
|
||
<pre data-line="1"><code class="language-js">for (let {title, artist} of songs) {
|
||
···
|
||
}
|
||
</code></pre>
|
||
|
||
<p>The assignment expressions work in loops, too.</p>
|
||
|
||
<h3 id="object-destructuring">Object destructuring</h3>
|
||
|
||
<pre data-line="1"><code class="language-js">const { id, ...detail } = song;
|
||
</code></pre>
|
||
|
||
<p>Extract some keys individually and remaining keys in the object using rest (…) operator</p>
|
||
|
||
<h2 id="spread">Spread</h2>
|
||
|
||
<h3 id="object-spread">Object spread</h3>
|
||
|
||
<h4 id="with-object-spread">with Object spread</h4>
|
||
|
||
<pre data-line="2"><code class="language-js">const options = {
|
||
...defaults,
|
||
visible: true
|
||
}
|
||
</code></pre>
|
||
|
||
<h4 id="without-object-spread">without Object spread</h4>
|
||
|
||
<pre><code class="language-js">const options = Object.assign(
|
||
{}, defaults,
|
||
{ visible: true })
|
||
</code></pre>
|
||
|
||
<p>The Object spread operator lets you build new objects from other objects.</p>
|
||
|
||
<p>See: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">Object spread</a></p>
|
||
|
||
<h3 id="array-spread">Array spread</h3>
|
||
|
||
<h4 id="with-array-spread">with Array spread</h4>
|
||
|
||
<pre data-line="2,3"><code class="language-js">const users = [
|
||
...admins,
|
||
...editors,
|
||
'rstacruz'
|
||
]
|
||
</code></pre>
|
||
|
||
<h4 id="without-array-spread">without Array spread</h4>
|
||
|
||
<pre><code class="language-js">const users = admins
|
||
.concat(editors)
|
||
.concat([ 'rstacruz' ])
|
||
</code></pre>
|
||
|
||
<p>The spread operator lets you build new arrays in the same way.</p>
|
||
|
||
<p>See: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">Spread operator</a></p>
|
||
|
||
<h2 id="functions">Functions</h2>
|
||
|
||
<h3 id="function-arguments-1">Function arguments</h3>
|
||
|
||
<h4 id="default-arguments">Default arguments</h4>
|
||
|
||
<pre data-line="1"><code class="language-js">function greet (name = 'Jerry') {
|
||
return `Hello ${name}`
|
||
}
|
||
</code></pre>
|
||
|
||
<h4 id="rest-arguments">Rest arguments</h4>
|
||
|
||
<pre data-line="1"><code class="language-js">function fn(x, ...y) {
|
||
// y is an Array
|
||
return x * y.length
|
||
}
|
||
</code></pre>
|
||
|
||
<h4 id="spread-1">Spread</h4>
|
||
|
||
<pre data-line="1"><code class="language-js">fn(...[1, 2, 3])
|
||
// same as fn(1, 2, 3)
|
||
</code></pre>
|
||
|
||
<p>Default, rest, spread.
|
||
See: <a href="https://babeljs.io/learn-es2015/#default--rest--spread">Function arguments</a></p>
|
||
|
||
<h3 id="fat-arrows">Fat arrows</h3>
|
||
|
||
<h4 id="fat-arrows-1">Fat arrows</h4>
|
||
|
||
<pre data-line="1"><code class="language-js">setTimeout(() => {
|
||
···
|
||
})
|
||
</code></pre>
|
||
|
||
<h4 id="with-arguments">With arguments</h4>
|
||
|
||
<pre data-line="1"><code class="language-js">readFile('text.txt', (err, data) => {
|
||
...
|
||
})
|
||
</code></pre>
|
||
|
||
<h4 id="implicit-return">Implicit return</h4>
|
||
<pre data-line="1,4,5,6"><code class="language-js">numbers.map(n => n * 2)
|
||
// No curly braces = implicit return
|
||
// Same as: numbers.map(function (n) { return n * 2 })
|
||
numbers.map(n => ({
|
||
result: n * 2
|
||
}))
|
||
// Implicitly returning objects requires parentheses around the object
|
||
</code></pre>
|
||
|
||
<p>Like functions but with <code>this</code> preserved.
|
||
See: <a href="https://babeljs.io/learn-es2015/#arrows-and-lexical-this">Fat arrows</a></p>
|
||
|
||
<h2 id="objects-1">Objects</h2>
|
||
|
||
<h3 id="shorthand-syntax">Shorthand syntax</h3>
|
||
|
||
<pre><code class="language-js">module.exports = { hello, bye }
|
||
// Same as: module.exports = { hello: hello, bye: bye }
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://babeljs.io/learn-es2015/#enhanced-object-literals">Object literal enhancements</a></p>
|
||
|
||
<h3 id="methods-1">Methods</h3>
|
||
|
||
<pre data-line="2"><code class="language-js">const App = {
|
||
start () {
|
||
console.log('running')
|
||
}
|
||
}
|
||
// Same as: App = { start: function () {···} }
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://babeljs.io/learn-es2015/#enhanced-object-literals">Object literal enhancements</a></p>
|
||
|
||
<h3 id="getters-and-setters">Getters and setters</h3>
|
||
|
||
<pre data-line="2,5"><code class="language-js">const App = {
|
||
get closed () {
|
||
return this.status === 'closed'
|
||
},
|
||
set closed (value) {
|
||
this.status = value ? 'closed' : 'open'
|
||
}
|
||
}
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://babeljs.io/learn-es2015/#enhanced-object-literals">Object literal enhancements</a></p>
|
||
|
||
<h3 id="computed-property-names">Computed property names</h3>
|
||
|
||
<pre data-line="3"><code class="language-js">let event = 'click'
|
||
let handlers = {
|
||
[`on${event}`]: true
|
||
}
|
||
// Same as: handlers = { 'onclick': true }
|
||
</code></pre>
|
||
|
||
<p>See: <a href="https://babeljs.io/learn-es2015/#enhanced-object-literals">Object literal enhancements</a></p>
|
||
|
||
<h3 id="extract-values">Extract values</h3>
|
||
|
||
<pre data-line="3,5"><code class="language-js">const fatherJS = { age: 57, name: "Brendan Eich" }
|
||
|
||
Object.values(fatherJS)
|
||
// [57, "Brendan Eich"]
|
||
Object.entries(fatherJS)
|
||
// [["age", 57], ["name", "Brendan Eich"]]
|
||
</code></pre>
|
||
|
||
<h2 id="modules">Modules</h2>
|
||
|
||
<h3 id="imports">Imports</h3>
|
||
|
||
<pre><code class="language-js">import 'helpers'
|
||
// aka: require('···')
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">import Express from 'express'
|
||
// aka: const Express = require('···').default || require('···')
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">import { indent } from 'helpers'
|
||
// aka: const indent = require('···').indent
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">import * as Helpers from 'helpers'
|
||
// aka: const Helpers = require('···')
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">import { indentSpaces as indent } from 'helpers'
|
||
// aka: const indent = require('···').indentSpaces
|
||
</code></pre>
|
||
|
||
<p><code>import</code> is the new <code>require()</code>.
|
||
See: <a href="https://babeljs.io/learn-es2015/#modules">Module imports</a></p>
|
||
|
||
<h3 id="exports">Exports</h3>
|
||
|
||
<pre><code class="language-js">export default function () { ··· }
|
||
// aka: module.exports.default = ···
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">export function mymethod () { ··· }
|
||
// aka: module.exports.mymethod = ···
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">export const pi = 3.14159
|
||
// aka: module.exports.pi = ···
|
||
</code></pre>
|
||
|
||
<p><code>export</code> is the new <code>module.exports</code>.
|
||
See: <a href="https://babeljs.io/learn-es2015/#modules">Module exports</a></p>
|
||
|
||
<h2 id="generators">Generators</h2>
|
||
|
||
<h3 id="generators-1">Generators</h3>
|
||
|
||
<pre><code class="language-js">function* idMaker () {
|
||
let id = 0
|
||
while (true) { yield id++ }
|
||
}
|
||
</code></pre>
|
||
|
||
<pre><code class="language-js">let gen = idMaker()
|
||
gen.next().value // → 0
|
||
gen.next().value // → 1
|
||
gen.next().value // → 2
|
||
</code></pre>
|
||
|
||
<p>It’s complicated.
|
||
See: <a href="https://babeljs.io/learn-es2015/#generators">Generators</a></p>
|
||
|
||
<h3 id="forof-iteration">For..of iteration</h3>
|
||
|
||
<pre><code class="language-js">for (let i of iterable) {
|
||
···
|
||
}
|
||
</code></pre>
|
||
|
||
<p>For iterating through generators and arrays.
|
||
See: <a href="https://babeljs.io/learn-es2015/#iterators--forof">For..of iteration</a></p>
|
||
|
||
</main>
|
||
</div>
|
||
|
||
<div class='pre-footer' data-js-no-preview><i class='icon'></i></div>
|
||
|
||
|
||
|
||
<section class='comments-area' id='comments' data-js-no-preview>
|
||
<div class='container'>
|
||
<details class='comments-details'>
|
||
<summary>
|
||
<strong class='count'>
|
||
<span class='disqus-comment-count' data-disqus-identifier="es6" data-disqus-url='https://devhints.io/es6'>0 Comments</span>
|
||
</strong>
|
||
<span class='suffix'>for this cheatsheet.</span>
|
||
<span class='fauxlink'>Write yours!</span>
|
||
</summary>
|
||
<div class='comments-section'>
|
||
<div class='comments'>
|
||
<div id='disqus_thread'></div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<noscript data-js-disqus='{"host":"devhints.disqus.com","url":"https://devhints.io/es6","identifier":"es6"}'></noscript>
|
||
</section>
|
||
|
||
|
||
<footer class='search-footer' data-js-no-preview>
|
||
<div class='container'>
|
||
<div class='search-footer-section'>
|
||
<div class='search'>
|
||
<form
|
||
|
||
class='search' action='.' method='get'>
|
||
<label class='search-box -small'>
|
||
<span class='prefix'>devhints.io</span>
|
||
<span class='sep'>/</span>
|
||
<input name='q'
|
||
type='text'
|
||
|
||
|
||
|
||
placeholder='Search 358+ cheatsheets'
|
||
>
|
||
</label>
|
||
</form>
|
||
|
||
</div>
|
||
<div class='links'>
|
||
<a class='home-button' href='.'><i></i></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
|
||
|
||
<footer class='related-posts-area' id='related' data-js-no-preview>
|
||
<div class='container'>
|
||
<div class='related-posts-section'>
|
||
<div class='callout'>
|
||
<a class='related-posts-callout' href='.'>
|
||
<div class='text'>
|
||
<i class='icon'></i>
|
||
|
||
<span class='description'>
|
||
Over 358 curated cheatsheets, by developers for developers.
|
||
</span>
|
||
|
||
<span class='push-button -dark'>
|
||
Devhints home
|
||
</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class='group'>
|
||
<div class='related-posts-group'>
|
||
|
||
<h3>Other JavaScript cheatsheets</h3>
|
||
|
||
|
||
<ul class='related-post-list'>
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./vue'>
|
||
<strong>Vue.js</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./js-date'>
|
||
<strong>JavaScript Date</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./js-fetch'>
|
||
<strong>fetch()</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./js-speech'>
|
||
<strong>JavaScript speech synthesis</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./jsdoc'>
|
||
<strong>Jsdoc</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./npm'>
|
||
<strong>npm</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='group'>
|
||
<div class='related-posts-group'>
|
||
<h3>Top cheatsheets</h3>
|
||
|
||
<ul class='related-post-list'>
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./elixir'>
|
||
<strong>Elixir</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./react'>
|
||
<strong>React.js</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./vim-diff'>
|
||
<strong>Vimdiff</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./vim'>
|
||
<strong>Vim</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./vimscript'>
|
||
<strong>Vim scripting</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
<li class='item related-post-item'>
|
||
<a href='./vue'>
|
||
<strong>Vue.js</strong>
|
||
<span>
|
||
cheatsheet
|
||
|
||
|
||
<abbr class='attribute-peg -new-layout hint--bottom' data-hint='New layout!'><span></span></abbr>
|
||
|
||
</span>
|
||
</a>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcelRequire,u="function"==typeof require&&require;function f(t,n){if(!r[t]){if(!e[t]){var i="function"==typeof parcelRequire&&parcelRequire;if(!n&&i)return i(t,!0);if(o)return o(t,!0);if(u&&"string"==typeof t)return u(t);var c=new Error("Cannot find module '"+t+"'");throw c.code="MODULE_NOT_FOUND",c}p.resolve=function(r){return e[t][1][r]||r},p.cache={};var l=r[t]=new f.Module(t);e[t][0].call(l.exports,p,l,l.exports,this)}return r[t].exports;function p(e){return f(p.resolve(e))}}f.isParcelRequire=!0,f.Module=function(e){this.id=e,this.bundle=f,this.exports={}},f.modules=e,f.cache=r,f.parent=o,f.register=function(r,t){e[r]=[function(e,r){r.exports=t},{}]};for(var c=0;c<t.length;c++)try{f(t[c])}catch(e){i||(i=e)}if(t.length){var l=f(t[t.length-1]);"object"==typeof exports&&"undefined"!=typeof module?module.exports=l:"function"==typeof define&&define.amd?define(function(){return l}):n&&(this[n]=l)}if(parcelRequire=f,i)throw i;return f}({"r6WJ":[function(require,module,exports) {
|
||
function e(e,t){var r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.webkitMatchesSelector||e.oMatchesSelector;if(r)return r.call(e,t);if(e.parentNode){for(var c=e.parentNode.querySelectorAll(t),o=c.length;o--;0)if(c[o]===e)return!0;return!1}}module.exports=e;
|
||
},{}],"cDuO":[function(require,module,exports) {
|
||
function e(e,r){var n,o,t=e.length;if("number"==typeof t)for(n=0;n<t;n++)r(e[n],n);else for(n in o=0,e)e.hasOwnProperty(n)&&r(e[n],n,o++);return e}module.exports=e;
|
||
},{}],"G20n":[function(require,module,exports) {
|
||
var s=require("./each");function e(i,a){if(a)if(Array.isArray(a))s(a,function(s){e(i,s)});else if(i.classList){var r=a.split(" ").filter(Boolean);s(r,function(s){i.classList.add(s)})}else i.className+=" "+a}module.exports=e;
|
||
},{"./each":"cDuO"}],"THIL":[function(require,module,exports) {
|
||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.appendMany=c,exports.nextUntil=f,exports.before=s,exports.findChildren=d,exports.createDiv=p;var t=e(require("dom101/matches"));function e(t){return t&&t.__esModule?t:{default:t}}function r(t){return u(t)||i(t)||o(t)||n()}function n(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function o(t,e){if(t){if("string"==typeof t)return a(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?a(t,e):void 0}}function i(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}function u(t){if(Array.isArray(t))return a(t)}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function c(t,e){e.forEach(function(e){t.appendChild(e)})}function f(t,e){return l(t.nextSibling,e,[])}function l(e,n,o){return e?(0,t.default)(e,n)?o:l(e.nextSibling,n,[].concat(r(o),[e])):o}function s(t,e){t.parentNode.insertBefore(e,t)}function d(e,r){return[].slice.call(e.children).filter(function(e){return(0,t.default)(e,r)})}function p(t){var e=document.createElement("div");return Object.keys(t).forEach(function(r){e.setAttribute(r,t[r])}),e}
|
||
},{"dom101/matches":"r6WJ"}],"hE9p":[function(require,module,exports) {
|
||
"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=f,exports.groupify=p;var r=e(require("dom101/matches")),t=e(require("dom101/add-class")),n=require("../helpers/dom");function e(r){return r&&r.__esModule?r:{default:r}}function o(r){return c(r)||u(r)||i(r)||a()}function a(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function i(r,t){if(r){if("string"==typeof r)return s(r,t);var n=Object.prototype.toString.call(r).slice(8,-1);return"Object"===n&&r.constructor&&(n=r.constructor.name),"Map"===n||"Set"===n?Array.from(r):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?s(r,t):void 0}}function u(r){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(r))return Array.from(r)}function c(r){if(Array.isArray(r))return s(r)}function s(r,t){(null==t||t>r.length)&&(t=r.length);for(var n=0,e=new Array(t);n<t;n++)e[n]=r[n];return e}function f(r){l(r).forEach(function(r){(0,n.findChildren)(r,"[data-js-h3-section-list]").forEach(function(r){d(r)})})}function l(r){return p(r,{tag:"h2",wrapperFn:function(){return(0,n.createDiv)({class:"h2-section"})},bodyFn:function(){return(0,n.createDiv)({class:"body h3-section-list","data-js-h3-section-list":""})}})}function d(r){return p(r,{tag:"h3",wrapperFn:function(){return(0,n.createDiv)({class:"h3-section"})},bodyFn:function(){return(0,n.createDiv)({class:"body"})}})}function p(e,a){var i=a.tag,u=a.wrapperFn,c=a.bodyFn,s=e.children[0],f=[];if(s&&!(0,r.default)(s,i)){var l=(0,n.nextUntil)(s,i);f.push(d(s,null,[s].concat(o(l))))}return(0,n.findChildren)(e,i).forEach(function(r){var t=(0,n.nextUntil)(r,i);f.push(d(r,r,t))}),f;function d(r,e,o){var a=u(),i=r.className;i&&(0,t.default)(a,i),(0,n.before)(r,a);var s=c();return i&&(0,t.default)(s,i),(0,n.appendMany)(s,o),e&&a.appendChild(e),a.appendChild(s),a}}
|
||
},{"dom101/matches":"r6WJ","dom101/add-class":"G20n","../helpers/dom":"THIL"}],"DJ2P":[function(require,module,exports) {
|
||
function n(n,t,e){n.addEventListener?n.addEventListener(t,e):n.attachEvent("on"+t,function(){e.call(n)})}module.exports=n;
|
||
},{}],"eoMl":[function(require,module,exports) {
|
||
"use strict";var e=u(require("./wrapify")),d=u(require("dom101/add-class")),t=u(require("dom101/on"));function u(e){return e&&e.__esModule?e:{default:e}}var a,o=document.querySelector("[data-js-main-body]");function r(){a||((0,d.default)(document.documentElement,"LoadDone"),a=!0)}o&&((0,e.default)(o),(0,d.default)(o,"-wrapified")),(0,t.default)(window,"load",r),setTimeout(r,5e3);
|
||
},{"./wrapify":"hE9p","dom101/add-class":"G20n","dom101/on":"DJ2P"}]},{},["eoMl"], null)</script>
|
||
<script src='./assets/packed/app.js?t=20231011104129'></script>
|
||
|
||
|
||
|
||
</body>
|
||
</html>
|