yuthelloworld / blog Goto Github PK

// v3
import { browserHistory } from 'react-router'

// 获取当前location
const initialState = browserHistory.getCurrentLocation()

// v4
import createHistory from 'history/createBrowserHistory'

export const history = createHistory()

// Get the current location.
const initialState = history.location

// v3
import { browserHistory } from 'react-router'
import { updateLocation } from './location'

store.unsubscribeHistory = browserHistory.listen(updateLocation(store))

export const updateLocation = ({ dispatch }) => {
  return (nextLocation) => dispatch(locationChange(nextLocation))
}

// Listen for changes to the current location.
const unlisten = history.listen((location, action) => {
  // location is an object like window.location
  console.log(action, location.pathname, location.state)
})

// v4
import { updateLocation, history } from './location'

// 监听浏览器history变化，绑定到store。取消监听直接调用store.unsubscribeHistory()
store.unsubscribeHistory = history.listen(updateLocation(store))

// v3
// ...
import { browserHistory, Router } from 'react-router'

// ...
<Router history={browserHistory} children={routes} />

// ...
import {  BrowserRouter, Route } from 'react-router-dom'

// ...
<BrowserRouter>
  <div>
    <Route path='/' component={CoreLayout} />
  </div>
</BrowserRouter>
//...

import React from 'react'
import PropTypes from 'prop-types'
import createHistory from 'history/createBrowserHistory'
import { Router } from 'react-router'

/**
 * The public API for a <Router> that uses HTML5 history.
 */
class BrowserRouter extends React.Component {
  static propTypes = {
    basename: PropTypes.string,
    forceRefresh: PropTypes.bool,
    getUserConfirmation: PropTypes.func,
    keyLength: PropTypes.number,
    children: PropTypes.node
  }

  history = createHistory(this.props)

  render() {
    return <Router history={this.history} children={this.props.children}/>
  }
}

export default BrowserRouter

// v4
import { Router, Route } from 'react-router-dom'
//...

<Router history={history}>
  <div>
    <Route path='/' component={CoreLayout} />
  </div>
</Router>

// v3
//..
export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : Home,
  childRoutes : [
    CounterRoute(store),
    ZenRoute(store),
    ElapseRoute(store),
    RouteRoute(store),
    PageNotFound(),
    Redirect
  ]
})
//...

// ...
const Routes = () => (
  <Switch>
    <Route exact path='/' component={Home} />
    <Route path='/counter' component={AsyncCounter} />
    <Route path='/zen' component={AsyncZen} />
    <Route path='/elapse' component={AsyncElapse} />
    <Route path='/route/:id' component={AsyncRoute} />
    <Route path='/404' component={AsyncPageNotFound} />
    <Redirect from='*' to='/404' />
  </Switch>
)

export default Routes
//

// v3
import { injectReducer } from '../../store/reducers'

export default (store) => ({
  path : 'counter',
  /*  动态路由 */
  getComponent (nextState, cb) {
    /* 代码分割 */
    require.ensure([], (require) => {
      const Counter = require('./containers/CounterContainer').default
      const reducer = require('./modules/counter').default

      /*  将counterReducer注入rootReducer  */
      injectReducer(store, { key : 'counter', reducer })

      cb(null, Counter)
    }, 'counter')
  }
})

import React from 'react'

export default function asyncComponent (importComponent) {
  class AsyncComponent extends React.Component {
    constructor (props) {
      super(props)

      this.state = {
        component: null,
      }
    }

    async componentDidMount () {
      const { default : component } = await importComponent()

      this.setState({
        component: component
      })
    }

    render () {
      const C = this.state.component

      return C
        ? <C {...this.props} />
        : null
    }
  }

  return AsyncComponent
}

import { injectReducer } from '../../store/reducers'
import { store } from '../../main'
import Counter from './containers/CounterContainer'
import reducer from './modules/counter'

injectReducer(store, { key : 'counter', reducer })

export default Counter

this.props.router.push('/')

this.props.history.push('/')

this.props.params.id

this.props.match.params.id

var today = new Date()
console.log(today.getYear()+1900)
// 2017

var today = new Date()
console.log(today.getMonth())
// 7

var today = new Date()
var lastDay = new Date(today.getFullYear(), today.getMonth() + 1, 0)
console.log(lastDay)
// 输出：Thu Aug 31 2017 00:00:00 GMT+0800 (CST)

