前端日记

面试官：说说你对集合的理解？常见的操作有哪些？ 一、是什么集合（Set），指具有某种特定性质的事物的总体，里面的每一项内容称作元素 在数学中，我们经常会遇到集合的概念： 有限集合：例如一个班集所有的同学构成的集合 无限集合：例如全体自然数集合 在计算机中集合道理也基本一致，具有三大特性： 确定性：于一个给定的集合，集合中的元素是确定的。即一个元素，或者属于该集合，或者不属于该集合，两者必居其一 无序性：在一个集合中，不考虑元素之间的顺序，只要元素完全相同，就认为是同一个集合 互异性：集合中任意两个元素都是不同的 二、操作在ES6中，集合本身是一个构建函数Set，用来生成 Set 数据结构，如下： 1const s = new Set(); 关于集合常见的方法有： add()：增 delete()：删 has()：改 clear()：查 add()添加某个值，返回 Set 结构本身 当添加实例中已经存在的元素，set不会进行处理添加 1s.add(1).add(2).add(2); // 2只被添加了一次 体现了集合的互异性特性 delete()删除某个值，返回一个布尔 ...

面试官：说说常见的排序算法有哪些？区别？ 一、是什么排序是程序开发中非常常见的操作，对一组任意的数据元素经过排序操作后，就可以把他们变成一组一定规则排序的有序序列 排序算法属于算法中的一种，而且是覆盖范围极小的一种，彻底掌握排序算法对程序开发是有很大的帮助的 对与排序算法的好坏衡量，主要是从时间复杂度、空间复杂度、稳定性 时间复杂度、空间复杂度前面已经讲过，这里主要看看稳定性的定义 稳定性指的是假定在待排序的记录序列中，存在多个具有相同的关键字的记录，若经过排序，这些记录的相对次序保持不变 即在原序列中，r[i] = r[j]，且 r[i] 在 r[j] 之前，而在排序后的序列中，r[i] 仍在 r[j] 之前，则称这种排序算法是稳定的；否则称为不稳定的 二、有哪些常见的算法排序算法有： 冒泡排序 选择排序 插入排序 归并排序 快速排序 冒泡排序一种简单直观的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来 思路如下： 比较相邻的元素，如果第一个比第二个大，就交换它们两个 对每一对相邻元素作同样的工作，从开始第一对到结尾的最 ...

