Brief introduction
It contains the basic concepts of ECMAScript, babel use, eslint use as well as introduce new grammar and usage experience
ECMAScript concept
ECMASctipt is a kind of Ecma (formerly known as the European Computer License Association) standardized by the ECMA-262 Script programming language. This language is widely used on the Web, it is often referred to as JavaScript or JScript, but in fact the two are after ECMA-262 standard implementation and expansion
ES6, ES2015 what is
The first version of the ES6, released in June 2015, the official name is "ECMAScript 2015 Standard" (referred ES2015)
In June 2016, slightly revised "ECMAScript 2016 Standard" (referred to as the ES2016) release, this version can be seen as ES6.1 version
ES6 is both a historical term, but also a general reference, meaning future version of the next-generation standard JavaScript 5.1, covering the ES2015, ES2016, ES2017, etc.
What is tc39 ( official website )
Introduction
Anyone can assure Standards Committee (also known as TC39 Committee) proposal to amend the language standard.
A new proposal from grammar to become an official standard, we need to go through five stages. Each stage of change will need to be approved by the TC39 committee.
Stage 0 - Strawman(展示阶段)
Stage 1 - Proposal(征求意见阶段) Stage 2 - Draft(草案阶段) Stage 3 - Candidate(候选人阶段) Stage 4 - Finished(定案阶段)As long as a proposal to enter Stage 2, it will almost certainly include formal standards at a later inside.
babel basic concepts ( official website )
What babel that?
Converting the syntax is ES5 old syntax translator (transpiler)
Related modules
babel-core: babel core
babel-cli: babel command-line tool
babel-plugin: syntax plugins
babel-preset: a collection of plug-in syntax (grammar is a set of language version)
babel installation
npm i babel-cli -g
Basic use
above sea level,
babel es6.js
# Es6.js contents of the file
const log = (...params) => {console.log(...params)}
export default log
babel-preset-env (highly recommended) ( Information )
benefit
According to different versions of the browser configuration code or node environment can generate compatible
Can be translated all the new syntax, it can also be based on environmental compatibility, not to interpret some grammar
babel profile
babel using configuration files
babel-cli use .babelrc file in the current directory as the default configuration file, using the format json
babel without using the configuration file
Use --no-babelrcoption allows babel-cli is not a configuration file, then need to use the command line parameters babel-cli
Case #
{ "presets": [ [ "env", { "targets": { "browsers": ["last 2 versions", "ie >= 10"] }, "debug": false } ] ], "plugins": [ "transform-class-properties", "transform-decorators-legacy", [ "transform-react-jsx", { "pragma": "React.createElement" } ], [ "transform-runtime", { "helpers": true, "polyfill": true, "regenerator": true, "moduleName": "babel-runtime" } ] ] }
babel two plug-ins
polyfill 和 transform-runtime
babel-polyfill (ES5 add some characteristics in a window object then converted)
Prior to the service code is loaded into a script browser with version ES5 implemented new features complement the browser lack of global object / type / functions, etc.
babel-plugin-transform-runtime (load demand does not define the syntax)
babel-polyfill great.
Do not want to pollute the global, such as do not want to add fields in the window.
In the babel translation process, using the code file of the head of the new features added requirestatement, a reference to the version of the ES5 achieve business code. What characteristics, what it references, and does not pollute the global.
Common new syntax
and let const
Define the variable syntax in order to avoid "variable scope to enhance the" problems arising var keyword
let obj = {} # variable object
const obj = {} # immutable objects
What is the scope of upgrade?-Defined variables let its scope and defined variables var What's the difference?
After using the function in var Definitions
We will first define and then assign var
eg:
function fn(){
if(1){ var a = 12345 }
console.log( a ); #12345
}
Equivalent to
function fn(){
There;
if(1){ a = 12345 }
console.log( a ); #12345
}
Therefore, it will increase the scope of variables being given const or let the end of the scope specified
When the closure passed, what is the difference between variables var defined?
Var defined when using the closure passed by value using a reference
Using the let-defined value semantics
eg:
//for(var i = 0; i < 10; i++){
for(let i = 0; i < 10; i++){
setTimeout(function(){
console.log (i); # Were: 10 10 10 ... easy: 0 1 2 3 ...
});
}
const means that in the end who can not change?
const obj = {};
obj = 1; # directly change point being given obj
obj.a = 1; # add attributes without error
Deconstruction assignment problem solving multiple variable assignments
eg: const obj = { a:1, b:2 }
const {a:x,b} = obj;
console.log(a,b);
eg: const [a , b] = [1 , 2]
console.log(a , b);
Template string
Do not use the "+" sign combination string
eg:
const foo = '3';
// const bar = foo + 2 + 1 # 321
const bar = `$(foo)$(2+1)`; # 33
console.log(bar)
S regular expression modifiers
Regular expression. "" S use does not match after a newline modifier. "" I can match a newline
eg: const str = "Hello
world!";
const reg1 = /Hello.+world!/
const reg2 = /Hello.+world!/s
console.log(reg1.test(str));
console.log(reg2.test(str));
isFinite and isNaN
value judgment is not limited isFinite
eg: Number.isFinite(1);
isNaN judgment is not NaN (not a number)
eg: Number.isNaN(1);
isSafeInteger
JavaScript accurate representation of an integer ranging between -2 ^ 53 to 2 ^ 53 (excluding two off), over this range, this value can not be accurately represented isSafeInteger
Number.MIN_SAFE_INTEGER
Number.MAX_SAFE_INTEGER
eg: Number.isSafeInteger(1) // true
Object topic
Properties Introduction representation
Old Grammar
const foo = 1
const bar = 2
const obj = { foo : foo, bar: bar}
New syntax
const foo = 1
const bar = 2
const obj = {foo ,bar}
Property name expression (the value of the property as a property of the object to another object)
Old Grammar
function fn(foo, bar){
const K = {}
ret[foo] = 'foo'
entitled [bar] = 'bar'
}
New syntax
function fn(foo, bar){
return {
[foo]: 'foo',
[Bar]: 'bar'
}
}
The name attribute function
function object's name property, you can get the function name
Used: a debugging tool, log printing
eg: When viewing function calls
function foobar(){
return {}
}
function invoke(fn){
console.log( fn.name );
return fn();
}
invoke(foobar)
Object.is
is equal is to implement a new algorithm
And the disadvantages == ===
Automatically converted Type == [1], and "1" is equal to
=== do not think equal NaN and NaN, +0 -0 and equal
Important: Same-value equality (equal to the same value)
Object.assign
assgin shallow copy or light can be used to merge objects
Important: What is the 'shallow' and what is 'deep'??
Shallow copy: only the object attribute of the first layer is traversed, and then copies the value up
Deep Copy: Copy attributes within the object when the object is a direct copy of the original object pointer
Interview questions: how to copy an object?
const foo = { a: 1, b: 2 }
const fee = { c: 3, d: {z:2} }
const check = { c: 3, d: {z:2} }
// Copy
const bar = Object.assign({}, foo) //{ a: 1, b: 2 }
// Merge
const baz = Object.assign({}, foo, fee) // {a: 1, b: 2, c: 3, d: {z:2} }
console.log (fee.d === baz.d) // true represents a pointer to the same
console.log (check.d === baz.d) // false indicates a pointer does not point to the same
__proto__
__proto__ pointer is a pointer to the object prototype, only the browser commitment to support, not necessarily the other environment, it is not recommended to use
Knowledge Point:
Object.setPrototypeOf() 和 Object.getPrototype()
expand
Prototype chain
keys , values, entries
find keys used to find the object itself may be enumerated attribute name (not included with Object.setPrototypeof (obj, {a: a}) disposed on the properties of the prototype);
property values used to find the value of the object itself to find enumerable
entries to object into an array of key-value
expand
Various methods loop through the object
// print enumerable property itself has properties
const obj = { a:1, b:2, c:3 }
Object.setPrototypeOf(obj, {x:'x'})
Object.keys(obj).forEach((ky)=>{ console.log(ky); }) // a b c
Object.values(val).forEach((val)=>{ console.log(val); }) // 1 2 3
Object.entries(obj).forEach((obj)=>{ console.log(obj); }) // [a,1] [b,2]
getOwnPropertyDescriptor
Each object has a property description object (Descriptor), for controlling the behavior of the property, Object.getOwnPropertyDescriptor ways to obtain the property description object
Expansion of enumerable
enumerable properties of the object field, referred to as "enumeration" of, if the property is false, it means that certain operations will ignore the current property
. 1 for ... in loop: only traverse the object itself and inherited enumerable property
2 Object.kes ():. Button returns the name of the object itself all enumerable properties
3. JSON.stringify: only serialized object itself enumerable property
4. Object.assign (): Ignore not enumerated attribute, only the copy of the object itself may be enumerated property
eg: is defined as a non-enumeration does not traverse the custom properties added unlimited
const a = [1 ,2 ,3];
// Get the value of Object.getOwnPropertyDescriptor a enumerable of (a, sum);
Object.defineProperty(a, 'sum', {
value: function(){ return 6 },
enumerable: false
})
for(let key in a){
console.log(key);
}
Operators Expand
... use symbols, objects can "expand"
eg:
1 . foo = {a: 1, b: 2}
bar = {...foo, c: 3}
console.log(bar) //{a: 1, b: 2, c:3}
... // foo which is equivalent to Object.keys (foo) .forEach ((key) => {bar [key] = foo [key]})