【前端面试3+1】03深拷贝浅拷贝、let和var、css盒模型、【有效括号】

一、深拷贝浅拷贝

深拷贝和浅拷贝都是用于复制对象或数组的概念,但它们之间有着重要的区别:

1. 浅拷贝:

        浅拷贝是指在拷贝对象或数组时,只会复制一层对象的属性或元素,而不会递归地复制嵌套的对象或数组。因此,如果原始对象或数组中包含引用类型的属性,浅拷贝后的对象或数组中的这些属性仍然指向同一个引用。修改其中一个对象或数组的属性会影响另一个对象或数组。

2. 深拷贝:

深拷贝是指在拷贝对象或数组时,会递归地复制所有嵌套的对象或数组,确保复制后的对象与原始对象完全独立,互不影响。深拷贝会创建一个全新的对象或数组,并递归地复制所有属性或元素,而不仅仅是引用。

        在JavaScript中,实现深拷贝通常需要使用递归方法或专门的库(如lodash的_.cloneDeep()方法)。深拷贝可以确保复制后的对象与原始对象完全独立,适用于需要完全复制对象或数组的场景。

二、 let和var的区别

1. 作用域:
   

  • var声明的变量存在函数作用域(function scope),即在函数内部声明的变量只在函数内部有效,在函数外部无法访问
  • let声明的变量存在块级作用域(block scope),即在块(如if语句、for循环、函数等)内部声明的变量只在该块内部有效,不会受到外部作用域的影响。

2.变量提升:

  • 使用var声明的变量会存在变量提升(hoisting)的现象,即变量的声明会被提升到当前作用域的顶部,但赋值保留在原位置。这意味着可以在变量声明之前访问变量,但其值为undefined
  • 使用let声明的变量也会存在变量提升,但不会被初始化为undefined,而是保持未初始化的状态(暂时性死区),直到变量声明的位置才能访问变量。

三、CSS盒模型 是什么?有哪几种?区别?

1.定义:

        CSS的盒模型是用来描述网页中元素布局的模型,它将每个元素看作是一个矩形的盒子,包含内容区域、内边距、边框和外边距。盒模型的主要作用是确定元素在页面中的大小和位置。

2.类型:

(1)标准盒模型:
  • 在标准盒模型中,元素的宽度和高度只包括内容区域,不包括内边距(padding)和边框(border)
  • 元素的总宽度 = 内容区域宽度 + 左右内边距 + 左右边框
  • 元素的总高度 = 内容区域高度 + 上下内边距 + 上下边框
(2)IE盒模型(怪异盒模型):
  • 在IE盒模型中,元素的宽度和高度包括内容区域、内边距和边框,即宽度和高度直接等于设置的宽度和高度
  • 元素的总宽度 = 内容区域宽度(包括内边距和边框) + 左右外边距
  • 元素的总高度 = 内容区域高度(包括内边距和边框) + 上下外边距

3.区别:

  • 主要区别在于计算元素的宽度和高度时是否包括内边距和边框。标准盒模型只包括内容区域,而IE盒模型包括内容区域、内边距和边框。
  • 大多数现代浏览器采用标准盒模型,而IE浏览器(早期版本)采用IE盒模型。可以通过CSS的box-sizing属性来指定使用哪种盒模型,常见取值为content-box(标准盒模型)和border-box(IE盒模型)。

在实际开发中,为了避免不同浏览器之间的盒模型差异,通常会通过CSS的重置样式或统一设置box-sizing: border-box;来统一盒模型的表现。

四、【算法】有效括号

题目:

给定一个只包括 '('')''{''}''['']' 的字符串 s ,判断字符串是否有效。

有效字符串需满足:

  1. 左括号必须用相同类型的右括号闭合。
  2. 左括号必须以正确的顺序闭合。
  3. 每个右括号都有一个对应的相同类型的左括号。

解法:

  1. 在函数内部,首先获取输入字符串s的长度,并定义一个字符数组stack,大小为输入字符串s的长度。同时定义一个整型变量top,用于表示栈顶的索引,初始值为-1。

  2. 接下来,使用for循环遍历输入字符串s中的每个字符:

(1)如果当前字符是左括号('(','[','{'),则将其压入栈中,即将其放入stack数组中,并更新top的值。

(2)如果当前字符是右括号(')',']','}'),则进行匹配检查:

        ①如果栈为空(即top为-1),说明右括号没有匹配的左括号,直接返回false

        ②否则,取出栈顶元素topChar,并与当前右括号进行匹配:

                 如果匹配不成功,返回false

  •          如果匹配成功,将栈顶元素出栈,即更新top的值。

3.循环结束后,如果栈为空(即top为-1),说明所有括号都能正确闭合,返回true;否则返回false

