【前端】JavaScript自学笔记

一、注释

二、变量声明

变量声明规范

• 变量必须以字母开头

• 变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）

• 变量名称对大小写敏感（y 和 Y 是不同的变量）

• 一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。

• 函数内声明的变量是局部变量，只能在函数内部访问使用它，只要函数运行完毕，局部变量就会被删除

• 函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它，全局变量会在页面关闭后被删

var变量声明

var carname;   // 声明空变量
carname="Volvo";   // 空变量赋值

var carname="Volvo";   // 声明变量并赋值
var lastname="Doe", age=30, job="carpenter"; // 声明多个变量并赋值，逗号之间可以换行
var x,y,z=1;  // 只有z有值，x和y是空变量

var carname="Volvo";
var carname;   //   重新声明变量，值不会变

// 声明新变量时，可以使用关键词 "new" 来声明其类型，这样创建的变量为对象，String对象，Number对象……
var carname=new String;
var x=new Number;
var y=new Boolean;
var cars=new Array;
var person=new Object;

// 使用typeof查看变量数据类型
typeof person


// const 声明一个只读的常量，一旦声明，常量的值就不能改变。

let变量声明

// 作用域内重新定义变量
var x = 10;   // 这里输出 x 为 10
{ 
    var x = 2;   // 这里输出 x 为 2
}   // 这里输出 x 为 2

var x = 10;   // 这里输出 x 为 10
{ 
    let x = 2;   // 这里输出 x 为 2
}   // 这里输出 x 为 10



// 循环作用域
var i = 5;
for (let i = 0; i < 10; i++) {
    // 一些代码...，这里i最后为10
}   // 这里输出 i 为 5

var i = 5;
for (var i = 0; i < 10; i++) {
    // 一些代码...，这里i最后为10
}   // 这里输出 i 为 10

const变量声明

• 同样是块级作用域

• 声明时必须进行初始化

• const 定义的对象或者数组，是可变的

// 错误写法
const PI;
PI = 3.14159265359;

// 正确写法
const PI = 3.14159265359;

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // 错误

// 创建常量对象
const car = {type:"Fiat", model:"500", color:"white"};
// 修改属性:
car.color = "red";

// 创建常量数组
const cars = ["Saab", "Volvo", "BMW"];
// 修改元素
cars[0] = "Toyota";
// 添加元素
cars.push("Audi");

const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的

const x = 2;       // 合法

{
    const x = 3;   // 合法
}

{
    const x = 4;   // 合法
}

var和let、const的区别

• var 在现代 JavaScript 中已经被 let 和 const 所取代。let 和 const 具有块级作用域，更符合现代编程习惯。

• var 关键字定义的变量可以先使用再声明，let 和const 关键字定义的变量需要先声明再使用。

var carName = "Volvo";
// 可以使用 window.carName 访问变量
let carName = "Volvo";
// 不能使用 window.carName 访问变量

var x = 2;   // x 为 2
var x = 3;   // 现在 x 为 3

var x = 2;       // 合法
let x = 3;       // 不合法

{
    var x = 4;   // 合法
    let x = 5   // 不合法
}

let x = 2;       // 合法
let x = 3;       // 不合法

{
    let x = 4;   // 合法
    let x = 5;   // 不合法
}

let x = 2;       // 合法
var x = 3;       // 不合法

{
    let x = 4;   // 合法
    var x = 5;   // 不合法
}

let x = 2;
{
    let x = 3;   // 合法
}   // 合法, x = 2


let x = 2;
{
    var x = 4;   // 合法
}   // 合法, x = 4


const x = 2;       // 合法
{
    const x = 3;   // 合法
}
{
    const x = 4;   // 合法
}

声明提升

• 函数及变量的声明都将被提升到函数的最顶部。如果变量和函数在调用之后才被声明，那代码在执行时会将声明代码提升到前面先执行

• 需要注意的是只有变量的声明会被提升，初始化（赋值）不会。这里需要将声明和赋值分开来看
• 声明：var x
• 赋值：x = 7

<p id="demo"></p>
<script>
		var x = 5; // 初始化 x
		elem = document.getElementById("demo"); // 查找元素 
		elem.innerHTML = "x 为：" + x + "，y 为：" + y;           // 显示 x 和 y
		var y = 7; // 初始化 y
</script>