面试官：说说你对栈、队列的理解？应用场景？ 一、栈栈（stack）又名堆栈，它是一种运算受限的线性表，限定仅在表尾进行插入和删除操作的线性表 表尾这一端被称为栈顶，相反地另一端被称为栈底，向栈顶插入元素被称为进栈、入栈、压栈，从栈顶删除元素又称作出栈 所以其按照先进后出的原则存储数据，先进入的数据被压入栈底，最后的数据在栈顶，需要读数据的时候从栈顶开始弹出数据，具有记忆作用 关于栈的简单实现，如下： 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748class Stack { constructor() { this.items = []; } /** * 添加一个（或几个）新元素到栈顶 * @param {*} element 新元素 */ push(element) { this.items.push(element) } /** * 移除栈顶的元素 ...

面试官：说说你对数据结构的理解？有哪些？区别？ 一、是什么数据结构是计算机存储、组织数据的方式，是指相互之间存在一种或多种特定关系的数据元素的集合 前面讲到，一个程序 = 算法 + 数据结构，数据结构是实现算法的基础，选择合适的数据结构可以带来更高的运行或者存储效率 数据元素相互之间的关系称为结构，根据数据元素之间关系的不同特性，通常有如下四类基本的结构： 集合结构：该结构的数据元素间的关系是“属于同一个集合” 线性结构：该结构的数据元素之间存在着一对一的关系 树型结构：该结构的数据元素之间存在着一对多的关系 图形结构：该结构的数据元素之间存在着多对多的关系，也称网状结构 由于数据结构种类太多，逻辑结构可以再分成为： 线性结构：有序数据元素的集合，其中数据元素之间的关系是一对一的关系，除了第一个和最后一个数据元素之外，其它数据元素都是首尾相接的 非线性结构：各个数据元素不再保持在一个线性序列中，每个数据元素可能与零个或者多个其他数据元素发生关联 二、有哪些常见的数据结构有如下： 数组 栈 队列 链表 树 图 堆 散列表 数组在程序设计中，为了处理方便， 一般情 ...

面试官：说说你对算法中时间复杂度，空间复杂度的理解？如何计算？ 一、前言算法（Algorithm）是指用来操作数据、解决程序问题的一组方法。对于同一个问题，使用不同的算法，也许最终得到的结果是一样的，但在过程中消耗的资源和时间却会有很大的区别 衡量不同算法之间的优劣主要是通过时间和空间两个维度去考量： 时间维度：是指执行当前算法所消耗的时间，我们通常用「时间复杂度」来描述。 空间维度：是指执行当前算法需要占用多少内存空间，我们通常用「空间复杂度」来描述 通常会遇到一种情况，时间和空间维度不能够兼顾，需要在两者之间取得一个平衡点是我们需要考虑的 一个算法通常存在最好、平均、最坏三种情况，我们一般关注的是最坏情况 最坏情况是算法运行时间的上界，对于某些算法来说，最坏情况出现的比较频繁，也意味着平均情况和最坏情况一样差 二、时间复杂度时间复杂度是指执行这个算法所需要的计算工作量，其复杂度反映了程序执行时间「随输入规模增长而增长的量级」，在很大程度上能很好地反映出算法的优劣与否 一个算法花费的时间与算法中语句的「执行次数成正比」，执行次数越多，花费的时间就越多 算法的复杂度通常用大O符号 ...

面试官：说说你对树的理解？相关的操作有哪些？ 一、是什么在计算机领域，树形数据结构是一类重要的非线性数据结构，可以表示数据之间一对多的关系。以树与二叉树最为常用，直观看来，树是以分支关系定义的层次结构 二叉树满足以下两个条件： 本身是有序树 树中包含的各个结点的不能超过 2，即只能是 0、1 或者 2 如下图，左侧的为二叉树，而右侧的因为头结点的子结点超过2，因此不属于二叉树： 同时，二叉树可以继续进行分类，分成了满二叉树和完成二叉树： 满二叉树：如果二叉树中除了叶子结点，每个结点的度都为 2 完成二叉树：如果二叉树中除去最后一层节点为满二叉树，且最后一层的结点依次从左到右分布 二、操作关于二叉树的遍历，常见的有： 前序遍历 中序遍历 后序遍历 层序遍历 前序遍历前序遍历的实现思想是： 访问根节点 访问当前节点的左子树 若当前节点无左子树，则访问当前节点的右子 根据遍历特性，递归版本用代码表示则如下： 123456const preOrder = (root) => { if(!root){ return } ...

面试官：谈谈你对BFC的理解？ 一、是什么我们在页面布局的时候，经常出现以下情况： 这个元素高度怎么没了？ 这两栏布局怎么没法自适应？ 这两个元素的间距怎么有点奇怪的样子？ …… 原因是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念 BFC（Block Formatting Context），即块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则： 内部的盒子会在垂直方向上一个接一个的放置 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此 BFC的区域不会与float的元素区域重叠 计算BFC的高度时，浮动子元素也参与计算 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然 BFC目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素 二、触发条件触发BFC的条件包含不限于： 根元素，即HTML元素 浮动元素：float值为left、right overflow值不为 visible，为 ...

面试官：css3动画有哪些？ 一、是什么CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块 即指元素从一种样式逐渐过渡为另一种样式的过程 常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合 css实现动画的方式，有如下几种： transition 实现渐变动画 transform 转变动画 animation 实现自定义动画 二、实现方式transition 实现渐变动画transition的属性如下： property:填写需要变化的css属性 duration:完成过渡效果需要的时间单位(s或者ms) timing-function:完成效果的速度曲线 delay: 动画效果的延迟触发时间 其中timing-function的值有如下： 值 描述 linear 匀速（等于 cubic-bezier(0,0,1,1)） ease 从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)） ease-in 慢慢变快（等于 cubic-bezier( ...

面试官：说说你对盒子模型的理解? 一、是什么当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box） 一个盒子由四个部分组成：content、padding、border、margin content，即实际内容，显示文本和图像 boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成 padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响 margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域 上述是一个从二维的角度观察盒子，下面再看看看三维图： 下面来段代码： 12345678910<style> .box { width: 200px; height: 100px; padding: 20px; }</style><div class="box" ...

面试官：元素水平垂直居中的方法有哪些？如果元素不定宽高呢？ 一、背景在开发中经常遇到这个问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素 居中是一个非常基础但又是非常重要的应用场景，实现居中的方法存在很多，可以将这些方法分成两个大类： 居中元素（子元素）的宽高已知 居中元素宽高未知 二、实现方式实现元素水平垂直居中的方式： 利用定位+margin:auto 利用定位+margin:负值 利用定位+transform table布局 flex布局 grid布局 利用定位+margin:auto先上代码： 12345678910111213141516171819202122<style> .father{ width:500px; height:300px; border:1px solid #0a3b98; position: relative; } .son{ width:100px; ...