前言,这篇笔记是作者的一个笔记而已,记录的不全,望包涵,持续更新。(阮老师的笔记)
## let && const
在函数作用域或全局作用域中通过关键字var
声明的变量,无论实际上是在哪里声明的,都会被当成在当前作用域顶部声明的变量,这就是我们常说的提升(Hoisting)
//变量提升其实不是进入判断之后猜创建value,在es6中,let和const完美的解决了此问题。
function getValue(condition){
if(condition){
var value = 'blue';
return value;
} else {
return null;
}
}
//实际被浏览器解析为:
function getValue(condition){
var value;
if(condition){
var value = 'blue';
return value;
} else {
return null;
}
}
## String
字符串中的子串识别,自javaScript
首次被使用以来,开发者们就使用indexOf()
方法来在一段字符串中检测另一段子字符串,在ES6中,提供了3个类似的方法可以达到相同效果。
- includes()方法,如果在字符串中检测到指定文本则返回 true ,否则返回 false 。
- startsWith()方法,如果在字符串的起始部分检测到指定文本则返回 true ,否则返回 false 。
- endsWith()方法,如果在字符串的结束部分检测到指定文本则返回 true , 否则返回 false 。
示例:
let s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
**************************************
let s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
以上的3个方法都接收2个参数:第一个参数是指定要搜索的文本,第二个参数是可选的,指定一个开始搜索的位置的索引值。如果指定了第二个参数,则 includes() 方法和 startsWith() 方法会从这个索引值的位置开始匹配,endsWith() 方法则从这个索引值减去欲搜索文本长度的位置开始正向匹配。(优化了搜索的速度)
-
块级作用域
-
let 取代 var
-
const 设置常量增加可读性
-
-
字符串
- 静态字符串一律使用单引号或反引号,不使用双引号。动态字符串使用反引号。
-
对象
-
单行定义的对象,最后一个成员不以逗号结尾。多行定义的对象,最后一个成员以逗号结尾。
-
对象尽量静态化,一旦定义,就不得随意添加新的属性。如果添加属性不可避免,要使用
Object.assign
方法。
const a = {}; Object.assign(a, { x: 3 });
-
-
数组
- 使用扩展运算符(…)拷贝数组。
// 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);
-
函数
-
立即执行函数可以写成箭头函数的形式。
-
那些需要使用函数表达式的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了 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);
-
-
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运算的危险。
// 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'; class Breadcrumbs extends React.Component { render() { return <nav />; } }; export default Breadcrumbs;
- 如果模块只有一个输出值,就使用export default,如果模块有多个输出值,就不使用export default,export default与普通的export不要同时使用。
-
ESLint 的使用
- ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
- 首先,安装 ESLint。
$ npm install -g eslint
- 然后,安装 Airbnb 语法规则,以及 import、a11y、react 插件。
$ npm i -g eslint-config-airbnb $ npm i -g eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
- 最后,在项目的根目录下新建一个.eslintrc文件,配置 ESLint。
{ "extends": "eslint-config-airbnb" }
- 现在就可以检查,当前项目的代码是否符合预设的规则。