// p标签最终显示：x 为：5，y 为：undefined
// 因为只提升了声明，告诉“执行者”有这个变量；但是没有提升赋值，所以这个变量最终显示未undefined

• 尽量在每个作用域开始前声明这些变量

• 严格模式
• 严格模式通过在脚本或函数的头部添加 use strict; 表达式来声明，
• 在函数内部声明是局部作用域 (只在函数内使用严格模式)

<script>
"use strict";
x = 3.14;       // 报错 (x 未定义)
</script>

严格模式的限制
• 不能使用未声明的变量
• 不允许删除变量、对象、函数
• 不允许变量重名
• 不允许使用八进制
• 不允许使用转义字符
• 不允许对只读属性赋值
• 不允许对一个使用getter方法读取的属性进行赋值
• 不允许删除一个不允许删除的属性
• 变量名不能使用 "eval” 、"arguments”字符串
• ……

三、数据类型

值类型(基本类型)

字符串（String）

var answer="It's alright";
var answer="He is called 'Johnny'";  // 单引号套双引号
var answer='He is called "Johnny"';  // 双引号套单引号
var x = 'It\'s alright';             // 转义字符
var y = "He is called \"Johnny\"";   // 转义字符

var character = answer[7];           // 寻址
var sln = answer.length;             // 计算字符串长度

var x = "John";
var y = new String("John");          // String对象会拖慢执行速度，并可能产生其他副作用
typeof x // 返回 String
typeof y // 返回 Object

const str = '9e9e520dcdf04eb1-93e6-cb3fd6a0bc01';
str.replace('-','')                  // 替换指定字符；只会替换第一个匹配到的内容
str.replaceAll('-','')               // 替换指定字符；全局替换
str.replace(/-/g,'')                 // 替换指定字符；全局替换，区分大小写
str.replace(/-/gi,'')                // 替换指定字符；全局替换，不区分大小写

// 模版字符串
// 使用反引号 `` 作为字符串的定界符分隔，支持多行文本无需转义
// 支持占位符 ${} ，可以传入其他变量，函数(调用)，表达式等
const name = 'Runoob';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;

let price = 10;
let VAT = 0.25;
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

数字(Number)

var x1=34.00;     //使用小数点来写
var x2=34;        //不使用小数点来写
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

布尔(Boolean)

var x=true;
var y=false;

空（Null）

• null 表示 "什么都没有”

• 用 typeof 检测 null 返回是object

• 可以通过将变量的值设置为 null 来清空变量：cars=null;

• null 用于对象, undefined 用于变量，属性和方法；对象只有被定义才有可能为 null，否则为 undefined

未定义（Undefined）：

• Undefined 这个值表示变量不含有值

• typeof 一个没有值的变量会返回 undefined

• 任何变量都可以通过设置值为 undefined 来清空

• null 和 undefined 的值相等，但类型不等

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false 值相等，类型不等
null == undefined            // true，值相等，类型不管

Symbol

数据类型转换

引用数据类型（对象类型）

数组(Array)

// 创建数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];

// 数组示例
var arr = [1, 2, 3, 4, 5];
// length 属性：返回数组的长度
arr.length; // 5
// push()：将元素添加到数组末尾，并返回新的长度
arr.push(6); // 6
// pop()：删除数组的最后一个元素，并返回该元素的值
arr.pop(); // 6
// shift()：删除数组的第一个元素，并返回该元素的值
arr.shift(); // 1
// unshift()：将元素添加到数组开头，并返回新的长度
arr.unshift(0); // 5
// concat()：将两个或多个数组合并成一个新数组
var newArr = arr.concat([6, 7, 8]); // [0, 2, 3, 4, 5, 6, 7, 8]
// slice()：返回数组的一个片段或子数组，左闭右开，原数组不变
var slicedArr = arr.slice(1, 4); // [2, 3, 4]
// indexOf()：返回指定元素在数组中首次出现的索引，如果不存在则返回 -1
arr.indexOf(3); // 2


