一页纸 JavaScript 手册

注释

注释是代码的 “旁白” ，是给人类看的, 而电脑则会选择性“失聪”

// 单行注释
/* 这是
    多行
    注释 */

数据类型

// JavaScript的数据类型:
//     数字 number
//     布尔值 boolean
//     字符串 string
//     列表 array
//     对象 object
//     空对象 null
//     未定义 undefined

// 数字
// Javascript 只有一种数字类型(双精度浮点 double), 包括整数和小数
// double 有 52 位表示尾数, 足以精确存储大到 9✕10¹⁵ 的整数
3; // = 3
1.5; // = 1.5

// 有 3 种非数字的数字类型
Infinity; // 1/0 的结果
-Infinity; // -1/0 的结果
NaN; // 0/0 的结果

// 布尔值
true;
false;
// 用!来取非
!true; // = false
!false; // = true

// 字符串
// 通过单引号或双引号来构造字符串
'abc';
"Hello, world";

// 字符串用+连接
"Hello " + "world!"; // = "Hello world!"


// 2个特殊的值: `null`和`undefined`
null;      // 用来表示刻意设置的空值
undefined; // 用来表示还没有设置的值(尽管`undefined`自身实际是一个值)

// false, null, undefined, NaN, 0 和 "" 都是假的;其他的都视作逻辑真
// 注意 0 是逻辑假而  "0"是逻辑真, 尽管 0 == "0". 

操作符

操作符: 算术操作符

// 所有基本的算数运算都和我们在学校学的一样
1 + 2;          // 加
5 - 3;          // 减
4 * 2;          // 乘
9 / 2;          // 除 (4.5)
7 % 3;          // 取余 (1)

// 和学校学的算数一样, 括号决定优先级
(1 + 3) * 2; // = 8

// 自增自减
let n = 5;
n++;            // 自增
--n;            // 自减

操作符: 逻辑操作符

true && false;  // 与
true || false;  // 或
!true;          // 非

操作符: 比较操作符

// 相等 ===
// 严格等
3 === '3';      // → false
// 松散等
3 == '3';       // → true

// 使用"=="比较时会进行类型转换...
"5" == 5; // = true
null == undefined; // = true

// ...除非你是用 ===
"5" === 5; // = false
null === undefined; // = false 

// ...但会导致奇怪的行为
13 + !0; // 14
"13" + !0; // '13true'

// 不等 !=
1 !== 1; // → false
2 !== 1; // → true

// 更多的比较操作符
1 < 10; // → true
1 > 10; // → false
2 <= 2; // → true
2 >= 2; // → true

操作符: 字符串操作符

// 字符串用+连接
"Hello " + "world!"; // = "Hello world!"
'Hello' + 'JS';       // → "HelloJS"

// 字符串也可以用 < 、> 来比较
"a" < "b"; // = true

// 你可以用`charAt`来得到字符串中的字符
"This is a string".charAt(0);  // = 'T'

// ...或使用 `substring` 来获取更大的部分
"Hello world".substring(0, 5); // = "Hello"

// `length` 是一个属性, 所以不要使用 ()
"Hello".length; // = 5

// 字符串的其他操作
'abc'.includes('a');  // → true
'foo'.repeat(3);      // → "foofoofoo"

操作符: 优先级

2 + 3 * 4;        // → 14
(2 + 3) * 4;      // → 20
!false && true;   // → true

变量

// 定义变量
// 变量需要用`var`关键字声明. Javascript是动态类型语言, 
// 所以你无需指定类型.  赋值需要用 `=` 
var someVar = 5;

// 如果你在声明时没有加var关键字, 你也不会得到错误...
someOtherVar = 10;

// ...但是此时这个变量就会在全局作用域被创建, 而非你定义的当前作用域

// 没有被赋值的变量都会被设置为undefined
var someThirdVar; // = undefined

// 对变量进行数学运算有一些简写法: 
someVar += 5; // 等价于 someVar = someVar + 5; someVar 现在是 10 
someVar *= 10; // 现在 someVar 是 100

// 自增和自减也有简写
someVar++; // someVar 是 101
someVar--; // 回到 100

