Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Гармония кода с ECMAScript 6
Search
Андрей Листочкин (Andrey Listochkin)
April 16, 2015
Programming
0
79
Гармония кода с ECMAScript 6
Андрей Листочкин (Andrey Listochkin)
April 16, 2015
Tweet
Share
More Decks by Андрей Листочкин (Andrey Listochkin)
See All by Андрей Листочкин (Andrey Listochkin)
Everybody Stand Back! I Know Regular Expressions
listochkin
0
180
Command-line scripting with Rust. Wait, what?!
listochkin
0
360
Server Memory - BuildStuff Ukraine 2019
listochkin
0
47
Server Memory - Chernivtsi JS 2019
listochkin
1
150
10 Years Later
listochkin
0
370
Managing Managers - DevTalks iHUB
listochkin
0
62
Time, Numbers, Text
listochkin
1
600
Software Licensing: A Minefield Guide
listochkin
0
150
We Make Bots. For Real
listochkin
0
430
Other Decks in Programming
See All in Programming
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
Cache Me If You Can
ryunen344
2
3k
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
270
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
770
🔨 小さなビルドシステムを作る
momeemt
4
690
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
250
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
330
21k
Bash Introduction
62gerente
615
210k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Scaling GitHub
holman
463
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Transcript
None
None
JavaScript
Mongo, Riak,PostgreSQL Node.js, Nashorn Browsers, Windows, OS X iOS, Android,
Firefox OS Tessel
ECMAScript
1995 JavaScript
1996 ECMA
1999 EcmaScript 3
2008 EcmaScript 4
2009 EcmaScript 5
2015 EcmaScript 6
ES6
EcmaScript 2015
1997 1998 1999 2009 2015
2015 2016 2017 2018 ...
None
None
Ember 2013
transpilers
ES6 => ES5/ES3
compile-to-JS language
GWT CoffeeScript TypeScript ...
Traceur es-next 6to5
None
Not all features can be transpiled
Proxy API
None
ES 2017 ES 2016 Babel ES6
ES.Next
None
Modules Classes Generators Promises Destructuring ...
"Toy" Language
"Real" language
Fixes
f.apply(null, args)
f(...args)
var self = this; getJson('/posts', function (xhr) { self.posts =
xhr.data; });
getJson('/posts', (xhr) => { this.posts = xhr.data; });
function UserService(baseUrl) { this.baseUrl = baseUrl; } UserService.prototype.getUser = function
getUser(id, callback) { ... }; var userService = new UserService('/users');
class UserService { constructor(baseUrl) { this.baseUrl = baseUrl; } getUser
(id, callback) { ... } } let userService = new UserService('/users');
None
define(function (require) { var _ = require('lodash'); var UserService =
require('services').UserService; function UserController() { ... } return UserController; });
import * as _ from 'lodash'; import UserService from 'services';
class UserController { ... } export default UserController;
Symbols Classes Modules
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
const secret = Symbol(); export class Box extends Holder {
get content () { return 'Some Content' } [secret]() { return `I'm a secret for ${this.content}`; } }
iterators generators promises Object.assign
let fibonacci = { [Symbol.iterator]: function* () { let pre
= 0, cur = 1; for (;;) { let temp = pre; pre = cur; cur += temp; yield cur; } } } for (let n of fibonacci) { if (n > 1000) break; console.log(n); }
let fibonacci = { [Symbol.iterator]: function* () { let pre
= 0, cur = 1; for (;;) { let temp = pre; pre = cur; cur += temp; yield cur; } } } for (let n of fibonacci) { if (n > 1000) break; console.log(n); }
let fibonacci = { [Symbol.iterator]: function* () { let pre
= 0, cur = 1; for (;;) { let temp = pre; pre = cur; cur += temp; yield cur; } } } for (let n of fibonacci) { if (n > 1000) break; console.log(n); }
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
co(function* () { const user = yield getUser(userId); const [
posts, comments ] = yield [ getPosts(user.id), getComments(user.id) ]; return Object.assign(user, { posts, comments }); }).then((user) => { for (let [index, post] of user.posts.entries()) { this.render`${index} ⇒ ${post.title}`; } });
Maps, Sets
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
let cpMap = posts.reduce((map, post) => map.set(post, new Set()), new
Map()); comments.forEach(comment => cpMap.get(comment.post).add(comment)); cpMap.get(post) for (let [post, comments] of cpMap.entries()) { for (let comment of comments) { .. } }
Math.max(...numbers); let set = new Set([12, 45, 12, 7]); let
array = [...set];
ES7 / 2016
Decorators Async Functions Object.observe
Ember React Angular Aurelia iojs
None
frontendua.im github.com/dev-ua