var aDate = new Date(2017, 1, 31)
console.log(aDate)
// 输出：Fri Mar 03 2017 00:00:00 GMT+0800 (CST)

fecha.format(new Date(), 'YYYY年MM月DD日')
// 2017年09月06日

const actionCreator = function () {
  return {
    type : 'AN_ACTION'
  }
}

console.log(actionCreator())
//  { type: 'AN_ACTION' }

const reducer = function (state = {}, action) {
  console.log('reducer was called with state', state, 'and action', action);

  return state;
}

import { createStore } from 'redux'

const store_0 = createStore(() => {})

const reducer = function (...args) {
  console.log('Reducer was called with args', args)
}

const store_1 = createStore(reducer)
// 输出：Reducer was called with args [ undefined, { type: '@@redux/INIT' } ]

import { createStore } from 'redux'

const reducer_2 = function (state = {}, action) {
  console.log('reducer_2 was called with state', state, 'and action', action)

  return state;
}

const store_2 = createStore(reducer_2)
// 输出: reducer_2 was called with state {} and action { type: '@@redux/INIT' }

console.log('store_2 state after initialization:', store_2.getState())
// 输出: store_2 state after initialization: {}

// 接以上代码
const anAction = {
  type : 'AN_ACTION'
}
store_2.dispatch(anAction);
// 输出：reducer_2 was called with state {} and action { type: 'AN_ACTION' }

const userReducer  = function (state = {}, action) {
  console.log('userReducer was called with state', state, 'and action', action)

  switch (action.type) {
    // etc.
    default:
      return state;
  }
}
const itemsReducer = function (state = [], action) {
  console.log('itemsReducer was called with state', state, 'and action', action)

  switch (action.type) {
    // etc.
    default:
      return state;
  }
}
import { createStore, combineReducers } from 'redux'

const reducer = combineReducers({
  user  : userReducer,
  items : itemsReducer
})

// 输出：
// userReducer was called with state {} and action { type: '@@redux/INIT' }
// userReducer was called with state {} and action { type: '@@redux/PROBE_UNKNOWN_ACTION_9.r.k.r.i.c.n.m.i' }
// itemsReducer was called with state [] and action { type: '@@redux/INIT' }
// itemsReducer was called with state [] and action { type: '@@redux/PROBE_UNKNOWN_ACTION_4.f.i.z.l.3.7.s.y.v.i' }

var store_0 = createStore(reducer)

// 输出：
// userReducer was called with state {} and action { type: '@@redux/INIT' }
// itemsReducer was called with state [] and action { type: '@@redux/INIT' }

console.log('store_0 state after initialization:', store_0.getState())
// 输出：
// store_0 state after initialization: { user: {}, items: [] }

import { connect } from 'react-redux'
const containerComponent = connect(mapStateToProps, mapDispatchToProps)(presentationalComponent)

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'
export default class ProfileContainer extends Component {
  state = { expanded: false }

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'
export default class ProfileContainer extends Component {
  state = { expanded: false }
 
  static propTypes = {
    model: object.isRequired,
    title: string
  }
 
  static defaultProps = {
    model: {
      id: 0
    },
    title: 'Your Name'
  }

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'
export default class ProfileContainer extends Component {
  state = { expanded: false }
 
  static propTypes = {
    model: object.isRequired,
    title: string
  }
 
  static defaultProps = {
    model: {
      id: 0
    },
    title: 'Your Name'
  }
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.model.save()
  }
  
  handleNameChange = (e) => {
    this.props.model.changeName(e.target.value)
  }
  
  handleExpand = (e) => {
    e.preventDefault()
    this.setState({ expanded: !this.state.expanded })
  }

this.setState(prevState => ({ expanded: !prevState.expanded }))

render() {
    const {
      model,
      title
    } = this.props
    return ( 
      <ExpandableForm 
        onSubmit={this.handleSubmit} 
        expanded={this.state.expanded} 
        onExpand={this.handleExpand}>
        <div>
          <h1>{title}</h1>
          <input
            type="text"
            value={model.name}
            onChange={this.handleNameChange}
            placeholder="Your Name"/>
        </div>
      </ExpandableForm>
    )
  }

