JavaScript 语法 速查备忘单

JavaScript 是一种轻量级、解释型的编程语言。

• JSON 速查表 (WarpNav 极速手册)
• JavaScript 正则表达式 (WarpNav 极速手册)

// => Hello world!
console.log('Hello world!');

// => Hello WarpNav
console.warn('hello %s', 'WarpNav');

// 在 stderr 中打印错误异常
console.error(new Error('出错了！'));

let amount = 6;
let price = 4.99;

let x = null;
let name = 'Tammy';
const found = false;

// => Tammy, false, null
console.log(name, found, x);

var a;
console.log(a); // => undefined (未定义)

let singleQuotes = '单引号字符串';
let doubleQuotes = "双引号字符串";
// 反引号模板字符串用于嵌入表达式或创建多行文本
let backTicks = `模板字符串: ${some_value}`;

// 混合拼接
let mixedQuotes = `hello ${'dear' + name}, "美好的���天`;

// => 21 (字符串长度)
console.log(singleQuotes.length);

5 + 5 = 10     // 加法 (Addition)
10 - 5 = 5     // 减法 (Subtraction)
5 * 10 = 50    // Multiplication
10 / 5 = 2     // Division
10 % 5 = 0     // Modulo

// This line will denote a comment

/*
The below configuration must be
changed before deployment.
*/

let number = 100;

// Both statements will add 10
number = number + 10;
number += 10;

console.log(number);
// => 120

let age = 7;

// String concatenation
'Tommy is ' + age + ' years old.';

// String interpolation
`Tommy is ${age} years old.`;

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

const numberOfColumns = 4;

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

const isMailSent = true;

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

// The ternary operator is a concise way to write an if-else statement in a single line: condition ? exprIfTrue : exprIfFalse.

var x = 1;

// true, (condition) ? value_if_true : value_if_false
result = x == 1 ? true : false;

const size = 10;

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

const food = 'salad';

switch (food) {
  case 'oyster':
    console.log('The taste of the sea');
    break;
  case 'pizza':
    console.log('A delicious pie');
    break;
  default:
    console.log('Enjoy your meal');
}

const food = 'salad';

const foods = {
  oyster: 'The taste of the sea',
  pizza: 'A delicious pie'
};

console.log(foods[food] || 'Enjoy your meal');

0 == false; // true
0 === false; // false, different type
1 == '1'; // true,  automatic type conversion
1 === '1'; // false, different type
null == undefined; // true
null === undefined; // false
'0' == false; // true
'0' === false; // false

The == just check the value, === check both the value and the type.

// Defining the function:
function sum(num1, num2) {
  return num1 + num2;
}

// Calling the function:
sum(3, 6); // 9

// Named function
function rocketToMars() {
  return 'BOOM!';
}

// Anonymous function
const rocketToMars = function () {
  return 'BOOM!';
};

// With return
function sum(num1, num2) {
  return num1 + num2;
}

// The function doesn't output the sum
function sum(num1, num2) {
  num1 + num2;
}

// Defining the function
function sum(num1, num2) {
  return num1 + num2;
}

// Calling the function
sum(2, 4); // 6

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

// The parameter is name
function sayHello(name) {
  return `Hello, ${name}!`;
}

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

function myFunction() {
  var pizzaName = 'Margarita';
  // Code here can use pizzaName
}

// Code here can't use pizzaName

const isLoggedIn = true;

if (isLoggedIn == true) {
  const statusMessage = 'Logged in.';
}

// Uncaught ReferenceError...
console.log(statusMessage);

// Variable declared globally
const color = 'blue';

function printColor() {
  console.log(color);
}

printColor(); // => blue

for (let i = 0; i < 3; i++) {
  // This is the Max Scope for 'let'
  // i accessible ✔️
}
// i not accessible ❌

for (var i = 0; i < 3; i++) {
  // i accessible ✔️
}
// i accessible ✔️

