前端面试题总结(二)

目录

  • 1.localstorage和sessionstorage的区别
  • 2.for...in 和 for...of的区别
  • 3.深拷贝和浅拷贝的区别 以及深拷贝的方法
  • 4.同步和异步的区别
  • 5.堆和栈的区别
  • 6.基本数据类型有哪些
  • 7.对于this的理解
  • 8.前端性能优化
  • 9.watch和computed的区别
  • 10.Vue双向绑定原理
  • 11.谈谈闭包
  • 12.css有哪些计算属性
  • 13.js如何计算宽高

1.localstorage和sessionstorage的区别

localstorage是本地存储,只要浏览器没有被卸载,这个数据库都是存在的。
sessionstorage是会话存储,只要浏览器tab页没有关闭,sessionstorage就一直存在。

2.for…in 和 for…of的区别

for…in:只能获得对象的键名,不能获得键值;
for…of:允许遍历获得键值。
例如:var arr = [‘red’,‘green’,‘yellow’]
for…in拿到的是[0,1,2],for…of拿到的是[‘red’,‘green’,‘yellow’]

3.深拷贝和浅拷贝的区别 以及深拷贝的方法

浅拷贝:只是增加了一个指针指向已经存在的内存地址,A变,B也变;
深拷贝:增加了一个指针并且申请了一个新的内存用来存放拷贝的值,A变,B不变。

深拷贝的几种方式:

  1. JSON实现:先用JSON.Stringify() 将对象转换为JSON字符串形式,再用JSON.parse()将JSON字符串转换为原生JS对象。这种方法有一个缺点,会把undefined值和function()过滤掉,即原对象中有function()和undefined时,拷贝后这两种类型的数据会丢失。
  2. object.assign({},obj1):当对象只有一级属性的时候可以用object.assign,当对象有二级属性时就会变成浅拷贝了。
  3. 用递归来拷贝
  4. lodash中有一个方法 _.cloneDeep()也可以实现深拷贝。
  5. ES6中的扩展运算也可以实现深拷贝,let someone = {…p1}

4.同步和异步的区别

同步:所有操作都做完,才返回给客户,用户体验不好,容易卡死。
异步:将请求放入消息队列,并反馈给用户,然后再慢慢写入数据库。

5.堆和栈的区别

栈:先进后出,系统自动分配和释放内存。
堆:队列优先,先进先出,动态分配空间,一般由程序员分配释放(实际上保存的是一个指针)。
当我们需要引用类型的值时,首先从栈中获得对象的地址指针,再从堆内存中获取所需数据。

6.基本数据类型有哪些

null,undefined,string,number,boolean,ES6还多了一种symbol

7.对于this的理解

  1. 全局作用域中的this指向window;
  2. 普通函数中this指向全局对象;
  3. 构造函数中this指向new这个对象;
  4. 箭头函数中this指向上一级作用域;
  5. 对象函数中this指向这个对象;
  6. apply,call调用时指向第一个参数,没有则默认window。

如何改变this指向:bind,call,apply,new一个this

8.前端性能优化

  1. 减少http请求;
  2. 减少对DOM的操作,减少页面的重绘;
  3. 异步加载,如滚动页面滚动到下面再加载后面的内容(Ajax);
  4. 使用缓存,localstorage,sessionstorage;
  5. 无效字符及注释的删除,代码语义的缩减与优化,降低代码的可读性;
  6. JavaScript与css文件剥离与压缩,剥离后能够有针对性的对其进行单独处理。

9.watch和computed的区别

computed:是计算属性,只有当依赖的数据变化时才会计算,当数据不变时,它只会读取缓存数据。适用于一些重复使用的数据或复杂费时的计算,放入computed中计算,然后会在computed中缓存起来,下次可以直接获取。computed不支持异步。
watch:用来监听数据,当data发生变化时执行回调。deep:默认为false,当deep为true时,监听器会一层层往下遍历,给对象的所有属性加上这个监听器,此时性能开销会非常大。watch不仅可以监听数据变化,还可以监听路由变化。

10.Vue双向绑定原理

Vue双向绑定原理是通过数据劫持+发布订阅模式相结合的方式来实现的,就是数据层发生变化时,可同步更新视图层,当视图层发生变化时,同步更新数据层。其实就是MVVM框架,当用户操作view,viewModel感知到变化,然后通知Model发生相应改变;反之当Model发生改变,ViewModel也能感知到变化,使View作出相应的更新。