 <input
           type="text"
            value={model.name}
            // onChange={(e) => { model.name = e.target.value }}
            // ^ Not this. Use the below:
            onChange={this.handleChange}
            placeholder="Your Name"/>

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'
// 分开本地导入和依赖导入
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'

// 使用修饰器（如果有的话）
@observer
export default class ProfileContainer extends Component {
  state = { expanded: false }
  // 初始化state (ES7) 或者在构造函数(constructor)中初始化state (ES6)
 
  //使用静态属性(ES7)声明propTypes越早越好
  static propTypes = {
    model: object.isRequired,
    title: string
  }

  // 在propTypes后声明defaultProps
  static defaultProps = {
    model: {
      id: 0
    },
    title: 'Your Name'
  }

  // 使用箭头函数绑定指向定义的上下文的this
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.model.save()
  }
  
  handleNameChange = (e) => {
    this.props.model.name = e.target.value
  }
  
  handleExpand = (e) => {
    e.preventDefault()
    this.setState(prevState => ({ expanded: !prevState.expanded }))
  }
  
  render() {
    // 解构props成可读的
    const {
      model,
      title
    } = this.props
    return ( 
      <ExpandableForm 
        onSubmit={this.handleSubmit} 
        expanded={this.state.expanded} 
        onExpand={this.handleExpand}>
        // 如果有2个以上props,分行写
        <div>
          <h1>{title}</h1>
          <input
            type="text"
            value={model.name}
            // onChange={(e) => { model.name = e.target.value }}
            // 避免创造新的闭包，应该使用下面的方法。
            onChange={this.handleNameChange}
            placeholder="Your Name"/>
        </div>
      </ExpandableForm>
    )
  }
}

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool
}
// Component declaration

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool,
  onExpand: func.isRequired
}
function ExpandableForm(props) {
  const formStyle = props.expanded ? {height: 'auto'} : {height: 0}
  return (
    <form style={formStyle} onSubmit={props.onSubmit}>
      {props.children}
      <button onClick={props.onExpand}>Expand</button>
    </form>
  )
}

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool,
  onExpand: func.isRequired
}
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
  const formStyle = expanded ? {height: 'auto'} : {height: 0}
  return (
    <form style={formStyle} onSubmit={onSubmit}>
      {children}
      <button onClick={onExpand}>Expand</button>
    </form>
  )
}

const ExpandableForm = ({ onExpand, expanded, children }) => {

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
import './styles/Form.css'
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool,
  onExpand: func.isRequired
}
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
  const formStyle = expanded ? {height: 'auto'} : {height: 0}
  return (
    <form style={formStyle} onSubmit={onSubmit}>
      {children}
      <button onClick={onExpand}>Expand</button>
    </form>
  )
}
export default observer(ExpandableForm)

import React from 'react'
import { observer } from 'mobx-react'
import { func, bool } from 'prop-types'
// Separate local imports from dependencies
import './styles/Form.css'

// 在组件前声明propTypes
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool,
  onExpand: func.isRequired
}

// 解构props,通过函数入参默认值的方式设定defaultProps
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
  const formStyle = expanded ? { height: 'auto' } : { height: 0 }
  return (
    <form style={formStyle} onSubmit={onSubmit}>
      {children}
      <button onClick={onExpand}>Expand</button>
    </form>
  )
}

// Wrap the component instead of decorating it
export default observer(ExpandableForm)

const name = 'window'; 

const a = {
   name: 'a',
   sayHello: () => {
      console.log(this.name)
   },
  that: this
}

a.sayHello();  // 输出a ? 错啦，其实输出的是w, 通过a.that就可以验证this到底是谁

const name = 'window'; 

const a = {
   name: 'a',
   sayHello: function(){
      const s = () => console.log(this.name)
      return s//返回箭头函数s
   }
}

const sayHello = a.sayHello();
sayHello(); // 输出a

class Person {
    constructor(name,age){
        this.name = name
	this.age = age
    }
    study = () => {
	//study方法放在了哪里？——类的原型对象上，供实例使用
	//通过Person实例调用study时，study中的this就是Person实例
	console.log(this);
	}
}
const p1 = new Person('tom',18)
p1.study() //通过实例调用study方法
const x = p1.study
x()

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();
  }

  render() {
    return <input type="text" ref={this.inputRef} />;
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }
}

