js备忘录 javascript 备忘单

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

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

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

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

var x=1;

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

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

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

// Different data types
const a2 = [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);

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

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

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

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

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

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.

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

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

console.log(sum); // 10

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

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

console.log(announcements);

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

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

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

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

	

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

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

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

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

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)

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

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

const promise = new Promise(executorFn);

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

setTimeout(loginAlert, 6000); 

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

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

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

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

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

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

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

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

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

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

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

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

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