javascript --- > 编程风格

字符串

const a = 'foobar';
const b = `foo${a}bar`;   // 此处是反引号(tab键上)
const c = 'foobar';

解构赋值

const [first, second] = arr;

function getFullName({ firstName, lastName }) {
}

function processInput(input) {
    return { left, right, top, bottom };
}
const { left, right } = processInput(input);

对象

const a = { k1: v1, k2: v2};   // 注意逗号
const b = {
    k1: v1,
    k2: v2,    // 注意逗号
}

const obj = {
    id: 5,
    name: 'San Francisco',
    [getKey('enabled')]: true,
};

const atom = {
    ref,
    
    value: 1,
     
    addValue(value) {
        return atom.value + value;
    },
};  

数组

const itemsCopy = [...items];

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

函数

//  立即执行函数可以写成箭头函数的形式
( () => {
    console.log('Welcome to the Internet.');
}) ();

[1, 2, 3].map(x => x * x) ;

const boundMethod = (...params) => method.apply(this, params);

function divide(a, b, { option = false } = {}) {}

function concatenateAll(...args) {
    return args.jopin(' ');
}

function handlerThings(opts = {}) {
    // ....
}

Map结构

let map = new Map(arr);

for (let key of map.keys()) {
    console.log(key);
}

for (let value of map.values()) {
    console.log(value);
}

for (let item of mao.entries()) {
    console.log(item[0], item[1]);
}

Class

class Queue {
    constructor(contents = []) {
        this._queue = [...contents];
    }
    pop () {
        const value = this._queue[0];
        this._queue.splice(0, 1);
        return value;
    }
}

class PeekableQueue extends Queue {
    peek() {
        return this._queue[0];
    }
}

模块

import { func1, func2 } from 'moduleA';

// 使用export取代module.exports

// commonJS的写法
var React = require('react);

var Breadcrumbs = React.createClass({
    render() {
        return <nav />;
    }
});
module.exports = Breadcrumbs;

// ES6的写法
import React from 'react';

class Breadcrumbs extends React.Component {
    render() {
        return <nav />;
    }
};

export default Breadcrumbs