![[发怒]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_12.0f24f23.png)
吴工
SDE
|
微软（中国）
Get the MCSE certificate, and have the ability to successfully design, implement and manage business
获得徽章 0
赞了这篇文章
![[愉快]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_21.c408154.png)
问题:数组中实用的高阶函数有哪些？
答:高阶函数，就是函数中可以传入另一个函数作为参数的函数。
1.forEach:forEach是对数组每个数据进行遍历，与for的差别是，for可以将遍历的数组的每一项修改，而forEach并不会改变原数组（如果是数组对象值的修改，forEach也修改到对象的值）
2.filter:filter筛选出满足条件的数组，满足条件 === 返回写的条件为true的每一项组成一个新的数组，并不会改变原数组简单的使用 - 筛选出数组中number大于8的数字
3.map:map遍历，返回处理过的数组的每一项组成一个新的数组(需要数组的每一项的时候一般都会用到map)，通常应用于对数组的对象进行重新组合，或者需要向数组添加新数据，比如在react中使用map进行遍历
4.sort:sort是将数组进行排序，主要是根据传入的函数进行排序，最简单的就是数字排序
5.some:some方法会检测，返回布尔值，不改变原数组。在执行中，有一个满足就返回true，不再继续执行
6.every:与some不同，它会去检测数组中的每一项是否满足条件，所有都满足才会返回true
7.reduce:会对数组中的元素进行回调函数中的方法，经常都用于累加
8.find:找出数组中满足条件项，找到一项直接返回满足条件的项，不在继续进行往下寻找
答:高阶函数，就是函数中可以传入另一个函数作为参数的函数。
1.forEach:forEach是对数组每个数据进行遍历，与for的差别是，for可以将遍历的数组的每一项修改，而forEach并不会改变原数组（如果是数组对象值的修改，forEach也修改到对象的值）
2.filter:filter筛选出满足条件的数组，满足条件 === 返回写的条件为true的每一项组成一个新的数组，并不会改变原数组简单的使用 - 筛选出数组中number大于8的数字
3.map:map遍历，返回处理过的数组的每一项组成一个新的数组(需要数组的每一项的时候一般都会用到map)，通常应用于对数组的对象进行重新组合，或者需要向数组添加新数据，比如在react中使用map进行遍历
4.sort:sort是将数组进行排序，主要是根据传入的函数进行排序，最简单的就是数字排序
5.some:some方法会检测，返回布尔值，不改变原数组。在执行中，有一个满足就返回true，不再继续执行
6.every:与some不同，它会去检测数组中的每一项是否满足条件，所有都满足才会返回true
7.reduce:会对数组中的元素进行回调函数中的方法，经常都用于累加
8.find:找出数组中满足条件项，找到一项直接返回满足条件的项，不在继续进行往下寻找
展开
评论
点赞
问题:宏任务和微任务是什么？
答:试想一下，如果js的任务都是同步的，那么遇到定时器、网络请求等这类型需要延时执行的任务会发生什么？
页面可能会瘫痪，需要暂停下来等待这些需要很长时间才能执行完毕的代码
所以，又引入了异步任务。
● 同步任务：同步任务不需要进行等待可立即看到执行结果，比如console
● 异步任务：异步任务需要等待一定的时候才能看到结果，比如setTimeout、网络请求
异步任务，又可以细分为宏任务和微任务
● 先执行同步代码
● 遇到宏任务，放入队列
● 遇到微任务，放入微任务队列
● 执行栈为空
○ 将微任务入栈执行
● 所有的微任务完成之后，取出宏任务队列来执行
宏任务和微任务相比，宏任务先执行
答:试想一下，如果js的任务都是同步的，那么遇到定时器、网络请求等这类型需要延时执行的任务会发生什么？
页面可能会瘫痪，需要暂停下来等待这些需要很长时间才能执行完毕的代码
所以，又引入了异步任务。
● 同步任务：同步任务不需要进行等待可立即看到执行结果，比如console
● 异步任务：异步任务需要等待一定的时候才能看到结果，比如setTimeout、网络请求
异步任务，又可以细分为宏任务和微任务
● 先执行同步代码
● 遇到宏任务，放入队列
● 遇到微任务，放入微任务队列
● 执行栈为空
○ 将微任务入栈执行
● 所有的微任务完成之后，取出宏任务队列来执行
宏任务和微任务相比，宏任务先执行
展开
评论
3
问题:对路由的守卫的认识及其分类？
答:路由守卫分为三种：全局导航守卫，路由守卫，组件内导航守卫。路由跳转本身是一个比较复杂的过程，但是可以通过导航守卫把这个过程进行细化，可以在每个细化的过程（钩子函数）中进行相应的操作。
路由导航守卫：导航守卫就是在路由跳转前后的一些钩子函数
路由拦截：在路由跳转到指定的路有前，可以手动让其跳转到其他的路由界面，并且也可以让跳转停止掉。
1.全局守卫：
全局前置守卫：beforeEach 会多次触发，
全局解析守卫：beforeResolve 解析守卫
全局后置守卫：afterEach 把组件实例对象传入到组件beforeRouteEnter守卫的next回调中
2.路由守卫：
beforeEnter 路由内的独享守卫
3.组件内的守卫：
beforeRouteEnter 进入组件之前触发，只在进入组件时触发一次
beforeRouterUpdate 组件更新之前触发（动态参数变化查询字符串变化）进入组件后参数变化可多次触发
beforeRouterLeave 离开路由组件之前触发 只在离开组件时触发一次
答:路由守卫分为三种：全局导航守卫，路由守卫，组件内导航守卫。路由跳转本身是一个比较复杂的过程，但是可以通过导航守卫把这个过程进行细化，可以在每个细化的过程（钩子函数）中进行相应的操作。
路由导航守卫：导航守卫就是在路由跳转前后的一些钩子函数
路由拦截：在路由跳转到指定的路有前，可以手动让其跳转到其他的路由界面，并且也可以让跳转停止掉。
1.全局守卫：
全局前置守卫：beforeEach 会多次触发，
全局解析守卫：beforeResolve 解析守卫
全局后置守卫：afterEach 把组件实例对象传入到组件beforeRouteEnter守卫的next回调中
2.路由守卫：
beforeEnter 路由内的独享守卫
3.组件内的守卫：
beforeRouteEnter 进入组件之前触发，只在进入组件时触发一次
beforeRouterUpdate 组件更新之前触发（动态参数变化查询字符串变化）进入组件后参数变化可多次触发
beforeRouterLeave 离开路由组件之前触发 只在离开组件时触发一次
展开
评论
点赞
问题:vue如何实现性能优化？
答:1.代码模块化,常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。
2.Vue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度。
3.打包优化,修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。
4.减少图片使用，可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。
5.按需引入,咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积
6.使用cdn的方式外部加载一些资源,比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块
答:1.代码模块化,常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。
2.Vue路由设置成懒加载，当首屏渲染的时候，能够加快渲染速度。
3.打包优化,修改vue.config.js中的配置项，把productionSourceMap设置为false，不然最终打包过后会生成一些map文件，如果不关掉，生成环境是可以通过map去查看源码的，并且可以开启gzip压缩，使打包过后体积变小。
4.减少图片使用，可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。
5.按需引入,咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积
6.使用cdn的方式外部加载一些资源,比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块
展开
1
2
问题:mvvm的优势？
答:MVVM（Model-View-ViewModel）是一种软件架构模式，常用于构建用户界面（UI）的应用程序。MVVM的主要优势如下：
1.分离关注点：MVVM通过将应用程序的不同组成部分分离开来，使开发人员可以更好地管理代码。Model（模型）表示应用程序的数据和业务逻辑，View（视图）负责呈现用户界面，而ViewModel（视图模型）则充当View和Model之间的中介，管理View的状态和数据绑定。这种分离有助于代码的可维护性和可测试性。
2.双向数据绑定：MVVM提供了双向数据绑定的机制，使得View和ViewModel之间的数据同步变得简单。当ViewModel中的数据发生变化时，View会自动更新，反之亦然。这种数据绑定可以减少手动编写代码的量，并简化了开发过程。
3.可重用性和可扩展性：MVVM鼓励将应用程序的逻辑和UI组件进行解耦，使其能够更好地重用和扩展。ViewModel可以独立于具体的View实现，并且可以在不同的界面中重复使用。这种模块化的设计有助于提高开发效率，并促进代码的可重用性和可扩展性。
4.清晰的代码结构：MVVM的结构清晰，使得代码更易于理解和维护。ViewModel作为View和Model之间的连接器，使得代码的逻辑更加明确和集中。这种清晰的结构有助于团队合作和项目的可维护性。
5.支持并行开发：MVVM的结构使得UI开发和业务逻辑开发可以并行进行。UI设计人员可以专注于View的外观和交互，而开发人员可以独立地开发ViewModel和Model的逻辑。这种并行开发可以提高团队的工作效率。
答:MVVM（Model-View-ViewModel）是一种软件架构模式，常用于构建用户界面（UI）的应用程序。MVVM的主要优势如下：
1.分离关注点：MVVM通过将应用程序的不同组成部分分离开来，使开发人员可以更好地管理代码。Model（模型）表示应用程序的数据和业务逻辑，View（视图）负责呈现用户界面，而ViewModel（视图模型）则充当View和Model之间的中介，管理View的状态和数据绑定。这种分离有助于代码的可维护性和可测试性。
2.双向数据绑定：MVVM提供了双向数据绑定的机制，使得View和ViewModel之间的数据同步变得简单。当ViewModel中的数据发生变化时，View会自动更新，反之亦然。这种数据绑定可以减少手动编写代码的量，并简化了开发过程。
3.可重用性和可扩展性：MVVM鼓励将应用程序的逻辑和UI组件进行解耦，使其能够更好地重用和扩展。ViewModel可以独立于具体的View实现，并且可以在不同的界面中重复使用。这种模块化的设计有助于提高开发效率，并促进代码的可重用性和可扩展性。
4.清晰的代码结构：MVVM的结构清晰，使得代码更易于理解和维护。ViewModel作为View和Model之间的连接器，使得代码的逻辑更加明确和集中。这种清晰的结构有助于团队合作和项目的可维护性。
5.支持并行开发：MVVM的结构使得UI开发和业务逻辑开发可以并行进行。UI设计人员可以专注于View的外观和交互，而开发人员可以独立地开发ViewModel和Model的逻辑。这种并行开发可以提高团队的工作效率。
展开
评论
点赞
问题:keep-alive的生命周期？
答:在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与 deactivated（组价离开时调用）
钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated
keep-ailve用法:
如果需要缓存整个项目，直接在app.vue中用keep-alive包裹router-view即可
要缓存部分页面，需要在路由地址配置中，在meta属性中添加一个状态，在app.vue中判断一下包裹的router-view即可
也可以使用exclude和include规定缓存哪个组件不缓存哪个组件
答:在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性
被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated（组件激活时使用） 与 deactivated（组价离开时调用）
钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated
keep-ailve用法:
如果需要缓存整个项目，直接在app.vue中用keep-alive包裹router-view即可
要缓存部分页面，需要在路由地址配置中，在meta属性中添加一个状态，在app.vue中判断一下包裹的router-view即可
也可以使用exclude和include规定缓存哪个组件不缓存哪个组件
展开
评论
1
问题:vue路由两种模式的区别？
答:hash模式
就是指 url 后面的 # 号以及后面的字符。每次刷新页面时是直接更改 # 后的东西。
hash 原理：灵活运用了 html的瞄点功能，改变 # 后的路径本质上是更换了当前页面的瞄点，所以不会刷新页面。通过监听浏览器的 onhashchange()事件变化，查找对应的路由规则。
由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange事件（hashchange只能改变 # 后面的 url片段）；虽然 hash路径出现在URL中，但是不会出现在 HTTP请求中，对后端完全没有影响，因此改变 hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。
hash模式
就是指 url 后面的 # 号以及后面的字符。每次刷新页面时是直接更改 # 后的东西。
hash 原理：灵活运用了 html的瞄点功能，改变 # 后的路径本质上是更换了当前页面的瞄点，所以不会刷新页面。通过监听浏览器的 onhashchange()事件变化，查找对应的路由规则。
history模式
history 原理： 利用 H5的 history中新增的两个API ：pushState()和 replaceState()和一个事件onpopstate监听URL变化。
包含 back、forward、go方法；history 模式 URL就要和后端进行一致，所以要改为 history也需要后端的配合，否则会报错；history 每次刷新会重新向后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404！。
答:hash模式
就是指 url 后面的 # 号以及后面的字符。每次刷新页面时是直接更改 # 后的东西。
hash 原理：灵活运用了 html的瞄点功能，改变 # 后的路径本质上是更换了当前页面的瞄点，所以不会刷新页面。通过监听浏览器的 onhashchange()事件变化，查找对应的路由规则。
由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange事件（hashchange只能改变 # 后面的 url片段）；虽然 hash路径出现在URL中，但是不会出现在 HTTP请求中，对后端完全没有影响，因此改变 hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。
hash模式
就是指 url 后面的 # 号以及后面的字符。每次刷新页面时是直接更改 # 后的东西。
hash 原理：灵活运用了 html的瞄点功能，改变 # 后的路径本质上是更换了当前页面的瞄点，所以不会刷新页面。通过监听浏览器的 onhashchange()事件变化，查找对应的路由规则。
history模式
history 原理： 利用 H5的 history中新增的两个API ：pushState()和 replaceState()和一个事件onpopstate监听URL变化。
包含 back、forward、go方法；history 模式 URL就要和后端进行一致，所以要改为 history也需要后端的配合，否则会报错；history 每次刷新会重新向后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404！。
展开
评论
1
问题:如何理解Promise中 resolve以及 reject 的参数？resolve以及reject函数调用者是谁，挂在哪个上面？调用resolve以及reject后，后面的语句还会执行吗？为什么需要return resolve（data）? resolve以及reject函数返回值是什么？
答:Promise 是 JavaScript 中处理异步操作的一种机制，它代表一个异步操作的最终完成或失败，并可以将操作的结果传递给相关的代码。Promise 对象有三种状态：pending（进行中）、fulfilled（已完成）和 rejected（已失败）。一旦状态改变，就会触发相应的处理函数。
在 Promise 的构造函数中，resolve 和 reject 是两个函数，由 JavaScript 引擎提供，并且作为参数传递给构造函数的回调函数。当异步操作成功完成时，我们会调用 resolve 函数，将结果传递给它；当异步操作失败时，我们会调用 reject 函数，将错误信息传递给它。
resolve 和 reject 函数的调用者是 Promise 的构造函数内部的代码，也就是我们自己写的回调函数。它们并没有被挂载到任何对象上，而是作为函数参数传递给 Promise 的构造函数。
一旦调用了 resolve 或 reject，Promise 的状态会发生改变，后续的语句不会再执行。如果调用了 resolve，Promise 的状态将变为 fulfilled（已完成）；如果调用了 reject，Promise 的状态将变为 rejected（已失败）。这个状态的改变会触发 Promise 链中后续的 .then() 或 .catch() 方法中注册的回调函数的执行。
因为 Promise 构造函数内部的回调函数在执行过程中，需要等待异步操作的结果。在这种情况下，我们必须返回一个 Promise 对象，以便外部代码可以继续链式调用。通过返回 resolve(data) 或 reject(error)，我们将异步操作的结果传递给下一个 Promise 或 .then() 或 .catch() 方法中的回调函数。
至于 resolve 和 reject 函数的返回值，它们并没有具体的返回值，但会触发 Promise 的状态改变，并且可以将参数传递给后续的回调函数。
答:Promise 是 JavaScript 中处理异步操作的一种机制，它代表一个异步操作的最终完成或失败，并可以将操作的结果传递给相关的代码。Promise 对象有三种状态：pending（进行中）、fulfilled（已完成）和 rejected（已失败）。一旦状态改变，就会触发相应的处理函数。
在 Promise 的构造函数中，resolve 和 reject 是两个函数，由 JavaScript 引擎提供，并且作为参数传递给构造函数的回调函数。当异步操作成功完成时，我们会调用 resolve 函数，将结果传递给它；当异步操作失败时，我们会调用 reject 函数，将错误信息传递给它。
resolve 和 reject 函数的调用者是 Promise 的构造函数内部的代码，也就是我们自己写的回调函数。它们并没有被挂载到任何对象上，而是作为函数参数传递给 Promise 的构造函数。
一旦调用了 resolve 或 reject，Promise 的状态会发生改变，后续的语句不会再执行。如果调用了 resolve，Promise 的状态将变为 fulfilled（已完成）；如果调用了 reject，Promise 的状态将变为 rejected（已失败）。这个状态的改变会触发 Promise 链中后续的 .then() 或 .catch() 方法中注册的回调函数的执行。
因为 Promise 构造函数内部的回调函数在执行过程中，需要等待异步操作的结果。在这种情况下，我们必须返回一个 Promise 对象，以便外部代码可以继续链式调用。通过返回 resolve(data) 或 reject(error)，我们将异步操作的结果传递给下一个 Promise 或 .then() 或 .catch() 方法中的回调函数。
至于 resolve 和 reject 函数的返回值，它们并没有具体的返回值，但会触发 Promise 的状态改变，并且可以将参数传递给后续的回调函数。
展开
1
点赞
问题:call、apply、bind的区别？
答:call, apply, 和 bind 是 JavaScript 中用于改变函数执行上下文的方法。
call: call 方法可以在函数调用时指定函数的执行上下文（即 this 的值）和传递参数列表。它接受一个指定的上下文对象作为第一个参数，后面是函数执行时需要传入的参数列表。函数会立即执行。
function greet() {
console.log(`Hello, ${this.name}`);
}
const person = { name: 'John' };
greet.call(person); // 输出：Hello, John
apply: apply 方法与 call 方法类似，但接受参数的方式略有不同。它接受一个指定的上下文对象作为第一个参数，第二个参数是一个数组或类数组对象，包含函数执行时需要传入的参数列表。函数会立即执行。
function greet(message) {
console.log(`${message}, ${this.name}`);
}
const person = { name: 'John' };
greet.apply(person, ['Hello']); // 输出：Hello, John
bind: bind 方法创建一个新函数，新函数的执行上下文被永久绑定到指定的上下文对象。bind 方法返回的是一个绑定了上下文的函数，不会立即执行。如果在绑定时传递了参数，它们会被预先填充到函数调用时的参数列表中。
function greet() {
console.log(`Hello, ${this.name}`);
}
const person = { name: 'John' };
const greetPerson = greet.bind(person);
greetPerson(); // 输出：Hello, John
总结：
call 和 apply 会立即执行函数并改变执行上下文，call 传递参数列表，apply 传递数组或类数组对象作为参数列表。
bind 创建一个新函数，永久绑定了指定的上下文对象，返回的函数需要手动调用才会执行。
三者都可以用来改变函数的执行上下文，使函数在不同的对象上执行。
答:call, apply, 和 bind 是 JavaScript 中用于改变函数执行上下文的方法。
call: call 方法可以在函数调用时指定函数的执行上下文（即 this 的值）和传递参数列表。它接受一个指定的上下文对象作为第一个参数，后面是函数执行时需要传入的参数列表。函数会立即执行。
function greet() {
console.log(`Hello, ${this.name}`);
}
const person = { name: 'John' };
greet.call(person); // 输出：Hello, John
apply: apply 方法与 call 方法类似，但接受参数的方式略有不同。它接受一个指定的上下文对象作为第一个参数，第二个参数是一个数组或类数组对象，包含函数执行时需要传入的参数列表。函数会立即执行。
function greet(message) {
console.log(`${message}, ${this.name}`);
}
const person = { name: 'John' };
greet.apply(person, ['Hello']); // 输出：Hello, John
bind: bind 方法创建一个新函数，新函数的执行上下文被永久绑定到指定的上下文对象。bind 方法返回的是一个绑定了上下文的函数，不会立即执行。如果在绑定时传递了参数，它们会被预先填充到函数调用时的参数列表中。
function greet() {
console.log(`Hello, ${this.name}`);
}
const person = { name: 'John' };
const greetPerson = greet.bind(person);
greetPerson(); // 输出：Hello, John
总结：
call 和 apply 会立即执行函数并改变执行上下文，call 传递参数列表，apply 传递数组或类数组对象作为参数列表。
bind 创建一个新函数，永久绑定了指定的上下文对象，返回的函数需要手动调用才会执行。
三者都可以用来改变函数的执行上下文，使函数在不同的对象上执行。
展开
评论
2
问题:javascript中的深浅拷贝？
答:在JavaScript中，深拷贝（deep copy）和浅拷贝（shallow copy）也是用来描述对象复制的概念。
浅拷贝是指创建一个新对象，并将原始对象的属性值复制到新对象中。如果属性值是基本数据类型（如数字、字符串等），则复制的是属性值本身；如果属性值是引用类型（如对象、数组等），则复制的是对该对象的引用。因此，原始对象和浅拷贝对象共享对相同引用类型的引用，对其中一个对象进行修改会影响到另一个对象。
JavaScript中一些常用的浅拷贝方法包括Object.assign()、展开运算符...以及数组的slice()方法等。
深拷贝是指创建一个新对象，并递归地复制原始对象及其所有嵌套的属性值，确保新对象与原始对象完全独立。深拷贝会复制所有的数据，包括基本数据类型和引用类型的属性值。因此，对深拷贝对象进行修改不会对原始对象产生任何影响。
JavaScript中实现深拷贝的方法有很多，下面是一些常用的方法：
1.使用JSON.parse(JSON.stringify(obj))：通过将对象转换为JSON字符串，然后再将JSON字符串转换回对象的方式实现深拷贝。这种方法可以处理大部分的对象，但会忽略函数和循环引用。
2.使用第三方库，如Lodash和jQuery，它们提供了cloneDeep()方法来实现深拷贝。
3.自定义递归函数：通过递归遍历对象及其属性，创建新的对象并复制属性值。
请注意，深拷贝可能会对性能产生一定的影响，尤其是在处理大型对象或对象嵌套层级很深的情况下。在实际使用中，根据具体需求选择适合的拷贝方式。
答:在JavaScript中，深拷贝（deep copy）和浅拷贝（shallow copy）也是用来描述对象复制的概念。
浅拷贝是指创建一个新对象，并将原始对象的属性值复制到新对象中。如果属性值是基本数据类型（如数字、字符串等），则复制的是属性值本身；如果属性值是引用类型（如对象、数组等），则复制的是对该对象的引用。因此，原始对象和浅拷贝对象共享对相同引用类型的引用，对其中一个对象进行修改会影响到另一个对象。
JavaScript中一些常用的浅拷贝方法包括Object.assign()、展开运算符...以及数组的slice()方法等。
深拷贝是指创建一个新对象，并递归地复制原始对象及其所有嵌套的属性值，确保新对象与原始对象完全独立。深拷贝会复制所有的数据，包括基本数据类型和引用类型的属性值。因此，对深拷贝对象进行修改不会对原始对象产生任何影响。
JavaScript中实现深拷贝的方法有很多，下面是一些常用的方法：
1.使用JSON.parse(JSON.stringify(obj))：通过将对象转换为JSON字符串，然后再将JSON字符串转换回对象的方式实现深拷贝。这种方法可以处理大部分的对象，但会忽略函数和循环引用。
2.使用第三方库，如Lodash和jQuery，它们提供了cloneDeep()方法来实现深拷贝。
3.自定义递归函数：通过递归遍历对象及其属性，创建新的对象并复制属性值。
请注意，深拷贝可能会对性能产生一定的影响，尤其是在处理大型对象或对象嵌套层级很深的情况下。在实际使用中，根据具体需求选择适合的拷贝方式。
展开
评论
点赞
问题:浏览器的渲染过程？
答:1.解析 HTML：浏览器首先将接收到的 HTML 文档进行解析，构建文档对象模型（DOM）。DOM 是表示网页结构的树形结构，它将 HTML 元素转换为浏览器可以理解和操作的对象。
2.构建渲染树：在解析 HTML 的同时，浏览器还会解析 CSS 样式文件，并将其转换为样式规则。然后，浏览器会将 DOM 树和样式规则组合起来，生成渲染树（Render Tree）。渲染树只包含需要显示的元素和其对应的样式信息，它是浏览器用于布局和绘制的基础。
3.布局：在生成渲染树后，浏览器需要确定每个元素在页面中的确切位置和大小。这个过程称为布局（Layout）或重排（Reflow）。布局计算元素的几何属性，例如宽度、高度和位置等，并创建布局帧（Layout Frame）。
4.绘制：在布局完成后，浏览器将遍历渲染树，按照正确的顺序绘制每个元素到屏幕上。这个过程称为绘制（Painting）或重绘（Repaint）。绘制使用图形库将元素渲染为像素，然后通过操作系统或硬件将像素绘制到屏幕上。
5.合成与显示：在绘制完成后，浏览器将渲染树中的各个图层（Layer）合成为一幅图像，并将其显示在屏幕上。渲染树的图层划分可以通过 CSS 属性（例如 position、transform 和 opacity 等）以及硬件加速等方式来决定。
需要注意的是，浏览器在执行渲染过程时会尽可能做出优化，例如使用异步加载脚本、延迟加载资源以及使用缓存等手段，以提高页面的加载速度和性能。
答:1.解析 HTML：浏览器首先将接收到的 HTML 文档进行解析，构建文档对象模型（DOM）。DOM 是表示网页结构的树形结构，它将 HTML 元素转换为浏览器可以理解和操作的对象。
2.构建渲染树：在解析 HTML 的同时，浏览器还会解析 CSS 样式文件，并将其转换为样式规则。然后，浏览器会将 DOM 树和样式规则组合起来，生成渲染树（Render Tree）。渲染树只包含需要显示的元素和其对应的样式信息，它是浏览器用于布局和绘制的基础。
3.布局：在生成渲染树后，浏览器需要确定每个元素在页面中的确切位置和大小。这个过程称为布局（Layout）或重排（Reflow）。布局计算元素的几何属性，例如宽度、高度和位置等，并创建布局帧（Layout Frame）。
4.绘制：在布局完成后，浏览器将遍历渲染树，按照正确的顺序绘制每个元素到屏幕上。这个过程称为绘制（Painting）或重绘（Repaint）。绘制使用图形库将元素渲染为像素，然后通过操作系统或硬件将像素绘制到屏幕上。
5.合成与显示：在绘制完成后，浏览器将渲染树中的各个图层（Layer）合成为一幅图像，并将其显示在屏幕上。渲染树的图层划分可以通过 CSS 属性（例如 position、transform 和 opacity 等）以及硬件加速等方式来决定。
需要注意的是，浏览器在执行渲染过程时会尽可能做出优化，例如使用异步加载脚本、延迟加载资源以及使用缓存等手段，以提高页面的加载速度和性能。
展开
评论
点赞