JavaScript 入门教程 javascript 备忘单

2024-02-25 开发教程 JavaScript 入门教程匿名 4℃

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

开始

介绍

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

在 Y 分钟内学习 X (learnxinyminute.com)
JavaScript 中的正则表达式(quickref.me)

console.log()

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

数值

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 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

注释

// 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 关键字

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

const 关键字

const numberOfColumns = 4;

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

JavaScript 条件

if 语句

const isMailSent = true;

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

三元运算符

var x=1;

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

运算符

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

逻辑运算符 &&

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

比较运算符

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

逻辑运算符！

let lateToWork = true;
let oppositeValue = !lateToWork;

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

否则如果

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 语句

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 函数

函数

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

箭头函数 (ES6)

两个参数

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

没有参数

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

一个参数

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

简洁的箭头函数

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

返回关键字

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

JavaScript 范围

范围

function myFunction() {
  
  var pizzaName = "Volvo";
  // 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

JavaScript 数组

数组

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

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

属性 .length

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

方法 .push()

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

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

方法 .pop()

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

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

可变的

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

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

JavaScript 循环

While 循环

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

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

反向循环

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

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

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

Do...while 语句

x = 0
i = 0

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

For循环

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

Break

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

Continue

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

for...in 循环

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

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

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

回调函数

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()

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

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

console.log(sum); // 10

数组方法 .map()

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

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

console.log(announcements);

数组方法 .forEach()

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

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

数组方法 .filter()

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

JavaScript 对象

访问属性

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

命名属性

// 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'
}

不存在的属性

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

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

可变的

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.

赋值速记语法

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

删除运算符

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"
}
*/

对象作为参数

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

速记对象创建

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

this 关键字

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

工厂函数

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

方法

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

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 类

静态方法

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

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

JavaScript 模块

Require

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

// 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

导出模块

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

导入关键字

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


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

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

执行器函数

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

const promise = new Promise(executorFn);

setTimeout()

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

setTimeout(loginAlert, 6000);

.then() 方法

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

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

.catch() 方法

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()

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()

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

创建

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

const promise = new Promise(executorFn);

链接多个 .then()

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 异步等待

异步

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

解决承诺

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"]

异步等待承诺

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

错误处理

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 等待运算符

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

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

XMLHttpRequest

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

GET

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

req.send();

POST

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

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 格式

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

承诺url参数获取api

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

获取 API 函数

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

异步等待语法

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

上一节： JavaScript 原型链的理解

下一节：没有了

"JavaScript 入门教程"的目录

JavaScript 入门教程 javascript 备忘单

开始

介绍

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