一个元素的css属性box-sizing设置为border-box时，它的width指的是?

当 CSS 的box-sizing属性设置为border-box时，元素的width和height会包含边框（border）、内边距（padding）和内容区的宽度 / 高度，不会把外边距（margin）纳入计算范围；如果是默认的content-box，则width仅代表内容区的宽度。

延申

box-sizing决定了元素的总尺寸计算方式，它影响了元素的布局和定位方式。
content-box（默认值）： width和height仅包含内容区，不包含边框和内边距。
border-box： width和height包括内容区、边框和内边距，所以在设定width和height时，元素的实际显示尺寸不会受到内边距和边框的影响。

Promise 的几种状态

Promise 有且仅有三种状态，且状态一旦改变就无法逆转：
pending（进行中）：初始状态，既不是成功也不是失败。
fulfilled（已成功）：异步操作执行成功的状态。
rejected（已失败）：异步操作执行失败的状态。
而error并不是 Promise 的官方状态，它只是异步操作失败时可能抛出的错误对象 / 信息，并非状态本身。

async/await 核心用法

async 函数返回一个 Promise： async 关键字修饰的函数，其返回值会被自动包装成 Promise 对象；如果函数内部直接返回一个普通值，这个值会成为该 Promise 成功状态的结果。
await 后面可以跟普通值： await 后面不仅可以跟 Promise 对象，也可以跟数字、字符串等普通值，此时会直接返回这个普通值，不会进行异步等待。
await 必须写在 async 函数中： 如果在非 async 函数中使用 await，JavaScript 会直接抛出语法错误，这是语法层面的强制要求。
await 不会阻塞整个线程： await 只会阻塞当前的 async 函数执行流程，并不会阻塞 JavaScript 的主线程，因为 JavaScript 是单线程且基于事件循环的，await 等待期间主线程可以处理其他任务。

localStorage通过以下哪几个规则来判断是否同源

同源策略的判断标准要求 协议、域名、端口、子域名 都必须一致，才能被认为是同源。具体来说：
协议一样：例如，http 和 https 被视为不同协议。
域名或 IP 一样：如果域名不同（如 example.com 和 example.net），或 IP 地址不同（即使端口和协议相同），它们也不属于同源。
端口一样：即便协议和域名相同，不同的端口号也会导致不同源（如 example.com:80 和 example.com:8080）。
子域名一样：如果子域名不同，虽然根域名相同（如 a.example.com 和 b.example.com），也会判定为不同源。

以下几个回调函数，哪些会进入 JavaScript 事件循环的微任务队列。

promise.then(): 这个回调会进入微任务队列（microtask queue），它会在当前执行上下文结束后执行。
new Promise(): 创建一个新的 Promise 对象本身不会将回调加入任务队列，但当 Promise 被解决（resolved）或拒绝（rejected）时，它会将 then() 或 catch() 的回调函数加入微任务队列。
xhr 的 readyStateChange 事件回调: 这个回调会被放入任务队列（task queue），作为事件回调的一部分。
setTimeout(): 这个回调会被放入任务队列中，在指定的超时之后执行。

事件委托的核心逻辑

事件委托的核心逻辑是借助事件冒泡的机制，子元素触发的事件会向上冒泡到其父元素（或更上层的祖先元素），因此可以把原本要绑定在子元素上的事件，统一绑定到 父元素（或祖先元素） 上，由父元素来处理子元素的事件触发。

实现元素相对父元素水平且垂直居中，至少有以下两种常用方法

1. 使用 Flexbox ```css .parent { display: flex; justify-content: center; / 水平居中 / align-items: center; / 垂直居中 / height: 100vh; / 父元素需要设置高度 / }

.child { width: 200px; height: 100px; } ```

2. 使用绝对定位 ```css .parent { position: relative; height: 100vh; / 父元素需要设置高度 / }

.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); / 使用 transform 调整元素位置 / width: 200px; height: 100px; } ```

localStorage、sessionStorage 和 Cookie 的区别

总结：

• localStorage：用于长期存储数据，数据不会过期，适合存储不需要频繁传递给服务器的数据。
• sessionStorage：用于存储会话数据，数据会在浏览器窗口或标签页关闭时清除，适合临时数据存储。
• Cookie：用于在客户端和服务器之间存储少量数据，支持设置过期时间，但受到存储大小限制（最大4KB），每次请求时都会自动随请求发送。

浏览器缓存分为几种类型

详见： 浏览器-浏览器缓存机制

实现数组去重函数，返回不重复的数组

function UniArr(arr){
    return[...new Set(arr)]
}

查找树节点的findNode函数

const treeData = [
  {
    "key": "1",
    "children": [
      {
        "key": "1-1",
        "children": [
          {
            "key": "1-1-1",
            "children": []
          }
        ]
      }
    ]
  },
  {
    "key": "2",
    "children": []
  }
];

// 查找树节点函数
function findNode(tree, targetKey) {
    for(const node of tree){
        if(node.key === targetKey) return node;
        if(node.children && node.children.length > 0){
            const result = findNode(node.children, targetKey)
            if(result){
                return result // 这里只会返回找到的node， 如果找不到返回的null不会被接受，而会进入顶层的null返回
            }
        }
    }
    return null;
}

// 测试用例
console.log(findNode(treeData, "1-1-1")); // 输出：{ key: '1-1-1', children: [] }
console.log(findNode(treeData, "3")); // 输出：null
console.log(findNode(treeData, "2")); // 输出：{ key: '2', children: [] }

实现一个函数blobToDataURL,可以把文件转成dataURL

/**
 * 将 Blob/File 对象转为 DataURL
 * @param {Blob|File} blob - 要转换的 Blob 或 File 对象
 * @returns {Promise<string>} 返回包含 DataURL 的 Promise
 */
function blobToDataURL(blob) {
  return new Promise((resolve, reject) => {
    // 创建 FileReader 实例
    const reader = new FileReader();
    
    // 读取成功时，返回 DataURL
    reader.onload = () => resolve(reader.result);
    
    // 读取失败时，抛出错误
    reader.onerror = () => reject(reader.error);
    
    // 以 DataURL 格式读取 Blob/File
    reader.readAsDataURL(blob);
  });
}