Compare Mac Address Normalizing

A couple of functions being compared for speed while stripping mac addresses of chars. (in React)

by Trever Shick

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
<!DOCTYPE html>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>

  <body>
    <div id="root" />
  </body>

</html>

Babel + JSX

const stripv1Allowed = { '0':true,'1':true,'2':true,'3':true,'4':true,'5':true,'6':true,'7':true,'8':true,'9':true,'a':true,'b':true,'c':true,'d':true,'e':true,'f':true,'A':true,'B':true,'C':true,'D':true,'E':true,'F':true,};

const stripv1 = (raw) => raw.toUpperCase().split('').filter(r => stripv1Allowed[r]).join('');
const stripv2 = (raw) => raw.toUpperCase().replace(/[:-]/g,'');

const timeit = (name, fn) => {
  const start = window.performance.now();
  const result = fn.apply();
  const end = window.performance.now();
  return {
  	name,
  	result,
  	start,
    end,
    took: end-start,
  }
};


class FakerMac extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
    	mac: undefined,
    };
  }
  onClick() {
  	this.setState({ mac: faker.internet.mac() });
  }
  render() {
  	return (
    	<button onClick={() => this.onClick()}>{this.state.mac || 'Click Me'}</button>
    );
  }
}

class Run extends React.Component {
	constructor(props){
	  super(props);
  }
  
  render() {
  	const examples = this.props.run.result.slice(0,10).join(', ');
  	return (
    	<li>
        <div>{this.props.run.name} took ({this.props.run.took})ms</div>
        {examples}
      </li>
    );
  }
}

class Runs extends React.Component {
	constructor(props) {
	  super(props);
  }
  
  render() {
    var out = [];
    this.props.runs.forEach(run => {
    	out.push(<Run key={run.name} run={run} />);
    })
    return (
        <ul>
          {out}
        </ul>
    );
  }
}

class App extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
    	count: 10000,
    	runs: [],
      status: undefined,
    }
  }
  executeRuns() {
  	this.setState({ status: 'Calculating' });
  	const longRunning = () => {
      const data = [];
      for (let i=0;i < Number(this.state.count);i++) {
        data.push(faker.internet.mac());
      }
      const runs = [
        timeit('v1', () => data.map(stripv1)),
        timeit('v2', () =>...