js学习笔记 - 技术栈

【【前端教程】JavaScript 2小时快速入门，全程无废话，入门到精通，前端js全套基础&实战教程，附源码+文档】 https://www.bilibili.com/video/BV1NHoKYGEKJ/?p=25\&share_source=copy_web\&vd_source=57a17b12df6a0335015b04435e23b8a7

1.变量与常量

Js分var和const也就是变量和常量，没有int float之类的东西

其次:

let ：声明的变量只在当前代码块（{} 内）有效。
var：声明的变量具有函数作用域或全局作用域，会 "穿透" 块级作用域。

东西类似于python，就是声明变量后不用再管后面咋变化

2.html调用

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 示例</title>
</head>
<body>
    <!-- HTML 部分 -->
    <h1>我的第一个JavaScript页面</h1>
    <button id="greetButton">点击打招呼</button>

    <!-- JavaScript 部分 -->
    <script>
        // 获取按钮元素
        const button = document.getElementById('greetButton');
        
        // 为按钮添加点击事件监听器
        button.addEventListener('click', function() {
            // 弹出问候对话框
            alert('Hello, JavaScript!');
        });
    </script>
</body>
</html>

还有外关联，但那个需要注意加载顺序，导入语法都好说，问ai，很简单

关于加载顺序，比如头文件会先加载，如果你的脚本绑定按钮，但那个时候body还没有把按钮创建，就会导致代码错误

3.数据类型

JavaScript 数据类型分类

JavaScript 数据类型分为基本数据类型和引用数据类型两大类，它们在存储方式、可变性和行为上有显著区别。

基本数据类型

基本数据类型是不可变的，直接存储在栈内存中，包括以下七种：

undefined 表示变量已声明但未赋值，或函数没有显式返回值。

javascript 复制代码

let uninitialized;
console.log(uninitialized); // undefined

null 表示空值，需要显式赋值。

javascript 复制代码

const emptyValue = null;

boolean 包含true和false两个值。

javascript 复制代码

const isValid = true;

number 表示整数和浮点数，采用IEEE 754双精度格式。

javascript 复制代码

const price = 99.99;
const hex = 0xFF; // 十六进制

string 表示文本数据，支持模板字符串插值。

javascript 复制代码

const message = `Current price: ${price}`;

symbol 创建唯一标识符，常用于对象属性键。

javascript 复制代码

const uid = Symbol('unique');

bigint 表示任意精度整数，后缀加n。

javascript 复制代码

const bigNumber = 9007199254740991n;

引用数据类型

引用数据类型存储在堆内存中，变量保存的是内存地址引用：

object 键值对集合，可包含各种数据类型。

javascript 复制代码

const user = {
  name: 'John',
  age: 30
};

array 有序列表，索引从0开始。

javascript 复制代码

const colors = ['red', 'green'];

function 可调用对象，支持闭包。

javascript 复制代码

function greet(name) {
  return `Hello ${name}`;
}

内置对象 包括Date、RegExp等特殊对象类型。

javascript 复制代码

const now = new Date();
const regex = /pattern/gi;

类型检测方法

typeof操作符 适合检测基本类型（null除外）。

javascript 复制代码

typeof 'text' // "string"

instanceof 检测对象原型链。

javascript 复制代码

[] instanceof Array // true

Object.prototype.toString 精确类型判断。

javascript 复制代码

Object.prototype.toString.call(new Date()) // "[object Date]"

Array.isArray 专门检测数组类型。

javascript 复制代码

Array.isArray([1,2]) // true

关键注意事项

null的typeof问题

javascript 复制代码

typeof null // "object"（语言设计遗留问题）

包装对象机制 基本类型调用方法时临时转换为对象。

javascript 复制代码

'text'.toUpperCase() // 临时创建String对象

引用比较特性 比较的是内存地址而非内容。

javascript 复制代码

{} === {} // false

类型转换规则 动态类型转换可能导致意外结果：

javascript 复制代码

1 + '1' // "11"（数字转字符串）

理解这些数据类型特性对于避免常见错误（如意外类型转换、引用共享等问题）至关重要，特别是在大型应用开发中。

4.非布尔值取反

在 JavaScript 中，非布尔值进行取反（!）操作时，会先将其转换为布尔类型，再取反。转换规则如下：

假值（false） ：0、''（空字符串）、null、undefined、NaN、false，取反后为 true。
真值（true） ：除上述假值外的所有值（如非零数字、非空字符串、对象、数组等），取反后为 false。

5.dom

简单说，就是通过标签对html的页面进行修改，有点keyvalue的感觉，遇到了就修改他，如果有多个，会存储成数组类型，然后还有一些增加的能力，比如div，可以用一些方法给里面加东西，总之明白就行，具体遇到问ai

然后，如果通过dom获取后，比如a1=divxxxx a1就等于div了，你修改a1就会对div进行修改，就简单说，div和a1的地址一样了，也可以对他的id，name等等进行修改

其次，dom可以对属性进行修改，也就是简单的增删改查

感觉目前来说，他就是把html项目看成了一块一块的，然后实现了你基本能想到的功能，定点查询，定点修改