面试题节选七

最新推荐文章于 2025-05-08 10:14:39 发布

原创最新推荐文章于 2025-05-08 10:14:39 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

面试题节选整理专栏收录该内容

7 篇文章

订阅专栏

本文探讨了JavaScript中的数据类型，包括ES5的6种基础类型和ES6后的扩展，如Symbol和BigInt。此外，文章提到了变量声明的let和const的区别，并概述了CSS3的新特性。还讨论了HTTP的GET和POST方法的区别，以及TCP的三次握手原理。最后，文章强调了HTML语义化的重要性及其对SEO和可访问性的益处。

一、js有几种基础类型？

答案当然是：六种
请注意：js的数据类型是8种

最近有很多人说数据类型是6种，我怎么记得js的数据类型有8种，感觉众说纷纭，我特意去查证了下，发现在ES5的时候，数据类型确实是6种，现在ES6新增了不少东西，不多BB了，我按我的理解做一下笔记，好好补补基础，有不对的欢迎大家指出哈~

值类型（基础类型 6）：
字符串（String）、数字（Number）、布尔（Boolean）、对空（Null）、未定义（Undefined）、Symbol

引用数据类型（复杂类型）：
对象（Object）、数组（Array）、函数（Function）

js数据类型（8）：
Number 、Null、String、Boolean、Undefined、Object、Symbol、bigInt。

布尔（逻辑）只能有俩个值：true或者false
Undefined（未定义）：这个值表示变量不含有值。可以通过**将变量的值设置为null来清空变量eg: —> person = null;
Symbol是ES6引入了一种新的原始数据类型，表示独一无二的值
ES10版本中还出现了一种 bigInt。是指安全存储、操作大整数。（但是很多人不把这个做为一个类型）。但，多多益善嘛，嘿嘿O(∩_∩)O
注意：
要弄懂简单数据类型和复杂数据类型的区别，关键是要搞懂俩个在内存中的存储过程，简单数据类型把数据名和值直接存储在栈当中，而复杂数据类型在栈中存储数据名和一个堆的地址，在堆中存储属性及值。访问时先从栈中获取地址，再到堆中拿出。

二、let和const的区别？

1、let
a.具有块级作用域

if (true) {
        let a = 0;
    }
    console.log(a);

报错：
请添加图片描述

b.不存在变量提升

c.暂时性死区（不受外界影响）

2、const
声明常量，常量就是值（内存地址），不能变化的值
a、具有块级作用域
b、声明常量时必须赋值
c、赋值后，值就不能修改

3、let、const、var 的区别
使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

小结：
const声明的变量是一个常量
既然是常量不能重新赋值，如果是基本数据类型，不能更改至，如果是复杂数据类型，不能更改地址值（里面的值可以修改，但整个对象或数组不能重新赋值）。
声明const时候必须要给定值

三、用css实现一个红色盒子，鼠标放上去就变蓝。

<style>
        div {
            background-color: red;
            width: 200px;
            height: 200px;
        }

        div:hover {
            background-color: blue;
        }
    </style>

</head>

<body>
    <div></div>
</body>

考察css伪类

四、写一个快速排序算法。

<script>
    var quickSort = function (arr) {
        if (arr.length <= 1) {
            return arr;
        }
        var pivotIndex = Math.floor(arr.length / 2);
        // pivotIndex 寻找数组的中心索引
        var pivot = arr.splice(pivotIndex, 1)[0];
        // splice() 方法向/从数组添加/删除项目，并返回删除的项目
        var left = [];
        var right = [];

        for (var i = 0; i < arr.length; i++) {
            if (arr[i] < pivot) {
                left.push(arr[i]);
            } else {
                right.push(arr[i]);
            }
        }
        return quickSort(left).concat([pivot], quickSort(right));
    };

    var arr = [12, 34, 52, 11, 22, 34, 99, 22];
    console.log(quickSort(arr));
</script>

效果如下：

请添加图片描述

以上代码的实现方式是，选择一个中间的数字为基准点，用两个数组分别去保存比基准数小的值，和比基准数大的值，最后递归左边的数组和右边的数组，用concat去做一个数组的合并。

五、H5和C3有啥新特性？

