JavaScript 是一種輕量級的解釋型編程語言。

• JSON 備忘清單
• JavaScript 中的正則表達式
• TypeScript 備忘清單

// => Hello world!
console.log('Hello world!');
// => Hello QuickReference
console.warn('hello %s', 'QuickReference');
// 將錯誤消息打印到 stderr
console.error(new Error('Oops!'));

function potentiallyBuggyCode() {
  debugger;
  // 做可能有問題的東西來檢查，逐步通過等。
}

debugger 語句調用任何可用的調試功能。

let amount = 6;
let price = 4.99;
let home = 1e2;
let num = 1_000_000; // 位數過多可以用 _ 分割
let m = 0644;   // 八進制數字 420

let count; 
console.log(count); // => undefined
count = 10;
console.log(count); // => 10

const numberOfColumns = 4;
// TypeError: Assignment to constant...
numberOfColumns = 8;

let x = null;
let name = "Tammy";
const found = false;
// => Tammy, false, null
console.log(name, found, x);
var a;
console.log(a); // => undefined

let single = 'Wheres my bandit hat?';
let double = "Wheres my bandit hat?";
// => 21
console.log(single.length);

5 + 5 = 10     // 加法 Addition
10 - 5 = 5     // 減法 Subtraction
5 * 10 = 50    // 乘法 Multiplication
10 / 5 = 2     // 除法 Division
10 % 5 = 0     // 取模 Modulo

// 此行將表示注釋
/* 
多行配置
部署前必須更改
以下配置。
*/

let number = 100;
// 兩個語句都會加 10
number = number + 10;
number += 10;
console.log(number); 
// => 120

let age = 7;
// 字符串拼接
'Tommy is ' + age + ' years old.';
// 字符串插值
`Tommy is ${age} years old.`;

const isMailSent = true;
if (isMailSent) {
  console.log('Mail sent to recipient');
}

var age = 1;

// => true
var status = (age >= 18) ? true : false;

const size = 10;
if (size > 20) {
  console.log('Medium');
} else if (size > 4) {
  console.log('Small');
} else {
  console.log('Tiny');
}
// Print: Small

0 == false     // true
0 === false    // false, 不同類型
1 == "1"       // true,  自動類型轉換
1 === "1"      // false, 不同類型
null == undefined  // true
null === undefined // false
'0' == false       // true
'0' === false      // false

== 只檢查值，=== 檢查值和類型。

const food = 'salad';

switch (food) {
  case 'oyster': console.log('海的味道');
    break;
  case 'pizza': console.log('美味的餡餅');
    break;
  default:
    console.log('請您用餐');
}

const food = 'salad';

switch (food) {
  case 'oyster':
  case 'pizza':
    console.log('美味的餡餅');
    break;
  default:
    console.log('請您用餐');
}

// 定義函數：
function sum(num1, num2) {
  return num1 + num2;
}
// 調用函數：
sum(3, 6); // 9

// 命名函數
function rocketToMars() {
  return 'BOOM!';
}
// 匿名函數
const rocketToMars = function() {
  return 'BOOM!';
}

// 有 return
function sum(num1, num2) {
  return num1 + num2;
}
// 該函數不輸出總和
function sum(num1, num2) {
  num1 + num2;
}

// 定義函數
function sum(num1, num2) {
  return num1 + num2;
}
// 調用函數
sum(2, 4); // 6

//命名函數并立即執行一次
(function sum(num1, num2) {
  return num1 + num2;
})(2,4)//6

const dog = function() {
  return 'Woof!';
}

// 參數是 name
function sayHello(name) {
  return `Hello, ${name}!`;
}

function add(num1, num2) {
  return num1 + num2;
}

const isLoggedIn = true;
if (isLoggedIn == true) {
  const statusMessage = 'Logged in.';
}
// Uncaught ReferenceError...
// 未捕獲的引用錯誤...
console.log(statusMessage);

// 全局聲明的變量
const color = 'blue';
function printColor() {
  console.log(color);
}

printColor(); // => blue

