前端开发中的一些js规范

1.不要用遍历器。用JavaScript高级函数代替`for-in`、 `for-of`。

const numbers = [1, 2, 3, 4, 5];

    // bad

    let sum = 0;

    for (let num of numbers) {

      sum += num;

    }

    sum === 15;

    // good

    let sum = 0;

    numbers.forEach(num => sum += num);

    sum === 15;

    // best (use the functional force)

    const sum = numbers.reduce((total, num) => total + num, 0);

    sum === 15;

    // bad

    const increasedByOne = [];

    for (let i = 0; i < numbers.length; i++) {

      increasedByOne.push(numbers[i] + 1);

    }

    // good

    const increasedByOne = [];

    numbers.forEach(num => increasedByOne.push(num + 1));

    // best (keeping it functional)

    const increasedByOne = numbers.map(num => num + 1);

2不要直接调用`Object.prototype`上的方法，如`hasOwnProperty`, `propertyIsEnumerable`, `isPrototypeOf`。

// bad

    console.log(object.hasOwnProperty(key));

    // good

    console.log(Object.prototype.hasOwnProperty.call(object, key));

3.对象浅拷贝时，更推荐使用扩展运算符[就是`...`运算符]，而不是[`Object.assign`]

// bad

  const original = { a: 1, b: 2 };

  const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }

  // good es6扩展运算符 ...

  const original = { a: 1, b: 2 };

  // 浅拷贝

  const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }

  // rest 赋值运算符

  const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

4.用扩展运算符做数组浅拷贝，类似上面的对象浅拷贝

  // bad

    const len = items.length;

    const itemsCopy = [];

    let i;

    for (i = 0; i < len; i += 1) {

      itemsCopy[i] = items[i];

    }

    // good

    const itemsCopy = [...items];

5. 用 `...` 运算符而不是[`Array.from`]

const foo = document.querySelectorAll('.foo');

    // good

    const nodes = Array.from(foo);

    // best

    const nodes = [...foo];

6.用对象的解构赋值来获取和使用对象某个或多个属性值。

// bad

    function getFullName(user) {

      const firstName = user.firstName;

      const lastName = user.lastName;

      return `${firstName} ${lastName}`;

    }

    // good

    function getFullName(user) {

      const { firstName, lastName } = user;

      return `${firstName} ${lastName}`;

    }

    // best

    function getFullName({ firstName, lastName }) {

      return `${firstName} ${lastName}`;

    }

7. const arr = [1, 2, 3, 4];

    // bad

    const first = arr[0];

    const second = arr[1];

    // good

    const [first, second] = arr;

8.多个返回值用对象的解构，而不是数据解构。

// bad

    function processInput(input) {

      // 然后就是见证奇迹的时刻

      return [left, right, top, bottom];

    }

    // 调用者需要想一想返回值的顺序

    const [left, __, top] = processInput(input);

    // good

    function processInput(input) {

      // oops， 奇迹又发生了

      return { left, right, top, bottom };

    }

    // 调用者只需要选择他想用的值就好了

    const { left, top } = processInput(input);

9. 用命名函数表达式而不是函数声明。

// bad

    function foo() {

      // ...

    }

    // bad

    const foo = function () {

      // ...

    };

    // good

    // lexical name distinguished from the variable-referenced invocation(s)

    // 函数表达式名和声明的函数名是不一样的

    const short = function longUniqueMoreDescriptiveLexicalFoo() {

      // ...

    };

10.不要使用`arguments`，用rest语法`...`代替。

  // bad

    function concatenateAll() {

      const args = Array.prototype.slice.call(arguments);

      return args.join('');

    }

    // good

    function concatenateAll(...args) {

      return args.join('');

    }

11.用`spread`操作符`...`去调用多变的函数更好

  // bad

    const x = [1, 2, 3, 4, 5];

    console.log.apply(console, x);

    // good

    const x = [1, 2, 3, 4, 5];

    console.log(...x);

    // bad

    new (Function.prototype.bind.apply(Date, [null, 2016, 8, 5]));

    // good

    new Date(...[2016, 8, 5]);

12.当你一定要用函数表达式（在回调函数里）的时候就用箭头表达式吧。

