XMLN

Appearance

简介 ​

JavaScript（简称JS）是一本轻量级脚本语言，适用于 HTML 和 WEB 相关，大部分运行在现代游览其中。自从 Node.js 问世后，也可以进行服务端的开发

ES：全称 ECMAScript。它是 JS 的实现标准，在任何载体上只要实现了 ECMAScript 的标准，那么就可以在该载体上运行 JS

在编写 JS 的时候，如果是写在 HTML 中，则 JS 必须写在 <script> 标签之间；还有一种是直接写到后缀为 .js 文件中

html
<script>
    // 写在 HTML 中的 JS
	alert('Hello World!')
</script>

分隔符 ​

分割符：;

在 JS 中默认一条指令占用一行

js
alert('指令一')
alert('指令二')
alert('指令三')

在上述写法中末尾的分割符可加可不加。但是如果是吧所有的指令写道一行中，那么就需要加入分割符来保证指令的有效性

js
alert('指令一');alert('指令二');alert('指令三');

注释 ​

JS 有两种注释，单行注释和多行注释

js
// 我是单行注释

/*
我是
多行注释
*/

标识符 ​

标识符用来命令变量和类型等程序实体。通常是由字母（A ~ Z | a ~ z）、数字（0 ~ 9）、下划线（_）组成的一个或多个字符组成的序列。

注意：对于以数字为开头或者 JS 语言关键字为标识符的为无效标识符

条件判断 ​

if 条件 ​

示例：if (条件) {操作}

在 if 判断中，会根据括号中的条件来决策是否应该让操作被执行，只有当总条件为 true 的时候才会触发操作执行

if 有几种书写方式

js
// 纯 if
if (条件) {
    操作
}

// if...else
if (条件) {
    为true时执行的代码
} else {
    为false时执行的代码
}

// if...else if 
if (条件一) {
    条件一为true时执行的代码
} else if (条件二) {
    条件二为true时执行的代码
}

// if...else if...else
if (条件一) {
    条件一为true时执行的代码
} else if (条件二) {
    条件二为true时执行的代码
} else {
    条件一和条件二都为false时执行的代码
}

如果有多个判断逻辑的话，程序会从上到下一次匹配。如果在某一条匹配成功了，那么执行完操作后会跳出判断不在进行后续匹配

switch 条件 ​

如果一个状态存在多个匹配项的话，可以使用 switch

js
switch (表达式) {
    case 值1:
        条件等于值1时执行的代码
        break;
    case 值2:
        条件等于值2时执行的代码
        break;
    default:
        上述条件都不满足时执行的代码
}

每一个 case 块的末尾必须跟上 break。否则在执行完某个 case 块后没有 break 那么它会继续向下执行，直至遇到 break

default 块不是必须项，可以不写

case 块中可以有多个常量表达式，甚至于可以调用方法（方法返回值必须是确定的值 / 布尔结果）

js
switch (表达式) {
    case 值1:
        条件等于值1时执行的代码
        break;
    case 值2, 值3:
        条件等于值1时执行的代码
        break;
    case fun(值4):
        条件等于值2时执行的代码
        break;
}

function fun(值) {
    逻辑运算
    return 值
}

三目运算符 ​

三目：xx ? xx : xx

三目仅在赋值的时候使用。也就是说，使用三目必须得有一个接收方

js
let [变量] = [表达式一] ? [表达式二] : [表达式三]

当表达式一为 true 的时候则会把表达式二的结果赋值给变量，否则就赋值表达式三的结果

多级 ​

三目是可以多段执行套娃的

js
let [变量] = [表达式一] ? [表达式二] : [表达式三] ? [表达式四] : [表达式五] ? [表达式六] : [表达式七]

流程为：

  1. 判断表达式一是否为真，如果是的话赋值表达式二的结果，否则执行表达式一的 : 后面的表达式
  2. 判断表达式三是否为真，如果是的话赋值表达式四的结果，否则执行表达式三的 : 后面的表达式
  3. 判断表达式五是否为真，如果是的话赋值表达式六的结果，否则赋值表达式七的结果

循环 ​

循环是 重复执行一段代码 的核心语法，主要有 for（已知循环次数）、while（未知循环次数）两大类

for 循环 ​

示例：for (初始化; 条件; 更新) {操作}

在 for 循环中，会依次执行一下流程

  1. 初始化
  2. 条件判断
  3. 执行操作
  4. 更新变量

只有当条件为 true 时，才会触发操作执行；条件为 false 时终止循环

for 有几种书写方式

js
// 纯 for（完整写法，最常用）
for (初始化表达式; 条件表达式; 更新表达式) {
    操作
}