for (let i = 0; i < 3; i++) {
  // 這是“let”的最大范圍
  // i 可以訪問 ??
}
// i 不能訪問 ?

for (var i = 0; i < 3; i++) {
  // i 可以訪問 ??
}
// i 可以訪問 ??

var 的范圍是最近的函數塊，而 let 的范圍是最近的封閉塊。

// 打印三次，不是我們的意思。
for (var i = 0; i < 3; i++) {
  setTimeout(_ => console.log(i), 10);
}

// 按預期打印 0、1 和 2。
for (let j = 0; j < 3; j++) { 
  setTimeout(_ => console.log(j), 10);
}

變量使用 let 有自己的副本，變量有使用 var 的共享副本。

const fruits = ["apple", "dew", "banana"];
// 不同的數據類型
const data = [1, 'chicken', false];

const numbers = [1, 2, 3, 4];
numbers.length // 4

// 訪問數組元素
const myArray = [100, 200, 300];
console.log(myArray[0]); // 100
console.log(myArray[1]); // 200

// 添加單個元素：
const cart = ['apple', 'orange'];
cart.push('pear'); 
// 添加多個元素：
const numbers = [1, 2];
numbers.push(3, 4, 5);

將項目添加到末尾并返回新的數組長度。

const fruits = ["apple", "dew", "banana"];
const fruit = fruits.pop(); // 'banana'

console.log(fruits); // ["apple", "dew"]

從末尾刪除一個項目并返回已刪除的項目。

const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1); // 輸出: Array [2, 3]
console.log(firstElement); // 輸出: 1

從頭刪除一個項目并返回已刪除的項目。

const array = [1, 2, 3, 4, 5];
// 檢查元素是否為偶數
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// 預期輸出: true

const numbers = [3, 2, 1]
const newFirstNumber = 4
    
// => [ 4, 3, 2, 1 ]
[newFirstNumber].concat(numbers)
    
// => [ 3, 2, 1, 4 ]
numbers.concat(newFirstNumber)

如果你想避免改變你的原始數組，你可以使用 concat。

const months = ['Jan', 'March'];
months.splice(1, 0, 'Feb');
// 在索引 1 處插入
console.log(months);
// 預期輸出: Array ["Jan", "Feb", "March"]

months.splice(2, 1, 'May');
// 替換索引 2 處的 1 個元素
console.log(months);
// 預期輸出: Array ["Jan", "Feb", "May"]

let cats = ['Bob'];
// => ['Willy', 'Bob']
cats.unshift('Willy');
// => ['Puff', 'George', 'Willy', 'Bob']
cats.unshift('Puff', 'George');

將項目添加到開頭并返回新的數組長度。

const words = ['js', 'java', 'golang'];
const result = words.filter(word => {
  return  word.length > 3
});
console.log(result);
// 預期輸出: Array ["java", "golang"]

while (condition) {
  // 要執行的代碼塊
}
let i = 0;
while (i < 5) {        
  console.log(i);
  i++;
}

const fruits = ["apple", "dew", "berry"];
for (let i = fruits.length - 1; i >= 0; i--) {
  console.log(`${i}. ${fruits[i]}`);
}
// => 2. berry
// => 1. dew
// => 0. apple

x = 0
i = 0
do {
  x = x + i;
  console.log(x)
  i++;
} while (i < 5);
// => 0 1 3 6 10

for (let i = 0; i < 4; i += 1) {
  console.log(i);
};
// => 0, 1, 2, 3

for (let i = 0; i < array.length; i++){
  console.log(array[i]);
}
// => 數組中的每一項

for (let i = 0; i < 99; i += 1) {
  if (i > 5) break;
  console.log(i)
}
// => 0 1 2 3 4 5

for (i = 0; i < 10; i++) {
  if (i === 3) {
    continue;
  }
  text += "The number is " + i + "<br>";
}

for (let i = 0; i < 2; i += 1) {
  for (let j = 0; j < 3; j += 1) {
    console.log(`${i}-${j}`);
  }
}

const fruits = ["apple", "orange", "banana"];
for (let index in fruits) {
  console.log(index);
}
// => 0
// => 1
// => 2

