Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

ECMAScript 8 / ES2017

  • String object
    • methods padStart and padEnd
      
      str.padStart(targetLength [, padString])
      str.padEnd(targetLength [, padString])
      
      'es8'.padStart(2);          // 'es8'
      'es8'.padStart(5);          // '  es8'
      'es8'.padStart(6, 'woof');  // 'wooes8'
      'es8'.padStart(14, 'wow');  // 'wowwowwowwoes8'
      'es8'.padStart(7, '0');     // '0000es8'
      'es8'.padEnd(2);          // 'es8'
      'es8'.padEnd(5);          // 'es8  '
      'es8'.padEnd(6, 'woof');  // 'es8woo'
      'es8'.padEnd(14, 'wow');  // 'es8wowwowwowwo'
      'es8'.padEnd(7, '6');     // 'es86666'
              
  • Object
    • method Object.values
      
      Object.values(obj)
      
      const obj = { x: 'xxx', y: 1 };
      Object.values(obj); // ['xxx', 1]
      
      const obj = ['e', 's', '8']; // same as { 0: 'e', 1: 's', 2: '8' };
      Object.values(obj); // ['e', 's', '8']
      
      // when we use numeric keys, the values returned in a numerical
      // order according to the keys
      const obj = { 10: 'xxx', 1: 'yyy', 3: 'zzz' };
      Object.values(obj); // ['yyy', 'zzz', 'xxx']
      Object.values('es8'); // ['e', 's', '8']
              
    • method Object.entries
      
      Object.entries(obj)
      
      const obj = { x: 'xxx’, y: 1 };
      Object.entries(obj); // [[’x’, 'xxx’], [’y’, 1]]
      
      const obj = [’e’, 's’, '8’];
      Object.entries(obj); // [[’0’, 'e’], [’1’, 's’], [’2’, '8’]]
      
      const obj = { 10: 'xxx’, 1: 'yyy’, 3: 'zzz' };
      Object.entries(obj); // [[’1’, 'yyy’], [’3’, 'zzz’], [’10’, 'xxx’]]
      Object.entries('es8'); // [['0', 'e'], ['1', 's'], ['2', '8']]
              
    • Object.keys vs Object.values vs Object.entries
      
      const obj = {
        x: {
          value: 1
        },
        y: 'text'
      }
      
      Object.keys(obj) // ['x', 'y']
      Object.values(obj) // [{value: 1}, 'text']
      Object.entries(obj) // [['x', {value: 1}], ['y', 'text']]
              
    • generator to use with objects
      
      // using a generator function
      function* entries(obj) {
         for (let key of Object.keys(obj)) {
           yield [key, obj[key]]
         }
      }
      
      for (let [key, value] of entries(myObj)) {
         // do something with key/value
      }
              
    • method Object.getOwnPropertyDescriptors
      
      Object.getOwnPropertyDescriptors(obj)
      
      const obj = {
        get es7() { return 777; },
        get es8() { return 888; }
      };
      Object.getOwnPropertyDescriptors(obj);
      // {
      //   es7: {
      //     configurable: true,
      //     enumerable: true,
      //     get: function es7(){}, //the getter function
      //     set: undefined
      //   },
      //   es8: {
      //     configurable: true,
      //     enumerable: true,
      //     get: function es8(){}, //the getter function
      //     set: undefined
      //   }
      // }
              
  • Trailing commas in function parameter lists and calls
    
    // no syntax error:
    
    function es8(var1, var2, var3,) {
      // ...
    }
    
    es8(10, 20, 30,);
        
  • Async functions
    
    function fetchTextByPromise() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve("es8");
        }, 2000);
      });
    }
    async function sayHello() {
      const externalFetchedText = await fetchTextByPromise();
      console.log(`Hello, ${externalFetchedText}`); // Hello, es8
    }
    sayHello();
    
  • Shared memory and atomics - SharedArrayBuffer and Atomic object
  • And one for the next year in ES9 — Lifting template literal restriction
    
    const esth = 8;
    helper`ES ${esth} is `;
    function helper(strs, ...keys) {
      const str1 = strs[0]; // ES
      const str2 = strs[1]; // is
      let additionalPart = '';
      if (keys[0] == 8) { // 8
        additionalPart = 'awesome';
      }
      else {
        additionalPart = 'good';
      }
    
      return `${str1} ${keys[0]} ${str2} ${additionalPart}.`;
    }
    

Source

Check ES9/2018 features