Javascript 可以运行在

• 浏览器控制台
  • F12 -> Console 选项卡

和我们的 HTML 文件绑定在一起（后面会讲）

JavaScript 有 5 种原始数据类型：

• Boolean (true, false)
• Number (12, 1.618, -46.7, 0, etc.)
• String ("hello", "world!", "12", "", etc.)
• Null (null)
• Undefined (undefined)

ACTION ITEMS

• 打开浏览器控制台
• 输入 1 + 1
• 输入 5 % 2
• 输入 "hello" + " world"
• 输入 1/3
• 输入 8 > 3
• 输入 1 + true

ACTION ITEMS

• 输入 "1" + 1
• 输入 1 + "1"
• 输入 "123" > 122
• 输入 1 === 1
• 输入 6 !== 7
• 输入 1 == "1"
• 输入 1 === "1"
• 输入 6 != "6"
• 输入 6 !== "6"

• 在 ES6 之前，我们使用 var 来定义变量。
• 现在我们使用 let 来定义变量。
• STFW
  • var 的作用域是函数作用域，而不是块作用域。
  • let 的作用域是块作用域。
  • var 会变量提升，而 let 不会。
  • var 可以重复声明变量，而 let 不能。

• undefined 表示“声明但未分配值”
• null 表示“没有值”
  • 最佳实践： 使用 null 来清空一个变量。明确地说变量现在是空的。

let name; // undefined
name = "some"; // assigned
name = null; // no name

• 我们通常输出到控制台，便于快速调试！
  • console.log()
  • console.error()
  • console.warn()
  • console.info()
  • console.debug()
• console.log() 是最常用的，而且可以接受多个参数，几乎什么都能输出
  • console.log("Hello", "world!");
  • console.log("The answer is", 42);
  • console.log("The answer is %d", 42);
  • console.log(`The answer is ${41 + 1}`); (template literals / 格式化字符串)
• 使用 alert 弹窗
  • alert("Hello, world!");

当你想要存储一系列（理想情况下是相似的）项目时：

// 初始化
let pets = ["flower", 42, false, "bird"];
 
// 访问
console.log(pets[3]); // "bird"
 
// 替换
pets[2] = "hamster"; // ["flower", 42, "hamster", "bird"]

• 数组是可变的，可以存储任何类型的数据
• 数组是基于 0 的索引，这意味着第一个元素的索引是 0，第二个是 1，依此类推

// 初始化
let pets = ["cat", "dog", "guinea pig", "bird"];
 
// 从末尾删除
pets.pop(); // ["cat", "dog", "guinea pig"]
 
// 添加到末尾
pets.push("rabbit"); // ["cat", "dog", "guinea pig", "rabbit"]

条件语句

• 我们经常希望根据不同的条件执行不同的操作。
• 为此，我们使用条件运算符 if、else 和 else if：

if (hour < 12) {
  console.log("Good morning!");
} else if (hour < 16) {
  console.log("Good afternoon!");
} else if (hour < 20) {
  console.log("Good evening!");
} else {
  console.log("Good night!");
}

While 循环：

let z = 1;
while (z < 1000) {
  z = z * 2;
  console.log(z);
}

For 循环：

const pets = ["cat", "dog", "guinea pig", "bird"];
 
for (let i = 0; i < pets.length; i++) {
  const phrase = "I love my " + pets[i];
  console.log(phrase);
}

一种更“Pythonic”的迭代方式：

const pets = ["cat", "dog", "guinea pig", "bird"];
 
for (const pet of pets) {
  console.log("I love my " + pet);
}

• 对象 / Object 是属性的集合
• 每个属性都有一个名称，描述其含义；以及一个值，描述该对象属性的值。
• 语法：用大括号括起来，冒号分隔名称和值，逗号分隔值对。允许你将相关数据存储在一个变量中。
• 可以将它们视为 JavaScript 中相当于 Python 字典的部分。
• 那么，我们可以用它做什么呢？

const person = {
  name: "John",
  age: 30,
};

• 如果你知道属性名称，有两种方法可以访问对象属性：

const myCar = {
  make: "Ford",
  model: "Mustang",
  year: 2005,
  color: "red"
};
 
console.log(myCar.model); // "Mustang"
console.log(myCar["color"]); // "red"

• 或者你可以通过解构同时获取多个

const { model, color } = myCar;
console.log(model, color); // "Mustang" "red"

let arr1 = [1, 2, 3];
let person1 = {
  name: "Bill Gates"
};
 
let arr2 = [1, 2, 3];
let person2 = {
  name: "Bill Gates"
};
 
arr1 === arr2; // false!
person1 === person2; // false!

• === 对数组和对象意味着什么？
  • P.S. == 也是一样的结果，但是我们不使用

• 对象变量是引用
  • 它们指向数据实际存储的位置
• Javascript 中，=== 比较的是引用，而不是值，即检查两个数据是否存储在同一位置
  • Python 仍然会比较值

浅拷贝和深拷贝

• 浅拷贝：只拷贝对象的第一层
• 深拷贝：拷贝对象的所有层

// Shallow copy
let arr = [1, 2, 3];
let copyArr = arr;
// 修改 copyArr 也会修改 arr

