JavaScript速查表

不褪色

JavaScript速查表

• 本手册绝大部分内容是从Airbnb JavaScript Style Guide精简整理，将开发者们都明确的操作去掉，目的为了就是更快的速查。
  此处为源地址。
  
• 译制：HaleNing
  

目录

• 基础知识
  
  
  
  • 类型
    
  • 引用
    
  • 对象
    
  • 数组
    
  • 解构
    
  • 字符串
    
  • 变量
    
  • 属性
    
  • 测试
    
  
  
• 公共约束
  
  
  
  • 注释
    
  • 分号
    
  • 命名规范
    
  • 标准库
    
  
  
• 类与函数
  
  
  
  • 函数
    
  • 箭头函数
    
  • 类与构造函数
    
  • 模块
    
  • 迭代器与生成器
    
  • 提升
    
  • 比较运算符与相等
    
  • 事件
    
  • 类型转换与强制转换
    
  
  
• 推荐资源
  

基础知识

类型

• 基本类型
  最新的 ECMAScript 标准定义了 8 种数据类型,分别是
  
  
  
  • string
    
  • number
    
  • bigint
    
  • boolean
    
  • null
    
  • undefined
    
  • symbol (ECMAScript 2016新增)
    
  
  

所有基本类型的值都是不可改变的。但需要注意的是，基本类型本身和一个赋值为基本类型的变量的区别。变量会被赋予一个新值，而原值不能像数组、对象以及函数那样被改变。

• 引用类型
  
  
  
  • Object（包含普通对象-Object，数组对象-Array，正则对象-RegExp，日期对象-Date，数学函数-Math，函数对象-Function）
    
  
  

1. 使用 typeof 运算符检查：
3. undefined：typeof instance === "undefined"
4. Boolean：typeof instance === "boolean"
5. Number：typeof instance === "number"
6. String：typeof instance === "string
7. BigInt：typeof instance === "bigint"
8. Symbol ：typeof instance === "symbol"
9. null：typeof instance === "object"。
10. Object：typeof instance === "object"

复制代码

引用

推荐常量赋值都使用const, 值可能会发生改变的变量赋值都使用 let。

为什么？let   const 都是块级作用域，而 var是函数级作用域

1. // bad
2. var count = 1;
3. if (true) {
4.   count += 1;
5. }
7. // good, use the let and const
8. let count = 1;
9. const pi =3.14;
10. if (true) {
11.   count += 1;
12. }

复制代码

对象

• 使用字面语法创建对象：
  1. // bad
  2. const item = new Object();
  4. // good
  5. const item = {};

  复制代码
• 在创建具有动态属性名称的对象时使用属性名称:
  1. function getKey(k) {
  2.   return `a key named ${k}`;
  3. }
  5. // bad
  6. const obj = {
  7.   id: 5,
  8.   name: 'San Francisco',
  9. };
  10. obj[getKey('enabled')] = true;
  12. // good
  13. const obj = {
  14.   id: 5,
  15.   name: 'San Francisco',
  16.   [getKey('enabled')]: true,
  17. };

  复制代码
• 属性值简写，并且推荐将缩写 写在前面 :
  1. const lukeSkywalker = 'Luke Skywalker';
  2. //常量名就是你想设置的属性名
  3. // bad
  4. const obj = {
  5.   lukeSkywalker: lukeSkywalker,
  6. };
  8. // good
  9. const obj = {
  10.   lukeSkywalker,
  11. };
  13. const anakinSkywalker = 'Anakin Skywalker';
  14. const lukeSkywalker = 'Luke Skywalker';
  16. // good
  17. const obj = {
  18.   lukeSkywalker,
  19.   anakinSkywalker,
  20.   episodeOne: 1,
  21.   twoJediWalkIntoACantina: 2,
  22.   episodeThree: 3,
  23.   mayTheFourth: 4,
  24. };

  复制代码
• 不要直接调用 Object.prototype上的方法，如 hasOwnProperty、propertyIsEnumerable、isPrototypeOf
  

  为什么？在一些有问题的对象上，这些方法可能会被屏蔽掉，如：{ hasOwnProperty: false } 或空对象 Object.create(null)
  

  1. // bad
  2. console.log(object.hasOwnProperty(key));
  4. // good
  5. console.log(Object.prototype.hasOwnProperty.call(object, key));
  7. // best
  8. const has = Object.prototype.hasOwnProperty;
  9. console.log(has.call(object, key));
  10. /* or */
  11. import has from 'has'; // https://www.npmjs.com/package/has
  12. console.log(has(object, key));

  复制代码