// 省略表达式（分号不能省，需手动控制循环）
for (;;) {
    // 无限循环，需配合 break 终止
    if (终止条件) break;
    操作
}

// 反向 for（从后往前遍历）
for (初始化表达式; 条件表达式; 更新表达式--) {
    操作
}

for...[in/of] ​

for...in 和 for...of 是 ES5/ES6 分别新增的遍历循环，前者聚焦属性 / 下标（专为对象设计），后者聚焦值（专为属性设计）

js
// for...in：遍历「属性名/下标」
for (let 变量名 in 目标对象/数组) {
    // 变量名 = 对象属性名 / 数组下标（字符串类型）
}

// for...of：遍历「可迭代对象的值」
for (let 变量名 of 可迭代对象) {
    // 变量名 = 数组元素 / 字符串字符 / Map/Set 值
}

while 循环 ​

适用于 根据条件重复执行，且无法提前确定循环次数

js
// 基础 while
while (条件表达式) {
    条件为true时执行的代码
}

每一轮 while 循环都会先判断条件：条件为 true 则执行操作，执行完后重新判断；条件为 false 则终止循环

js
// do-while（变种）
do {
    至少执行一次的代码
} while (条件表达式);

do-while 是先执行后判断，无论条件是否满足，循环体至少执行 1 次

循环控制 ​

break 会直接终止整个循环，无论后续是否还有满足条件的轮次

continue 仅跳过当前轮次的剩余代码，循环会继续判断下一轮条件

函数 ​

函数是 JS 中封装可复用代码块的核心语法，用于实现特定功能、减少代码冗余；它既是可执行的代码块，也是可被实例化的构造函数（在 JavaScript 中，所有函数默认都具备构造函数的能力...箭头函数除外）

定义方式 ​

js
// 函数声明（最常用，支持预解析）
function 函数名(参数1, 参数2, ...) {
    // 函数体（执行逻辑）
    return 返回值; // 可选，无return则返回undefined
}

// 函数表达式（匿名函数赋值，不支持预解析）
const 函数名 = function(参数1, 参数2, ...) {
    // 函数体
    return 返回值;
};

// 箭头函数（ES6新增，简洁写法，无this/arguments）
const 函数名 = (参数1, 参数2, ...) => {
    // 函数体
    return 返回值;
};
// 简化版：单参数省略()，单行返回省略{}和return
const 函数名 = 参数 => 返回值;

箭头函数 ​

箭头函数对比普通函数有三个区别

  1. 无自身this：this指向外层作用域的this（而非调用者）

    js
    this.name = '张三'
const obj = {
    name: '李四',
    // 普通函数，this指向调用它的对象
    fun1: function () {
        console.log(this.name)
    },
    // 箭头函数，this指向外部作用域
    fun2: () => {
        console.log(this.name)
    }
}
obj.fun1() // 李四
obj.fun2() // 张三

  2. 无arguments对象：需用剩余参数...替代

  3. 不能作为构造函数：不能用new调用

参数 ​

形参：函数定义时括号内的参数（相当于 变量占位符），函数内操作的就是形参

实参：外部调用时实际传递的参数，给形参赋值

JS 允许参数个数不匹配：实参少于形参则形参为undefined，实参多于形参则多余参数可通过arguments获取

默认参数 ​

js
// 默认参数（ES6，形参默认值）
function sayHi(name = '游客') {
    console.log(`你好，${name}！`);
}
sayHi(); // 输出：你好，游客！（未传参用默认值）
sayHi('张三'); // 输出：你好，张三！（传参覆盖默认值）

可变参数 ​

js
// 剩余参数（ES6，接收多传的实参，数组格式）
function sum(...nums) {
    return nums.reduce((total, num) => total + num, 0);
}
console.log(sum(1,2,3)); // 输出：6
console.log(sum(1,2,3,4)); // 输出：10

arguments ​

js
// arguments（伪数组，接收所有实参，兼容老版本）
function fn() {
    console.log(arguments); // 输出：[1,2,3]（伪数组）
    console.log(arguments[0]); // 输出：1
}
fn(1,2,3);

调用 ​

在JS中是存在 Function 的类型的。也就是说，函数是可以被当成参数一样传递的

在调用函数的时候格式一定为 函数名()。如果仅仅写函数名没有任何意义（除非有一个变量接收），因为仅写函数名不会让函数执行，而是会获得函数的对象

函数变量作用域 ​

全局作用域：函数外声明的变量 / 函数，整个脚本可访问

局部作用域：函数内声明的变量，仅函数内可访问

函数内优先访问自身局部变量，找不到则向上找全局变量

new 对象 ​

...