// 数组是任意类型组成的有序列表
var myArray = ["Hello", 45, true];

// 数组的元素可以用方括号下标来访问
// 数组的索引从0开始. 
myArray[1]; // = 45

// 数组是可变的, 并拥有变量 length
myArray.push("World");
myArray.length; // = 4

// 在指定下标添加/修改
myArray[3] = "Hello";

// javascript中的对象相当于其他语言中的"字典"或"映射": 是键-值对的无序集合. 
var myObj = {key1: "Hello", key2: "World"};

// 键是字符串, 但如果键本身是合法的js标识符, 则引号并非是必须的. 
// 值可以是任意类型. 
var myObj = {myKey: "myValue", "my other key": 4};

// 对象属性的访问可以通过下标
myObj["my other key"]; // = 4

// ... 或者也可以用 . , 如果属性是合法的标识符
myObj.myKey; // = "myValue"

// 对象是可变的;值也可以被更改或增加新的键
myObj.myThirdKey = true;

// 如果你想要获取一个还没有被定义的值, 那么会返回undefined
myObj.myFourthKey; // = undefined

容器

数组的操作

const arr = [1, 2, 3];
arr.push(4);           // [1,2,3,4]
arr.pop();             // [1,2,3]
arr.slice(1, 3);       // [2,3]
arr.map(x => x * 2);   // [2,4,6]

对象的操作

const obj = {x: 1, y: 2};
obj.z = 3;             // 新增属性
delete obj.y;          // 删除属性 y
'x' in obj;            // true
Object.keys(obj);      // ['x','z']

流程控制

流程控制: 判断

//总共有3种判断方式:
//   if...else
//   switch
//   三元运算符

// if...else
const score = 85;
if (score >= 90) {
  console.log("A");
} else if (score >= 60) {
  console.log("Pass");
} else {
  console.log("Fail");
}

// switch 语句
const day = 2;
switch (day) {
  case 0:
    console.log("Sunday");
    break;
  case 6:
    console.log("Saturday");
    break;
  default:
    console.log("Weekday");
}

// 三元运算符
const isAdult = age >= 18 ? "Adult" : "Child";

流程控制: 循环

//总共有4种循环方式:
//   for
//   while
//   do...while

// for 循环
for (let i = 0; i < 3; i++) {
  console.log(i);
}

// while 循环
let i = 3;
while (i > 0) {
  console.log(i--);
}

// do...while 至少执行一次
let x = 0;
do {
  x++;
} while (x < 3);


// for...of 遍历数组
for (const n of [10, 20, 30]) {
  console.log(n);
}

流程控制: 异常/错误处理

//总共有3种异常处理方式:
//   try...catch: 捕获异常, 并执行catch块中的代码
//   finally: 无论是否发生异常都会执行
//   throw: 抛出异常

try {
  JSON.parse("{ bad json");
} catch (e) {
  console.error("Parse error:", e.message);
} finally {
  console.log("always runs");
}

function divide(a, b) {
  if (b === 0) throw new Error("Divide by zero");
  return a / b;
}

输入输出

控制台输出 console

console.log("Hello JS");
console.error("Oops");
console.table([{ id: 1 }, { id: 2 }]);

网络请求 fetch

fetch("https://jsonplaceholder.typicode.com/todos/1")
  .then(r => r.json())
  .then(data => console.log(data))
  .catch(console.error);

文件操作(Node.js 环境)

// 仅在 Node.js 环境可用
const fs = require("fs");
fs.writeFileSync("hello.txt", "Hi JS");
const txt = fs.readFileSync("hello.txt", "utf8");
console.log(txt); // "Hi JS"

组织代码

函数

// JavaScript 函数由`function`关键字定义
function myFunction(thing){
    return thing.toUpperCase();
}
myFunction("foo"); // = "FOO"

// 注意被返回的值必须开始于`return`关键字的那一行, 
// 否则由于自动的分号补齐, 你将返回`undefined`
// 在使用Allman风格的时候要注意
function myFunction()
{
    return // <- 分号自动插在这里
    {
        thisIsAn: 'object literal'
    }
}
myFunction(); // = undefined