var arr = [1, 2, 3, 4, 5];
// 删除元素：从索引位置 2 开始删除 2 个元素，并返回被删除的元素数组
var removed = arr.splice(2, 2); // 返回 [3, 4]；arr 变为 [1, 2, 5]
// 添加元素：从索引位置 2 开始删除 0 个元素，并添加元素 'a', 'b' 到这个位置
arr.splice(2, 0, 'a', 'b');    // arr 变为 [ 1, 2, 'a', 'b', 5 ]
// 替换元素：从索引位置 1 开始删除 2 个元素，并添加元素 'x', 'y' 到这个位置
var replaced = arr.splice(1, 2, 'x', 'y'); // 返回 [2, 'a']；arr 变为 [ 1, 'x', 'y', 'b', 5 ]

// map() 用于遍历数组，并返回一个同等长度的新数组
let arr = [1, 2, 3];
let arr2 = arr.map((e) => e * 2);
// filter() 用于过滤数组，返回指定条件的元素
let arr = [1, 2, 3];
let arr2 = arr.filter((e) => e >= 2);
// some() 方法用于检查数组中的任意元素是否满足所提供的条件
const hasEvenNumber = numbers.some(num => num % 2 === 0);  // 判断数组中是否存在偶数
console.log(hasEvenNumber); // 输出 true，因为数组中包含偶数

// forEach()：对数组中的每个元素执行指定的函数
arr.forEach(function(element) {
  // 对每个元素进行操作
});

对象(Object)

• 对象由花括号分隔，在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义，属性由逗号分隔

// 创建有三个属性的对象person，属性分别是：firstname、lastname 以及 id

var person={firstname:"John", lastname:"Doe", id:5566};

var person = {
		firstName: "John",      // 对象属性1
		lastName : "Doe",       // 对象属性2
		id : 5566,              // 对象属性3
		fullName : function()   // 对象方法1
		{
				return this.firstName + " " + this.lastName;
		}
};

name=person.lastname;        // 寻址方式1
name=person["lastname"];     // 寻址方式2

document.getElementById("demo").innerHTML = person.fullName();   // 调用对象方法，需要在方法名后加()，相当于调用一个函数，返回：John Doe
document.getElementById("demo").innerHTML = person.fullName;     // 调用对象属性，返回方法的字符串：function() { return this.firstName + " " + this.lastName; }

// 对象示例
var obj = {
  name: 'John',
  age: 30,
  city: 'New York'
};

// Object.keys()：返回对象中所有可枚举属性的名称数组
var keys = Object.keys(obj); // ['name', 'age', 'city']
// Object.values()：返回对象中所有可枚举属性的值数组
var values = Object.values(obj); // ['John', 30, 'New York']
// Object.entries()：返回对象中所有可枚举属性的键值对数组
var entries = Object.entries(obj); // [['name', 'John'], ['age', 30], ['city', 'New York']]
// hasOwnProperty()：检查对象是否具有指定的属性
obj.hasOwnProperty('name'); // true
// JSON.stringify()：将对象转换为 JSON 字符串
var jsonString = JSON.stringify(obj); // '{"name":"John","age":30,"city":"New York"}'
// JSON.parse()：将 JSON 字符串解析为 JavaScript 对象
var parsedObj = JSON.parse(jsonString); // {name: 'John', age: 30, city: 'New York'}

函数(Function)

• 函数一般用关键词 function来定义，关键词 function 必须是小写

• 函数的定义可以在调用代码之后（函数提升）（Python中必须在前）

• 实参和形参只能通过位置来一一对应

• 如果函数有返回值，则调用函数的地方将会被函数的返回值替代

• 如果没有返回值，只是希望结束函数运行，也可以使用return

function myFunction(a, b) {
    return a * b;
}
// 分号是用来分隔可执行JavaScript语句，由于函数声明不是一个可执行语句，所以不以分号结束。

• 函数表达式

var myFunction2 = function (a, b) {return a * b};  // 实际是一个匿名函数

// 函数存储在变量中，不需要函数名称，通常通过变量名来调用
// 以分号结尾，因为它是一个执行语句

• 构造函数Function()定义函数

var myFunction1 = new Function("a", "b", "return a * b");   // 很多时候，需要避免使用 new 关键字

• 函数自调用表达式

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

• 箭头函数
• 语法

// 多个参数
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) => { return 表达式; }

// 单一参数（括号可选）
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数（必须有括号）
() => {函数声明}

• 实例

const x = (x, y) => x * y;
const double = x => x * 2;
const add = (a, b) => a + b;