var is scoped to the nearest function block, and let is scoped to the nearest enclosing block.

// Prints 3 thrice, not what we meant.
for (var i = 0; i < 3; i++) {
  setTimeout(_ => console.log(i), 10);
}

// Prints 0, 1 and 2, as expected.
for (let j = 0; j < 3; j++) {
  setTimeout(_ => console.log(j), 10);
}

The variable has its own copy using let, and the variable has shared copy using var.

const fruits = ['apple', 'orange', 'banana'];

// Different data types
const data = [1, 'chicken', false];

const numbers = [1, 2, 3, 4];

numbers.length; // 4

// Accessing an array element
const myArray = [100, 200, 300];

console.log(myArray[0]); // 100
console.log(myArray[1]); // 200

// Adding a single element:
const cart = ['apple', 'orange'];
cart.push('pear');

// Adding multiple elements:
const numbers = [1, 2];
numbers.push(3, 4, 5);

Add items to the end and returns the new array length.

const fruits = ['apple', 'orange', 'banana'];

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

Remove an item from the end and returns the removed item.

let cats = ['Bob', 'Willy', 'Mini'];

cats.shift(); // ['Willy', 'Mini']

Remove an item from the beginning and returns the removed item.

let cats = ['Bob'];

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

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

Add items to the beginning and returns the new array length.

const numbers = [3, 2, 1];
const newFirstNumber = 4;

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

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

If you want to avoid mutating your original array, you can use concat.

const [name, age] = ['John Doe', 8];

console.log(name);
console.log(age);

// Empty Set Object
const emptySet = new Set();

// Set Object with values
const setObj = new Set([1, true, 'hi']);

const emptySet = new Set();

// add values
emptySet.add('a'); // 'a'
emptySet.add(1); // 'a', 1
emptySet.add(true); // 'a', 1, true
emptySet.add('a'); // 'a', 1, true

const emptySet = new Set([1, true, 'a']);

// delete values
emptySet.delete('a'); // 1, true
emptySet.delete(true); // 1
emptySet.delete(1); //

const setObj = new Set([1, true, 'a']);

// returns true or false
setObj.has('a'); // true
setObj.has(1); // true
setObj.has(false); // false

const setObj = new Set([1, true, 'a']);

// clears the set
console.log(setObj); // 1, true, 'a'
setObj.clear(); //

const setObj = new Set([1, true, 'a']);

consoloe.log(setObj.size); // 3

const setObj = new Set([1, true, 'a']);

setObj.forEach(function (value) {
  console.log(value);
});

// 1
// true
// 'a'

while (condition) {
  // code block to be executed
}

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

const fruits = ['apple', 'orange', 'banana'];

for (let i = fruits.length - 1; i >= 0; i--) {
  console.log(`${i}. ${fruits[i]}`);
}

// => 2. banana
// => 1. orange
// => 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]);
}

// => Every item in the array

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'];

// 1. Print only indexes
for (let index in fruits) {
  console.log(index);
}
// => 0
// => 1
// => 2

// 2. Print only values
for (let index in fruits) {
  console.log(fruits[index]);
}
// => apple
// => orange
// => banana

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

const fruits = ['apple', 'orange', 'banana'];

for (let fruit of fruits) {
  console.log(fruit);
}
// => apple
// => orange
// => banana

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

class Dog {
  constructor(name) {
    this._name = name;
  }

  introduce() {
    console.log('This is ' + this._name + ' !');
  }

  // A static method
  static bark() {
    console.log('Woof!');
  }
}

const myDog = new Dog('Buster');
myDog.introduce();

// Calling the static method
Dog.bark();

class Song {
  constructor() {
    this.title;
    this.author;
  }

  play() {
    console.log('Song playing!');
  }
}

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

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!');
  }
}

// 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
});

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

Also see: JSON cheatsheet

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

XMLHttpRequest is a browser-level API that enables the client to script data transfers via JavaScript, NOT part of the JavaScript language.

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);
  });