// javascript中函数是一等对象, 所以函数也能够赋给一个变量, 
// 并且被作为参数传递 —— 比如一个事件处理函数: 
function myFunction(){
    // 这段代码将在5秒钟后被调用
}
setTimeout(myFunction, 5000);
// 注意: setTimeout不是js语言的一部分, 而是由浏览器和Node.js提供的

// 函数对象甚至不需要声明名称 —— 你可以直接把一个函数定义写到另一个函数的参数中
setTimeout(function(){
    // 这段代码将在5秒钟后被调用
}, 5000);

// JavaScript 有函数作用域;函数有其自己的作用域而其他的代码块则没有
if (true){
    var i = 5;
}
i; // = 5 - 并非我们在其他语言中所期望得到的undefined

// 这就导致了人们经常使用的"立即执行匿名函数"的模式, 
// 这样可以避免一些临时变量扩散到全局作用域去
(function(){
    var temporary = 5;
    // 我们可以访问修改全局对象( "global object" )来访问全局作用域, 
    // 在web浏览器中是`window`这个对象
    // 在其他环境如Node.js中这个对象的名字可能会不同
    window.permanent = 10;
})();
temporary; // 抛出引用异常ReferenceError
permanent; // = 10

类

// 定义类
class Person {
  constructor(name) { this.name = name; }
  greet() { return `Hi ${this.name}`; }
}

// 创建实例
const bob = new Person("Bob");

// 调用方法
bob.greet(); // "Hi Bob"

模块

// utils.js
export function say(msg) { console.log(msg); }

// main.js
import { say } from "./utils.js";
say("Hello Module");

进阶用法

Promise

Promise 用于处理异步操作, 避免阻塞

const p = new Promise((resolve, reject) => {
  setTimeout(() => resolve("done"), 1000);
});

p.then(console.log).catch(console.error);

async/await

async/await 是 Promise 的语法糖

async function getTodo(id) {
  try {
    const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);
    const json = await res.json();
    console.log(json);
  } catch (err) {
    console.error(err);
  }
}
getTodo(1);

闭包

闭包是 JavaScript 最强大的功能之一, 如果一个函数在另一个函数中定义, 那么这个内部函数就拥有外部函数的所有变量的访问权, 即使在外部函数结束之后

// 示例1
function makeCounter() {
  let n = 0;
  return () => ++n;
}
const inc = makeCounter();
console.log(inc(), inc()); // 1 2

// 示例2
function outer() {
  let secret = 42;
  return function inner() {
    return secret;
  };
}
const fn = outer();
fn(); // 42

// 示例3
function sayHelloInFiveSeconds(name){
    var prompt = "Hello, " + name + "!";
    // 内部函数默认是放在局部作用域的, 
    // 就像是用`var`声明的. 
    function inner(){
        alert(prompt);
    }
    setTimeout(inner, 5000);
    // setTimeout是异步的, 所以 sayHelloInFiveSeconds 函数会立即退出, 
    // 而 setTimeout 会在后面调用inner
    // 然而, 由于inner是由sayHelloInFiveSeconds"闭合包含"的, 
    // 所以inner在其最终被调用时仍然能够访问`prompt`变量
}
sayHelloInFiveSeconds("Adam"); // 会在5秒后弹出 "Hello, Adam!"

对象、构造函数、原型

//  对象可以包含方法
var myObj = {
    myFunc: function(){
        return "Hello world!";
    }
};
myObj.myFunc(); // = "Hello world!"

// 当对象中的函数被调用时, 这个函数可以通过`this`关键字访问其依附的这个对象
myObj = {
    myString: "Hello world!",
    myFunc: function(){
        return this.myString;
    }
};
myObj.myFunc(); // = "Hello world!"

// 但这个函数访问的其实是其运行时环境, 而非定义时环境, 即取决于函数是如何调用的
// 所以如果函数被调用时不在这个对象的上下文中, 就不会运行成功了
var myFunc = myObj.myFunc;
myFunc(); // = undefined