class TopLevelRoute extends React.Component {
  constructor(props) {
    super(props);

    SharedApplicationState.recordEvent('ExampleComponent');
  }
}

const element = <h1>Hello, world!</h1>;

<h1>{title}</h1>

const element = <img src={user.avatarUrl} />;

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

<h1 className="loading">Hello world</h1>

<div>
  {text.map(item => (
    <p key={item.id}>{item.text}</p>
  ))}
</div>

var MyComponent = React.createClass({
  componentWillMount: function(){

  },
  render: function() {
    return (
      <div>ES5</div>
    );
  },
});

const MyComponent = () => (
  <div>
    ES6
  </div>
);

class MyComponent extends React.Component {
  render() {
    return (
      <div>ES6</div>
    );
  }
}

import Proptypes from 'prop-types'
class Video extends React.Component {
  render() {
      return (
          <View />
      );
  }
}
Video.defaultProps = {
    autoPlay: false,
    maxLoops: 10,
};
Video.propTypes = {
    autoPlay: PropTypes.bool.isRequired,
    maxLoops: PropTypes.number.isRequired
};

class Video extends React.Component {
  static defaultProps = {
    autoPlay: false,
    maxLoops: 10,
  }
  static propTypes = {
    autoPlay: PropTypes.bool.isRequired,
    maxLoops: PropTypes.number.isRequired
  }
  state = {
    loopsRemaining: this.props.maxLoops,
  }
}

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.title
    };
  }
}

export default class Header extends Component {
  state = {
    title: this.props.title
  };
    
  // followed by constructor...
}

class AutoloadingPostsGrid extends React.Component {
  render() {
    const {
      className,
      ...others,  // contains all properties of this.props except for className
    } = this.props;
    return (
      <div className={className}>
        <PostsGrid {...others} />
        <button onClick={this.handleLoadMoreClick}>Load more</button>
      </div>
    );
  }
}

// with arrow function
const App = ({className, ...rest}) => (
  <div className={classnames(className)} {...rest}>
    <MyComponent />
  </div>
);

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined

let temp = obj.first;
let nestedProp = ((temp === null || temp === undefined) ? undefined : temp.second);

const PLUS = 'PLUS';

let availableId = 0;
availableId ++;

const user = 'world';
console.log(`hello ${user}`);  // hello world

// 多行（所有的空格和缩进都会被保留在输出之中）
const content = `
  Hello ${firstName},
  Thanks for ordering ${qty} tickets to ${event}.
`;

function log(user = 'World') {
  console.log(user);
}

log() //  World

// ES6
function Timer() {
  this.s1 = 0;
  setInterval(() => this.s1++, 1000);
}

// 等同于ES5
function Timer() {
  this.s1 = 0;
  setInterval((function () {
    this.s1++;
  }).bind(this), 1000);
}

const timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100); 
// s1:3

//导出默认, counter.js
export default function counter() { 
  // ...
}

import counter from 'counter'; 

// 普通导出和导入，reducer.js
export const injectReducer = ( ) => {
  //...
}

import { injectReducer } from 'reducers'

// 引入全部并作为 reducers 对象
import * as reducers from './reducers';

// 数组
let [a, b, c] = [1, 2, 3];
a // 1

//对象
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"

function add ([x, y]) {
  return x + y;
}

add([1, 2]); // 3

function userId({id}) {
  return id;
}

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

