O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

ES6

373 visualizações

Publicada em

Ecmascript 6

Publicada em: Tecnologia
  • Seja o primeiro a comentar

ES6

  1. 1. ECMAscript 6
  2. 2. ME • Ofir Fridman • FE Developer • Love code, technology, sport
  3. 3. JavaScript History • Beginnings at Netscape • JavaScript was originally developed by Brendan Eich, • The first version was completed in ten days • JavaScript first called Mocha, which was later renamed LiveScript in September 1995 and later JavaScript
  4. 4. The JavaScript Timeline
  5. 5. Browser Statistics 2015 Chrome IE Firefox Safari Opera April 63.9 % 8.0 % 21.6 % 3.8 % 1.5 % March 63.7 % 7.7 % 22.1 % 3.9 % 1.5 % February 62.5 % 8.0 % 22.9 % 3.9 % 1.5 % January 61.9 % 7.8 % 23.4 % 3.8 % 1.6 %
  6. 6. JavaScript Engine • Google - Chrome - V8 • Mozila - FF – Spider Monkey • Microsoft - IE - Chakra • Apple – safari - SquirrelFish
  7. 7. Old New Browser Player • Microsoft Edge (codenamed Spartan) is a web browser under development by Microsoft.
  8. 8. The new var is let let example var arr1 = []; for (var j = 0; j < 10; j++) { arr1[j] = function () { return j; }; } var arr1 = []; for (var j = 0; j < 10; j++) { (function (j) { arr1[j] = function () { return j; }; })(j); } let arr = []; for (let i = 0; i < 10; i++) { arr[i] = function () { return i; }; }
  9. 9. Arrow Function let square = x => x * x; let add = (a, b) => a + b; let pi = () => 3.1415; console.log(square(5)); console.log(add(3, 4)); console.log(pi()); Arrow function example 1
  10. 10. Arrow Function window.name = "Dog4"; function Dog(name){ this.name = name; } Dog.prototype.eat = function(){ setTimeout(function(){ console.log(`${this.name} eating`); },300); }; let d1 = new Dog('Dog1'); d1.eat(); window.name = "Dog4"; function Dog(name){ this.name = name; } Dog.prototype.eat = function(){ setTimeout(function(){ console.log(`${this.name} eating`); }.bind(this),300); }; let d2 = new Dog('Dog2'); d2.eat(); window.name = "Dog4"; function Dog(name){ this.name = name; } Dog.prototype.eat = function(){ setTimeout(() => { console.log(`${this.name} eating`); },300); }; let d3 = new Dog('Dog3'); d3.eat(); Arrow function example 2
  11. 11. Class // Animal constructor function Animal(name) { this.name = name; } // Adding walk method to Animal Animal.prototype.walk = function () { console.log(this.name + " is walking."); }; // Dog constructor function Dog(name, age) { this.age = age; // init Animal constructor Animal.call(this, name); } // Inherit the Animal prototype (this create a copy of the prototype) Dog.prototype = Object.create(Animal.prototype); // Set the Dog constructor to 'Dog' Dog.prototype.constructor = Dog; var dog1 = new Dog("dog1", 3); dog1.walk(); class Animal { constructor(name) { this.name = name; } walk() { console.log(this.name + " is walking."); } } class Dog extends Animal { constructor(name,age) { super(name); //call the parent method with super this.age = age; } } let dog1 = new Dog("dog1",3); dog1.walk(); Class example
  12. 12. Class get and set Class get, set example class Person{ constructor(name){ this._name = name; console.log(`${this._name} Created`); } run(){ console.log(`${this._name} is runing!`); } get name(){ console.log(`get this ${this._name} name`); return this._name; } set name(name){ console.log(`set this ${name} name`); this._name = name; } } let p = new Person("ofir"); console.log(p.name); p.name = "ofir fridman"; console.log(p.name);
  13. 13. Proxy var p = new Proxy(target, handler); let person = { name: 'Ofir' }; let handler = { get: function (target, key) { return `Hi ${target[key]}`; } }; person = new Proxy(person, handler); console.log(person.name); Get example 1 let person = {}; let handler = { get: function (target, prop) { if (prop in target) { return target[prop]; } target[prop] = new Proxy({}, handler); return target[prop]; } }; person = new Proxy(person, handler); person.details.options.name = "ofir"; console.log(person.details.name); Get example 2 *Note: current we can test it only in Firefox
  14. 14. Proxy Set example let person = {}; let handler = { set: function (target, prop, value) { if (prop === "id") { throw new TypeError('You not allow to change id!!!'); } if (prop === "age") { if (!Number.isInteger(value)) { throw new TypeError(`age should be integer. `); } } if (prop === "name") { target[prop] = value.charAt(0).toUpperCase() + value.slice(1); } } }; person = new Proxy(person,handler); person.name = "ofir"; console.log(person.name); person.id = 123; person.age = 12.2; *Note: current we can test it only in Firefox
  15. 15. Iterators Iterable [1,2,n] Iterator next() {value: 1, done: false} {value: 2, done: false} {value: n, done: false} {value: n+1, done: true} Example Iterators let sum =0; let numbers = [1,2,3,4]; let iterator = numbers.values(); let next = iterator.next(); while(!next.done){ sum += next.value; next = iterator.next(); } console.log(`sum = ${sum}`); sum = 0; for(let i of numbers){ sum += i; } console.log(`sum = ${sum}`);
  16. 16. ECMAScript 6 Features • arrows • classes • enhanced object literals • template strings • destructuring • default + rest + spread • let + const • iterators + for..of • generators • unicode • modules • module loaders • map + set + weakmap + weakset • proxies • symbols • subclassable built-ins • promises • math + number + string + array + object APIs • binary and octal literals • reflect api • tail calls
  17. 17. ECMAScript 6 Browser Support
  18. 18. ECMAScript Playground • ES6Fiddle • BABEL
  19. 19. External links Wikipedia Brendan Eich w3schools Browser Statistics JavaScript engine You Tube ECMAScript 6 - The Future is Here - Uri Shaked ES6: A realistic use of proxies MDN Proxy Classes let Arrow functions Iterators and generators Pluralsight JavaScript Fundamentals for ES6 + Slides EcmaScript 6 Today! By Abdul Habrah ECMAScript 6 with Kit Cambridge

×