JavaScript 知识点速查

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('https://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);
})