11.谈谈闭包

一个嵌套函数中引用了封闭函数定义的变量,并且该函数可以在其定义环境外即封闭函数外被执行。

function f1(){    // 封闭函数var n=1;       // 自由变量var inner = function(){     // 嵌套函数n++;}return inner;
}

优点:可以缓存数据;起到隔离作用域的作用,防止变量污染。
缺点:

  • 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以滥用闭包会造成网页性能问题,在IE9之前可能会导致内存泄露。
    解决办法:在退出函数前,将不适应的局部变量删除(如手动赋null)。

  • 由于闭包涉及跨域访问,所以会导致性能损失。
    解决办法:可以通过把跨作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响。

12.css有哪些计算属性

css计算属性:width,height,margin,padding,border,font-size,line-height,top,left,right,bottom,transform,transition,calc()
vw,vh:这两个单位用于定义元素的宽度和高度,分别表示视口宽度和高度的百分比。
两个特殊的css属性:
inherit:强制(手动)继承,将父元素的值应用到该元素。
initial:初始值,将该元素的属性变为默认值。

13.js如何计算宽高

  1. offsetWidth 和 offsetHeight:元素在页面中占据宽高总和(包括滚动条)
  2. clientWidth 和 clientHeight:获取元素可视部分的宽高
  3. scrollWidth 和 scrollHeight:滚动宽度和高度
  4. innerWidth 和innerHeight:获取窗口的宽度和高度(包括滚动条)

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

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

相关文章

JVM 运行流程、类加载、垃圾回收

一、JVM 简介 1、JVM JVM 是 Java Virtual Machine 的简称,意为 Java 虚拟机。 虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统。 常见的虚拟机:JVM、VMwave、Virtual Box。 JVM 和其他两个虚拟机的区别…

【深入了解PyTorch】PyTorch的优势

【深入了解PyTorch】PyTorch的优势 PyTorch的优势动态计算图Pythonic风格直观的调试和可视化社区支持和迁移能力PyTorch的特定应用场景优势自然语言处理(NLP)计算机视觉(CV)迁移学习和模型部署结论PyTorch的优势 深度学习框架在机器学习和深度学习领域中扮演着关键角色,而…

Android Java代码与JNI交互字符串转换(四)

