JavaScript 学习总结

前言

最近在用 JavaScript 进行前后端开发（后端使用Express框架），是一门很有趣的编程语言。探索过程中发现MDN文档（可选择中文）是不错的学习资料，故开始阅读并进行简单总结。文末附上了一些有助学习JS/ES/Express的链接。

JavaScript 简介

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.js、 Apache CouchDB 和 Adobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

ECMAScript 是什么

JavaScript 的标准是 ECMAScript ( ES ) 。截至 2012 年，所有的现代浏览器都完整的支持 ES5.1，旧版本的浏览器至少支持 ES3 标准。2015年，ECMA国际组织发布了第六版，正式名称为 ECMAScript 2015，通常被称为 ECMAScript 6 或 ES6。自此，ECMAScript 每年发布一次新标准。本文档目前覆盖了最新 ECMAScript 的草案，即 ECMAScript 2020。

Node.js 是什么

Node.js 是一个开源与跨平台的 JavaScript 运行时环境，在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）。为浏览器编写 JavaScript 的前端开发者现在除了客户端代码之外，还可以编写服务器端代码。
Node.js 应用程序运行于单个进程中，无需为每个请求创建新的线程。 其标准库中提供了一组异步的 I/O 原生功能（用以防止 JavaScript 代码被阻塞）。当 Node.js 执行 I/O 操作时（例如从网络读取、访问数据库或文件系统），Node.js 会在响应返回时恢复操作，而不是阻塞线程并浪费 CPU 循环等待。
Node.js 的包管理器 npm，是全球最大的开源库生态系统。

Express 是什么

Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。

Basics

Declarations

- var
- let: block-scoped
- const: block-scoped, read-only named constant

Comments

- one line: //
- multi-line: 
/* ...
	...
*/

Data types

• 7 primitives:
  Boolean, Number, BigInt, String, Symbol (ES6), null, undefined
• Object

Converting strings to numbers:

• parseInt()
• parseFloat()
• + str

e.g.,

parseInt('101', 2) // 5
(+'1.1') + (+'1.1') // 2.2

Literals

• Fixed values, not variables.
• Types:
  Array, Boolean, Floating-point, Number, Object, RegExp, String

Function hoisting

Only function declarations are hoisted, but not function expressions.

e.g.,

/* Function declaration */
foo(); // "bar"
function foo() {
  console.log('bar');
}

/* Function expression */
baz(); // TypeError: baz is not a function
var baz = function() {
  console.log('bar2');
};

Control Flow and Error Handling

Conditional statements

if (condition_1) {
  statement_1;
} else if (condition_2) {
  statement_2;
} else {
  statement_last;
}

Falsy values:

• false
• undefined
• null
• 0
• NaN
• Empty string ("")

Switch statements

switch (expression) {
  case label_1:
    statements_1
    [break;]
  case label_2:
    statements_2
    [break;]
    …
  default:
    statements_def
    [break;]
}

Exception handling statements

• throw
• try...catch...finally

e.g.,

function f() {
  try {
    console.log(0);
    throw 'bogus';
  } catch(e) {
    console.log(1);
    return true;    // this return statement is suspended
                    // until finally block has completed
    console.log(2); // not reachable
  } finally {
    console.log(3);
    return false;   // overwrites the previous "return"
    console.log(4); // not reachable
  }
  // "return false" is executed now
  console.log(5);   // not reachable
}
console.log(f()); // 0, 1, 3, false

function f() {
  try {
    throw 'bogus';
  } catch(e) {
    console.log('caught inner "bogus"');
    throw e; // this throw statement is suspended until
             // finally block has completed
  } finally {
    return false; // overwrites the previous "throw"
  }
  // "return false" is executed now
}

try {
  console.log(f());
} catch(e) {
  // this is never reached!
  // while f() executes, the `finally` block returns false,
  // which overwrites the `throw` inside the above `catch`
  console.log('caught outer "bogus"');
}

// OUTPUT
// caught inner "bogus"
// false

Error objects

function doSomethingErrorProne() {
  if (ourCodeMakesAMistake()) {
    throw (new Error('The message'));
  } else {
    doSomethingToGetAJavascriptError();
  }
}
⋮
try {
  doSomethingErrorProne();
} catch (e) {               // NOW, we actually use `console.error()`
  console.error(e.name);    // logs 'Error'
  console.error(e.message); // logs 'The message', or a JavaScript error message
}

Loops and Iteration

TBC…

References

MDN - JavaScript Guide

Useful Learning Resources

Basic JS:

• http://www.w3schools.com/js/default.asp (with a cloud IDE to instantly try out examples, make sure to review JS Objects and JS Classes sections)
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript ((JS tutorial from MDN)
• https://developer.mozilla.org/en-US/docs/Web/JavaScript (various resources and guides from MDN)

Use OO with JS:

• https://babeljs.io/learn-es2015/ (free overview)
• https://scotch.io/tutorials/better-javascript-with-es6-pt-ii-a-deep-dive-into-classes (a good tutorial explaining how new syntax makes prototype inheritance in JS almost look like inheritance in Java)
• https://www.pluralsight.com/courses/javascript-fundamentals-es6 (paid tutorial)
• https://developer.mozilla.org/en-US/docs/Web/JavaScript (free MDN guide and references, covers ES6)

express.js:

• http://expressjs.com/
• http://expressjs.com/2x/guide.html
• http://webapplog.com/express-js-fundamentals/