JS 基础

Object

深拷贝

深拷贝是将一个对象从内存中完整的拷贝出来，新对象的修改不会影响原对象

1. JSON.parse(JSON.stringify(obj))

   • 简单快捷，适用于普通对象
   • 但不适用于包含函数、Map、Set、Symbol 或循环引用的对象

2. 手动递归

function deepCopy(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj; // 基本类型直接返回
  }

  let copy = Array.isArray(obj) ? [] : {}; // 根据类型创建副本

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]); // 递归拷贝嵌套对象
    }
  }

  return copy;
}

3. Lodash 库的 cloneDeep()

4. 浏览器原生 structuredClone()

   • 注意兼容性

函数

函数提升

创建函数两种语法：

函数声明

function xxx {
  // 函数会被提升到顶部
}

函数表达式

const xxx = () => {
  // 函数不会被提升
}

编译阶段，函数声明会被提升到顶部，函数表达式则不会

下边的写法就会报错：

<script setup>
watch(
  () => props.value,
  () => {
    getList() // ❌ 报错：getList is not defined
  },
  { immediate: true }
)

const getList = () => { console.log('ok') }
</script>

这时需要把函数表达式放在使用之前，或使用函数声明即可解决报错

闭包

每个运行的函数，都有一个内部（隐藏）的关联对象：词法环境（Lexical Environment）

词法环境由两部分构成：

• 环境记录：存储当前作用域的变量
• 对外部词法环境的引用：形成作用域链

闭包：函数可以记住外部变量并可以访问这些变量

• 函数引用了外部作用域的变量，即使外部函数执行结束，变量仍会存在

示例：

function makeCounter() {
  let count = 0;

  return function() {
    return count++;
  };
}

let counter = makeCounter();

alert( counter() ); // 0
alert( counter() ); // 1
alert( counter() ); // 2