// bad

    [1, 2, 3].map(function (x) {

      const y = x + 1;

      return x * y;

    });

    // good

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

      const y = x + 1;

      return x * y;

    });

13.常用`class`，避免直接操作`prototype`

// bad

    function Queue(contents = []) {

      this.queue = [...contents];

    }

    Queue.prototype.pop = function () {

      const value = this.queue[0];

      this.queue.splice(0, 1);

      return value;

    };

    // good

    class Queue {

      constructor(contents = []) {

        this.queue = [...contents];

      }

      pop() {

        const value = this.queue[0];

        this.queue.splice(0, 1);

        return value;

      }

    }

14. 用`extends`实现继承

  // bad

    const inherits = require('inherits');

    function PeekableQueue(contents) {

      Queue.apply(this, contents);

    }

    inherits(PeekableQueue, Queue);

    PeekableQueue.prototype.peek = function () {

      return this._queue[0];

    }

    // good

    class PeekableQueue extends Queue {

      peek() {

        return this._queue[0];

      }

    }

15.可以返回`this`来实现方法链

  // bad

    Jedi.prototype.jump = function () {

      this.jumping = true;

      return true;

    };

    Jedi.prototype.setHeight = function (height) {

      this.height = height;

    };

    const luke = new Jedi();

    luke.jump(); // => true

    luke.setHeight(20); // => undefined

    // good

    class Jedi {

      jump() {

        this.jumping = true;

        return this;

      }

      setHeight(height) {

        this.height = height;

        return this;

      }

    }

    const luke = new Jedi();

    luke.jump()

      .setHeight(20);

16.如果没有具体说明，类有默认的构造方法。一个空的构造函数或只是代表父类的构造函数是不需要写的。

// bad

    class Jedi {

      constructor() {}

      getName() {

        return this.name;

      }

    }

    // bad

    class Rey extends Jedi {

      // 这种构造函数是不需要写的

      constructor(...args) {

        super(...args);

      }

    }

    // good

    class Rey extends Jedi {

      constructor(...args) {

        super(...args);

        this.name = 'Rey';

      }

    }

17. 一个路径只 import 一次。

// bad

    import foo from 'foo';

    // … some other imports … //

    import { named1, named2 } from 'foo';

    // good

    import foo, { named1, named2 } from 'foo';

    // good

    import foo, {

      named1,

      named2,

    } from 'foo';

18. 做幂运算时用幂操作符 `**` 。

  // bad

    const binary = Math.pow(2, 10);

    // good

    const binary = 2 ** 10;

19.三元表达式不应该嵌套，通常是单行表达式。

  // bad

    const foo = maybe1 > maybe2

      ? "bar"

      : value1 > value2 ? "baz" : null;

    // better

    const maybeNull = value1 > value2 ? 'baz' : null;

    const foo = maybe1 > maybe2

      ? 'bar'

      : maybeNull;

    // best

    const maybeNull = value1 > value2 ? 'baz' : null;

    const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

20.避免不需要的三元表达式

  // bad

    const foo = a ? a : b;

    const bar = c ? true : false;

    const baz = c ? false : true;

    // good

    const foo = a || b;

    const bar = !!c;

    const baz = !c;

21. 如果 `if` 语句中总是需要用 `return` 返回， 那后续的 `else` 就不需要写了。 `if` 块中包含 `return`， 它后面的 `else if` 块中也包含了 `return`， 这个时候就可以把 `return` 分到多个 `if` 语句块中。

  // bad

    function foo() {

      if (x) {

        return x;

      } else {

        return y;

      }

    }

    // bad

    function cats() {

      if (x) {

        return x;

      } else if (y) {

        return y;

      }

    }

    // bad

    function dogs() {

      if (x) {

        return x;

      } else {

        if (y) {

          return y;

        }

      }

    }

    // good

    function foo() {

      if (x) {

        return x;

      }

      return y;

    }

    // good

    function cats() {

      if (x) {

        return x;

      }

      if (y) {

        return y;

      }

    }

    // good

    function dogs(x) {

      if (x) {

        if (z) {

          return y;

        }

      } else {

        return z;

      }

    }

摘自https://github.com/airbnb/javascript.git

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,884评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,347评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,435评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,509评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,611评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,837评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,987评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,730评论 0赞 267
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,194评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1赞 340
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,334评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,944评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2赞 349