banner
banner
banner
NEWS LETTER

ES6-编程风格

Scroll down
  • 块级作用域和上下文会改变用let

  • 全局用常量const,表示不应该改变

  • 静态字符串一律使用单引号或反引号。动态字符串使用反引号。

  • 使用数组/对象成员对变量赋值时和返回多个值时,优先使用解构赋值。

    1
    2
    3
    const arr = [1, 2, 3, 4];
    // good
    const [first, second] = arr;
  • 单行定义的对象,最后不以逗号结尾。多行,最后以逗号结尾

  • 使用扩展运算符(…)拷贝数组,使用Array.from 方法,将类数组的对象转为数组

  • 立即执行函数可以写成箭头函数的形式。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 匿名函数
    (() => console.log('Welcome to the Internet.'))();

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

    // 箭头函数(取代Function.prototype.bind,不应再用 self/_this/that 绑定 this)
    const args = () => {}

    // best
    const boundMethod = (...params) => method.apply(this, params);
  • 所有配置项都应该集中在一个对象,放在最后一个参数,布尔值不可以直接作为参数。
    function divide(a, b, { option = false } = {}) {}

  • 不要在函数体内使用 arguments 变量,使用 rest 运算符(…)代替

    1
    2
    3
    4
    // good
    function concatenateAll(...args) {
    return args.join('');
    }
  • 使用默认值语法设置函数参数的默认值。
    function handleThings(opts = {}) {}

  • key: value的数据结构,使用 Map 结构,模拟现实世界的实体对象时,使用 Object

  • 用class取代需要 prototype 的操作,使用extends实现继承

  • import取代require()、export取代module.exports

  • 模块只有一个输出值,使用export defaul,

    • 输出的函数名的首字母应该小写对象名的首字母应该大写
  • 在项目的根目录安装 ESLint

    1
    2
    3
    4
    5
    6
    7
    8
    npm install --save-dev eslint
    npm install --save-dev eslint-config-airbnb
    npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

    在项目的根目录下新建一个.eslintrc文件,配置 ESLint
    {
    "extends": "eslint-config-airbnb"
    }
其他文章
cover
ES6-对象的拓展
  • 24/10/31
  • 15:54
  • ES6
cover
ES6-Set/Map构造函数
  • 24/10/31
  • 15:54
  • ES6
请输入关键词进行搜索