前端面试知识点总结（一）git拉取同事提交的代码时，自己本地写了一半的代码，提交不成功怎么解决？这是由于远程分支上的版

git拉取同事提交的代码时，自己本地写了一半的代码，提交不成功怎么解决？

1. 分析问题根源

首先通过git status查看具体哪些文件存在冲突
确认是由于本地未提交的修改还是已提交的历史记录导致的冲突

2. 保护当前工作进度

使用git stash将未完成的修改暂存到栈中。或者用git add . 和 git commit -m 'xx' 来创建临时提交，保护本地写了一半的代码。

3.同步远程更新

远程分支上的版本和本地的版本没对上，提交代码就会报错

这时可以用git pull origin master拉取远程仓库最新版本的代码

4.恢复本地工作

git stash pop 取出暂存的修改并尝试自动合并

或 git reset HEAD~1 撤销临时提交后继续开发

5. 可视化解决冲突

同事写的代码和我写的代码可能是会有冲突的，使用VSCode可以自动识别代码冲突，询问我保留哪份代码（是保留本地更改还是传入的更改），通过这种方式手动解决冲突，这样就可以成功提交了

判断一个变量是不是数组

1. Array.isArray()

const arr = [1, 2, 3];
console.log(Array.isArray(arr)); //  true

2. instanceof

const arr = [1, 2, 3];
console.log(arr instanceof Array); //  true

3. Object.prototype.toString.call(arr)

通过调用对象身上的 toString 方法，返回 [object Array]则代表是数组。使用 call 的目的是将 this 显式绑定到我们要检测的目标对象（如数组）上

const arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr) === '[object Array]'); //  true

4.通过 `constructor` 属性

检查变量的 constructor 是否指向 Array，但可被篡改，可靠性低。

const arr = [1, 2, 3];
console.log(arr.constructor === Array); //  true

//  易被修改示例：
arr.constructor = Object;
console.log(arr.constructor === Array); // false

如何遍历对象所有的key和value

1. 使用 `for...in` 循环

遍历对象及其原型链上的所有 可枚举属性（包括继承的属性）。通常需要配合 hasOwnProperty() 过滤掉继承属性。

const obj = { a: 1, b: 2, c: 3 };

for (const key in obj) {
  if (obj.hasOwnProperty(key)) { // 过滤继承属性
    console.log(`Key: ${key}, Value: ${obj[key]}`);
  }
}

2. 使用 `Object.keys()`

获取对象自身的所有 可枚举属性 的键名数组，再通过 forEach 遍历：

const obj = { a: 1, b: 2, c: 3 };

Object.keys(obj).forEach(key => {
  console.log(`Key: ${key}, Value: ${obj[key]}`);
});

3. 使用 `Object.values()`

直接获取对象自身的所有 可枚举属性 的值数组：

const obj = { a: 1, b: 2, c: 3 };

Object.values(obj).forEach(value => {
  console.log(`Value: ${value}`);
});

4. 使用 `Object.entries()`

获取对象自身的所有 可枚举属性 的键值对数组（推荐，直接获取键值对）：

const obj = { a: 1, b: 2, c: 3 };

Object.entries(obj).forEach(([key, value]) => {
  console.log(`Key: ${key}, Value: ${value}`);
});

5. 使用 `for...of` + `Object.entries()`

结合 for...of 语法更简洁地遍历键值对：

const obj = { a: 1, b: 2, c: 3 };

for (const [key, value] of Object.entries(obj)) {
  console.log(`Key: ${key}, Value: ${value}`);
}

6. 遍历所有属性（包括不可枚举属性）

如果需要遍历对象自身的所有属性（包括不可枚举的），使用 Object.getOwnPropertyNames()：

const obj = Object.create({}, {
  a: { value: 1, enumerable: true },  // 可枚举
  b: { value: 2, enumerable: false } // 不可枚举
});

Object.getOwnPropertyNames(obj).forEach(key => {
  console.log(`Key: ${key}, Value: ${obj[key]}`);
});

方法	包含继承属性	包含不可枚举属性	返回值类型
`for...in`	✅ 是	❌ 否	遍历键名
`Object.keys()`	❌ 否	❌ 否	键名数组
`Object.values()`	❌ 否	❌ 否	值数组
`Object.entries()`	❌ 否	❌ 否	键值对数组
`Object.getOwnPropertyNames()`	❌ 否	✅ 是	键名数组

computed 和 watch 的区别

computed 是根据现有数据生成新数据，watch监听响应式数据的变化，并在变化时执行回调函数。
computed计算属性是惰性的，只有在依赖的响应式数据变化时才会重新计算，会缓存计算结果， watch每次数据变化时立即执行回调，无缓存
语法区别：computed有返回值，watch无返回值，执行回调
computed计算派生数据，避免不必要的重复计算，watch 可以用来执行异步操作、处理副作用操作，如 API 请求

watch 和 watchEffect 的区别

1. 依赖追踪方式

watch ：需要显式声明依赖，监听指定的数据源；可以监听多个数据源或进行深度监听。

import { watch, reactive } from 'vue'
const state = reactive({
  count: 0,
})
watch(
  () => state.count, // 显式声明监听的依赖
  (newCount, oldCount) => {
    console.log(`新值 ${newCount} 老值 ${oldCount}`)
  }
)

watchEffect ：会自动追踪作用域内所有的响应式依赖，不需要显式声明依赖。

import { watchEffect, reactive } from 'vue'
const state = reactive({
  count: 0,
})
watchEffect(() => {
  console.log(`Count 变化了: ${state.count}`) // 自动追踪 `state.count`
})

2. 执行时机

watch ：在监听的响应式数据变化后立即执行。
watchEffect ：在组件挂载时执行一次副作用，并在依赖发生变化时再次执行。

3.应用场景

watch：适用于API 请求、保存操作等。适合需要 访问新值和旧值 进行比较的场景。
watchEffect:不需要访问旧值，适用于 自动追踪多个响应式依赖 的副作用，如渲染、自动保存等。

前端面试知识点总结（一）