javascript

包含最重要的概念、函数、方法等的 JavaScript 备忘单。初学者的完整快速参考。

开始

介绍

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

(learnxinyminute.com)
(quickref.me)

console.log()

javascript

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

数值

javascript

let amount = 6;
let price = 4.99;

变量

javascript

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

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

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

字符串

javascript

let single = 'Wheres my bandit hat?';
let double = "Wheres my bandit hat?";

// => 21
console.log(single.length);

算术运算符

javascript

5 + 5 = 10     // Addition
10 - 5 = 5     // Subtraction
5 * 10 = 50    // Multiplication
10 / 5 = 2     // Division
10 % 5 = 0     // Modulo

注释

javascript

// This line will denote a comment

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

赋值运算符

javascript

let number = 100;

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

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

字符串插值

javascript

let age = 7;

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

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

let 关键字

javascript

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

const 关键字

javascript

const numberOfColumns = 4;

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

JavaScript 条件

if 语句

javascript

const isMailSent = true;

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

三元运算符

javascript

var x=1;

// => true
result = (x == 1) ? true : false;

运算符

javascript

true || false;       // true
10 > 5 || 10 > 20;   // true
false || false;      // false
10 > 100 || 10 > 20; // false

逻辑运算符 &&

javascript

true && true;        // true
1 > 2 && 2 > 1;      // false
true && false;       // false
4 === 4 && 3 > 1;    // true

比较运算符

javascript

1 > 3                // false
3 > 1                // true
250 >= 250           // true
1 === 1              // true
1 === 2              // false
1 === '1'            // false

逻辑运算符！

javascript

let lateToWork = true;
let oppositeValue = !lateToWork;

// => false
console.log(oppositeValue);

否则如果

javascript

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

switch 语句

javascript

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

JavaScript 函数

函数

javascript

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

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

匿名函数

javascript

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

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

箭头函数 (ES6)

两个参数

javascript

const sum = (param1, param2) => { 
  return param1 + param2; 
}; 
console.log(sum(2,5)); // => 7

没有参数

javascript

const printHello = () => { 
  console.log('hello'); 
}; 
printHello(); // => hello

一个参数

javascript

const checkWeight = weight => { 
  console.log(`Weight : ${weight}`); 
}; 
checkWeight(25); // => Weight : 25

简洁的箭头函数

javascript

const multiply = (a, b) => a * b; 
// => 60 
console.log(multiply(2, 30));

返回关键字

javascript

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

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

调用函数

javascript

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

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

函数表达式

javascript

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

功能参数

javascript

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

函数声明

javascript

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

JavaScript 范围

范围

javascript

function myFunction() {
  
  var pizzaName = "Volvo";
  // Code here can use pizzaName
  
}

// Code here can't use pizzaName

块作用域变量

javascript

const isLoggedIn = true;

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

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

全局变量

javascript

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

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

printColor(); // => blue

JavaScript 数组

数组

javascript

const a1 = [0, 1, 2, 3];

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

属性 .length

javascript

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

numbers.length // 4

指数

javascript

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

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

方法 .push()

javascript

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

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

方法 .pop()

javascript

const a= ['eggs', 'flour', 'chocolate'];

const p = a.pop(); // 'chocolate'
console.log(a); // ['eggs', 'flour']

可变的

javascript

const names = ['Alice', 'Bob'];

names.push('Carl');
// ['Alice', 'Bob', 'Carl']

JavaScript 循环

While 循环

javascript

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

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

反向循环

javascript

const a = ['banana', 'cherry'];

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

// => 2. cherry
// => 1. banana

Do...while 语句

javascript

x = 0
i = 0

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

For循环

javascript

for (let i = 0; i < 4; i += 1) {
  console.log(i);
};

// => 0, 1, 2, 3

循环遍历数组

javascript

for (let i = 0; i < array.length; i++){
  console.log(array[i]);
}

// => Every item in the array

Break

javascript

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

Continue

javascript

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

嵌套循环

javascript

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

for...in 循环

javascript

let dic = {brand: 'Apple', model: ''};

for (let key in mobile) {
  console.log(`${key}: ${mobile[key]}`);
}

JavaScript 迭代器

分配给变量的函数

javascript