// 相应的, 一个函数也可以被指定为一个对象的方法, 并且可以通过`this`访问
// 这个对象的成员, 即使在函数被定义时并没有依附在对象上
var myOtherFunc = function(){
    return this.myString.toUpperCase();
}
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"

// 当我们通过`call`或者`apply`调用函数的时候, 也可以为其指定一个执行上下文
var anotherFunc = function(s){
    return this.myString + s;
}
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"

// `apply`函数几乎完全一样, 只是要求一个array来传递参数列表
anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"

// 当一个函数接受一系列参数, 而你想传入一个array时特别有用
Math.min(42, 6, 27); // = 6
Math.min([42, 6, 27]); // = NaN (uh-oh!)
Math.min.apply(Math, [42, 6, 27]); // = 6

// 但是`call`和`apply`只是临时的. 如果我们希望函数附着在对象上, 可以使用`bind`
var boundFunc = anotherFunc.bind(myObj);
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"

// `bind` 也可以用来部分应用一个函数( 柯里化 )
var product = function(a, b){ return a * b; }
var doubler = product.bind(this, 2);
doubler(8); // = 16

// 当你通过`new`关键字调用一个函数时, 就会创建一个对象
// 而且可以通过this关键字访问该函数
// 设计为这样调用的函数就叫做构造函数
var MyConstructor = function(){
    this.myNumber = 5;
}
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5

// 每一个js对象都有一个‘原型’. 当你要访问一个实际对象中没有定义的一个属性时
// 解释器就回去找这个对象的原型

// 一些JS实现会让你通过`__proto__`属性访问一个对象的原型
// 这虽然对理解原型很有用, 但是它并不是标准的一部分
// 我们后面会介绍使用原型的标准方式
var myObj = {
    myString: "Hello world!"
};
var myPrototype = {
    meaningOfLife: 42,
    myFunc: function(){
        return this.myString.toLowerCase()
    }
};

myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42

// 函数也可以工作
myObj.myFunc() // = "hello world!"

// 当然, 如果你要访问的成员在原型当中也没有定义的话, 解释器就会去找原型的原型, 以此类推
myPrototype.__proto__ = {
    myBoolean: true
};
myObj.myBoolean; // = true

// 这其中并没有对象的拷贝;每个对象实际上是持有原型对象的引用
// 这意味着当我们改变对象的原型时, 会影响到其他以这个原型为原型的对象
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43

// 我们知道 `__proto__` 并非标准规定, 实际上也没有标准办法来修改一个已存在对象的原型
// 然而, 我们有两种方式为指定原型创建一个新的对象

// 第一种方式是 Object.create, 这个方法是在最近才被添加到Js中的
// 因此并不是所有的JS实现都有这个方法
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43

// 第二种方式可以在任意版本中使用, 不过必须通过构造函数
// 构造函数有一个属性prototype. 但是它 **不是** 构造函数本身的原型
// 相反, 是通过构造函数和new关键字创建的新对象的原型
MyConstructor.prototype = {
    myNumber: 5,
    getMyNumber: function(){
        return this.myNumber;
    }
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6
myNewObj2.getMyNumber(); // = 6

// 字符串和数字等内置类型也有通过构造函数来创建的包装类型
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true

// 但是它们并非严格等价
typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0){
    // 这段代码不会执行, 因为0代表假
}

// 不过, 包装类型和内置类型共享一个原型, 
// 所以你实际可以给内置类型也增加一些功能, 例如对string: 
String.prototype.firstCharacter = function(){
    return this.charAt(0);
}
"abc".firstCharacter(); // = "a"

// 这个技巧经常用在"代码填充"中, 来为老版本的javascript子集增加新版本js的特性, 
// 这样就可以在老的浏览器中使用新功能了

// 比如, 我们知道Object.create并没有在所有的版本中都实现, 
// 但是我们仍然可以通过"代码填充"来实现兼容: 
if (Object.create === undefined){ // 如果存在则不覆盖
    Object.create = function(proto){
        // 用正确的原型来创建一个临时构造函数
        var Constructor = function(){};
        Constructor.prototype = proto;
        // 之后用它来创建一个新的对象
        return new Constructor();
    }
}