🔥 Android Studio 版本 🔥 🔥 创建JNIString.java 🔥 package com.cmake.ndk1.jni;public class JNIString {static{System.loadLibrary("string-lib");}public native String callNativeString(String str);public native void stringMethod(String str)…

C/C++的发展历程和未来趋势

文章目录 C/C的起源C/C的应用C/C开发的工具C/C未来趋势 C/C的起源 C语言 C语言是一种通用的高级编程语言,由美国计算机科学家Dennis Ritchie在20世纪70年代初期开发出来。起初,C语言是作为操作系统UNIX的开发语言而创建的。C语言的设计目标是提供一种功…

【玩转循环】探索Python中的无限可能性

前言 循环可能是每个编程语言中使用比较多的语法了,如果能合理利用好循环,就会出现意想不到的结果,大大地减少代码量,让机器做那些简单枯燥的循环过程,今天我将为大家分享 python 中的循环语法使用。🚗&am…

Java设计模式之到单例模式和原型模式

记录设计模式相关知识,包括设计模式定义,设计原则(单一职责,开闭原则,依赖倒置,里式替换,接口隔离,迪米特原则,组合聚合复用原则),单例模式&#…

spring复习:(22)实现了BeanNameAware等Aware接口的bean,相应的回调方法是在哪里被调用的?

AbstractAutowireCapableBeanFactory的doCreateBean用来创建bean, 其中调用了initializeBean方法对bean进行初始化 initializeBean包含如下代码: 而invokeAwareMethods代码如下: 可见其分别判断是否实现了BeanNameAware接口、BeanClassLoaderAware接口…

基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升技术

空间数据获取与制图 1.1 软件安装与应用讲解 1.2 空间数据介绍 1.3海量空间数据下载 1.4 ArcGIS软件快速入门 1.5 Geodatabase地理数据库 ArcGIS专题地图制作 2.1专题地图制作规范 2.2 空间数据的准备与处理 2.3 空间数据可视化:地图符号与注记 2.4 研究区…

在Matlab、VST和C中深度探讨使用FxLMS、FuLMS、NLMS等各种算法进行主动噪声消除与音频信号处理的详细操作

第一部分:引言及算法基础 在多媒体通信、音频处理、音乐创作和其他相关领域,噪声消除和音频信号处理成为了重要的问题。在这篇博客中,我们将深入探讨在Matlab、VST和C编程语言环境中,如何使用FxLMS、FuLMS、NLMS等各种算法进行主…

Maven下载和配置教程:Windows、Mac和Linux系统安装指南

🌷🍁 博主 libin9iOak带您 Go to New World.✨🍁 🦄 个人主页——libin9iOak的博客🎐 🐳 《面试题大全》 文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~&#x1f33…

Nginx配置白名单访问

一、背景 在项目运行的时候,需要设置特定的访问权限,以拒绝其他可能存在的恶意访问。 二、配置 2.1、关键字 允许访问关键字:allow 屏蔽访问关键字:deny 2.2、作用域 作用域如下: http:所有网站屏蔽I…

如何搭建自己的图床(GitHub版)

文章目录 1.图床的概念2.用GitHub创建图床服务器2.1.新建仓库2.2.生成Token令牌2.3.创建img分支和该分支下的img文件夹(可选) 3.使用PicGo软件上传图片3.1 下载PicGo软件3.2配置PicGo3.3用PicGo实现上传 4. Typora实现自动上传5.免费图片网站 前言: 如果没有自己的服…

mysql中什么是表?列?行?什么是主键和外键?什么是索引?为什么要使用索引?

mysql中什么是表?列?行? 在关系数据库中,表(Table)是数据的主要组织单元。它是由一组命名的列和行组成,用于存储和组织数据。 列(Column)是表中的一个字段,…

【C语言例题】接收一个整型值(无符号),按照顺序打印它的每一位

一、题目要求 接受一个整型值(无符号),按照顺序打印它的每一位。 例如: 输入:1234,输出 1 2 3 4 二、解法剖析 首先要明确我们的目标,既然是要按顺序打印每一位,那么就离不开 /10 和…

ARM Coresight 系列文章 7 - ARM Coresight 通过 AHB-AP 访问 cpu 内部 coresight 组件

文章目录 如下图所示,如果A78想去访问M33的内部 coresight 组件 ETM,需要要怎么做? 答案也正是在图中,首先A78 通过AXI 互联,接入到 APBIC 的 slave port,再通过APBIC 的 master 送出,而APBIC中…

网安学习经历小记

明明自觉学会了不少知识,可真正开始做题时,却还是出现了“一支笔,一双手,一道力扣(Leetcode)做一宿”的窘境?你是否也有过这样的经历,题型不算很难,看题解也能弄明白&…

MySql高级篇-006 MySQL架构篇-02MySQL的数据目录:数据库下的主要目录结构、文件系统如何存储数据

第02章_MySQL的数据目录 1.MySQL8的主要目录结构 # 查询名称叫做mysql的文件目录都有哪些[rootatguigu07 ~]# find / -name mysql安装好MySQL 8之后,我们查看如下的目录结构: 1.1 数据库文件的存放路径 MySQL数据库文件的存放路径:/var/…

Foxit PDF ActiveX 5.9.8 Crack

Foxit PDF SDK ActiveX 即时添加PDF显示功能至Windows应用程序,快速投放市场,可视化编程组件功能强大且易于使用的PDF软件开发工具包 对于刚接触PDF或不愿投入过多精力学习PDF技术的产品管理者及开发者来说,Foxit PDF SDK ActiveX无疑是理想…

第二十章:CANet:具有迭代细化和专注少样本学习的无类别分割网络

0.摘要 最近在语义分割方面的进展是由深度卷积神经网络和大规模标注图像数据集推动的。然而,像素级别的数据标注是繁琐和昂贵的。此外,训练好的模型只能在一组预定义的类别中进行预测。在本文中,我们提出了CANet,一种无类别偏见的…

现代化 Android 开发:Jetpack Compose 最佳实践

作者:古哥E下 如果一直关注 Compose 的发展的话,可以明显感受到 2022 年和 2023 年的 Compose 使用讨论的声音已经完全不一样了, 2022 年还多是观望,2023 年就有很多团队开始采纳 Compose 来进行开发了。不过也有很多同学接触了下 Compose&am…