Общий обзор новых возможностей ES6, сравнение с более ранними стандартами. Почему стоит использовать ES6 уже сейчас? Поговорим о таких нововведениях как: поддержка классов, шаблоны строк, модули, стрелочные функции, генераторы и о многом другом.
10. 10CONFIDENTIAL
EXTENDED PARAMETER HANDLING. DEFAULT PARAMETER
VALUES
Ecmascript5 Ecmascript6
function f(x, y, z){
if (y === undefined)
y = 7;
if (z === undefined)
z = 42;
return x + y + z;
};
f(1) === 50;//true
function f(x, y = 7, z = 42){
return x + y + z;
};
f(1) === 50;//true
11. 11CONFIDENTIAL
EXTENDED PARAMETER HANDLING. REST PARAMETER
Ecmascript6
function f(x, y){
var a = Array.prototype.slice.call(arguments, 2);
return (x + y) * a.length;
};
f(1, 2, 'hello', true, 7) === 9;//true
function f(x, y, ...a){
return (x + y) * a.length;
};
f(1, 2, 'hello', true, 7) === 9;//true
Ecmascript5
12. 12CONFIDENTIAL
EXTENDED PARAMETER HANDLING. SPREAD OPERATOR
Ecmascript6
var params = ['hello', true, 7];
var other = [1, 2].concat(params);
f.apply(undefined, [1, 2].concat(params)) === 9;//true
var str = 'foo';
var chars = str.split(''); //['f','o','o']
var params = ['hello', true, 7];
var other = [1, 2, ...params]; //[1, 2, 'hello', true,
7]
f(1,2, ...params) === 9;
var str = 'foo';
var charts = [ ...str]; //['f','o','o']
Ecmascript5
13. 13CONFIDENTIAL
TEMPLATE LITERALS. STRING INTERPOLATION
Ecmascript6
message = 'Hello ' + customer.name + '.n' +
'want to by ' + card.amout + ' ' + card.product + ' for.n' +
'a total of ' + (card.amount + card.unitprice) + ' bucks?';
message = `Hello ${customer.name}. want to buy
${card.amount} $(card.product} for a total of
${(card.amount * card.unitprice)} bucks?`;
Ecmascript5
var customer = { name: 'Foo'};
var card = { amount: 7, product: 'Bar', unitprice: 42};
17. 17CONFIDENTIAL
DESTRUCTURING ASSIGNMENT. ARRAY MATCHING
Ecmascript6
var list = [1, 2, 3];
var a = list[0], b = list[2];
var tmp = a; a = b; b = tmp;
var list = [1, 2, 3];
var [ a, , b ] = list;
[ b, a ] = [ a, b ];
Ecmascript5
18. 18CONFIDENTIAL
DESTRUCTURING ASSIGNMENT. OBJECT MATCHING, DEEP
MATCHING
Ecmascript6
var tmp = getASTNode();
var a = tmp.op;
var b = tmp.lhs.op;
var c = tmp.rhs;
let { op: a, lhs: { op: b }, rhs: c } = getASTNode();
Ecmascript5
19. 19CONFIDENTIAL
DESTRUCTURING ASSIGNMENT. FAIL-SOFT DESTRUCTURING
Ecmascript6
var list = [ 7 ];
var a = typeof list[0] !== 'undefined' ? list[0] : 1;
var b = typeof list[1] !== 'undefined' ? list[1] : 2;
var d = typeof list[2] !== 'undefined' ? list[2] :
undefined;
a === 7;//true
b === 42;//true
d === undefined;//true
var list = [ 7 ];
var [ a = 1, b = 42, d ] = list;
a === 7;//true
b === 42;//true
d === undefined;//true
Ecmascript5
20. 20CONFIDENTIAL
MODULES. VALUE EXPORT/IMPORT
Ecmascript6
//math.js
var LibMath = {};
LibMath.sum = function(x, y){
//..
};
LibMath.pi = 3.14159;
//someApp.js
var math = LibMath;
var a = math.sum(math.pi,math.pi);
export * from 'lib/math';
export var e = 2.7182818286;
export default (x) => Math.exp(x);
import exp, {pi, e} from 'lib/mathplusplus';
var a = exp(pi);
Ecmascript5
26. 26CONFIDENTIAL
ITERATORS. ITERATOR & FOR-OF OPERATOR
let fibonacci = {
[Symbol.iterator](){
let pre = 0, cur = 1;
return {
next(){
[pre, cur] = [cur, pre + cur];
return { done: false, value: cur };
}
}
}
};
for(let n of fibonacci){
if(n > 1000)
break;
console.log(n);
}
27. 27CONFIDENTIAL
GENERATORS. GENERATOR FUNCTION, ITERATOR PROTOCOL
let fibonacci = {
*[Symbol.iterator](){
let pre = 0, cur = 1;
for( ; ; ) {
[pre, cur] = [cur, pre + cur];
yield cur;
}
}
}
28. 28CONFIDENTIAL
GENERATORS. GENERATOR FUNCTION, DIRECT USE
function* range(start, end, step){
while(start < end){
yield start;
start += step;
}
};
for(let i of range(0,10,2)){
console.log(i);//0,2,4,6,8
}
29. 29CONFIDENTIAL
GENERATORS. SIMPLEST ASYNC
function request(url){
makeAjaxCall(url, function(response){
it.next(response);
});
};
function *main(){
var result1 = yield request('http://some.url.1');
var data = JSON.parse(result1);
var result2 = yield request('http://some.url.2?id=' + data.id);
var data = JSON.parse(result2);
};
var it = main();
it.next();
30. 30CONFIDENTIAL
MAP/SET & WEAKMAP/WEAKSET. MAP DATA-STRUCTURE
Ecmascript6
var m = {};
m['hello'] = 42;
Object.keys(m).length;//1
for(key in m){
if(m.hasOwnProperty(key)){
console.log(key + ' = ' + m[key]);
}
}
//hello = 42
let m = new Map();
m.set('hello', 42);
m.set('s', 34);
m.get('s');//34
for(let [key, val] of m.entities())
console.log(key + ' = ' + val);
//hello = 42
//s = 34
Ecmascript5
31. 31CONFIDENTIAL
MAP/SET & WEAKMAP/WEAKSET. WEAK-LINK DATA-
STRUCTURES
var ws = new WeakSet();
var obj = {};
var foo = {};
ws.add(window);
ws.add(obj);
ws.has(window);//true
ws.has(obj);//true
ws.has(foo);//false
32. 32CONFIDENTIAL
NEW BUILT-IN METHODS. OBJECT PROPERTY ASSIGNMENT
var dst = { quux: 0 };
var src = { foo: 1, bar: 2 };
Object.assign(dst, src);
dst.quux;//0
dst.foo;//3
33. 33CONFIDENTIAL
NEW BUILT-IN METHODS. ARRAY ELEMENT FINDING
Ecmascript6
[1, 2, 4, 3].filter(function(x){
return x > 3;
})[0]; //4
[1, 2, 4, 3].find(x => x > 3);//4
Ecmascript5