Written in the beginning
- ES6 common but ignored methods series of articles, sorting out the author thinks that some daily development may use some methods, use skills and some application scenarios, details please see related content links, welcome to supplement exchange.
Related articles
- Common but overlooked methods for ES6 (Destruct assignments and values first)
- ES6 Common but ignored methods (second bullet functions, arrays, and objects)
- ES6 common but ignored methods (third bullet Symbol, Set, and Map)
- ES6 commonly used but overlooked methods (fourth bullet Proxy and Reflect)
- ES6 common but ignored methods (# 5 Promise and Iterator)
- Common but ignored methods for ES6 (Generator 6)
- ES6 Common but ignored methods (async)
- ES6 Common but ignored methods (eighth bullet Class)
- ES6 common but ignored methods (Module 9)
- Common but ignored methods of ES6 (Development specification of the Tenth Bullet Project)
- ES6 common but ignored method (eleventh bullet Decorator)
The latest proposal
- ES6- Latest proposal
Do expression
- in
do
expressionThe proposalPreviously, block-level scope was a single statement that encapsulated multiple operations with no return value.do
Expressions allow block-level scopes to become expressions, that is, to return values,Returns the value of the last internally executed expression.
Let x = do {let t = f(); t * t + 1; }; / / perform different functions in different Settings let x = do {the if (foo () ()} {f else if (bar ()) {g ()} else {h ()}};Copy the code
Throw expression
JavaScript
Grammar rulesthrow
Is a command that throws an error and cannot be used in expressions.
Console. log(throw new Error());Copy the code
- Now there is aThe proposal ,
throw
Can be used directly in expressions.
Function save(filename = throw new TypeError("Argument required")) {} lint(ast, {with: () => throw new Error("avoid using 'with' statements.") }); // let typeof x === number? x : throw new Error("Is NaN"); / / logical expression let val = value | | throw new Error (" Invalid value ");Copy the code
- In grammar,
throw
The throw inside the expression is no longer a command, but an operator. To avoid contact withthrow
Command confusion,provisionsthrow
The occurrence at the beginning of the line is interpreted asthrow
Statement, instead ofthrow
Expression.
Partial execution of a function
- Multi-argument functions sometimes need to bind one or more of their arguments and then return a new function.
function add(x, y) { return x + y; } function add7(x) { return x + 7; } // bind const add7 = add.bind(null, 7); // arrow function const add7 = x => add(x, 7);Copy the code
- Now we have oneThe proposal, making it easier to bind parameters and return a new function. This is called the partial execution of a function (
partial application
).?
Is a placeholder for a single parameter,.
Is a placeholder for multiple arguments.
f(x, ?) f(x, ...) f(? , x) f(... , x) f(? , x, ?) f(... , x, ...)Copy the code
?
and.
Can only appear in a function call, and a new function is returned.
const g = f(? , 1,...). ; // const g = (x,... y) => f(x, 1, ... y);Copy the code
- Partial execution of a function can also be used for methods of an object.
let obj = { f(x, y) { return x + y; }}; const g = obj.f(? , 3); g(1) // 4Copy the code
Pay attention to the point
- The partial execution of a function is based on the original function. If the original function changes, the new function generated by the partial execution will immediately reflect the change.
let f = (x, y) => x + y; const g = f(? , 3); g(1); F = (x, y) => x * y; g(1); / / 3Copy the code
- If the presupplied value is an expression, the expression is not evaluated at definition time, but at each invocation.
let a = 3; const f = (x, y) => x + y; const g = f(? , a); g(1); // change the value of a = 10; g(1); / / 11Copy the code
- If the new function has more arguments than the number of placeholders, the extra arguments are ignored.
const f = (x, ... y) => [x, ...y]; const g = f(? , 1); g(2, 3, 4); / / (2, 1)Copy the code
.
Will only be collected once if more than one partial execution of the function is used.
, then each.
Will all have the same value.
const f = (... x) => x; const g = f(... , 9,...). ; g(1, 2, 3); // [1, 2, 3, 9, 1, 2, 3]Copy the code
Pipe operator
- The proposal.
JavaScript
The pipe is an operator that writes|>
. It has an expression on the left and a function on the right. The pipe operator passes the value of the expression on the left to the function on the right for evaluation.
X | > f / / equal to f (x)Copy the code
- The pipe operator can pass only one value, which means that the function to its right must be a single-argument function. If it is a multi-argument function, it must be currified to the single-argument version.
function double (x) { return x + x; }
function add (x, y) { return x + y; }
let person = { score: 25 };
person.score
|> double
|> (_ => add(7, _))
// 57
Copy the code
- The pipe operator for
await
Delta functions also apply.
X | > await f / / equivalent to await f (x) const userAge = userId | > await fetchUserById | > getAgeFromUser; // equivalent to const userAge = getAgeFromUser(await fetchUserById(userId));Copy the code
Numeric separator
- In European and American languages, long numeric values allow a separator (usually a comma) to be added every three digits, increasing the readability of the value. For instance,
1000
You can write1000
. - Now we have oneThe proposalTo allow
JavaScript
Use an underscore (_
) as a separator.
let budget = 1_000_000_000_000;
budget === 10 ** 12 // true
Copy the code
JavaScript
The numeric delimiter does not specify the number of digits in the interval. Decimal and scientific notation can also use numeric delimiters.
123_00 === 12_300 // true 12345_00 === 123_4500 // true 12345_00 === 1_234_500 // true // decimal 0.000_001 // Scientific counting 1e10_000Copy the code
- Pay attention to the point.
- Cannot precede the value (
leading
) or the last (trailing
). - Two or more delimiters cannot be joined together.
- There can be no separators before and after the decimal point.
- In scientific notation, representing exponents
e
orE
There can be no delimiters before and after.
// All errors 3_.141 3._141 1_e12 1e_12 123__456 _1464301 1464301_Copy the code
- Cannot precede the value (
- In addition to decimal, other numeric values can also use separators.
// Binary 0b1010_0001_1000_0101 // hexadecimal 0xA0_B0_C0Copy the code
- A delimiter cannot follow a hexadecimal prefix
0b
,0B
,0o
,0O
,0x
,0X
.
// Error 0_b111111000 0b_111111000Copy the code
Number()
,parseInt()
,parseFloat()
Three functions that convert strings to numeric values, with no numeric delimiters supported. The main reason is that the designers of the proposal believe that numerical separators are primarily for the convenience of writing numerical values when coding, rather than for processing external input data.
Number('123_456') // NaN
parseInt('123_456') // 123
Copy the code
Math.signbit()
Math.sign()
Is used to determine whether a value is positive or negative, but if the parameter is0
, it will return0
. In real programming, one value is+ 0
or0
It’s very troublesome because they’re equal.
Math.sign(-0) // -0
+0 === -0 // true
Copy the code
- There was a proposal that was introduced
Math.signbit()
Method to determine whether a number has a sign bit.
Math.signbit(2) //false
Math.signbit(-2) //true
Math.signbit(0) //false
Math.signbit(-0) //true
Copy the code
- The algorithm of this method is as follows.
- If the parameter is
NaN
To return tofalse
. - If the parameter is
0
To return totrue
. - If the argument is negative, return
true
. - Other cases return
false
.
- If the parameter is
Double colon operator
- Arrow functions can be bound
this
Object, greatly reducing explicit bindingthis
Object writing (call
,apply
,bind
), arrow functions are not suitable for all situations, so there is oneThe proposal, proposed “function binding” (function bind
) operator used to replacecall
,apply
,bind
The call. The function binding operators are two colons side by side (: :
), the double colon is an object on the left and a function on the right.
foo::bar; // Equivalent to bar.bind(foo); foo::bar(... arguments); // equivalent to bar.apply(foo, arguments);Copy the code
- If the left side of the double colon is empty and the right side is a method of an object, it binds that method to that object.
var method = obj::obj.foo; Var method = :obj.foo; let log = ::console.log; // Var log = console.log.bind(console);Copy the code
- If the result of the double colon operator is still an object, we can use the chain notation.
import { map, takeWhile, forEach } from "iterlib";
getPlayers()
::map(x => x.character())
::takeWhile(x => x.strength > 100)
::forEach(x => console.log(x));
Copy the code
Realm API
Realm API
The proposalProvide sandbox functionality (sandbox
To allow code to be quarantined, preventing those quarantined from getting the global object. To provide aRealm()
Constructor to generate aRealm
Object. The object ofglobal
Property refers to a new top-level object similar to the original top-level object.Realm
The top-level object and the original top-level object are two different objects.
const globalOne = window; const globalTwo = new Realm().global; Let a1 = globalOne. Evaluate (' [1, 2, 3] '); Let a2 = globalTwo. Evaluate (' [1, 2, 3] '); a1.prototype === a2.prototype; // false a1 instanceof globalTwo.Array; // false a2 instanceof globalOne.Array; // falseCopy the code
Realm
You can only run inside the sandboxECMAScript
Syntactically providedAPI
Cannot run those provided by the host environmentAPI
.For example,console
It’s not a syntax standard, it’s provided by the host environment.
globalTwo.evaluate('console.log(1)') // throw an error: Console = globalone. console;Copy the code
Realm()
The constructor can take a parameter object that has aintrinsics
Attributes can be specifiedRealm
The sandbox inherits the methods of the original top-level object.
const r1 = new Realm();
r1.global === this;
r1.global.JSON === JSON; // false
const r2 = new Realm({ intrinsics: 'inherit' });
r2.global === this; // false
r2.global.JSON === JSON; // true
Copy the code
#! The command
Unix
All command line scripts support #! Command, also known asShebang
或Hashbang
. This command, placed on the first line of the script, specifies the executor of the script.
// The first line of the Bash script. #! /bin/sh // The first line of the Python script. #! /usr/bin/env pythonCopy the code
- Now we have oneThe proposalfor
JavaScript
Scripts introduce#!
Command, written in the first line of the script file or module file.
// Write the first line of the script file #! /usr/bin/env node 'use strict'; console.log(1); // Write on the first line of the module file #! /usr/bin/env node export {}; console.log(1);Copy the code
- With this line of work,
Unix
The script can be executed directly from the command line.
$node hello.js # hashbang $./hello.jsCopy the code
- for
JavaScript
For the engine, it will#!
Read it as a comment and ignore this line.
import.meta
- When using a module, developers sometimes need to know something about the template itself (such as the path to the module). Now we have oneThe proposalfor
import
The command adds a meta-attributeimport.meta
Returns meta information about the current module. import.meta
Can only be used inside the module, if used outside the module will report an error.- This property returns an object whose various properties are meta information about the currently running script. The standard does not specify which attributes are included, and it is up to each operating environment to decide. In general,
import.meta
There will be at least two properties.
import.meta.url
import.meta.url
Returns the value of the current moduleURL
The path. For example, the path to the current module main file ishttps://foo.com/main.js
.import.meta.url
I’m going to return this path. If there is also a data file in the moduledata.txt
To get the path to the data file, use the following code.
new URL('data.txt', import.meta.url)
Copy the code
Node.js
Environment,import.meta.ur
L always returns the local path, i.efile:URL
Protocol string, for examplefile:///home/user/foo.js
.
import.meta.scriptElement
import.meta.scriptElement
Is a browser-specific meta-property that returns the one that loaded the module<script>
Element, equivalent todocument.currentScript
Properties.
// the HTML code is // <script type="module" SRC ="my-module.js" data-foo=" ABC "></script> // my-module.js internally executes the following code import.meta.scriptElement.dataset.foo // "abc"Copy the code
conclusion
- In the latest proposal, there is a write feature that I think is very useful. For example,
throw
Expressions, which we can’t use in block-level scopes before, can be used to do some exception handling directly in expressions after the proposal is approved.- Pipe operator (
|>
), we can use the pipe operator to write directly on a line when we call consecutively, and the logic is clearer. - The double colon operator (
: :
), before we bindthis
In order to usecall
,apply
,bind
Or you can use the arrow function, but in some cases the arrow function is limited, so the double colon operator can be written in shorthand and can handle special cases outside of the arrow function. - Other features have their own uses, maybe we have not encountered some situations in the development, the existence is reasonable.
ES6
(ES2016
(collectively) more and more features, we need to continue to be familiar with the new special new, which is what we will use in the development, can improve our development efficiency, every time after reading there will be a different harvest, we can also go back at intervals to deepen the impression.ES6
This concludes the series of articles on common but overlooked methods: Scatter flowers 🎉🎉🎉, thank you for your support.