Javascript 基础

基础和常用的知识点

反引号

let name = "John";

// 嵌入一个变量
alert( `Hello, ${name}!` ); // Hello, John!

// 嵌入一个表达式
alert( `the result is ${1 + 2}` ); // the result is 3

类型转换

let apples = "2";
let oranges = "3";

// 在二元运算符加号起作用之前，所有的值都被转化为了数字
alert( +apples + +oranges ); // 5

// 更长的写法
// alert( Number(apples) + Number(oranges) ); // 5

??运算符

a ?? b == (a !== null && a !== undefined) ? a : b;

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// 显示第一个真值：
alert(firstName || lastName || nickName || "Anonymous"); // Supercoder

函数

回调函数

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

// 1
function showOk() {
  alert( "You agreed." );
}
function showCancel() {
  alert( "You canceled the execution." );
}
ask("Do you agree?", showOk, showCancel);

// 2
ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);

箭头函数

let func = (arg1, arg2, ..., argN) => expression;
let func = function(arg1, arg2, ..., argN) {
  return expression;
};

let double = n => n * 2;
// let double = function(n) { return n * 2; }

let sum = (a, b) => a + b;
// let sum = function(a, b) { return a + b; };

let sum = (a, b) => {  // 花括号表示开始一个多行函数
  let result = a + b;
  return result; 
};
// 如果我们使用了花括号，那么我们需要一个显式的 “return”

可选链

obj?.prop —— 如果 obj 存在则返回 obj.prop，否则返回 undefined。
obj?.[prop] —— 如果 obj 存在则返回 obj[prop]，否则返回 undefined。
obj.method?.() —— 如果 obj.method 存在则调用 obj.method()，否则返回 undefined。

对象类型

let user = {
  name: "json",
  sex: "male"
};

对象中所有key的类型均是字符串或Symbol

user.age = 1: “.”访问方式中的key默认就是一个字符串。(age默认转成字符串”age”)
user[age] = 1 or user[“age”]: “[]”访问方式中的key可以是一个变量，也可以是一个字符串；如果是变量，最终存储的key值即为该变量对应的值（如果该变量值不是字符串，会被强制转为字符串）。

对象强制类型转换

依次自动尝试对象中以下存在的方法：

[Symbol.toPrimitive]

obj[Symbol.toPrimitive] = function(hint) {
  // 这里是将此对象转换为原始值的代码
  // 它必须返回一个原始值
  // hint 为 "string"、"number" 或 "default" 中的一个
  // 除了Date对象，所有hint=default调用默认使用hint=number的方法
}

let user = {
  name: "John",
  money: 1000,

  [Symbol.toPrimitive](hint) {
    alert(`hint: ${hint}`);
    return hint == "string" ? `{name: "${this.name}"}` : this.money;
  }
};

// 转换演示：
alert(user); // hint: string -> {name: "John"}
alert(+user); // hint: number -> 1000
alert(user + 500); // hint: default -> 1500

toString/valueOf

let user = {name: "John"};

alert(user); // [object Object]
alert(user.valueOf() === user); // true

let user = {
  name: "John",
  money: 1000,

  // 对于 hint="string"
  toString() {
    return `{name: "${this.name}"}`;
  },

  // 对于 hint="number" 或 "default"
  valueOf() {
    return this.money;
  }

};

alert(user); // toString -> {name: "John"}
alert(+user); // valueOf -> 1000
alert(user + 500); // valueOf -> 1500

内建对象比较方法

有一个特殊的内建方法 Object.is，它类似于 === 一样对值进行比较，但它对于两种边缘情况更可靠：

它适用于 NaN：Object.is(NaN, NaN) === true，这是件好事。
值 0 和 -0 是不同的：Object.is(0, -0) === false，从技术上讲这是对的，因为在内部，数字的符号位可能会不同，即使其他所有位均为零。

在所有其他情况下，Object.is(a, b) 与 a === b 相同。