let plusFive = (number) => {
  return number + 5;  
};
// f is assigned the value of plusFive
let f = plusFive;

plusFive(3); // 8
// Since f has a function value, it can be invoked. 
f(9); // 14

回调函数

javascript

const isEven = (n) => {
  return n % 2 == 0;
}

let printMsg = (evenFunc, num) => {
  const isNumEven = evenFunc(num);
  console.log(`${num} is an even number: ${isNumEven}.`)
}

// Pass in isEven as the callback function
printMsg(isEven, 4); 
// => The number 4 is an even number: True.

数组方法 .reduce()

javascript

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

const sum = arrayOfNumbers.reduce((accumulator, curVal) => {  
  return accumulator + curVal;
});

console.log(sum); // 10

数组方法 .map()

javascript

const a = ['Taylor', 'Donald', 'Don', 'Natasha', 'Bobby'];

const announcements = a.map(member => {
  return member + ' joined the contest.';
})

console.log(announcements);

数组方法 .forEach()

javascript

const numbers = [28, 77, 45, 99, 27];

numbers.forEach(number => {  
  console.log(number);
});

数组方法 .filter()

javascript

const randomNumbers = [4, 11, 42, 14, 39];
const filteredArray = randomNumbers.filter(n => {  
  return n > 5;
});

JavaScript 对象

访问属性

javascript

const apple = { 
  color: 'Green',
  price: { bulk: '$3/kg', smallQty: '$4/kg' }
};
console.log(apple.color); // => Green
console.log(apple.price.bulk); // => $3/kg

命名属性

javascript

// Example of invalid key names
const trainSchedule = {
  // Invalid because of the space between words.
  platform num: 10, 
  // Expressions cannot be keys.
  40 - 10 + 2: 30,
  // A + sign is invalid unless it is enclosed in quotations.
  +compartment: 'C'
}

不存在的属性

javascript

const classElection = {
  date: 'January 12'
};

console.log(classElection.place); // undefined

可变的

javascript

const student = {
  name: 'Sheldon',
  score: 100,
  grade: 'A',
}

console.log(student)
// { name: 'Sheldon', score: 100, grade: 'A' }

delete student.score
student.grade = 'F'
console.log(student)
// { name: 'Sheldon', grade: 'F' }

student = {}
// TypeError: Assignment to constant variable.

赋值速记语法

javascript

const person = {
  name: 'Tom',
  age: '22',
};
const {name, age} = person;
console.log(name); // 'Tom'
console.log(age);  // '22'

删除运算符

javascript

const person = {
  firstName: "Matilda",
  age: 27,
  hobby: "knitting",
  goal: "learning JavaScript"
};

delete person.hobby; // or delete person[hobby];

console.log(person);
/* { firstName: "Matilda" age: 27 goal: "learning JavaScript" } */

对象作为参数

javascript

const origNum = 8;
const origObj = {color: 'blue'};

const changeItUp = (num, obj) => {
  num = 7;
  obj.color = 'red';
};

changeItUp(origNum, origObj);

// Will output 8 since integers are passed by value.
console.log(origNum);

// Will output 'red' since objects are passed 
// by reference and are therefore mutable.
console.log(origObj.color);

速记对象创建

javascript

const activity = 'Surfing';
const beach = { activity };
console.log(beach); // { activity: 'Surfing' }

this 关键字

javascript

const cat = {
  name: 'Pipey',
  age: 8,
  whatName() {
    return this.name  
  }
};
console.log(cat.whatName()); // => Pipey

工厂函数

javascript

// A factory function that accepts 'name', 
// 'age', and 'breed' parameters to return 
// a customized dog object. 
const dogFactory = (name, age, breed) => {
  return {
    name: name,
    age: age,
    breed: breed,
    bark() {
      console.log('Woof!');  
    }
  };
};

方法

javascript

const engine = {
  // method shorthand, with one argument
  start(adverb) {
    console.log(`The engine starts up ${adverb}...`);
  },  
  // anonymous arrow function expression with no arguments
  sputter: () => {
    console.log('The engine sputters...');
  },
};

engine.start('noisily');
engine.sputter();

Getters and setters

javascript

const myCat = {
  _name: 'Dottie',
  get name() {
    return this._name;  
  },
  set name(newName) {
    this._name = newName;  
  }
};

