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
67
Гармония кода с 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
100
Command-line scripting with Rust. Wait, what?!
listochkin
0
220
Server Memory - BuildStuff Ukraine 2019
listochkin
0
23
Server Memory - Chernivtsi JS 2019
listochkin
1
81
10 Years Later
listochkin
0
320
Managing Managers - DevTalks iHUB
listochkin
0
34
Time, Numbers, Text
listochkin
1
460
Software Licensing: A Minefield Guide
listochkin
0
110
We Make Bots. For Real
listochkin
0
330
Other Decks in Programming
See All in Programming
甘い香りに誘われてVanilla Extractを1年間運用してみた
miyahkun
1
110
Rails と人魚の話/rails-and-mermaid
sanfrecce_osaka
0
100
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
300
Netty Chicago Java User Group 2024-04-17
sullis
0
130
try! Swift Tokyo 初参加報告LT
hinakko2
0
190
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
25
7.8k
今、知っておきたい! 生成AIエージェントの世界
elith
3
340
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
3
330
Build with AI 2024 Seoul - 제로부터 시작하는 Flutter with Gemini 생활 - 박제창
itsmedreamwalker
0
200
Designing for tomorrow's programming workflows
honnibal
PRO
2
110
Code Reviews
bkuhlmann
4
880
"config" ってなんだ? / What is "config"?
okashoi
0
220
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
123
8.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
For a Future-Friendly Web
brad_frost
171
8.9k
Into the Great Unknown - MozCon
thekraken
10
980
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Teambox: Starting and Learning
jrom
128
8.4k
Web Components: a chance to create the future
zenorocha
305
41k
YesSQL, Process and Tooling at Scale
rocio
163
13k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Optimizing for Happiness
mojombo
370
69k
Designing for humans not robots
tammielis
247
25k
Producing Creativity
orderedlist
PRO
336
39k
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