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
77
Гармония кода с 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
170
Command-line scripting with Rust. Wait, what?!
listochkin
0
350
Server Memory - BuildStuff Ukraine 2019
listochkin
0
38
Server Memory - Chernivtsi JS 2019
listochkin
1
150
10 Years Later
listochkin
0
360
Managing Managers - DevTalks iHUB
listochkin
0
53
Time, Numbers, Text
listochkin
1
580
Software Licensing: A Minefield Guide
listochkin
0
140
We Make Bots. For Real
listochkin
0
420
Other Decks in Programming
See All in Programming
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
Deep Dive into ~/.claude/projects
hiragram
10
2k
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
110
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
GraphRAGの仕組みまるわかり
tosuri13
8
500
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
230
VS Code Update for GitHub Copilot
74th
1
480
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
670
GoのGenericsによるslice操作との付き合い方
syumai
3
690
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
48
32k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
110
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.7k
A Tale of Four Properties
chriscoyier
160
23k
The Invisible Side of Design
smashingmag
300
51k
Building Adaptive Systems
keathley
43
2.6k
Code Reviewing Like a Champion
maltzj
524
40k
Bash Introduction
62gerente
614
210k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
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