bool isValid(char* s) {int len = strlen(s);char stack[len];int top = -1;for (int i = 0; i < len; i++) {if (s[i] == '(' || s[i] == '[' || s[i] == '{') {stack[++top] = s[i];} else {if (top == -1) {return false;}char topChar = stack[top--];if ((s[i] == ')' && topChar != '(') || (s[i] == ']' && topChar != '[') || (s[i] == '}' && topChar != '{')) {return false;}}}return top == -1;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/573102.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kubeflow文档1:介绍与架构

Kubeflow 2024/3/19版本的文档 此专栏用来展示相关的内容翻译&#xff0c;重点关注本地部署&#xff0c;关于运营商的方案&#xff0c;请自行查阅 文档地址https://www.kubeflow.org/docs/ 开始编辑时间&#xff1a;2024/3/27&#xff1b;最后编辑时间2024/3/27 Kubeflow文…

记录关于智能家居的路程的一个bug___Segmentation fault(段错误)

前言 其实发生段错误的情况有很多&#xff1a; 其实在项目的开发中最有可能的错误就是①和②&#xff0c;考虑到本项目数组用的比较少&#xff0c;所以主要是考虑错误①指针的误用。 有时候错误就是那么离谱&#xff0c;声音也算是一种设备&#xff1f;&#xff1f;&#xff…

论文笔记:Retrieval-Augmented Generation forAI-Generated Content: A Survey

北大202402的RAG综述 1 intro 1.1 AICG 近年来&#xff0c;人们对人工智能生成内容&#xff08;AIGC&#xff09;的兴趣激增。各种内容生成工具已经精心设计&#xff0c;用于生产各种模态下的多样化对象 文本&代码&#xff1a;大型语言模型&#xff08;LLM&#xff09;…

抖音短视频矩阵系统源代码开发部署/SaaS贴牌/源码开源

抖音短视频矩阵系统的源代码开发部署可以分为以下几个步骤&#xff1a; 确定需求&#xff1a;首先&#xff0c;你需要确定你想要开发的具体功能和特性&#xff0c;比如用户注册、上传短视频、评论等。 开发源代码&#xff1a;根据需求&#xff0c;你可以选择使用合适的编程语言…

深入理解element-plus table二次封装:从理论到实践的全面指南

前言 在许多中后台管理系统中&#xff0c;表格占据着半壁江山&#xff0c;如果使用element plus组件库&#xff0c;那么少不了要用到table组件&#xff0c;可是table组件的功能过于基础&#xff0c;因此&#xff0c;我在table组件的实现基础之上进一步封装&#xff0c;从而实现…

装饰器模式实战运用(功能增强)

目录 前言 装饰器模式与代理模式的区别 UML plantuml 类图 实战代码 mybatis cache 前言 装饰器模式和代理模式在使用上很相似&#xff0c;都是在不修改原始类代码的情况下&#xff0c;动态地给真实对象的方法做增强。 装饰器模式是通过创建一个包装对象来包裹原有对象…

Vue时间组件:Dayjs与Moment对比

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

python opencv稍基础初学

傅里叶变换 傅里叶变换f​​​​​傅里叶分析之掐死教程&#xff08;完整版&#xff09;更新于2014.06.06 - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/19763358 相当nice 傅里叶变换的作用 高频&#xff1a;变化剧烈的灰度分量&#xff0c;例如边界 低频&#xff1a;变…

Centos 配置JDK和Tomcat(新手版)

Centos 配置JDK和Tomcat&#xff08;新手版&#xff09; 1、安装JDK 如果原环境有jdk则需要卸载。 先用命令查看 rpm -qa|grep java 如果有jdk则需要卸载rpm -e --nodeps java-1.7.0-openjdk-1.7.0.191-2.6.15.5.el7.x86_64rpm -e --nodeps java-1.8.0-openjdk-…

AugmentedReality之路-显示隐藏AR坐标原点(3)

本文介绍如何显示/隐藏坐标原点&#xff0c;分析AR坐标原点跟手机的位置关系 1、AR坐标原点在哪里 当我们通过AugmentedReality的StartARSession函数打开AR相机的那一刻&#xff0c;相机所在的位置就是坐标原点。 2、创建指示箭头资产 1.在Content/Arrow目录创建1个Actor类…

【旅游景点项目日记 | 第一篇】项目服务架构、数据库表设计

Gitee仓库地址&#xff1a;travel-server&#xff1a;景点旅游项目服务端 文章目录 1.项目服务架构2.数据库设计2.1用户服务—travel_ums2.1.1 ums_user—用户表 2.2景点服务—travel_ams2.2.1 ams_attraction—景点表1.2.2 ams_resource_type—资源类型表 2.3票务服务—trabel…

最优算法100例之09-数组中单独出现两次的数字

专栏主页:计算机专业基础知识总结(适用于期末复习考研刷题求职面试)系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次。请写程序找出这两个只出现一次的数字。 题解报告 最优解…