var user = { 
  id: 42, 
  displayName: "jdoe",
  fullName: { 
      firstName: "John",
      lastName: "Doe"
  }
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

const o = {
  method() {
    return "Hello!";
  }
};

// 等同于

const o = {
  method: function() {
    return "Hello!";
  }
};

const a = [1, 2];
const b = [...a, 3];
b // [1,2,3]

const arr = ['a', 'b', 'c'];
const [first, ...rest] = arr;
rest;  // ['b', 'c']

// With ignore
const [first, , ...rest] = arr;
rest;  // ['c']

function directions(first, ...rest) {
  console.log(rest);
}
directions('a', 'b', 'c');  // ['b', 'c'];

function foo(x, y, z) {}
const args = [1,2,3];

// 下面两句效果相同
foo.apply(null, args);
foo(...args);

const a = { x : 1, y : 2 }
const b = { ...a, z : 3 }
b // {x:1, y: 2, z: 3}

fetch('/api/todos')
  .then(res => res.json())
  .then(data => ({ data }))
  .catch(err => ({ err }));

const delay = (timeout) => {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
};

delay(1000).then(() => {
  console.log('executed');
});

// v3
import routes from './routes'
<Router history={browserHistory} routes={routes} />
// or
<Router history={browserHistory}>
  <Route path='/' component={App}>
    // ...
  </Route>
</Router>

//v4
<BrowserRouter>
  <div>
    <Route path='/about' component={About} />
    <Route path='/contact' component={Contact} />
  </div>
</BrowserRouter>

// yes
<BrowserRouter>
  <div>
    <Route path='/about' component={About} />
    <Route path='/contact' component={Contact} />
  </div>
</BrowserRouter>

// no
<BrowserRouter>
  <Route path='/about' component={About} />
  <Route path='/contact' component={Contact} />
</BrowserRouter>

/// in v3 the element
<Route path='contact' component={Contact} />
// 等同于
{
  path: 'contact',
  component: Contact
}

<Route path='parent' component={Parent}>
  <Route path='child' component={Child} />
  <Route path='other' component={Other} />
</Route>

<Parent {...routeProps}>
  <Child {...routeProps} />
</Parent>

<Route path='parent' component={Parent} />

const Parent = () => (
  <div>
    <Route path='child' component={Child} />
    <Route path='other' component={Other} />
  </div>
)

// v3
<Route path='/' component={App}>
  <IndexRoute component={Home} />
  <Route path='about' component={About} />
  <Route path='contact' component={Contact} />
</Route>

// v4
const App = () => (
  <Switch>
    <Route exact path='/' component={Home} />
    <Route path='/about' component={About} />
    <Route path='/contact' component={Contact} />
  </Switch>
)

// v3
<Route path="/" component={App}>
  <IndexRedirect to="/welcome" />
</Route>

// v4
<Route exact path="/" render={() => <Redirect to="/welcome" component={App} />} />

<Switch  >
  <Route exact path="/" component={App} />
  <Route path="/login" component={Login} />
  <Redirect path="*" to="/" />
</Switch>

// v3
const THING_PATH = '/thing/:id';

<Link to={PatternUtils.formatPattern(THING_PATH, {id: 1})}>A thing</Link>

// v3
<Link to={disabled ? null : `/item/${id}`} className="item">
  // item content
</Link>

// v4
import { Link } from 'react-router-dom'

const LinkWrapper = (props) => {
  const Component = props.to ? Link : 'a'
  return (
    <Component {...props}>
      { props.children }
    </Component>
  )
)

<LinkWrapper to={disabled ? null : `/item/${id}`} className="item">
  // item content
</LinkWrapper>

// d.js
export default function() {}

const  d = require('./d').default
// import d from './d'

// d.js
export default function() {}

// 等效于：
function a() {};
export {a as default};

import a from './d';

// 等效于，或者说就是下面这种写法的简写，是同一个意思
import {default as a} from './d';

Function.prototype.a = 'a';
Object.prototype.b = 'b';
function Person(){};
var p = new Person();
console.log('p.a: '+ p.a); // p.a: undefined
console.log('p.b: '+ p.b); // p.b: b

const person = {
  name: 'menglinghua',
  say: function (){
    return function (){
      console.log(this.name);
    };
  }
};
person.say()(); // ''(空字符串)

const person = {
  name: 'menglinghua',
  say: function (){
    return () => {
      console.log(this.name);
    };
  }
};
person.say()(); 

setTimeout(() => console.log('a'), 0);
var p = new Promise((resolve) => {
  console.log('b');
  resolve();
});
p.then(() => console.log('c'));
p.then(() => console.log('d'));
console.log('e');
// 结果：b e c d a

console.log('1');

setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

Number('') // 0
parseInt('') // NaN
Number('123abc') // NaN
parseInt('123abc') // 123

.
├── a
│   ├── a.js
│   └──a.scss   
├── b
│   └── b.scss            
└── node_modules                   
    └── bootstrap
           └── scss
                 └── bootstrap.scss

// a.js
import './a.scss'

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "sass-loader",
        options: {
          // includePaths: []
        }
      }]
    }]
  }
}

//...
includepaths['./b', './node_modules/bootstrap/scss']

"hello" > "hi"

"h" > "h" && 
"e" > "i" && 
"l" > ""  && 
"l" > ""  && 
"o" > ""

