Open JHinW opened 7 years ago
{
"presets": [
["es2015", {"modules": false}], // webpack understands the native import syntax, and uses it for tree shaking
"stage-2",
// Specifies what level of language features to activate.
// Stage 2 is "draft", 4 is finished, 0 is strawman.
// See https://tc39.github.io/process-document/
"react" // Transpile React components to JavaScript
],
"plugins": [
"react-hot-loader/babel", // Enables React code to work with HMR.
"transform-object-assign"
],
"env": {
"test": {
"plugins": ["transform-es2015-modules-commonjs"]
}
}
}
if you don't specify any plugins/presets, Babel will just return the original source code.
Destructuring in ES2015
// list matching
var [a, ,b] = [1,2,3];
a === 1;
b === 3;
// object matching
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode()
// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()
// Can be used in parameter position
function g({name: x}) {
console.log(x);
}
g({name: 5})
// Fail-soft destructuring
var [a] = [];
a === undefined;
// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;
// Destructuring + defaults arguments
function r({x, y, w = 10, h = 10}) {
return x + y + w + h;
}
r({x:1, y:2}) === 23
Generators see this link
Generators simplify iterator-authoring using function* and yield*. A function declared as function returns a Generator instance. Generators are subtypes of iterators which include additional next and throw**. These enable values to flow back into the generator, so yield is an expression form which returns a value (or throws).
summary:
from function*
you can get iteratable expresssions with which you can get value and pass any value to generator runtime.
Understand Tail calls from this link
function factorial(n, acc = 1) {
"use strict";
if (n <= 1) return acc;
// add by jin
// try to calculate value from Call-Back Func.
return factorial(n - 1, n * acc);
}
// Stack overflow in most implementations today,
// but safe on arbitrary inputs in ES2015
factorial(100000)
show my own tails call coding exp:
function path3(n, tree, callBack) {
if(tree.isEmpty()) callBack(list("no found")) ;
if(tree.head && tree.head ==n) callBack(list());
if(tree.head && tree.head >n) path3(n, tree.tail.head, function(val){
if(val.isErrr){
}
callBack(conc("left",val));
});
if(tree.head && tree.head <n) path3(n, tree.tail.tail.head, function(val){
callBack(conc("right",val));
});
}
path3(170, tree, function(r){
console.log("xssss");
console.log(r.toString());
});
you need to know when the recursion should be over and what should be processed if it need to continue.
https://github.com/wangjinisda/react-webpack-babel-starter/blob/redux-router/package.json