// Reference invokes the getter
console.log(myCat.name);

// Assignment invokes the setter
myCat.name = 'Yankee';

JavaScript 类

静态方法

javascript

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

javascript

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

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

类构造函数

javascript

class Song {
  constructor(title, artist) {
    this.title = title;
    this.artist = artist;
  }
}

const mySong = new Song('Bohemian Rhapsody', 'Queen');
console.log(mySong.title);

类方法

javascript

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

延伸

javascript

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

JavaScript 模块

Require

javascript

var moduleA = require( "./module-a.js" );

// The .js extension is optional
var moduleA = require( "./module-a" );
// Both ways will produce the same result.

// Now the functionality of moduleA can be used
console.log(moduleA.someFunctionality)

Export

javascript

// module "moduleA.js"
export default function cube(x) {
  return x * x * x;
}

// In main.js
import cube from './moduleA.js';
// Now the `cube` function can be used straightforwardly.
console.log(cube(3)); // 27

导出模块

javascript

let Course = {};
Course.name = "Javascript Node.js"
module.exports = Course;

导入关键字

javascript

// add.js
export const add = (x, y) => {
    return x + y
}


// main.js
import { add } from './add';
console.log(add(2, 3)); // 5

JavaScript 承诺

承诺状态

javascript

const promise = new Promise((resolve, reject) => {
  const res = true;
  // An asynchronous operation.
  if (res) {
    resolve('Resolved!');
  }
  else {
    reject(Error('Error'));
  }
});

promise.then((res) => console.log(res), (err) => alert(err));

执行器函数

javascript

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

const promise = new Promise(executorFn);

setTimeout()

javascript

const loginAlert = () =>{
  alert('Login');
};

setTimeout(loginAlert, 6000);

.then() 方法

javascript

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

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

.catch() 方法

javascript

const promise = new Promise((resolve, reject) => {  
  setTimeout(() => {
    reject(Error('Promise Rejected Unconditionally.'));
  }, 1000);
});

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

promise.catch((err) => {
  alert(err);
});

Promise.all()

javascript

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(3);
  }, 300);
});
const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(2);
  }, 200);
});

Promise.all([promise1, promise2]).then((res) => {
  console.log(res[0]);
  console.log(res[1]);
});

避免嵌套 Promise 和 .then()

javascript

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

const twoStars = (star) => {  
  return (star + star);
};

const oneDot = (star) => {  
  return (star + '.');
};

const print = (val) => {
  console.log(val);
};

// Chaining them all together
promise.then(twoStars).then(oneDot).then(print);

创建

javascript

const executorFn = (resolve, reject) => {
  console.log('The executor function of the promise!');
};

const promise = new Promise(executorFn);

链接多个 .then()

javascript

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) => {
  alert(err)
});

JavaScript 异步等待

异步

javascript

function helloWorld() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Hello World!');
    }, 2000);
  });
}

const msg = async function() { //Async Function Expression
  const msg = await helloWorld();
  console.log('Message:', msg);
}

const msg1 = async () => { //Async Arrow Function
  const msg = await helloWorld();
  console.log('Message:', msg);
}

msg(); // Message: Hello World! <-- after 2 seconds
msg1(); // Message: Hello World! <-- after 2 seconds

解决承诺

javascript

let pro1 = Promise.resolve(5);
let pro2 = 44;
let pro3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([pro1, pro2, pro3]).then(function(values) {
  console.log(values);
});
// expected => Array [5, 44, "foo"]

异步等待承诺

javascript

function helloWorld() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Hello World!');
    }, 2000);
  });
}

async function msg() {
  const msg = await helloWorld();
  console.log('Message:', msg);
}

msg(); // Message: Hello World! <-- after 2 seconds

错误处理

javascript

let json = '{ "age": 30 }'; // incomplete data

try {
  let user = JSON.parse(json); // <-- no errors
  alert( user.name ); // no name!
} catch (e) {
  alert( "Invalid JSON data!" );
}

Aysnc 等待运算符

javascript

function helloWorld() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Hello World!');
    }, 2000);
  });
}

async function msg() {
  const msg = await helloWorld();
  console.log('Message:', msg);
}