"hello" > "hi";   // return false

'2017-03-01' > '2017-02-28'    // true
'0' < '2017-09-06'    // true
'9' > '2017-09-04'    // true

function F() {
  this.a = 'a'
  this.c = function () {
    console.log(this)
  }
}
var f = new F()
f.c() 

function F() {
  this.a = 'a'
  this.c = function () {
    console.log(this.a)
  }
}

var f = new F()
var c = f.c
f.c()  // a
c()  // undefined，this指向window

function F() {
  this.a = 'a'
  // 使用箭头函数绑定this
  this.c =  () => {
    console.log(this.a)
  }
}

var f = new F()
var c = f.c
f.c()  // a
c()  // a

var destination = { a: 0 }
var src1 = { b: 1, c: 2 }
var src2 = { d: 3, e: 4 }

// ES5
Object.keys(src1).forEach(function (k) {
  destination[k] = src1[k]
})

Object.keys(src2).forEach(function (k) {
  destination[k] = src2[k]
})

// ES6
Object.assign(destination, src1, src2)

// Result
destination === { a: 0, b: 1, c: 2, d: 3, e: 4 }

var o1 = { a: 1, b: 1, c: 1}
var o2 = { b:2, c: 2}
var o3 = { c: 3 }

var obj = Object.assign({}, o1, o2, o3)

console.log(obj)    // {a: 1, b: 2, c: 3}

var obj = { a: 0 }
var copy = Object.assign({}, obj)
console.log(copy)    // {a: 0}

var array = ['a', 'b', 'c', 'd', 'e']
var arrayWithDups = ['a', 'b', 'c', 'd', 'e', 'e', 'e']

// ES5
array.filter(function (x) {
  return x === 'e'
})[0]
// 'e'

// ES6
array.find(x => x === 'e')    // 'e'
array.findIndex(x => x === 'e')    //4
arrayWithDups.find(x => x === 'e')    // 'e'
arrayWithDups.findIndex(x => x === 'e')    //4

// ES5
var repeat = Array[3 + 1].join('foo ')
console.log(repeat)    // 'foo foo foo'

// ES6
var repeat = 'foo '.repeat(3)
console.log(repeat)    // 'foo foo foo'

// ES5
'hello'.indexOf('ello') === 1    // true
'hello'.indexOf('hell') === (4 - 'hell'.length)    // true
'hello'.indexOf('ell') !== -1    // true
'hello'.indexOf('ell', 1)    // false
'hello'.indexOf('ell', 2) !== -1    // false 

// ES6
'hello'.startsWith('ello', 1)    // true
'hello'.endsWith('hell', 4)    // true
'hello'.includes('ell')    // true
'hello'.includes('ell', 1)    // true
'hello'.includes('ell', 2)    // false

var isNaN = function (n) {
  return n !== n
}

var isFinite = function (n) {
  return (type0f v === 'number' && !isNaN(v) && v !== Inifity && v !== -Inifity)
}

isNaN(42) === false
isNaN(NaN) === true

isFinite(Inifity) === false
isFinite(-Inifity) === false
isFinite(NaN) === false
isFinite(123) === true

// ES6
Number.isNaN(42) === false
Number.isNaN(NaN) === true

Number.isFinite(Inifity) === false
Number.isFinite(-Inifity) === false
Number.isFinite(NaN) === false
Number.isFinite(123) === true

var isNaN = function (n) {
  return n !== n
}

var isFinite = function (n) {
  return (type0f v === 'number' && !isNaN(v) && v !== Inifity && v !== -Inifity)
}

isNaN(42) === false
isNaN(NaN) === true

isFinite(Inifity) === false
isFinite(-Inifity) === false
isFinite(NaN) === false
isFinite(123) === true

// ES6
Number.isNaN(42) === false
Number.isNaN(NaN) === true

Number.isFinite(Inifity) === false
Number.isFinite(-Inifity) === false
Number.isFinite(NaN) === false
Number.isFinite(123) === true

if (condition) {
  console.log(typeof value)  // 引用错误
  let value = 'blue'
}

console.log(typeof value)  //  "undefined"

if (condition) {
  let value = 'blue'
}

var o = { a: 1 }
// 对象o改变前
 var o1 = o
 o.a = 2
//  对象o改变后
 var o2 = o
 o2 === o1  // true