ES5-8 & Polyfilling & Transpilling

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES5-8 & Polyfilling & Transpilling脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

es7

includes() method

Exponential operator **

x**y produces the same result as Math.pow(x,y)

ES8

String padding

padStart(targetLength, targetString/optional) and padEnd(targetLength, targetString) pads the current string with another string (multiple times, if needed) until the resulting string reaches the given length@H_406_45@. The padding is applied From the start (left) or the end (right) of the current string. If the argument targetString is missing, it will pad ' ' as default.

Trailing comma in @L_512_15@

Trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or proPErties to JavaScript code. If you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.

ECMAScript 2017 (ES8) allows trailing commas in function parameter lists. The functions with final commas in the argument list are equivalent to those without them.

var add = (num1, num2,) => num1 + num2;
add(1,2,) //3

//The trailing comma also works with method definitions for classes or objects:
class C {
  one(a,) {},
  two(a, b,) {},
}

var obj = {
  one(a,) {},
  two(a, b,) {},
};

//Function parameter definitions or function invocations only containing a comma will throw a SyntaxError. Furthermore, when using a rest parameters, trailing commas are not allowed:
function f(,) {} // SyntaxError: missing formal parameter
(,) => {};       // SyntaxError: expected expression, got ','
f(,)             // SyntaxError: expected expression, got ','

function f(...p,) {} // SyntaxError: parameter after rest parameter
(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','

Trailling comma in literals, destructuring and Json

// Arrays
var arr = [
  1, 
  2, 
  3, 
];
//If more than one trailing comma is used, an elision (or hole) is produced. An array with holes is called sparse (a dense array has no holes). When iterating arrays for example with Array.prototype.forEach() or Array.prototype.map(), array holes are skipped.
var arr = [1, 2, 3,,,];
arr.length; // 5

// Objects
var object = { 
  foo: "bar", 
  baz: "qwerty",
  age: 42,
};

// Destructuring
// array destructuring with trailing comma
[a, b,] = [1, 2];
// object destructuring with trailing comma
var o = {
  p: 42, 
  q: true,
};
var {p, q,} = o;
// Again, when using a rest element, a SyntaxError will be thrown:
var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

//Trailing commas in objects were only introduced in ecmascript 5. As JSON is based on JavaScript's syntax prior to ES5, trailing commas are not allowed in JSON.

Object.values() and Object.entries()

The Object.values(object) method returns an array of a given object's own enumerable property values, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};

console.log(Object.values(object1));
// >> Array ["somestring", 42, false]

// Use previous method 'object.key()':
Object.key(object1).forEach(key => {
    console.log(object1[key])
    })
// The Object.keys() method returns an array of a given object's own property names, in the same order as we get with a normal loop.

The Object.entries(object) method returns an array of a given object's own enumerable property [key, value] pairs, in the same order as that provided by a for...in loop (the difference being that a for-in loop enumerates properties in the prototype chain as well).

var users = {
    username1: 'Camelia',
    username2: 'Elio',
    username3: 'Olivier'
    };
// [["username1", "Camelia"],["username2", "Elio"]["username3","Olivier"]]
    
Object.entries(users).map(entry => 
    [entry[1], entry[0].replace('username', '')])
// [["Camelia", "1"], ["Elio", "2"], ["Olivier", "3"]]

Async await

We cover these topics in an upcoming video in this section titled How Javascript Works as well as in the HTTP + AJAX + JSON + Asynchronous Javascript section.

Polyfilling & Transpilling

Polyfilling and transpilling are two technologies that allow bringing newer JS to older features.

Polyfilling

It refers to producing pieces of code equivalent to some new features, but able to run in older JS environment.
⚠️However, not all new features can be fully polyfilled. It's better to use vetted set of polyfills such as those provided by ES5-Shime and ES6-Shim,

Transpilling

Newly added syntax cannot be polyfilled, they will throw an error in older JS engine as unrecognized/valid. The better solution is transpilling(transfoming+compiling), which converts the newer code to older code equivalents.

脚本宝典总结

以上是脚本宝典为你收集整理的ES5-8 & Polyfilling & Transpilling全部内容,希望文章能够帮你解决ES5-8 & Polyfilling & Transpilling所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。