1、canvas 画布
2、用于媒介回放的video和audio元素
3、本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
4、语意化更好的内容元素，比如 article footer header nav section
5、位置API：Geolocation
6、表单控件，calendar date time email url search
7、新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
8、拖放API：drag、drop
移除的元素：
纯表现的元素：basefont big center font s strike tt u
性能较差元素：frame frameset noframes

CSS3新特性：
1、颜色：新增RGBA，HSLA模式
2、文字阴影（text-shadow）
3、边框： 圆角（border-radius）边框阴影： box-shadow
4、盒子模型：box-sizing
5、背景：background-size 设置背景图片的尺寸
background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6、渐变：linear-gradient、radial-gradient
7、过渡：transition，可实现动画
8、自定义动画
9、在CSS3中唯一引入的伪元素：selection.
10、媒体查询，多栏布局
11、border-image
12、2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13、3D转换
14、新增选择器：属性选择器、伪类选择器、伪元素选择器。

六、解释一下为啥给span设置宽高无效？

因为**span标签是行内元素**，所以设置宽高无效，
需要添加:display: inline-block;
使span变为块元素。设置宽高生效
回忆一下基础知识

内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)若设置都不起作用

七、说一下线程和进程的区别？

①一个程序至少有一个进程,一个进程至少有一个线程。
②线程的划分尺度小于进程，使得多线程程序的并发性高。
③另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
④线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
⑤从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

八、说一下get post区别的区别？

我相信这个问题，大多银在面试的时候都遇到过，那它们之间到底有什么区别呢？我们一起来康康~
首先：

HTTP请求，最初设定了八种方法。这八种方法本质上没有任何区别。只是让请求，更加有语义而已。
OPTIONS 返回服务器所支持的请求方法
GET 向服务器获取指定资源
HEAD 与GET一致，只不过响应体不返回，只返回响应头
POST 向服务器提交数据，数据放在请求体里
PUT 与POST相似，只是具有幂等特性，一般用于更新
DELETE 删除服务器指定资源
TRACE 回显服务器端收到的请求，测试的时候会用到这个
CONNECT 预留，暂无使用

对post与get区别的错误理解:
错误：get安全性非常低，post安全性较高
这个看法，其实在我没深入接触它们之前也是这么认识的，但是现在通过学习，才发现我是大错特错。

你们以为的get不安全，是因为在地址栏能看见自己所提交的数据？而post却看不见，所以post比get安全？ no no no 这样想你就大错特错了

确实，相比之下，post方法提交的数据一般人不会发现，所以GET确实差了那么一丢丢。

然而，从传输的角度来说，他们都是不安全的，因为 HTTP 在网络上是明文传输的，只要在网络节点上捉包，就能完整地获取数据报文，要想安全传输，就只有加密，也就是 HTTPS

区别：
1、get是获取数据的，而post是提交数据的
2.GET 用于获取信息，是无副作用的，是幂等的，且可缓存，而POST 用于修改服务器上的数据，有副作用，非幂等，不可缓存。

九、说一下为什么tcp会有三次握手？

在面试的时候最关于计算机网络最常问的算是TCP协议了，
TCP的全称是Transmission Control Protocol，是一种传输控制协议，也是一种可靠的，面向连接的传输协议，它是属于传输层。
网络通信的项目当中，很多人都会使用TCP去连接客户端与服务端，但是TCP在连接之前会进行三次握手，那么问题来了为什么要进行三次握手，而不是两次握手，或者四次握手呢？在寻求答案的时候，看到了俩张特别有意思的图，就很灵性！！！通俗易懂巧妙地解释了为什么是三次。

哈哈，差点给我大半夜的笑出猪叫声，就很搞笑，也容易理解的，这图文并茂的，是不咯？
而上面的两次握手为什么会发生这样的情况呢？其实就是C发送过的话，S已经确认返回过去了（C能知道他说的话S能听到了），但是S不知道C有没有收到他的返回过去的话，所以才导致以上情景。

以下是三次握手过程
在这里插入图片描述

十、说说你对语义化的理解？

1、去掉或样式丢失的时候能让页面呈现清晰的结构：html本身是没有表现的，例如< h1>是粗体，字体大小2em，加粗；< strong>是加粗的，不要认为这是html的表现，这些其实是 html 默认的css样式在起作用，所以去掉或样式丢失的时候，依然能让页面呈现清晰的结构。默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

2、屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。

3、PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）。

4、有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重。

5、便于团队开发和维护，语义化更具可读性，是下一步把握网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

小结：