• 重点
• 箭头函数是不能提升的，所以需要在使用之前定义
• 使用 const 比使用 var 更安全，因为函数表达式始终是一个常量
• 如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}
• 箭头函数会默认绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的

• 闭包
闭包可以让函数捕获并访问其外部函数的作用域中的变量，并且保持外部函数的变量状态，即使外部函数已经执行完毕。
一般情况当函数执行完之后会有一个return，return完了之后，函数关闭，内部的变量定型，除非再次执行函数，否则不能访问和改变。
而闭包则是在return的时候抛出了一个遥控器（原函数的一个子函数），即使原函数关闭，还是可以通过运行遥控器访问和修改里面的变量

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3

在上面例子中，声明一个变量add，初始化值为一个自调用函数，所以最后add的值就是这个自调用函数的返回值
自调用函数先声明了一个变量counter并赋值为0，然后返回了一个函数
所以当add被声明完成之后，自调用函数也会执行，并且把匿名函数返回给add，此时add相当于也是一个函数了
此时counter是自调用函数中的一个变量，并且自调用函数已经执行完成了，正常情况在自调用函数外是不能访问和修改counter变量了
但是当调用add函数时，还是能够访问自调用函数中的变量counter
 
闭包的一个实例

var Counter = (function () {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function () {
      changeBy(1);
    },
    decrement: function () {
      changeBy(-1);
    },
    value: function () {
      return privateCounter;
    },
  };
})();

console.log(Counter.value()); /* logs 0 */
Counter.increment();
Counter.increment();
console.log(Counter.value()); /* logs 2 */
Counter.decrement();
console.log(Counter.value()); /* logs 1 */

日期（Date）

正则（RegExp）

function myFunction() {
    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);
		// var n = str.search("Runoob");   // 使用字符串作为参数。字符串参数会转换为正则表达式
    document.getElementById("demo").innerHTML = n;
}

<p id="demo">Visit Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace(/microsoft/i,"Runoob");   
		// var txt = str.replace("Microsoft","Runoob");  
    document.getElementById("demo").innerHTML = txt;
}
</script>

四、运算符

算术运算符

• 加号+也可以用来拼接字符串

• 两个数字相加，返回数字相加的和；如果数字与字符串相加，返回字符串

赋值运算符

比较运算符

• 比较运算符在逻辑语句中使用，以测定变量或值是否相等

• 一般在条件语句中使用比较运算符对值进行比较

逻辑运算符

条件运算符（三元运算符）

• 语法

condition ? expressionIfTrue : expressionIfFalse;

• condition 是一个表达式，用于表示一个条件，如果这个条件为真（真值），则执行 expressionIfTrue。
• expressionIfTrue 是在条件为真时返回的值或执行的表达式。
• expressionIfFalse 是在条件为假时返回的值或执行的表达式。

• 实例

const age = 18;
const canVote = age >= 18 ? "Can vote" : "Cannot vote";

console.log(canVote); // 输出: "Can vote"

空值合并运算符

const contents = (page.content ?? [])
// 如果 page.content 的值不为 null 或 undefined，则将 page.content 的值赋给 contents。否则，将一个空数组 [] 赋给 contents。

五、条件与循环

条件语句

if 语句

• 只有当指定条件为 true 时，使用该语句来执行代码

• 语法

if (condition)
{
    当条件为 true 时执行的代码
}

• 实例

if (time<20)
{
    x="Good day";
}

if (i==3) break;   // if 语句只有一行代码，所以可以省略花括号

if...else 语句

• 当条件为 true 时执行代码，当条件为 false 时执行其他代码

• 语法

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

• 实例

if (time<20)
{
    x="Good day";
}
else
{
    x="Good evening";
}

if...else if....else 语句

• 使用该语句来选择多个代码块之一来执行

• 语法

if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

• 实例

if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}

switch 语句

• 使用该语句来选择多个代码块之一来执行

• 语法

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

• 实例

var d=new Date().getDay(); 
switch (d) 
{ 
  case 0:x="今天是星期日"; 
  break;  // 使用 break 来阻止代码自动地向下一个 case 运行
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
	default:   // default 关键词来规定匹配不存在时做的事情
  x="期待周末";
}

循环语句

for 循环

• 代码块执行一定的次数

• 语法

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

// 语句1 循环体（代码块）开始前执行，通常在这里初始化循环中所用的变量(可以多个)，可选用
// 语句2 定义运行循环体（代码块）的条件，返回true则循环再次开始，如果返回false则循环将结束,可选用
		// 如果省略语句2，那么必须在循环内提供 break。否则循环就无法停下来
// 语句3 在循环体（代码块）已被执行之后执行，当循环内部有相应的代码时可省略，,可选用

• 实例

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

for (var i=0,len=cars.length; i<len; i++)   // 初始化多个值


var i=2,len=cars.length;
for (; i<len; i++)   // 省略语句1


var i=0,len=cars.length;
for (; i<len; )      // 省略语句1、3
{ 
    document.write(cars[i] + "<br>");
    i++;
}

for/in 循环

• 遍历对象的属性

• 实例

function myFunction(){
	var x;
	var txt="";
	var person={fname:"Bill",lname:"Gates",age:56}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;
}

while 循环

• 指定的条件为 true 时循环指定的代码块

• 语法

while (条件)
{
    需要执行的代码
}

• 实例

function myFunction(){
	var x="",i=0;
	while (i<5){
		x=x + "该数字为 " + i + "<br>";
		i++;
	}
	document.getElementById("demo").innerHTML=x;
}

/*
该数字为 0
该数字为 1
该数字为 2
该数字为 3
该数字为 4
*/

do/while  循环

• 指定的条件为 true 时循环指定的代码块

• 会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环

• 语法

do
{
    需要执行的代码
}
while (条件);

• 实例

function myFunction(){
	var x="",i=0;
	do{
		x=x + "该数字为 " + i + "<br>";
	    i++;
	}
	while (i<5)
	document.getElementById("demo").innerHTML=x;
}

break 和 continue 语句

• continue 用于跳过循环中的一个迭代，进入下一轮循环。

• break 语句用于跳出整个循环，继续循环体之后的代码。（switch() 语句中也会用到break）

• break跳出任何标记的代码块
• 标记 JavaScript 语句，请在语句之前加上冒号
• 通过标签引用，break 语句可用于跳出任何 JavaScript 代码块

<script>
cars=["BMW","Volvo","Saab","Ford"];
list:{
	document.write(cars[0] + "<br>"); 
	document.write(cars[1] + "<br>"); 
	document.write(cars[2] + "<br>"); 
	break list;
	document.write(cars[3] + "<br>"); 
	document.write(cars[4] + "<br>"); 
	document.write(cars[5] + "<br>"); 
}
</script>

/*
BMW
Volvo
Saab
*/

六、其他

代码规范

规范要求

• 变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）

• 全局变量为大写 (UPPERCASE )

• 常量 (如 PI) 为大写 (UPPERCASE )

• 通常运算符 ( = + - * / ) 前后需要添加空格

• 为了便于阅读每行字符建议小于数 80 个，如果超过了 80 个字符，建议在 运算符或者逗号后换行

• 通常使用 4 个空格符号来缩进代码块（不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样）

• 语句
• 一条语句通常以分号作为结束符
• 左花括号前添加一空格，放在第一行的结尾；将右花括号独立放在一行
• 不要以分号结束一个复杂的声明（条件、循环、函数）

• 对象
• 左花括号与类名放在同一行
• 冒号与属性值间有个空格
• 字符串使用双引号，数字不需要
• 最后一个属性-值对后面不要添加逗号
• 将右花括号独立放在一行，并以分号作为结束符号

常见问题

• 定义数组元素、对象，最后不能添加逗号（虽然语法没有问题，但是在不同的浏览器可能得到不同的结果）

var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4。
var colors = [5, 6, 7];  // 正确的定义方式

websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}   // 错误的定义方式
websites = {site:"菜鸟教程", url:"www.runoob.com", like:460}    // 正确的定义方式

• 不同类型相加
• 数字 + 数字 = 数字
• 字符串 - 数字 = 数字
• 数字 + 字符串 = 字符串
• 字符串 + 数字 = 字符串
• 字符串 + 字符串 = 字符串

• 浮点型数据
• JavaScript 中的所有数据都是以 64 位浮点型数据(float) 来存储

var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.30000000000000004
if (z == 0.3)            // 返回 false

var z = (x * 10 + y * 10) / 10;       // z 的结果为 0.3

• if 语句
• if (x == 19);{ 中间错误使用分号，导致方法体单独被执行，所以if条件无效

<p id="demo"></p>
<script>
var x = 5;
if (x == 19);{
	document.getElementById("demo").innerHTML = "Hello";
}
</script>

• return 语句
• JavaScript 默认是在一行的末尾自动结束，如果是一个不完整的语句，JavaScript 将尝试读取第二行的语句
• 如果return后面有要返回的内容，则不可以换行，因为return是一个完整的语句

function myFunction(a) {
    var
    power = 10;  
    return       // 相当于在return后加了分号，分号结束，返回 undefined
    a * power;
}

异步编程

回调函数

// 异步请求回调函数
<p>回调函数等待 3 秒后执行。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
setTimeout(function () {
    document.getElementById("demo1").innerHTML="RUNOOB-1!";  // 三秒后子线程执行
}, 3000);
document.getElementById("demo2").innerHTML="RUNOOB-2!";      // 主线程先执行
</script>

// 这是一个模拟的异步函数，它接受一个回调函数作为参数
function fetchData(callback) {
    setTimeout(function () {
        const data = "这是从服务器获取的数据";
        callback(data); // 调用回调函数，并传递数据作为参数
    }, 1000); // 模拟异步操作需要的时间
}

// 定义一个回调函数，在数据获取后被调用
function displayData(data) {
    console.log("从服务器获取到的数据：", data);
}

// 调用 fetchData 函数，并将 displayData 函数作为回调传递
fetchData(displayData);           // 调用函数，但是函数内是一个setTimeout函数模拟了异步请求
console.log("等待数据获取中...");   // 最先执行


/*
等待数据获取中...
从服务器获取到的数据： 这是从服务器获取的数据
*/

setTimeout(function () {
    console.log("First");
    setTimeout(function () {
        console.log("Second");
        setTimeout(function () {
            console.log("Third");
        }, 3000);
    }, 4000);
}, 1000);

Promise

• then：用于处理 Promise 成功状态的回调函数。

• catch：用于处理 Promise 失败状态的回调函数。

• finally：无论 Promise 是成功还是失败，都会执行的回调函数。

// Promise构造函数定义promise对象，其中的两个参数(resolve, reject)其实是两个函数
const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('success');    // 符合条件，执行resolve函数并设置一个参数，在之后将参数传递给then方法作为参数
    } else {
      reject('error');       // 不符合条件，执行reject函数并设置一个参数，在之后将参数传递给catch方法作为参数
    }
  }, 1000);
});

// 用返回的promise对象调用方法
promise.then(result => {   // 这里调用了then方法，参数result的值就是上面resolve函数中的参数
  console.log(result);
}).catch(error => {       // 这里调用了catch方法，参数error的值就是上面reject函数中的参数
  console.log(error);
});


// 输出 error 或 success

new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
}).then(function (value) {
    console.log("a / b = " + value);
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});

// a / b = 0
// End

异步函数

async function asyncFunc() {
    try {
        await new Promise(function (resolve, reject) {
            throw "Some error";  // 或者 reject("Some error")
        });
    } catch (err) {
        console.log(err);
        // 会输出 Some error
    }
}
asyncFunc();

async function asyncFunc() {
    let value = await new Promise(
        function (resolve, reject) {
            resolve("Return value");
        }
    );
    console.log(value);
}
asyncFunc();

回调函数、Promise、异步函数比较

• 回调函数

setTimeout(function () {
    console.log("First");
    setTimeout(function () {
        console.log("Second");
        setTimeout(function () {
            console.log("Third");
        }, 3000);
    }, 4000);
}, 1000);

• Promise

function print(delay, message) {
    return new Promise(function (resolve, reject) {   // 返回一个Promise对象
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

print(1000, "First").then(function () {   // 返回的Promise对象直接调用then方法
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

• 异步函数

function print(delay, message) {
    return new Promise(function (resolve, reject) {   // 返回一个Promise对象
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

async function asyncFunc() {
    await print(1000, "First");     // 等回调函数运行完之后再继续运行后面的代码
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

Ajax

variable=new XMLHttpRequest();


// IE6, IE5 浏览器只支持ActiveXObject对象
if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

// Henry Ford

// 
xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}

var xmlhttp;

function loadXMLDoc(url,cfunc)
{
	if (window.XMLHttpRequest)
	  {// IE7+, Firefox, Chrome, Opera, Safari 代码
		  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// IE6, IE5 代码
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=cfunc;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}

function myFunction()   
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()   // 回调函数，每次调用可以更改请求地址和任务处理方式
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
		txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

DOM

DOM 树结构：

DOM 操作：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
console.log(y)//在控制台我们可以看到原型proto为htmlcollection，是伪数组
//伪数组转为真数组方法1
console.log(Array.prototype.slice.call(y))//在控制台我们可以看到原型proto为Array(0)，是真数组

//伪数组转为真数组方法2
console.log(Array.prototype.slice.apply(y))//在控制台我们可以看到原型proto为Array(0)，是真数组

//伪数组转为真数组方法3
console.log(Array.prototype.slice.bind(y)())//在控制台我们可以看到原型proto为Array(0)，是真数组

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");   <!-- 创建一个p标签 -->
var node = document.createTextNode("这是一个新的段落。");   <!-- 创建p标签的内容 -->
para.appendChild(node);   <!-- 把内容添加到p标签内 -->
 
var element = document.getElementById("div1");   <!-- 定位HTML中已经存在的div标签 -->
element.appendChild(para);   <!-- 把新建的p标签添加到定位到的div标签内  的最后 -->
element.insertBefore(para, child);   <!-- 把新建的p标签添加到定位到的div标签内  的最前 -->

var child = document.getElementById("p1");
element.removeChild(child);   <!-- 移除div标签内的子元素 -->

element.replaceChild(para, child);   <!-- 替换div标签内的子元素 -->
</script>

../../../../node_modules/cacheable-lookup/source/index.js:10:2
Module not found: Can't resolve 'dns'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
../../../../node_modules/got/dist/source/core/index.js
../../../../node_modules/got/dist/source/create.js
../../../../node_modules/got/dist/source/index.js
../../../../node_modules/notion-client/build/index.js
./pages/index.js

  // const page = await api.getPage('baed2e48-30ad-46b0-aef9-a661e25194b7');
  // console.log('这是第一个文章!!!!!!!!!!!!!!!',page);

const api = new NotionAPI();
import Link from "next/link";
import { getDatabase } from "../lib/notion";
// import { getDatabase, getPage, getBlocks } from "../lib/notion";
// import { Fragment } from "react";
import { NotionAPI } from 'notion-client';
import styles from '../styles/Home.module.css';
import { Text } from '../components/text';
// import PostList from "../components/postlist";

export const databaseId = process.env.NEXT_PUBLIC_NOTION_DATABASE_ID

// export default function Home({ posts }) { 
//   console.log(posts)
//   return (  
//     // <Fragment>
//     //   {posts.map((post) => {
//     //     <PostList items={post} />
//     //   })}
//     // </Fragment>
//     <div>
//       <h1>what fuck</h1>
//     </div>
//   );
// }


export default function Home({ posts }) {
  // console.log(posts)
  return (  
    <ol className={styles.posts}>
      {
      posts.map((post) => (
        <li key={post.id}>
          <Link href={`/${post.id}`}>
            {/* Text 需要的参数是 title 这个列表 */}
             <Text text={post.properties.title.title.slice(-1)} />
             {/* {post.properties.title.title.slice(-1)[0]?.plain_text} */}
          </Link>
        </li>
      ))}
    </ol> 
  );
}

export const getStaticProps = async () => {
  const database = await getDatabase(databaseId);
  const database_ = database.slice(0,5);
  console.log('这是第一个铁汁!!!!!!!!!!!!!!!',database[0].properties);
  // .title.title.slice(-1)[0]?.plain_text
  // const page = await getPage('baed2e48-30ad-46b0-aef9-a661e25194b7');
  // console.log('这是第一个文章!!!!!!!!!!!!!!!',page);
  // const blocks = await getBlocks('baed2e48-30ad-46b0-aef9-a661e25194b7');
  // const blocks_ = await getBlocks(blocks.id);
  // console.log('这是第一个文章的块!!!!!!!!!!!!!!!',blocks_);

  // notion-client 库的使用方法
  // const page = await api.getPage('baed2e48-30ad-46b0-aef9-a661e25194b7');
  // console.log('这是第一个文章!!!!!!!!!!!!!!!',page);
  
  return {
    props: {
      posts: database_,
    },
		// Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every second
    revalidate: 5, // In seconds
  };
};