es6编程风格

目录

1、变量let和常量const

2、静态字符串与动态字符串

3、解构赋值(数组,对象)

4、对象

5、数组

6、函数

7、Map结构

8、class类

9、模块

10、ESLint的使用


1、变量let和常量const

ES6 提出了两个新的声明变量的命令:letconst。其中,let完全可以取代var,因为两者语义相同,而且let没有副作用。

var命令存在变量提升效用,let命令没有这个问题

javascript 复制代码
if (true) {
  console.log(x); // ReferenceError
  let x = 'hello';
}

letconst之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量。

const优于let有几个原因:

(1)const可以提醒阅读程序的人,这个变量不应该改变;

(2)const比较符合函数式编程思想,运算不改变值,只是新建值,而且这样也有利于将来的分布式运算;

(3) JavaScript 编译器会对const进行优化。

所以多使用const,有利于提高程序的运行效率,也就是说letconst的本质区别,其实是编译器内部的处理不同。

const声明常量还有两个好处,一是阅读代码的人立刻会意识到不应该修改这个值,二是防止了无意间修改变量值所导致的错误。

2、静态字符串与动态字符串

(1)静态字符串一律使用单引号或反引号,不建议使用双引号。

(2)动态字符串使用反引号。

javascript 复制代码
// 不推荐
const a = "isabar";  // 不建议双引号
const b = 'is' + a + 'bar';  //不建议字段拼接

// 没毛病
const c = `isabar`;  

// 推荐
const a = 'isabar';   //单引号
const b = `is${a}bar`;  //反引号字段拼接

3、解构赋值(数组,对象)

(1)使用数组成员对变量赋值时,优先使用解构赋值,结构清晰

javascript 复制代码
const arr = [1, 2, 3, 4];

// 不推荐
const foo = arr[0];
const boo = arr[1];

// 推荐
const [foo, boo] = arr;  // [1,2]

(2)函数的参数如果是对象的成员,优先使用解构赋值。

javascript 复制代码
// 不推荐
function getFullName(user) {
  const first = user.first;
  const last = user.last;
}

// 推荐
function getFullName(obj) {
  const { first, last } = obj;  //直接对象解构赋值
}

// 更好
function getFullName({ first, last }) {
}

(3)如果函数返回多个值,优先使用对象的解构赋值,而不是数组的解构赋值。

这样便于以后添加返回值,以及更改返回值的顺序。

javascript 复制代码
// 不推荐数组结构
function processInput(input) {
  return [left, right, top, bottom];
}

// 推荐对象解构,可以调整顺序
function processInput(input) {
  return { left, right, top, bottom };
}

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

4、对象

(1)对象定义的习惯

单行定义的对象,最后一个成员不以逗号结尾。

多行定义的对象,最后一个成员以逗号结尾。

javascript 复制代码
// 多行定义对象
// 不推荐
const a = { k1: v1, k2: v2, };
const b = {
  k1: v1,
  k2: v2
};

// 推荐
const a = { k1: v1, k2: v2 };
const b = {
  k1: v1,
  k2: v2,  //最后一个成员逗号
};

(2)对象定义的静态化

对象尽量静态化,一旦定义,就不得随意添加新的属性。

如果添加属性不可避免,要使用Object.assign方法

javascript 复制代码
// 不推荐直接,新加对象属性
const foo = {};
foo.name = 'sum';

// 实在要加属性也不是不可以
const foo = {};
Object.assign(foo, { name: 'sum' });

// 最好
const foo = { name: null };
foo.name = 'sum';

(3)对象的属性名称-动态名称

javascript 复制代码
// 不推荐
const obj = {
  id: 1,
  name: 'San',
};
obj[getKey('age')] = 80;

// 推荐
const obj = {
  id: 1,
  name: 'San',
  [getKey('age')]: 80,
};

上面代码中,对象obj的最后一个属性名,需要计算得到。

这时最好采用属性表达式,在新建obj的时候,将该属性与其他属性定义在一起.

另外,对象的属性和方法,尽量采用简洁表达法,这样易于描述和书写。

javascript 复制代码
let ref = 'ismy';

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

// 推荐
const foo = {
  ref,
  value: 1,
  addValue(value) {
    return foo.value + value;
  },
};

5、数组

(1)数组拷贝,使用扩展运算符(...)拷贝数组

javascript 复制代码
// 不推荐
const items = [1,2,3]
const itemsCopy = [];

for (let i = 0; i < items.length; i++) {
  itemsCopy[i] = items[i];
}

// 推荐 实现数组拷贝
const itemsCopy = [...items];  // [1,2,3] 

(2)数组使用解构赋值。

javascript 复制代码
// 不推荐
const items = [1,2,3]
const fo = items[0]
const so = items[1]

// 推荐 
const [fo,so] = [1,2,3]

(3)使用 Array.from 方法,将类似数组的对象转为数组

javascript 复制代码
const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

6、函数

(1)立即执行函数

立即执行函数写成箭头函数的形式。

javascript 复制代码
// 立即执行函数
(() => {
  console.log('123');
})();

(2)箭头函数

使用匿名函数当作参数的场合,尽量用箭头函数代替。

因为这样更简洁,并绑定了 this。

javascript 复制代码
// 不推荐
[1, 2, 3].map(function (item) {
  return item*2;
});

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

// 更推荐
[1, 2, 3].map(item => item*2);

(3)箭头函数