// Deep copy
let arr = [1, 2, 3];
let copyArr = [...arr];
// 修改 copyArr 不会修改 arr

# Python
celsiusToFahrenheit = lambda tempCelsius: tempCelsius * 9/5 + 32

// Javascript
const celsiusToFahrenheit = (tempCelsius) => {
  const tempFahrenheit = tempCelsius * 9/5 + 32;
  return tempFahrenheit;
};

• 这段代码的作用是，为这个函数分配内存空间，然后将函数存储在内存中。
• 因此，我们在内存的某个地方记录了接收整数温度、进行计算并返回结果的功能。
• 但为了真正使用这个函数，我们需要调用它。
• 在 JS 中，我们通过将函数赋值给变量来实现这一点。
• 注意，这里的语法与其他变量完全相同
• const，表示我们不会改变这个变量指向的内容

const roomTemp = celsiusToFahrenheit(26); // 将 78.8 赋值给 roomTemp

• 在 JavaScript 中，函数可以像其他任何值一样被传递。
• 这意味着我们可以将一个“回调”函数作为参数传递给另一个函数！

setTimeout()

const printSomething = () => {
  console.log("i sleep");
};

setTimeout() 在指定延迟后调用一个函数。它接受 2 个参数：要调用的函数（即回调函数）和延迟时间（以毫秒为单位）。

我们如何在 5 秒后打印消息？（多选）

A. setTimeout(printSomething, 5000);
B. setTimeout(printSomething(), 5000);
C. setTimeout(() => { console.log("i sleep"); }, 5000);

setInterval() vs setTimeout()

const arrCtoF = (arrC) => {
  const arrF = [];
    for (let i = 0; i <= arrC.length; i ++) {
    arrF.push(
      arrC[i] * 9/5 + 32
    );
  }
    return arrF;
}

const arrAtoB = (arrA, AtoB) => {
  const arrB = [];
    for (let i = 0; i <= arrA.length; i ++) {
    arrB.push(
      AtoB(arrA[i])
    );
  }
    return arrB;
}

const arrCtoF = arrAtoB(arrC, (tempC) => tempC * 9/5 + 32);

map

const arr = [1, 2, 3, 4, 5];
const arr2 = arr.map((x) => x * 2); // [2, 4, 6, 8, 10]

• 函数式编程是一种编程范式，它将计算视为数学函数的求值，并避免改变状态和可变数据。
• Eg. f(x) = x + 1 是一个函数，它接受一个输入 x 并返回一个输出 x + 1，这个函数没有副作用，即它不会改变任何外部状态，也不会因为外部状态的改变而改变自己的输出。

const addOne = (x) => x + 1;

• 纯粹的函数式编程主要强调以下几点
  • 函数是一等公民：函数可以作为参数传递给其他函数，也可以作为返回值返回。
  • 只用表达式，不用语句：每一步都是有返回值的运算。
  • 无副作用：函数不会改变任何外部状态，也不会因为外部状态的改变而改变自己的输出。（I/O 也是副作用，所以函数式编程中通常会把 I/O 减少到最小）
  • 引用透明：只依赖于输入的参数，任何时候只要参数相同，引用函数所得到的返回值总是相同的。
• 我们这里主要介绍 Javascript 中函数式的思想的具体运用，这将有助于我们未来使用 React 的 Hooks 和 Functional Components。

函数链

• Javascript 中有许多高阶函数，它们接受函数作为参数，并返回一个新函数。
  • Eg. map, filter, reduce
  • 甚至在网络请求中，我们也可以用 fetch(...).then(...).catch(...).finally(...) 来链式调用。
• 接受一个函数作为参数，对数组中的每个元素应用该函数，并返回一个新数组。
• 不会改变原数组，而是返回一个新数组。
• 可以链式调用。

const arr = [1, 2, 3, 4, 5];
const arr2 = arr.map((x) => x * 2).filter((x) => x > 5); // [6, 8, 10]

// reduce
const sum = arr.reduce((acc, x) => acc + x, 0); // 15

addEventListener

• 接受两个参数：事件类型和回调函数。
• 回调函数会在事件发生时被调用。

// 按钮在点击时会调用回调函数
const button = document.querySelector("button");
button.addEventListener("click", () => {
  console.log("clicked");
});

// 窗口在按下按键时会调用回调函数
window.addEventListener("keydown", (event) => {
  console.log(event.key);
});

More at MDN - addEventListener

fetch

• 接受一个 URL 作为参数，返回一个 Promise。
• 可以链式调用。

await fetch("/api/v1/test")
  .then((response) => response.json())
  .then((data) => console.log("Data:", data))
  .catch((error) => console.error("Error:", error))
  .finally(() => console.log("Done."));

More at MDN - fetch

思考题

这个是什么？

const [count, setCount] = useState(0);

• 类用于当我们有多个对象都表示同类型事物时。它们允许我们定义该类型或该类中每个对象都具有的属性和方法。

class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
 
  getArea = () => {
    return this.width * this.height;
  };
}
 
const rect = new Rectangle(6, 8);
console.log(rect.getArea()); // 48

JavaScript 是我们实现功能的关键！

• 使用 let, const 声明变量。
• boolean, number, string, null, undefined
• 函数、数组、对象、类
• if, else, while, for
• setInterval() vs. setTimeout()