const fruits = ["apple", "orange", "banana"];
for (let fruit of fruits) {
  console.log(fruit);
}
// => apple
// => orange
// => banana

var i = 0;

for (;;) {
  if (i > 3) break;
  console.log(i);
  i++;
}

數組中的一些方法，類似于 map、forEach 等，可以自己設置綁定 this

const obj = {
  name: "zhangsan"
}
const array = [1, 2, 3];
array.map(function(value){
  console.log(this.name)
}, obj)
// zhangsan x3 

其中一些全局對象，如 setTimeout 等，它們和未顯示綁定 this 的部分數組方法一樣，都會指向全局對象（Window）

setTimeout(function(){ 
  console.log(this)
}, 1000) // Window

class Song {
  constructor() {
    this.title;
    this.author;
  }
  
  play() {
    console.log('Song playing!');
  }
}

const mySong = new Song();
mySong.play();

// Parent class
class Media {
  constructor(info) {
    this.publishDate = info.publishDate;
    this.name = info.name;
  }
}
// Child class
class Song extends Media {
  constructor(songData) {
    super(songData);
    this.artist = songData.artist;
  }
}
const mySong = new Song({ 
  artist: 'Queen', 
  name: 'Bohemian Rhapsody', 
  publishDate: 1975
});

class Song {
  constructor(title, artist) {
    this.title = title;
    this.artist = artist;
  }
}
const mySong = new Song('Bohemian Rhapsody', 'Queen');
console.log(mySong.title);

class Song {
  play() {
    console.log('Playing!');
  }
  
  stop() {
    console.log('Stopping!');
  }
}

const executorFn = (resolve, reject) => {
  resolve('Resolved!');
};
const promise = new Promise(executorFn);

const loginAlert = () => {
  console.log('Login');
};
setTimeout(loginAlert, 6000);

const promise = new Promise((resolve, reject) => {
  const res = true;
  // 一個異步操作。
  if (res) {
    resolve('Resolved!');
  }
  else {
    reject(Error('Error'));
  }
});
promise.then(
  (res) => console.log(res),
  (err) => console.error(err)
);

const promise = new Promise((resolve, reject) => {    
  setTimeout(() => {
    resolve('Result');
  }, 200);
});

promise.then((res) => {
  console.log(res);
}, (err) => {
  console.error(err);
});

const promise = new Promise(
  (resolve, reject) => {  
  setTimeout(() => {
    reject(Error('Promise 無條件拒絕。'));
  }, 1000);
});

promise.then((res) => {
  console.log(value);
});

promise.catch((err) => {
  console.error(err);
});

const promise = new Promise(
  resolve => 
    setTimeout(() => resolve('dAlan'),100)
);

promise.then(res => {
  return res === 'Alan' 
    ? Promise.resolve('Hey Alan!')
    : Promise.reject('Who are you?')
})
.then((res) => {
  console.log(res)
}, (err) => {
  console.error(err)
});

const jsonObj = {
  "name": "Rick",
  "id": "11A",
  "level": 4  
};

另見：JSON 備忘單

const xhr = new XMLHttpRequest();
xhr.open('GET', 'mysite.com/getjson');

XMLHttpRequest 是一個瀏覽器級別的 API，它使客戶端能夠通過 JavaScript 編寫數據傳輸腳本，而不是 JavaScript 語言的一部分。

const req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', '/getdata?id=65');
req.onload = () => {
  console.log(xhr.response);
};
req.send();

fetch('url-that-returns-JSON')
  .then(response => response.json())
  .then(jsonResponse => {
    console.log(jsonResponse);
  });

fetch('url')
  .then(response  => {
    console.log(response);
  }, rejection => {
    console.error(rejection.message);
  });

fetch('//api-xxx.com/endpoint', {
  method: 'POST',
  body: JSON.stringify({id: "200"})
}).then(response => {
  if(response.ok){
    return response.json();  
  }
  throw new Error('Request failed!');
}, networkError => {
  console.log(networkError.message);
}).then(jsonResponse => {
  console.log(jsonResponse);
})