js总结

const

const 是 ES6（ECMAScript 2015） 引入的变量声明关键字，用于声明不可重新赋值的常量。

不可重新赋值（不可变绑定），const 声明的变量不能通过 = 运算符重新赋值。

const a = 10;
a = 20; // 报错：Assignment to constant variable.

块级作用域（Block Scope）
const 声明的变量只在当前代码块 {} 内有效。

if (true) {
  const b = 5;
}
console.log(b); // 报错：b is not defined

必须初始化
使用 const 声明变量时，必须立即赋值（初始化），否则会报错。

const c; // 报错：Missing initializer in const declaration

不可重复声明
在同一作用域中，不能重复声明同一个 const 变量。

const d = 1;
const d = 2; // 报错：Identifier 'd' has already been declared

虽然 const 声明的基本类型值不可变，但如果它是一个对象或数组，其内容是可以修改的，因为 const 保证的是引用地址不变，而非对象本身的不可变性。

const person = { name: 'Alice' };
person.name = 'Bob'; // ✅ 合法
person = { name: 'Charlie' }; // ❌ 报错

==与===对比

=== 是严格相等运算符，比较两个值是否完全相等，包括值的内容和类型

== 是宽松相等运算符，在比较前进行类型转换

100 === 100         // true：相同数值
'100' === '100'     // true：相同字符串
true === true       // true：相同布尔值

100 === '100'       // false：数值 vs 字符串（类型不同）
null === undefined  // false：类型不同
[] === []           // false：两个不同的数组对象（引用不同）

100 == '100'        // true：字符串被转换为数字后再比较
null == undefined   // true
100 === '100'       // false
null === undefined  // false

箭头函数

箭头函数是 ES6（ECMAScript 2015） 中引入的一种更简洁的函数定义方式

// 普通函数表达式
const add = function(a, b) {
  return a + b;
};

// 箭头函数写法
const add = (a, b) => a + b;

特性一：没有自己的 this
这是箭头函数最重要的特性之一：

它不会创建自己的 this 上下文。
在箭头函数内部使用的 this 是从外层作用域继承来的（词法作用域绑定）。

const obj = {
  value: 42,
  regularFunc: function() {
    console.log(this.value); // 正常输出 42
  },
  arrowFunc: () => {
    console.log(this.value); // 输出 undefined，因为 this 来自外层（window/global）
  }
};

在 React 组件中使用箭头函数时，这一特性非常有用，因为它避免了手动绑定 this 的问题。

特性二：不能作为构造函数
箭头函数不能使用 new 调用，即：

const Foo = () => {};
const foo = new Foo(); // ❌ 报错：Foo is not a constructor

特性三：没有 arguments 对象
箭头函数内部不能使用 arguments，但可以用 rest 参数代替：

arguments 对象和 rest 参数

在 JavaScript 中，arguments 对象和 rest 参数 都用于处理函数调用时传入的参数，但它们有显著的区别。

arguments 是一个类数组对象（array-like object），存在于所有非箭头函数中。
它包含了函数被调用时传入的所有参数。

function foo() {
  console.log(arguments);
}

foo(1, 2, 3); // 输出：{ '0': 1, '1': 2, '2': 3 }

Rest 参数（...args），使用 ... 语法，将多个参数收集为一个真正的数组。更现代、更推荐的方式，替代 arguments。

function bar(...args) {
  console.log(args);
}

bar(1, 2, 3); // 输出：[1, 2, 3]

arguments 仅适用于旧版代码或某些特殊场景（如兼容性需求）。

js常见事件

1. 鼠标事件（Mouse Events）

事件名	触发条件
click	鼠标点击元素
dblclick	鼠标双击元素
mousedown	鼠标按钮按下
mouseup	鼠标按钮释放
mousemove	鼠标移动
mouseover	鼠标移入元素
mouseout	鼠标移出元素

---

2. 键盘事件（Keyboard Events）

事件名	触发条件
keydown	按下任意键
keyup	松开按键
keypress	按下字符键（已废弃，建议用 keydown）

---

3. 表单事件（Form Events）

事件名	触发条件
submit	表单提交
change	表单值发生改变并失去焦点
input	表单输入内容实时变化
focus	元素获得焦点
blur	元素失去焦点

---

4. 窗口/文档事件（Window/Document Events）

事件名	触发条件
load	页面加载完成
DOMContentLoaded	HTML 文档加载完成，DOM 可访问
resize	窗口大小调整
scroll	页面滚动
beforeunload	页面即将关闭或刷新

---

5. 触控/移动端事件（Touch Events）

事件名	触发条件
touchstart	手指触摸屏幕
touchmove	手指在屏幕上滑动
touchend	手指离开屏幕

---

6. 自定义事件（Custom Events）

你可以使用 CustomEvent 创建自己的事件：

const event = new CustomEvent('myEvent', { detail: { data: 'Hello' } });
window.dispatchEvent(event);