箭头函数取代Function.prototype.bind,不应再用 self/_this/that 绑定 this。

javascript 复制代码
// 不推荐
const that = this;
const boundMethod = function(...params) {
  return method.apply(that, params);
}

// 可行
const boundMethod = method.bind(this);

// 更推荐
const boundMethod = (...params) => method.apply(this, params);

简单的、单行的、不会复用的函数,建议采用箭头函数。

如果函数体较为复杂,行数较多,还是应该采用传统的函数写法。

所有配置项都应该集中在一个对象,放在最后一个参数,布尔值最好不要直接作为参数,因为代码语义会很差,也不利于将来增加其他配置项。

javascript 复制代码
// 不推荐
function divide(a, b, option = false ) {
}

// 推荐
function divide(a, b, { option = false } = {}) {
}

(4) arguments 变量

不要在函数体内使用 arguments 变量,使用 rest 运算符(...)代替。因为 rest 运算符显式表明你想要获取参数,而且 arguments 是一个类似数组的对象,而 rest 运算符可以提供一个真正的数组。

javascript 复制代码
// 不推荐
function all() {
  const args = Array.prototype.slice.call(arguments);
  return args.join('');
}

// 推荐
function concatenateAll(...args) {
  return args.join('');
}

//使用默认值语法设置函数参数的默认值
// 不推荐
function handleThings(opts) {
  opts = opts || {};
}

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

7、Map结构

注意区分 Object 和 Map,只有模拟现实世界的实体对象时,才使用 Object。

如果只是需要key: value的数据结构,使用 Map 结构。因为 Map 有内建的遍历机制。

javascript 复制代码
let arr = [{name:'sum',age:20}]
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]);
}

8、class类

总是用 Class,取代需要 prototype 的操作。因为 Class 的写法更简洁,更易于理解

在历史文章中有一篇写了关于class的详细解说

ES6对于Class类的基本语法详解(2024-04-10)-CSDN博客

javascript 复制代码
// 不推荐 构造函数
function Queue(contents = []) {
  this._queue = [...contents];
}
Queue.prototype.pop = function() {
  const value = this._queue[0];
  this._queue.splice(0, 1);
  return value;
}

// 推荐 class
class Queue {
  constructor(contents = []) {
    this._queue = [...contents];
  }
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }
}

使用extends实现继承,因为这样更简单,不会有破坏instanceof运算的危险。

javascript 复制代码
// 不推荐
const inherits = require('inherits');
function PeekableQueue(contents) {
  Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
  return this._queue[0];
}

// 推荐
class PeekableQueue extends Queue {
  peek() {
    return this._queue[0];
  }
}

9、模块

ES6 模块语法是 JavaScript 模块的标准写法,坚持使用这种写法,取代 Node.js 的 CommonJS 语法。

首先,使用import取代require()

javascript 复制代码
// CommonJS 的写法
const moduleA = require('moduleA');
const func1 = moduleA.func1;
const func2 = moduleA.func2;

// ES6 的写法
import { func1, func2 } from 'moduleA';

其次,使用export取代module.exports

javascript 复制代码
// commonJS 的写法
var React = require('react');

var Breadcrumbs = React.createClass({
  render() {
    return <nav />;
  }
});

module.exports = Breadcrumbs;

// ES6 的写法
import React from 'react';

class Breadcrumbs extends React.Component {
  render() {
    return <nav />;
  }
};

export default Breadcrumbs;

如果模块只有一个输出值,就使用export default,如果模块有多个输出值,除非其中某个输出值特别重要,否则建议不要使用export default,即多个输出值如果是平等关系,export default与普通的export就不要同时使用。

如果模块默认输出一个函数,函数名的首字母应该小写,表示这是一个工具方法。

javascript 复制代码
function makeStyleGuide() {
}

export default makeStyleGuide;

如果模块默认输出一个对象,对象名的首字母应该大写,表示这是一个配置值对象。

javascript 复制代码
const StyleGuide = {
  es6: {
  }
};

export default StyleGuide;

10、ESLint的使用

ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

首先,在项目的根目录安装 ESLint。

javascript 复制代码
npm install --save-dev eslint
npm install --save-dev eslint-config-airbnb
npm install --save-dev eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-vue/eslint-plugin-react(按照开发技术选择)

最后,在项目的根目录下新建一个.eslintrc文件,配置 ESLint。

javascript 复制代码
{
  "extends": "eslint-config-airbnb"
}

现在就可以检查,当前项目的代码是否符合预设的规则。

index.js文件的代码如下。

javascript 复制代码
var unused = 'I have no purpose!';
function greet() {
    var message = 'Hello, World!';
    console.log(message);
}
greet();

使用 ESLint 检查这个文件,就会报出错误。

javascript 复制代码
$ npx eslint index.js
index.js
  1:1  error  Unexpected var, use let or const instead          no-var
  1:5  error  unused is defined but never used                 no-unused-vars
  4:5  error  Expected indentation of 2 characters but found 4  indent
  4:5  error  Unexpected var, use let or const instead          no-var
  5:5  error  Expected indentation of 2 characters but found 4  indent

✖ 5 problems (5 errors, 0 warnings)

上面代码说明,原文件有五个错误,其中两个是不应该使用var命令,而要使用letconst;一个是定义了变量,却没有使用;

另外两个是行首缩进为 4 个空格,而不是规定的 2 个空格。

相关推荐
Apifox3 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95277 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿30 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox