JavaScript

[toc]

ECMAScript是 JavaScript 的标准规范。

主要记录下学习记录和javascript相较于C和cpp的差异和特性

跟着现代 JavaScript 教程一起学！

2.1 HelloWorld

我们可以直接在html里面嵌入js脚本，也可以引用相对路径的js文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE HTML>    <!-- HTML5 Document Type -->
<html>   <!-- html文件根元素 -->
<body>      

<!-- 直接在html界面嵌入js脚本 -->
  <script>
    alert("Randolfluo");    
  </script>

  <!-- 引入js脚本 -->  
  <script src = "Randolfluo.js"></script>

</body>
</html>

2.2 代码结构

  • javascript有自动分号插入，但是我们最好还是自己加上分号。一是为了使代码结构清晰，二是避免一些因自动分号插入而导致的隐蔽错误。

  • 注释与C和cpp一样

2.3 现代模式，”use strict”

​ 请——-将她写在脚本文件顶部

2.4 变量

  • 使用let声明变量，使用const声明常量
  • 区分大小写
  • “硬编码”类型（不会随代码执行改变）使用大写常量命名。具有一定可变性的常量使用小写命名

2.5 数据类型

通过 typeof 运算符查看存储在变量中的数据类型。

Number类型
  • infinity 代表数学概念中的 无穷大 ∞。是一个比任何数字都大的特殊值。
1
2
alert( 1 / 0 ); // Infinity
alert( Infinity ); // Infinity
  • NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果。
  • NaN是粘性的。任何对 NaN`的进一步数学运算都会返回 NaN。
1
2
alert( NaN + 1 ); // NaN
alert( 3 * NaN ); // NaN
BigInt类型

BigInt 类型是最近被添加到 JavaScript 语言中的，用于表示任意长度的整数。我们只需要 将n 附加到整数字段的末尾来创建BigInt类型

在 JavaScript 中，“number” 类型无法安全地表示大于 ( $2^{53}$ -1)或小于$(2^{53}-1)$的整数。

1
2
const bigInt = 1234567890123456789012345678901234567890n;
alert(bigInt);

我：为什么是2^53 - 1呢？

GLM4：这是因为在这个范围内的整数可以在64位浮点表示中精确地表示。IEEE 754双精度浮点数格式将64位分为三个部分：

  1. 符号位（sign）：1位
  2. 指数（exponent）：11位
  3. 尾数（fraction/mantissa）：52位

对于整数，尾数部分直接表示数字的值，而指数部分用于放大或缩小这个值。在JavaScript中，当指数为0时，尾数的52位可以直接表示一个整数。这52位可以表示的最大整数是2^53 - 1，因为第一位总是隐含的1，不在尾数中直接表示。

string类型

在 JavaScript 中，有三种包含字符串的方式。

  1. 双引号："Hello"。
  2. 单引号：'Hello'。
  3. 反引号：`Hello` ,有点像格式化字符串
1
2
3
4
5
let Username = "Randolfluo";
// 嵌入一个变量
alert( `Hello, ${Username}!` ); // Hello, John!
// 嵌入一个表达式
alert( `the result is ${1 + 2}` ); // the result is 3
others
  • null 用于未知的值 —— 只有一个 null 值的独立类型。
  • undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
  • symbol 用于唯一的标识符。
  • object 用于更复杂的数据结构。属于非原始数据类型。

2.6 交互：alert、prompt 和 confirm

alert

着用户不能与页面的其他部分进行交互，直到他们处理完窗口。

1
alert("Randolf luo 是大帅逼");
prompt

用于提示用户输入一些文本,第二个参数表示默认值。

1
2
let age = prompt('How old are you?', 100);
alert(`You are ${age} years old!`); // You are 100 years old!
confirm

提供question和确定和取消两个按钮的模态窗口。

1
2
3
let res = confirm("你是天才吗？");

alert(res);

这些方法都是模态的：它们暂停脚本的执行，并且不允许用户与该页面的其余部分进行交互，直到窗口被解除。

2.7 类型转换

  • 这里主要是注意在js中字符串"0"和空格字符串" "的bool值为true
  • 当无法转换为数字时，将会转化为NaN

2.8 基础运算符，数学运算

注意一下加号，当数字字符串与数字相加时，会转化为字符串：

1
2
3
4
5
6
alert(1 + '2')  //12
alert('2' + 1)      //21
alert(1 + '2' + 1)      //121
alert(1 + 1 + '2')      //22


加号也能以更简短的方式转化非数字，效果和 Number(...) 相同，但是更加简短。

1
2
3
// 转化非数字
alert( +true ); // 1
alert( +"" );   // 0

我们把上述功能加在一起

1
2
3
4
let x = "3"
let y = "3"
alert(x + y)		//33
alert(+x + +y)			//6

2.9 值的比较

  • 严格相等运算符 === 在进行比较时不会做任何的类型转换。
  • 在非严格相等 == 下，null 和 undefined 相等且各自不等于任何其他的值。
  • 在使用 > 或 < 进行比较时，需要注意变量可能为 null/undefined 的情况。

2.10 条件分支：if 和 ‘?’

  • 即if...else...语句和? :三目运算符。

2.11 逻辑运算符

对||进行了拓展——返回第一个真值。若都是假值，返回最后一个值。

对&&也进行了拓展——返回第一个假值。若都是真值，返回最后一个值。

1
2
3
4
5
6
let firstName = "";
let lastName = "";
let nickName = "SuperCoder";

alert( firstName || lastName || nickName || "Anonymous");    // SuperCoder
alert( firstName || lastName || "Anonymous");       // Anonymous
2.12 空值合并运算符 ‘??’

a ?? b 的结果是：

  • 如果 a 是已定义的，则结果为 a，

  • 如果 a 不是已定义的，则结果为 b。

1
2
3
4
let Username;
//在某处赋值

alert(`当前用户为${(Username?? "游客" )}`);

2.13 循环

  • 这里注意下类似goto语句的标签：break outer 向上寻找名为 outer 的标签并跳出当前循环。
  • 主要用于退出多重循环(ps：我试了下一重循环会报错)
1
2
3
4
5
6
7
8
9
10
outer:
while (true) {
    alert("In outer loop");
    while (true) {
        alert("In inner loop");
        break outer;
    }
}

alert("OK");

当跳转到outer标签时，会忽略下一循环。因此这里每个alert语句只被执行一次。

2.14 “switch” 语句

  • 只需注意下被比较的值必须是相同的类型才能进行匹配。

2.15 函数

1
2
3
4
5
6
7
8
9
10
function fun(arg1, arg2 = "Defalut", arg3)
{
    alert(arg1);    //undefined
    alert(arg2);    //Defalut
    alert(arg3);    //3
    return;
}

alert(`返回值为：${fun(undefined, undefined, 3)}`);     //返回值为：undefined

2.16 函数表达式

函数是值。它们可以在代码的任何地方被分配，复制或声明。

函数声明

函数声明在其被声明的代码块内的任何位置都是可见的。

1
2
3
4
5
declaration();		//因此我们可以在声明前调用函数
function declaration()
{
    alert("Declaration");
}

我们优先使用函数声明式。

函数表达式

函数表达式在代码执行到它时才会被创建。

1
2
3
4
5
expression()	//error
let expression = function()
{
    alert("Expression");
};      //注意加入分号,它不是函数语法的一部分。

当函数调用者所在作用域大于函数声明式所在作用域时，函数声明式将不可见。我们可以使用函数表达式代替。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let age = prompt("What is your age?", 18);

let welcome;

if (age < 18) {

  welcome = function() {
    alert("Hello!");
  };

} else {

  welcome = function() {
    alert("Greetings!");
  };

}

welcome(); // 现在可以了
回调函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function ASK(A,B)
{
    if(confirm("你喜欢A吗"))
        A();
    else
        B();
}
function A()
{
    alert("I love A");
}
function B()
{
    alert("I don't love A");
}

ASK(A,B);

2.17 箭头函数，基础知识

即返回值后置

1
2
3
4
5
6
7
let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();