• 对象拷贝时，推荐使用...运算符来代替Object.assign, 获取大对象的多个属性时，也推荐使用...运算符
  1. // very bad, 因为line2的操作更改了original
  2. const original = { a: 1, b: 2 };
  3. const copy = Object.assign(original, { c: 3 });
  4. // 将不需要的属性删除了
  5. delete copy.a;
  7. // bad
  8. const original = { a: 1, b: 2 };
  9. const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 }
  11. // good 使用 es6 扩展运算符 ...
  12. const original = { a: 1, b: 2 };
  13. // 浅拷贝
  14. const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 }
  16. // rest 解构运算符
  17. const { a, ...noA } = copy; // noA => { b: 2, c: 3 }

  复制代码

数组

• 用扩展运算符做数组浅拷贝，类似上面的对象浅拷贝：
  1. // bad
  2. const len = items.length;
  3. const itemsCopy = [];
  4. let i;
  6. for (i = 0; i < len; i += 1) {
  7.   itemsCopy[i] = items[i];
  8. }
  10. // good
  11. const itemsCopy = [...items];

  复制代码
• 用 ... 运算符而不是 Array.from 来将一个可迭代的对象转换成数组:
  1. const foo = document.querySelectorAll('.foo');
  3. // good
  4. const nodes = Array.from(foo);
  6. // best
  7. const nodes = [...foo];

  复制代码
• 使用 Array.from 而不是 ... 运算符去做 map 遍历。 因为这样可以避免创建一个临时数组：
  1. // bad
  2. const baz = [...foo].map(bar);
  4. // good
  5. const baz = Array.from(foo, bar);

  复制代码
• 如果一个数组有很多行，在数组的 [ 后和 ] 前断行 :
  1. // good
  2. const arr = [[0, 1], [2, 3], [4, 5]];
  4. const objectInArray = [
  5.   {
  6.     id: 1,
  7.   },
  8.   {
  9.     id: 2,
  10.   },
  11. ];
  13. const numberInArray = [
  14.   1,
  15.   2,
  16. ];

  复制代码

解构

• 用对象的解构赋值来获取和使用对象某个或多个属性值:
  1. // bad
  2. function getFullName(user) {
  3.   const firstName = user.firstName;
  4.   const lastName = user.lastName;
  6.   return `${firstName} ${lastName}`;
  7. }
  9. // good
  10. function getFullName(user) {
  11.   const { firstName, lastName } = user;
  12.   return `${firstName} ${lastName}`;
  13. }
  15. // best
  16. function getFullName({ firstName, lastName }) {
  17.   return `${firstName} ${lastName}`;
  18. }

  复制代码
• 数组解构:
  1. const arr = [1, 2, 3, 4];
  3. // bad
  4. const first = arr[0];
  5. const second = arr[1];
  6. const four = arr[3];
  8. // good
  9. const [first, second, _,four] = arr;

  复制代码
• 多个返回值用对象的解构，而不是数组解构:
  1. // bad
  2. function processInput(input) {
  3.   return [left, right, top, bottom];
  4. }
  6. // 数组解构，必须明确前后顺序
  7. const [left, __, top] = processInput(input);
  9. // good
  10. function processInput(input) {
  11.   return { left, right, top, bottom };
  12. }
  13. // 只需要关注值，而不用关注顺序
  14. const { left, top } = processInput(input);

  复制代码

字符串

• 当需要动态生成字符串时，使用模板字符串而不是字符串拼接：
  1. // bad
  2. function sayHi(name) {
  3.   return 'How are you, ' + name + '?';
  4. }
  6. // bad
  7. function sayHi(name) {
  8.   return ['How are you, ', name, '?'].join();
  9. }
  12. // good 可读性比上面更强
  13. function sayHi(name) {
  14.   return `How are you, ${name}?`;
  15. }

  复制代码
• 永远不要使用 eval()，该方法有太多漏洞。
  

变量

• 不要使用链式变量赋值
  

因为会产生隐式的全局变量

1. // bad
2. (function example() {
3.   // JavaScript interprets this as
4.   // let a = ( b = ( c = 1 ) );
5.   // The let keyword only applies to variable a; variables b and c become
6.   // global variables.
7.   let a = b = c = 1;
8. }());
10. console.log(a); // throws ReferenceError
11. // 在块的外层也访问到了，代表这是一个全局变量。
12. console.log(b); // 1
13. console.log(c); // 1
15. // good
16. (function example() {
17.   let a = 1;
18.   let b = a;
19.   let c = a;
20. }());
22. console.log(a); // throws ReferenceError
23. console.log(b); // throws ReferenceError
24. console.log(c); // throws ReferenceError
26. // the same applies for `const`

复制代码

• 不要使用一元自增自减运算符（++， --）
  

  根据 eslint 文档，一元增量和减量语句受到自动分号插入的影响，并且可能会导致应用程序中的值递增或递减的静默错误。 使用 num + = 1 而不是 num ++ 或 num ++ 语句也是含义清晰的。
  

  
  

1.   // bad
3.   const array = [1, 2, 3];
4.   let num = 1;
5.   num++;
6.   --num;
8.   let sum = 0;
9.   let truthyCount = 0;
10.   for (let i = 0; i < array.length; i++) {
11.     let value = array[i];
12.     sum += value;
13.     if (value) {
14.       truthyCount++;
15.     }
16.   }
18.   // good
20.   const array = [1, 2, 3];
21.   let num = 1;
22.   num += 1;
23.   num -= 1;
25.   const sum = array.reduce((a, b) => a + b, 0);
26.   const truthyCount = array.filter(Boolean).length;

复制代码

属性

• 访问属性时使用点符号
  

1. const luke = {
2.   jedi: true,
3.   age: 28,
4. };
6. // bad
7. const isJedi = luke['jedi'];
9. // good
10. const isJedi = luke.jedi;

复制代码

• 根据表达式访问属性时使用[]
  

1. const luke = {
2.   jedi: true,
3.   age: 28,
4. };
6. function getProp(prop) {
7.   return luke[prop];
8. }
10. const isJedi = getProp('je'+'di');

复制代码

测试

• 无论用哪个测试框架，都需要写测试。
  
• 尽量去写很多小而美的函数，减少突变的发生
  
• 小心 stub 和 mock —— 这会让你的测试变得容易出现问题。
  
• 100% 测试覆盖率是我们努力的目标，即便实际上很少达到。
  
• 每当你修了一个 bug， 都要尽量写一个回归测试。 如果一个 bug 修复了，没有回归测试，很可能以后会再次出问题。
  

公共约束

注释

• 多行注释用 /** ... */
  

1. // bad
2. // make() returns a new element
3. // based on the passed in tag name
4. //
5. // @param {String} tag
6. // @return {Element} element
7. function make(tag) {
9.   // ...
11.   return element;
12. }
14. // good
15. /**
16. * make() returns a new element
17. * based on the passed-in tag name
18. */
19. function make(tag) {
21.   // ...
23.   return element;
24. }

复制代码

• 单行注释用 //
  

1. // bad
2. const active = true;  // is current tab
4. // good
5. // is current tab
6. const active = true;
8. // bad
9. function getType() {
10.   console.log('fetching type...');
11.   // set the default type to 'no type'
12.   const type = this._type || 'no type';
14.   return type;
15. }
17. // good
18. function getType() {
19.   console.log('fetching type...');
21.   // set the default type to 'no type'
22.   const type = this._type || 'no type';
24.   return type;
25. }
27. // also good
28. function getType() {
29.   // set the default type to 'no type'
30.   const type = this._type || 'no type';
32.   return type;
33. }

复制代码

• 用 // FIXME: 给问题注释,用 // TODO: 去注释待办
  

分号

为什么？当 JavaScript 遇到没有分号结尾的一行，它会执行 自动插入分号 这一规则来决定行末是否加分号。如果 JavaScript 在你的断行里错误的插入了分号，就会出现一些古怪的行为。显式配置代码检查去检查没有带分号的地方可以帮助你防止这种错误。

1. // bad - raises exception
2. const luke = {}
3. const leia = {}
4. [luke, leia].forEach((jedi) => jedi.father = 'vader')
6. // bad - raises exception
7. const reaction = "No! That’s impossible!"
8. (async function meanwhileOnTheFalcon() {
9.   // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
10.   // ...
11. }())
13. // bad - returns `undefined` instead of the value on the next line - always happens when `return` is on a line by itself because of ASI!
14. function foo() {
15.   return
16.     'search your feelings, you know it to be foo'
17. }
19. // good
20. const luke = {};
21. const leia = {};
22. [luke, leia].forEach((jedi) => {
23.   jedi.father = 'vader';
24. });
26. // good
27. const reaction = "No! That’s impossible!";
28. (async function meanwhileOnTheFalcon() {
29.   // handle `leia`, `lando`, `chewie`, `r2`, `c3p0`
30.   // ...
31. }());
33. // good
34. function foo() {
35.   return 'search your feelings, you know it to be foo';
36. }

复制代码

命名规范

• export default 导出模块A，则这个文件名也叫 A.*， import 时候的参数也叫 A :
  

1. // file 1 contents
2. class CheckBox {
3.   // ...
4. }
5. export default CheckBox;
7. // file 2 contents
8. export default function fortyTwo() { return 42; }
10. // file 3 contents
11. export default function insideDirectory() {}
13. // in some other file
14. // bad
15. import CheckBox from './checkBox'; // PascalCase import/export, camelCase filename
16. import FortyTwo from './FortyTwo'; // PascalCase import/filename, camelCase export
17. import InsideDirectory from './InsideDirectory'; // PascalCase import/filename, camelCase export
19. // bad
20. import CheckBox from './check_box'; // PascalCase import/export, snake_case filename
21. import forty_two from './forty_two'; // snake_case import/filename, camelCase export
22. import inside_directory from './inside_directory'; // snake_case import, camelCase export
23. import index from './inside_directory/index'; // requiring the index file explicitly
24. import insideDirectory from './insideDirectory/index'; // requiring the index file explicitly
26. // good
27. import CheckBox from './CheckBox'; // PascalCase export/import/filename
28. import fortyTwo from './fortyTwo'; // camelCase export/import/filename
29. import insideDirectory from './insideDirectory'; // camelCase export/import/directory name/implicit "index"
30. // ^ supports both insideDirectory.js and insideDirectory/index.js

复制代码

• 当你export default一个函数时，函数名用小驼峰，文件名和函数名一致, export 一个结构体/类/单例/函数库/对象 时用大驼峰。
  

1. function makeStyleGuide() {
2.   // ...
3. }
5. export default makeStyleGuide;
9. const AirbnbStyleGuide = {
10.   es6: {
11.   }
12. };
14. export default AirbnbStyleGuide;

复制代码

标准库

标准库中包含一些由于历史原因遗留的工具类

• 用 Number.isNaN 代替全局的 isNaN:
  1. // bad
  2. isNaN('1.2'); // false
  3. isNaN('1.2.3'); // true
  5. // good
  6. Number.isNaN('1.2.3'); // false
  7. Number.isNaN(Number('1.2.3')); // true

  复制代码
• 用 Number.isFinite 代替 isFinite
  

1. // bad
2. isFinite('2e3'); // true
4. // good
5. Number.isFinite('2e3'); // false
6. Number.isFinite(parseInt('2e3', 10)); // true

复制代码

类与函数

函数

• 使用命名函数表达式而不是函数声明
  

  为什么？这是因为函数声明会发生提升，这意味着在一个文件里函数很容易在其被定义之前就被引用了。这样伤害了代码可读性和可维护性。如果你发现一个函数又大又复杂，且这个函数妨碍了这个文件其他部分的理解性，你应当单独把这个函数提取成一个单独的模块。不管这个名字是不是由一个确定的变量推断出来的，别忘了给表达式清晰的命名（这在现代浏览器和类似 babel 编译器中很常见）。这消除了由匿名函数在错误调用栈产生的所有假设。 (讨论)
  

  1. // bad
  2. function foo() {
  3.   // ...
  4. }
  6. // bad
  7. const foo = function () {
  8.   // ...
  9. };
  11. // good
  12. // lexical name distinguished from the variable-referenced invocation(s)
  13. // 函数表达式名和声明的函数名是不一样的
  14. const short = function longUniqueMoreDescriptiveLexicalFoo() {
  15.   // ...
  16. };

  复制代码
• 把立即执行函数包裹在圆括号里:
  

  立即执行函数：Immediately Invoked Function expression = IIFE。 为什么？因为这样使代码读起来更清晰（译者注：我咋不觉得）。 另外，在模块化世界里，你几乎用不着 IIFE。
  

  1. // immediately-invoked function expression (IIFE)
  2. ( ()=> {
  3.   console.log('Welcome to the Internet. Please follow me.');
  4. }() );

  复制代码
• 不要用 arguments 命名参数。他的优先级高于每个函数作用域自带的 arguments 对象，这会导致函数自带的 arguments 值被覆盖:
  1. // bad
  2. function foo(name, options, arguments) {
  3.   // ...
  4. }
  6. // good
  7. function foo(name, options, args) {
  8.   // ...
  9. }

  复制代码
• 用默认参数语法而不是在函数里对参数重新赋值
  1. // really bad
  2. function handleThings(opts) {
  3.   // 如果 opts 的值为 false, 它会被赋值为 {}
  4.   // 虽然你想这么写，但是这个会带来一些微妙的 bug。
  5.   opts = opts || {};
  6.   // ...
  7. }
  9. // still bad
  10. function handleThings(opts) {
  11.   if (opts === void 0) {
  12.     opts = {};
  13.   }
  14.   // ...
  15. }
  17. // good
  18. function handleThings(opts = {}) {
  19.   // ...
  20. }

  复制代码
• 把默认参数赋值放在最后面
  1. // bad
  2. function handleThings(opts = {}, name) {
  3.   // ...
  4. }
  6. // good
  7. function handleThings(name, opts = {}) {
  8.   // ...
  9. }

  复制代码
• 不要修改参数，也不要重新对函数参数赋值：
  

  容易导致bug，另外重新对参数赋值也会导致优化问题。
  

  1. // bad
  2. function f1(a) {
  3.   a = 1;
  4.   // ...
  5. }
  7. function f2(a) {
  8.   if (!a) { a = 1; }
  9.   // ...
  10. }
  12. // good
  13. function f3(a) {
  14.   const b = a || 1;
  15.   // ...
  16. }
  18. function f4(a = 1) {
  19.   // ...
  20. }

  复制代码

箭头函数

<ul>当需要使用箭头函数的时候，使用它，但是不要滥用

当函数逻辑复杂时，不推荐使用箭头函数，而是单独抽出来放在一个函数里。

1. // bad
2. [1, 2, 3].map(function (x) {
3.   const y = x + 1;
4.   return x * y;
5. });
7. // good
8. [1, 2, 3].map((x) => {
9.   const y = x + 1;
10.   return x * y;
11. });

复制代码

避免箭头函数与比较操作符混淆

1. // bad
2. const itemHeight = (item) => item.height <= 256 ? item.largeSize : item.smallSize;
4. // bad
5. const itemHeight = (item) => item.height >= 256 ? item.largeSize : item.smallSize;
7. // good
8. const itemHeight = (item) => (item.height <= 256 ? item.largeSize : item.smallSize);
10. // good
11. const itemHeight = (item) => {
12.   const { height, largeSize, smallSize } = item;
13.   return height <= 256 ? largeSize : smallSize;
14. };

复制代码

• 自定义 toString() 方法是可以的，但需要保证它可以正常工作
  

1. // bad
2. function Queue(contents = []) {
3.   this.queue = [...contents];
4. }
5. Queue.prototype.pop = function () {
6.   const value = this.queue[0];
7.   this.queue.splice(0, 1);
8.   return value;
9. };
11. // good
12. class Queue {
13.   constructor(contents = []) {
14.     this.queue = [...contents];
15.   }
16.   pop() {
17.     const value = this.queue[0];
18.     this.queue.splice(0, 1);
19.     return value;
20.   }
21. }

复制代码

• 如果没有特别定义，类有默认的构造方法。一个空的构造函数或只是代表父类的构造函数是不需要写的。
  

1. // bad
2. const inherits = require('inherits');
3. function PeekableQueue(contents) {
4.   Queue.apply(this, contents);
5. }
6. inherits(PeekableQueue, Queue);
7. PeekableQueue.prototype.peek = function () {
8.   return this.queue[0];
9. }
11. // good
12. class PeekableQueue extends Queue {
13.   peek() {
14.     return this.queue[0];
15.   }
16. }

复制代码

模块

• 使用（import/export）模块
  

1. // bad
2. Jedi.prototype.jump = function () {
3.   this.jumping = true;
4.   return true;
5. };
7. Jedi.prototype.setHeight = function (height) {
8.   this.height = height;
9. };
11. const luke = new Jedi();
12. luke.jump(); // => true
13. luke.setHeight(20); // => undefined
15. // good
16. class Jedi {
17.   jump() {
18.     this.jumping = true;
19.     return this;
20.   }
22.   setHeight(height) {
23.     this.height = height;
24.     return this;
25.   }
26. }
28. const luke = new Jedi();
30. luke.jump()
31.   .setHeight(20);

复制代码

• 不要导出可变的东西:
  

变化通常都是需要避免，特别是当你要输出可变的绑定。虽然在某些场景下可能需要这种技术，但总的来说应该导出常量。

1. class Jedi {
2.   constructor(options = {}) {
3.     this.name = options.name || 'no name';
4.   }
6.   getName() {
7.     return this.name;
8.   }
10.   toString() {
11.     return `Jedi - ${this.getName()}`;
12.   }
13. }

复制代码

• import JavaScript文件不用包含扩展名
  

1. // bad
2. class Jedi {
3.   constructor() {}
5.   getName() {
6.     return this.name;
7.   }
8. }
10. // bad
11. class Rey extends Jedi {
12.   // 这种构造函数是不需要写的
13.   constructor(...args) {
14.     super(...args);
15.   }
16. }
18. // good
19. class Rey extends Jedi {
20.   constructor(...args) {
21.     super(...args);
22.     this.name = 'Rey';
23.   }
24. }

复制代码

迭代器与生成器

• 不要用迭代器。使用 JavaScript 高级函数代替 for-in、 for-of
  

  用数组的这些迭代方法： map() / every() / filter() / find() / findIndex() / reduce() / some() / ... , 对象的这些方法 Object.keys() / Object.values() / Object.entries() 得到一个数组，就能去遍历对象。
  

  1. // bad
  2. const AirbnbStyleGuide = require('./AirbnbStyleGuide');
  3. module.exports = AirbnbStyleGuide.es6;
  5. // ok
  6. import AirbnbStyleGuide from './AirbnbStyleGuide';
  7. export default AirbnbStyleGuide.es6;
  9. // best
  10. import { es6 } from './AirbnbStyleGuide';
  11. export default es6;

  复制代码

提升

• var 声明会被提前到离他最近的作用域的最前面，但是它的赋值语句并没有提前。const 和 let 被赋予了新的概念 暂时性死区 (TDZ)。 重要的是要知道为什么 typeof 不再安全。
  

1. // bad
2. let foo = 3;
3. export { foo }
5. // good
6. const foo = 3;
7. export { foo }

复制代码

• 已命名函数表达式提升他的变量名，不是函数名或函数体
  

1. // bad
2. import foo from './foo.js';
3. import bar from './bar.jsx';
4. import baz from './baz/index.jsx';
6. // good
7. import foo from './foo';
8. import bar from './bar';
9. import baz from './baz';

复制代码

比较运算符与相等

• 用 === 和 !== 严格比较而不是 == 和 !=
  
• 条件语句，例如if语句使用coercion与tobooleant抽象方法评估它们的表达式，始终遵循这些简单的规则：
  
  
  
  • Objects evaluate to true
    
  • Undefined evaluates to false
    
  • Null evaluates to false
    
  • Booleans evaluate to the value of the boolean
    
  • Numbers evaluate to false if +0, -0, or NaN, otherwise true
    
  • Strings evaluate to false if an empty string '', otherwise true
    
  
  

