持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情
🎈大家好，我是
橙橙子，新人初来乍到，请多多关照~📝小小的前端一枚，分享一些日常的学习和项目实战总结~
😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~
函数
立即执行函数写成箭头函数的形式。
(() => {
console.log('Hello， world');
})();
用箭头函数代替那些需要使用函数表达式的场合，因为这样更简洁，而且绑定了this。
// bad
[1, 2, 3].map(function (x) {
return x * x;
});
// good
[1, 2, 3].map((x) => {
return x * x;
});
// best
[1, 2, 3].map(x => x * x);
箭头函数代替Function.prototype.bind
// bad
const self = this;
const boundMethod = function(...params) {
return method.apply(self, params);
}
// acceptable
const boundMethod = method.bind(this);
// best
const boundMethod = (...params) => method.apply(this, params);
简单的、不会复用的函数，建议用箭头函数。当函数体复杂，行数较多，还是采用传统的函数写法。
所有配置项都应该集中在一个对象，放在最后一个参数，布尔值不能直接作为参数。
// bad
function divide(a, b, option = false ) {
}
// good
function divide(a, b, { option = false } = {}) {
}
不要在函数体内使用arguments变量，使用rest运算符（...）代替。因为rest运算符显式表明你想要获取参数，而且arguments是一个类似数组的对象，而rest运算符可以提供一个真正的数组。
// bad
function concatenateAll() {
const args = Array.prototype.slice.call(arguments);
return args.join('');
}
// good
function concatenateAll(...args) {
return args.join('');
}
使用默认值语法设置函数参数的默认值。
// bad
function handleThings(opts) {
opts = opts || {};
}
// good
function handleThings(opts = {}) {
// ...
}
Map
实体对象使用Object。如果只是需要key: value的数据结构，使用Map结构更好。因为Map有内建的遍历机制。
let map = new Map(arr);
for (let key of map.keys()) {
console.log(key);
}
for (let value of map.values()) {
console.log(value);
}
for (let item of map.entries()) {
console.log(item[0], item[1]);
}
Class
可以用Class来代替需要prototype的操作。Class的写法更简洁，更易于理解。
// 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;
}
}
用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];
}
}
模块
Module语法是JavaScript模块的标准写法，使用import取代require。
// bad
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;
// good
import { func1, func2 } from 'moduleA';
使用export代替module.exports。
// commonJS的写法
var React = require('react');
var Breadcrumbs = React.createClass({
render() {
return <nav />;
}
});
module.exports = Breadcrumbs;
// ES6的写法
import React from 'react';
const Breadcrumbs = React.createClass({
render() {
return <nav />;
}
});
export default Breadcrumbs
当模块只有一个输出值的时候，用export default，当模块有多个输出值的时候，就不要使用export default，export default与普通的export不要同时使用。
不要在模块输入中使用通配符。
// bad
import * as myObject './importModule';
// good
import myObject from './importModule';
如果模块默认输出一个函数，函数名的首字母应该小写。
function makeStyleGuide() {}
export default makeStyleGuide;
如果模块默认输出一个对象，对象名的首字母应该大写。
const StyleGuide = {
es6: {
}
};
export default StyleGuide;
ESLint的使用
ESLint是一个语法规则和代码风格的检查工具，可以用来保证我们的代码语法统一。
安装ESLint。
$ npm i -g eslint
在项目的根目录下新建一个.eslintrc文件，配置ESLint。
{
"extends": "eslint-config-airbnb"
}
