js/ts语言规范

梳理

1. 变量声明

• 使用let和const，不使用var，优先使用const

// 推荐
const a = 1
let b = 2
// 不推荐
var a = 1
var b = 2

• 建议将const和let分组

const b = 1;
const d = 2;
let a;
let c;
let e;

• 不要进行链式赋值(否则会创建隐藏的全局变量)

// 不推荐
let a = b = c = 1;

• 不出现未被使用的变量

2. 对象

• 使用字面量值创建对象，不使用new Object()

// 推荐
const a = {};
// 不推荐
const a = new Object();

• 对象方法使用简写

// 推荐
const item = {
    value: 1,
    addValue(val) {
        return item.value + val;
    },
};
// 不推荐
const item = {
    value: 1,
    addValue: function(val) {
        return item.value + val;
    },
};

• 使用对象属性值简写

const job = 'FrontEnd';
// 推荐
const item = {
    job,
};
// 不推荐
const item = {
    job: job,
};

• 简写属性集中放到开头

const job = 'FrontEnd';
const company = 'daddylab';
// 推荐
const item = {
    job,
    company,
    sex: 'male',
    age: 25,
};
// 不推荐
const item = {
    sex: 'male',
    job,
    age: 25,
    company,
};

• 只对非法标识符的属性名使用引号

// 推荐
const good = {
    foo: 3,
    bar: 4,
    'data-blah': 5,
};
// 不推荐
const bad = {
    'foo': 3,
    'bar': 4,
    'data-blah': 5,
};

• 优先使用扩展运算符...来浅拷贝对象

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

3. 数组

• 使用字面量值创建数组

// 推荐
const items = [];
// 不推荐
const items = new Array();

• 使用push方法向数组中添加元素

const items = [];
// 推荐
items.push('test');
// 不推荐
items[items.length] = 'test';

• 使用扩展运算符...复制数组

// 推荐
const itemsCopy = [...items];
// 不推荐
const itemsCopy = [];
for (i = 0; i < items.length; i++) {
    itemsCopy[i] = items[i];
}

• 多行数组的换行

// 推荐
const arr = [[0, 1], [2, 3], [4, 5]];
const arr2 = [
    [0, 1], 
    [2, 3], 
    [4, 5]
];
const objectInArray = [
    {
        id: 1,
    },
    {
        id: 2,
    }
];
const numberInArray = [
    1,
    2
];
// 不推荐
const arr = [
    [0, 1], [2, 3], [4, 5]
];
const objectInArray = [{
    id: 1,
}, {
    id: 2,
}];
const numberInArray = [
    1, 2
];

4. 解构赋值

• 当需要使用对象的多个属性时，优先使用解构赋值

// 推荐
function getFullName(user) {
    const { firstName, lastName } = user;
    return `${firstName} ${lastName}`;
}
// 很推荐
function getFullName({ firstName, lastName }) {
    return `${firstName} ${lastName}`;
}
// 不推荐
function getFullName(user) {
    const firstName = user.firstName;
    const lastName = user.lastName;
    return `${firstName} ${lastName}`;
}

• 当需要使用数组的多个值时，同样优先使用解构赋值

const arr = [1, 2, 3, 4];
// 推荐
const [first, second] = arr;
// 不推荐
const first = arr[0];
const second = arr[1];

• 函数需要回传多个值时，建议使用对象的解构，而不是数组的解构

// 推荐
function doSomething() {
    return { top, right, bottom, left };
}
const { top, left } = doSomething();
// 不推荐
function doSomething() {
    return [top, right, bottom, left];
}
const [top, xx, xxx, left] = doSomething();

5. 字符串

• 字符串统一使用单引号
• 拼接字符串优先使用模板字符串

const test = 'test';
// 推荐
const str = `ab${test}`;
// 不推荐
const str = 'a' + 'b' + test;

• 不要对字符串使用eval()

6. 函数

• 用圆括号包裹自执行匿名函数

(function() {
    // do something
}());

• 使用剩余运算符...，而不是arguments

// 推荐
function test(...args) {
    return args.join('');
}
// 不推荐
function test() {
    const args = Array.prototype.slice.call(arguments);
    return args.join('');
}

• 使用参数默认值语法而不是修改函数参数

// 推荐
function handleThings(opts = {}) {
    // ...
}
// 不推荐
function handleThings(opts) {
    opts = opts || {};
    // ...
}

• 使用参数默认值时避免副作用

let b = 1
// 不推荐
function count(a = b++) {
    console.log(a);
}

• 将参数默认值放在最后

// 推荐
function handleThings(name, opts = {}) {
    // ...
}
// 不推荐
function handleThings(opts = {}, name) {
    // ...
}

• 不要在函数内更改参数或给参数重新赋值

// 不推荐
function f1(obj) {
    obj.key = 1;
}
function f1(a) {
    a = 1;
}

7. 箭头函数

• 当必须使用函数表达式（传递匿名函数）时，使用箭头函数

// 推荐
[1, 2, 3].map((x) => {
    const y = x + 1;
    return x * y;
});
// 不推荐
[1, 2, 3].map(function(x) {
    const y = x + 1;
    return x * y;
});

• 如果函数体只包含一条没有副作用的返回表达式的语句，可以省略花括号并使用隐式的return

// 推荐
[1, 2, 3].map(number => `A string containing the ${number}.`);

• 函数如果只接收一个参数并且函数体没使用花括号，则建议省略圆括号，否则使用圆括号包裹参数

// 推荐
[1, 2, 3].map(x => x * x);
[1, 2, 3].map((x) => {
    const y = x + 1;
    return x * y;
});

8. 类&构造函数

• 使用class，避免直接操作prototype
• 使用extends来实现继承
• 避免类成员重复

// 不推荐
class Foo {
    bar () { return 1 }
    bar () { return 2 }
}

9. 使用Map结构

区分Object和Map，只有模拟现实世界的实体对象时，才使用Object。如果只是需要key: value的数据结构，使用Map结构

10. 模块

• 在支持ES6模块语法的场合使用ES6模块语法import和export，而不是CommonJs语法的require
• 同个文件每个模块只import一次，有多个import请写在一起
• export default与export不要同时使用

// 推荐
import foo, {
    named1,
    named2
} from 'foo';
// 不推荐
import foo from 'foo';
// … some other imports … //
import { named1, named2 } from 'foo';

• 将所有import语句放在文件最前方

11. 对象属性

• 使用.来访问对象属性，当访问的属性是变量时才使用[]

// 推荐
const name = joke.name;
function getProp (prop) {
    return joke[prop];
}
// 不推荐
const name = joke['name'];

12. 比较运算符

使用===和!==而非==和!=

13. eval()

一般情况禁用该方法

14.修改内置对象的原型

禁止修改内置对象，如Object和Array