1. const numbers = [1, 2, 3, 4, 5];
3. // bad
4. let sum = 0;
5. for (let num of numbers) {
6.   sum += num;
7. }
8. sum === 15;
10. // good
11. let sum = 0;
12. numbers.forEach((num) => sum += num);
13. sum === 15;
15. // best (use the functional force)
16. const sum = numbers.reduce((total, num) => total + num, 0);
17. sum === 15;
19. // bad
20. const increasedByOne = [];
21. for (let i = 0; i < numbers.length; i++) {
22.   increasedByOne.push(numbers[i] + 1);
23. }
25.     // good
26. const increasedByOne = [];
27. numbers.forEach((num) => {
28.   increasedByOne.push(num + 1);
29. });
31. // best (keeping it functional)
32. const increasedByOne = numbers.map((num) => num + 1);

复制代码

• 三元表达式不应该嵌套，尽量保持单行表达式
  

1. // 我们知道这个不会工作，假设没有定义全局的 notDefined
2. function example() {
3.   console.log(notDefined); // => throws a ReferenceError
4. }
6. // 在你引用的地方之后声明一个变量，他会正常输出是因为变量提升。
7. // 注意： declaredButNotAssigned 的值 true 没有被提升。
8. function example() {
9.   console.log(declaredButNotAssigned); // => undefined
10.   var declaredButNotAssigned = true;
11. }
13. // 可以写成如下例子， 二者意义相同。
14. function example() {
15.   let declaredButNotAssigned;
16.   console.log(declaredButNotAssigned); // => undefined
17.   declaredButNotAssigned = true;
18. }
20. // 用 const，let就不一样了。
21. function example() {
22.   console.log(declaredButNotAssigned); // => throws a ReferenceError
23.   console.log(typeof declaredButNotAssigned); // => throws a ReferenceError
24.   const declaredButNotAssigned = true;
25. }

复制代码

事件

• 当把数据载荷传递给事件时（例如是 DOM 还是像 Backbone 这样有很多属性的事件）。这使得后续的贡献者（程序员）向这个事件添加更多的数据时不用去找或者更新每个处理器。
  

1. function example() {
2.   console.log(named); // => undefined
4.   named(); // => TypeError named is not a function
6.   superPower(); // => ReferenceError superPower is not defined
8.   var named = function superPower() {
9.     console.log('Flying');
10.   };
11. }
13. // 函数名和变量名一样是也如此。
14. function example() {
15.   console.log(named); // => undefined
17.   named(); // => TypeError named is not a function
19.   var named = function named() {
20.     console.log('named');
21.   };
22. }

复制代码

类型转换与强制转换

• 字符串
  

1. if ([0] && []) {
2.   // true
3.   // an array (even an empty one) is an object, objects will evaluate to true
4. }

复制代码

• 数字: 用 Number 做类型转换，parseInt 转换 string 应总是带上进制位
  

1. // bad
2. const foo = maybe1 > maybe2
3.   ? "bar"
4.   : value1 > value2 ? "baz" : null;
6. // better
7. const maybeNull = value1 > value2 ? 'baz' : null;
9. const foo = maybe1 > maybe2
10. ? 'bar'
11.   : maybeNull;
13. // best
14. const maybeNull = value1 > value2 ? 'baz' : null;
16. const foo = maybe1 > maybe2 ? 'bar' : maybeNull;

复制代码

• 移位运算要小心
  

  移位运算对大于 32 位的整数会导致意外行为。Discussion. 最大的 32 位整数是 2,147,483,647:
  

  
  

1. // bad
2. $(this).trigger('listingUpdated', listing.id);
4. // ...
6. $(this).on('listingUpdated', (e, listingID) => {
7.   // do something with listingID
8. });

复制代码

推荐资源

• 网站：
  
  
  
  • MDN: 不管你是仅仅开始入门、学过一点基础或者是个网站开发老手，你都能在这里找到有用的资源。
    
  • JS周刊 : 你可以在这里，接收到JS社区里最新的动态，其他开发者编写的优秀工具，阅读优秀的文章。
    
  • 印记中文 : JS及其前端领域的文档集合。
    
  
  
• 书籍(为了尊重作者的版权，下列书籍仅开源书籍提供链接)：
  
  
  
  • JavaScript权威指南（原书第7版）
    
  • 你不知道的JS
    
  • Eloquent JavaScript
    
  
  

来源:https://www.cnblogs.com/zhaoqingqing/p/18403172
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！