文章插图
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 };
}
【前端开发中的一些js规范】// 调用者只需要选择他想用的值就好了
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 = []) {
推荐阅读
- 老茶是时光流逝中的静默
- 茶中的自由
- 夜晚中的茶香
- 爱情中的茶香
- 苹果|苹果iOS 15.5首个公测版发布：小幅更新、开发全新内置应用
- 茶是场邂逅 爱上茶杯中的小幸福
- 分享几个前端技术文档网站
- 岁月中的茶
- WEB 前端模块化都有什么？
- Android 开发:ActionBar & 消息 & 通知 & 广播全在这篇