msg(); // Message: Hello World! <-- after 2 seconds

JavaScript 请求

JSON

json

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

XMLHttpRequest

javascript

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

GET

javascript

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

req.send();

POST

javascript

const data = {
  fish: 'Salmon',
  weight: '1.5 KG',
  units: 5
};
const xhr = new XMLHttpRequest();
xhr.open('POST', '/inventory/add');
xhr.responseType = 'json';
xhr.send(JSON.stringify(data));

xhr.onload = () => {
  console.log(xhr.response);
};

获取 API

javascript

fetch(url, {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
      'apikey': apiKey
    },
    body: data
  }).then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Request failed!');
  }, networkError => {
    console.log(networkError.message)
  })
}

JSON 格式

javascript

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

承诺url参数获取api

javascript

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

获取 API 函数

javascript

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

异步等待语法

javascript

const getSuggestions = async () => {
  const wordQuery = inputField.value;
  const endpoint = `${url}${queryParams}${wordQuery}`;
  try{
const response = await fetch(endpoint, {cache: 'no-cache'});
    if(response.ok){
      const jsonResponse = await response.json()
    }
  }
  catch(error){
    console.log(error)
  }
}

开始 ​

介绍 ​

console.log() ​

数值 ​

变量 ​

字符串 ​

算术运算符 ​

注释 ​

赋值运算符 ​

字符串插值 ​

let 关键字 ​

const 关键字 ​

JavaScript 条件 ​

if 语句 ​

三元运算符 ​

运算符 ​

逻辑运算符 && ​

比较运算符 ​

逻辑运算符！ ​

否则如果 ​

switch 语句 ​

JavaScript 函数 ​

函数 ​

匿名函数 ​

箭头函数 (ES6) ​

两个参数 ​

没有参数 ​

一个参数 ​

简洁的箭头函数 ​

返回关键字 ​

调用函数 ​

函数表达式 ​

功能参数 ​

函数声明 ​

JavaScript 范围 ​

范围 ​

块作用域变量 ​

全局变量 ​

JavaScript 数组 ​

数组 ​

属性 .length ​

指数 ​

方法 .push() ​

方法 .pop() ​

可变的 ​

JavaScript 循环 ​

While 循环 ​

反向循环 ​

Do...while 语句 ​

For循环 ​

循环遍历数组 ​

Break ​

Continue ​

嵌套循环 ​

for...in 循环 ​

JavaScript 迭代器 ​

分配给变量的函数 ​

回调函数 ​

数组方法 .reduce() ​

数组方法 .map() ​

数组方法 .forEach() ​

数组方法 .filter() ​

JavaScript 对象 ​

访问属性 ​

命名属性 ​

不存在的属性 ​

可变的 ​

赋值速记语法 ​

删除运算符 ​

对象作为参数 ​

速记对象创建 ​

this 关键字 ​

工厂函数 ​

方法 ​

Getters and setters ​

JavaScript 类 ​

静态方法 ​

Class ​

类构造函数 ​

类方法 ​

开始

介绍

console.log()

数值

变量

字符串

算术运算符

注释

赋值运算符

字符串插值

let 关键字

const 关键字

JavaScript 条件

if 语句

三元运算符

运算符

逻辑运算符 &&

比较运算符

逻辑运算符！

否则如果

switch 语句

JavaScript 函数

函数

匿名函数

箭头函数 (ES6)

两个参数

没有参数

一个参数

简洁的箭头函数

返回关键字

调用函数

函数表达式

功能参数

函数声明

JavaScript 范围

范围

块作用域变量

全局变量

JavaScript 数组

数组

属性 .length

指数

方法 .push()

方法 .pop()

可变的

JavaScript 循环

While 循环

反向循环

Do...while 语句

For循环

循环遍历数组

Break

Continue

嵌套循环

for...in 循环

JavaScript 迭代器

分配给变量的函数

回调函数

数组方法 .reduce()

数组方法 .map()

数组方法 .forEach()

数组方法 .filter()

JavaScript 对象

访问属性

命名属性

不存在的属性

可变的

赋值速记语法

删除运算符

对象作为参数

速记对象创建

this 关键字

工厂函数

方法

Getters and setters

JavaScript 类

静态方法

Class

类构造函数

类方法