编程风格

1. 块级作用域

(1)let 取代 var

(2)全局常量和线程安全

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

  const优于let有几个原因。

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

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

  最后一个原因是 JavaScript 编译器会对const进行优化,所以多使用const,有利于提供程序的运行效率,也就是说letconst的本质区别,其实是编译器内部的处理不同。

// bad
var a = 1, b = 2, c = 3; // good
const a = 1;
const b = 2;
const c = 3; // best
const [a, b, c] = [1, 2, 3];

2. 字符串

  静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。

// bad
const a = "foobar";
const b = 'foo' + a + 'bar'; // acceptable
const c = `foobar`; // good
const a = 'foobar';
const b = `foo${a}bar`;
const c = 'foobar';

3. 解构赋值

  使用数组成员对变量赋值时,优先使用解构赋值。

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

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

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

// bad
function getFullName(user) {
const firstName = user.firstName;
const lastName = user.lastName;
} // good
function getFullName(obj) {
const { firstName, lastName } = obj;
} // best
function getFullName({ firstName, lastName }) {
}

  如果函数返回多个值,优先使用对象的解构赋值,而不是数组的解构赋值。这样便于以后添加返回值,以及更改返回值的顺序。

// bad
function processInput(input) {
return [left, right, top, bottom];
} // good
function processInput(input) {
return { left, right, top, bottom };
} const { left, right } = processInput(input);

4. 对象

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

// bad
const a = { k1: v1, k2: v2, };
const b = {
k1: v1,
k2: v2
}; // good
const a = { k1: v1, k2: v2 };
const b = {
k1: v1,
k2: v2,
};

  对象尽量静态化,一旦定义,就不得随意添加新的属性。如果添加属性不可避免,要使用Object.assign方法。

// bad
const a = {};
a.x = 3; // if reshape unavoidable
const a = {};
Object.assign(a, { x: 3 }); // good
const a = { x: null };
a.x = 3;

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

var ref = 'some value';

// bad
const atom = {
ref: ref, value: 1, addValue: function (value) {
return atom.value + value;
},
}; // good
const atom = {
ref, value: 1, addValue(value) {
return atom.value + value;
},
};

5. 数组

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

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

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

const foo = document.querySelectorAll('.foo');
const nodes = Array.from(foo);

6. 函数

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

(() => {
console.log('Welcome to the Internet.');
})();

  那些需要使用函数表达式的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了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);

  简单的、单行的、不会复用的函数,建议采用箭头函数。如果函数体较为复杂,行数较多,还是应该采用传统的函数写法。

  不要在函数体内使用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 = {}) {
// ...
}

7. 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]);
}

8. 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实现继承,因为这样更简单,不会有破坏instanceof运算的危险。

9. 模块

  使用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同时使用。

  不要在模块输入中使用通配符。因为这样可以确保你的模块之中,有一个默认输出(export default)。

  如果模块默认输出一个函数,函数名的首字母应该小写。

  如果模块默认输出一个对象,对象名的首字母应该大写。

const StyleGuide = {
es6: {
}
}; export default StyleGuide;

10. ESLint的使用

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

  首先,安装ESLint。

$ npm i -g eslint

  然后,安装Airbnb语法规则。

$ npm i -g eslint-config-airbnb

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

{
"extends": "eslint-config-airbnb"
}

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

  index.js文件的代码如下。

var unusued = 'I have no purpose!';

function greet() {
var message = 'Hello, World!';
alert(message);
} greet();

  使用ESLint检查这个文件。

$ eslint index.js
index.js
1:5 error unusued is defined but never used no-unused-vars
4:5 error Expected indentation of 2 characters but found 4 indent
5:5 error Expected indentation of 2 characters but found 4 indent ✖ 3 problems (3 errors, 0 warnings)

  上面代码说明,原文件有三个错误,一个是定义了变量,却没有使用,另外两个是行首缩进为4个空格,而不是规定的2个空格。

ECMAScript 6 笔记(六)的更多相关文章

  1. es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  2. 《MFC游戏开发》笔记六 图像双缓冲技术:实现一个流畅的动画

    本系列文章由七十一雾央编写,转载请注明出处.  http://blog.csdn.net/u011371356/article/details/9334121 作者:七十一雾央 新浪微博:http:/ ...

  3. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  4. Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  5. Python学习笔记六

    Python课堂笔记六 常用模块已经可以在单位实际项目中使用,可以实现运维自动化.无需手工备份文件,数据库,拷贝,压缩. 常用模块 time模块 time.time time.localtime ti ...

  6. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. Django开发笔记六

    Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.登录功能完善 登录成功应该是重定向到首页,而不是转发 ...

  8. python3.4学习笔记(六) 常用快捷键使用技巧,持续更新

    python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...

  9. Go语言学习笔记六: 循环语句

    Go语言学习笔记六: 循环语句 今天学了一个格式化代码的命令:gofmt -w chapter6.go for循环 for循环有3种形式: for init; condition; increment ...

  10. 【opencv学习笔记六】图像的ROI区域选择与复制

    图像的数据量还是比较大的,对整张图片进行处理会影响我们的处理效率,因此常常只对图像中我们需要的部分进行处理,也就是感兴趣区域ROI.今天我们来看一下如何设置图像的感兴趣区域ROI.以及对ROI区域图像 ...

随机推荐

  1. C程序编译执行过程

    C程序编译执行过程   认识C编译执行过程,是C学习的开端. 简单说C语言从编码编译到执行要经历一下过程:   C源代码 编译---->形成目标代码,目标代码是在目标机器上运行的代码. 连接-- ...

  2. php 设计模式系列(一)

    参考文章:http://duchengjiu.iteye.com/blog/2227452 多态代码 // 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什 ...

  3. Linux Apache2 配置介绍

    转自:http://blog.csdn.net/hursing/article/details/18730813 apache原指http server程序,后来成为了该程序的组织名,所以把原程序名定 ...

  4. (中等) POJ 2948 Martian Mining,DP。

    Description The NASA Space Center, Houston, is less than 200 miles from San Antonio, Texas (the site ...

  5. mysql trouble shooting---- 从库停止同步lock_wait_timeout_exceeded_try_restarting_transaction

    问题描述: 数据库从库停止同步. 问题分析: show slave status\G;(也可使用show full processlist) 显示 某个update语句出错,Lock wait tim ...

  6. STM32 USB虚拟串口(转)

    源:STM32 USB虚拟串口 串口调试在项目中被使用越来越多,串口资源的紧缺也变的尤为突出.很多本本人群,更是深有体会,不准备一个USB转串口工具就没办法进行开发.本章节来简单概述STM32低端芯片 ...

  7. Android Material各种颜色设置

    Blogpost about support appcompat v21 from Chris Banes

  8. MySQL导入sql脚本中文乱码设置和常用命令

    1. use database_name; 2. set names utf8; (或其他需要的编码) 3. source example.sql (sql文件存放路径) Mysql安装目录数据库目录 ...

  9. cygwin的安装,vi的使用,gcc,g++的使用(转)

    源:cygwin的安装,vi的使用,gcc,g++的使用 Gcc的Makefile简单使用

  10. WebService 使用wsdl.exe生成代理类

    利用wsdl.exe生成webservice代理类: 根据提供的wsdl生成webservice代理类 1.开始->程序->Visual Studio 2005 命令提示 2.输入如下红色 ...