来自Airbnbs的js代码优化建议

原文链接:Airbnbs js代码优化建议

1.类型

1.1 当目标浏览器或环境可能不支持symbol类和bigint类时，请避免使用这两个数据类型；

2.定义

2.1 使用let或者const来定义变量或常量而避免使用var，因为var没有块级作用域，且会造成声明提前，导致难以阅读和理解代码；

3.对象

3.1 声明对象时，使用缩写 var obj={} 而不是 var obj=new Object();

3.2 在创建对象时，尽量不使用强行赋值，把所有的属性和方法都写进去;

3.3 对象的方法使用简写而不使用全写，如:

// bad
const atom = {
  value: 1,

  addValue: function (value) {
    return atom.value + value;
  },
};

// good
const atom = {
  value: 1,

  addValue(value) {
    return atom.value + value;
  },
};

3.4 当属性名和属性值地变量同名时，使用缩写;

3.5 将所有使用缩写的属性写在一起，并都将其置于对象的最前面;

3.6 只给使用-连接的属性名添加单引号;

3.7 使用对象的原型对象中的方法来对对象进行操作，而不是直接调用对象中的该方法，这是为了避免该对象重写了该方法，或该对象是一个彻底的空对象;

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

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

// best
const has = Object.prototype.hasOwnProperty; // cache the lookup once, in module scope.
console.log(has.call(object, key));

/* or */

import has from 'has'; // https://www.npmjs.com/package/has
console.log(has(object, key));

3.8 使用对象解构来进行浅拷贝

// very bad
const original = { a: 1, b: 2 };
const copy = Object.assign(original, { c: 3 });// 这会更改原对象
delete copy.a; // so does this

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

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

4.数组

4.1 使用简写来定义数组 var arr=[]而不是var arr=new Array();

4.2 使用arr.push替代arr[length]=1来对数组进行扩充;

4.3 使用数组解构来拷贝数组;

// bad
const len = items.length;
const itemsCopy = [];let i;
for (i = 0; i < len; i += 1) {
  itemsCopy[i] = items[i];
}

// good
const itemsCopy = [...items];

4.4 将一个可迭代对象转换为数组，使用数组解构而不是Array.from();

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

// good
const nodes = Array.from(foo);

// best
const nodes = [...foo];

4.5 将一个类数组对象转化为数组，使用Array.from();

const arrLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };

// bad
const arr = Array.prototype.slice.call(arrLike);

// good
const arr = Array.from(arrLike);

4.6 使用Array.from 而不是数组解构来遍历可迭代对象

// bad
const baz = [...foo].map(bar);
// good
const baz = Array.from(foo, bar);

4.7 使用map等有返回值地api时，记得return，能缩写就使用缩写

4.8 数组套对象时，请勤用换行

5.解构

5.1 当方法需要使用到对象中多个属性时，使用对象解构

// 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}`;
}

5.2 常用数组解构

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

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

5.3 当有多个返回值时，使用对象解构而不是数组解构，因为对象解构允许不相邻;

// bad
function processInput(input) {
  // then a miracle occurs
  return [left, right, top, bottom];
}
// 接收数据时需要考虑输出数据的顺序
const [left, __, top] = processInput(input);

// good
function processInput(input) {
  // then a miracle occurs
  return { left, right, top, bottom };
}
// 接收数据可以只拿想要的
const { left, top } = processInput(input);

6.字符串

6.1 使用单引号来定义字符串

// bad
const name = "Capt. Janeway";

// bad - 可以,但没必要
const name = `Capt. Janeway`;

// good
const name = 'Capt. Janeway';

6.2 过长的字符串不建议使用拼接

6.3 能用模板字符串就不用字符串拼接

6.4 别用eval,bug多

6.5 不要滥用转义字符

7.函数

7.1 使用函数全程来声明函数,函数简称来接住函数

// bad 不用它是为了阻止声明提前
function foo() {
  // ...
}
// bad 不用它是为了防止函数名过长
const foo = function () {
  // ...
};
// good  不能理解
// lexical name distinguished from the variable-referenced invocation(s)
const short = function longUniqueMoreDescriptiveLexicalFoo() {
  // ...
};

7.2 将一段立即调用的代码写在匿名函数中,并执行自调用;

7.3 不要在非块级作用域(比如if和while)中声明函数,如果要调用的话,使用命名函数;

7.4 Note: ECMA-262 defines a block as a list of statements. A function declaration is not a statement.

// bad
if (currentUser) {
  function test() {
    console.log('Nope.');
  }
}
// good
let test;if (currentUser) {
  test = () => {
    console.log('Yup.');
  };
}

7.5 不要用arguments作为形参的变量名

7.6 选用剩余参数...rest而不用arguments

7.7 使用默认参数而不是在函数体中写判断

7.8 不要使用带副作用的默认参数

var b = 1;// bad
function count(a = b++) {
  console.log(a);
}
count();  // 1
count();  // 2
count(3); // 3
count();  // 3

7.9 默认参数写在所有参数最后面

7.10 不要使用构造函数来构造函数......听起来很诡异,意思是用构造函数来构造函数会使用eval,前面说过,这玩意bug多

7.11 多用格式化

7.12 不要直接操作参数

// bad
function f1(obj) {
  obj.key = 1;
}
// good
function f2(obj) {
  const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1;
}

7.13 不要重复给变量赋值(和上条差不多)

7.14 使用解构进行传参

// 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]);

7.15 多用格式化

8.箭头函数

8.1 当你想要内外的函数的this指向保持一致时,使用箭头函数

8.2 当函数体只有一句话时,省略大括号和return

8.3 如果返回的东西过多,请用大括号将其括起来

8.4 参数用括号括起来

8.5 避免箭头=>和小于等于<=以及大于等于>=混用,将后者包裹在括号内

9.类和构造函数

9.1 直接用class来构造类,避免直接操作原型对象,这是为了增加代可读性;

9.2 使用extends代替inherits来进行继承;

9.3 要用到this的方法应当定义在构造函数中,如果定义在原型对象里,会导致this指向window;

9.4 可以考虑重写toString方法,前提是它能用,而且不会产生什么副作用;

9.5 Classes have a default constructor if one is not specified. An empty constructor function or one that just delegates to a parent class is unnecessary.

// bad
class Jedi {
  constructor() {}

  getName() {
    return this.name;
  }
}
// bad
class Rey extends Jedi {
  constructor(...args) {
    super(...args);
  }
}
// goodclass Rey extends Jedi {
  constructor(...args) {
    super(...args);
    this.name = 'Rey';
  }
}

9.6 不要在类中重复声明一个类成员,有重复的成员会默认选择最后一个,而且一般说来,有两个同名成员八成也许大概或者可能是你一定写了个bug

9.7 Class methods should use this or be made into a static method unless an external library or framework requires to use specific non-static methods. Being an instance method should indicate that it behaves differently based on properties of the receiver.

// bad
class Foo {
  bar() {
    console.log('bar');
  }
}
// good - this is used
class Foo {
  bar() {
    console.log(this.bar);
  }
}
// good - constructor is exempt
class Foo {
  constructor() {
    // ...
  }
}
// good - static methods aren't expected to use this
class Foo {
  static bar() {
    console.log('bar');
  }
}

10.模块

11.迭代器和生成器(暂时理解为替换for循环的数组遍历函数s)

11.1 使用js中的高阶函数forEach,map,reduce来替代for...of和for...in循环

11.2 因为生成器与ES5的兼容性不佳,因此现在不建议用

11.3 叫你不要用就不要用

12.属性

12.1 当获取属性时,使用obj.name而不是obj['name']

12.2 当需要获取的属性是用变量声明的,使用obj[变量名]来获取

12.3 使用**来替换Math.pow()来进行幂运算

13.变量

13.1 使用let和const替代var来声明变量

13.2 不要使用一个const或let来同时声明多个变量,多写几次

13.3 将你的变量声明写在一起,let和let一起,const和const一起

13.4 尽量让把变量的声明和使用放在一起

13.5 不要使用链式变量声明,如let a=b=c=5,这会导致生成全局变量

13.6 避免使用a++或a--,因为可能导致意外的情况,可以使用a += 1这种更具语义化的代码

13.7 避免在=之前出现换行,实在没办法,可以试试这种方法:

const foo = (
  superLongLongLongLongLongLongLongLongFunctionName()
);

13.8 清除所有未使用的变量,包括声明之后没有下文的,只写的,我读我自己的,用不到的函数参数等等,因为这一般也是函数重写时的遗留问题,并且会给读代码的人造成困惑

14.变量/函数提升

14.1 var会造成函数和变量提升,这也就导致了typeof的不可靠

14.2 使用匿名函数声明的函数(var fn=function(){...})只提升其变量名,而不会提升函数本身

14.3 使用命名函数声明的函数(var fn=function a(){...})只提升其变量名,而不会提升函数名,也不会提升函数本身

14.4 使用function直接声明的函数会被整体提升

15.比较运算符&等于

15.1 使用===和!==以替代==和!=

15.2 条件表达式(比如if语句)会将奇特其他类型转换为boolean类,规则如下

  • 对象会被视为true
  • Undefined会被视为false
  • Null 会被视为 false
  • Booleans 略
  • Numbers 当为 +0, -0, or NaN时false,否则为 true
  • Strings 当为''的时候为false,否则为 true
  • 数组无论为[]还是为[0]都是true

15.3 如果可以简写,直接简写,比如

var isValid=true;

// bad
if (isValid === true) {
  // ...
}

// good
if (isValid) {
  // ...
}

15.4 在switch-case语句中,将case语句中的内容用{}包裹起来

15.5 不建议对三目运算进行嵌套(我偏不)

15.6 避免滥用三目运算符,如:

// 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;

15.7 在做混合运算时,尽量将该括起来的括起来,反正,怎么易读怎么来

16.块级作用域

16.1 要用{},请换行,要么就不用

// bad
if (test)
  return false;

// good
if (test) return false;

// good
if (test) {
  return false;
}

16.2 如果你要用if...else...,将else和它前面的}写在同一行

16.3 这一条纯属闲的

17.控制声明

17.1 如果你if或者while后面的判断语句过长,请换行

17.2 不要使用&&或者||来做坏事(i refuse)

18.注释

没什么可说的

19.缩进

建议tabsize:2

20.其他

多用代码格式化

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