秋招这段时间小编也是在不断的面试，最近也面一些大厂，但都不太如意，面过小米、字节、360大厂，现在终于来到了百度，来给大家分享一下百度前端开发实习一面的试题。

一、自我介绍

这个就不用说了，上来大部分都是让你简单介绍一下自己，相信在准备秋招的小伙伴们都已经得心应手了叭。

二、js的数据类型

这个问的js的一些简单基础问题。js的数据类型分为基本数据类型和引用数据类型。

基本数据类型

1、number 数字类型 2，1.2， -2，+4

2、string 字符串 '正确的值 ’ // " 中文" //黑色是字符串

3、boolean 布尔 true false

4、null 空对象指针

5、undefined 未定义

6、Symbol（es6新增，表示独一无二的值）

7、BigInt（es10新增）

引用数据类型

object对象

1、普通对象 {name: ‘xxxx’ }

2、数组 [’ ’ ,1,true,null,undefined]

3、Math 数学对象

4、Date的实例

5、/^$/ 正则

6、函数

7、原型

8、arguments

9、元素集合

function 函数1、普通函数2、构造函数（类）3、类

这里我就不再具体的说啦。大家有不懂的可以看我之前写的文章。

js四大常用类型数据判断（内含面试热点！！）今天，小编学习了js中的四种类型判断以及call源码的底层逻辑，深有所获，来 - 掘金 ()

三、如何解决跨域问题

这个是面试中经常会被问到的问题，我们先来了解一下为什么会发生跨域？

跨域是指在浏览器端，由于浏览器的同源策略（Same Origin Policy）限制，导致无法直接访问来自其他域的资源。

当前端页面尝试从与其不同源的服务器请求资源时，浏览器的同源策略（Same-Origin Policy）阻止了这种跨域请求。

同源机制/同源策略

同源机制（也叫同源策略）是浏览器中的一种重要安全机制，主要限制不同源的文档或脚本如何交互，以保护用户信息的安全。这里的“同源”指的是协议、域名和端口号三个要素必须完全相同。服务器间访问则不受同源策略限制，它们通常通过代码设置白名单或权限来控制访问。

同源策略的主要内容

dom节点：同源策略不允许不同源的两个页面通过JavaScript访问对方的dom节点

网络：限制了xhr，fetch等跨域请求

数据：同源策略不允许不同源的两个页面互相访问浏览器存储，Cookie、IndexedDB和LocalStorage等

什么时候发生的跨域

因为浏览器有同源策略，所以产生了跨域问题，没有浏览器根本不可能有跨域问题，所以跨域一定是发生在浏览器这一端的。当我们的页面发出Ajax请求时，这里是不会发生跨域的，服务器能够接收到页面发出的请求，但是当浏览器接收到服务器返回过来的数据之前，出于安全考虑会对响应做出校验，这个时候就有可能会发生跨域问题。

如何解决跨域问题一、JSONP

1、借助script标签的src属性不受同源策略的影响来发送请求

2、给后端携带一个参数 callback 并在前端定义callback函数体

3、后端返回callback的调用形式并将要影响的值作为callback的实参

4、当浏览器接受到响应后，就会触发全局的callback函数从而让callback

以参数的形式接受到后端的响应。

缺点：

二、cors

通过设置响应头中的某些字段，比如，access-control-allow-origin 设置允许的源 来通知浏览器此时同源策略不需要生效。

三、代理服务器

通过设置一个代理服务器，比如我的浏览器要朝他人的后端请求数据，我可以先设置一个代理服务器后端，让我的浏览器先朝我自己的后端也就是代理服务器发送请求，然后再让代理服务器朝他人的后端发送请求得到数据再返回来。

四、Nginx反向代理

相当于node代理

在服务器上装一个nginx,它其实就是一个后端代理，它就是一个软件，有配置文件，可以配置前端后端长啥样，配置好了之后，当后端返回一个响应，就由这个Nginx接受到。Nginx就相当于启动了一个web服务，Nginx在帮你把这个数据给前端。

五、WebSocket

socket协议天生不受同源协议的影响

WebSocket 是一种基于 TCP 的全双工通信协议，它允许客户端和服务器之间进行双向通信，与传统的 HTTP 请求-响应模式不同，WebSocket 建立一次连接后，可以保持长时间的通信会话。

虽然 WebSocket 协议本身并不受同源策略的限制，但在使用 WebSocket 进行跨域通信时，仍然需要注意一些安全性问题。一种常见的做法是通过服务端设置 CORS 头部，允许特定的源访问 WebSocket 服务。

六、postMessage

当页面一通过iframe嵌套了页面二，这两个页面上已无法进行通讯的，因为跨域了，但是使用postMessage可以实现跨域通信.

七、document.domain

两个页面通过iframe进行嵌套，且两个页面的二级域名一致

四、koa框架

官网介绍：Koa 是一个新的 web 框架，通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件， 而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

Koa-- 基于 Node.js 平台的下一代 web 开发框架

koa 是由 Express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 koa 编写 web 应用，可以免除重复繁琐的回调函数嵌套， 并极大地提 升错误处理的效率。

koa 不在内核方法中绑定任何中间件， 它仅仅提供了一个轻量优雅的 函数库，使得编写 Web 应用变得得心应手。开发思路和 express 差不多，最大的特点就是 可以避免异步嵌套。

这里我就不详细介绍了，大家有需要了解的可以到官网看看：

官网API

五、你了解JSP吗

‌**JSP（Java Server Pages）**‌是一种动态网页技术，它允许在HTML页面中嵌入Java代码，这些代码在服务器端执行，根据客户端的请求动态生成HTML、XML或其他格式的Web页面。JSP技术由[Sun Microsystems](… Microsystems&rsv_pq=c33ce34b00576376&oq=编程中什么是JSP&rsv_t=66dd+2cM0xh/UVaElxKWko26OoPu8H87FVLGBY6vXcWUv1tNROIxnbnpA04&tn=baidu&ie=utf-8)公司主导创建，旨在简化服务器端的Web开发，尤其是对于动态内容的生成。JSP技术是[Java EE](… EE&rsv_pq=c33ce34b00576376&oq=编程中什么是JSP&rsv_t=66dd+2cM0xh/UVaElxKWko26OoPu8H87FVLGBY6vXcWUv1tNROIxnbnpA04&tn=baidu&ie=utf-8)的一部分，可以与Servlets、JavaBeans和JavaServerFaces等组件结合使用，实现复杂的Web应用程序。

JSP的主要特点包括：

JSP的工作原理大致如下：

当服务器上的JSP页面被请求时，JSP引擎会将JSP页面文件转译成Java文件。然后将Java文件编译成字节码文件。通过执行字节码文件响应客户端的请求，生成动态页面内容并发送给客户端（浏览器）。

JSP的引入，使得开发人员能够在Web页面中嵌入复杂的逻辑和业务处理，从而提供更丰富的用户体验和更好的交互性。同时，JSP技术也促进了表示层、控制层和模型层的分离，使得Web应用程序的开发更加模块化和可维护‌12。

六、inconfont的原理

“Iconfont" 是阿里巴巴推出的一款矢量图标字体库，广泛应用于网页和移动应用的设计中。Iconfont 提供了大量的图标资源，并支持自定义生成字体文件，方便设计师和开发者在项目中使用。

Iconfont 组件库的实现原理1. 字体图标（Font Icons）

Iconfont 主要通过字体图标来实现图标展示。字体图标本质上是特殊的字符，通过 Unicode 编码来表示。这些字符被定义在一个自定义字体文件中（如 .ttf, .woff, .eot 等格式），并通过 CSS 来显示。

2. CSS 使用

在 HTML 中，你可以像使用普通文本那样插入一个图标字符，然后通过 CSS 来指定所使用的字体文件以及具体的字符样式。例如：

class="icon">

CSS 中定义字体文件：

@font-face {
  font-family: 'iconfont'; /* 项目中自定义的字体名称 */
  src: url('iconfont.eot'); /* IE9 */
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
       url('iconfont.woff') format('woff'),
       url('iconfont.ttf') format('truetype'),
       url('iconfont.svg#iconfont') format('svg'); /* 兼容 Chrome、Firefox 和 Opera */
}
.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px; /* 根据需求调整 */
}

3. 动态加载

对于一些动态生成的应用程序，可以利用 JavaScript 动态插入字体图标或者通过 AJAX 加载远程的字体文件。

4. 兼容性

为了确保浏览器兼容性，Iconfont 提供了多种字体格式以适应不同的浏览器环境。比如 .eot 文件主要用于 Internet Explorer，而 .woff 则用于最新版本的现代浏览器。

5. 可定制性

用户可以在 Iconfont 网站上选择自己需要的图标，并生成相应的字体文件和 CSS 代码。这样可以减少不必要的图标占用的空间，提高加载速度。

总结

Iconfont 通过使用字体图标的方式实现了图标组件库的功能，这种方式相比于传统的图片图标具有更好的可扩展性和灵活性，因为字体图标可以根据父元素的字体大小和颜色属性自动调整，而且在高分辨率屏幕上也能保持清晰。

七、three.js的载体

Three.js 是一个基于 WebGL 的 3D 图形库，用于在网页中渲染 3D 图形。WebGL 是一个用于渲染交互式 3D 和 2D 图形的标准 Web 技术，它直接在用户的浏览器中运行，无需安装任何插件。

Three.js 的载体

Three.js 的主要载体是浏览器中的 HTML5 元素，通过 WebGL 渲染 3D 图形。具体来说：

HTML5 元素：WebGL：JavaScript：

下面是一个简单的示例，展示如何使用 Three.js 在 HTML 页面中创建一个基本的 3D 场景：

html>
<html>
<head>
  <title>My first Three.js apptitle>
  <style>
    body { margin: 0; }
    canvas { display: block; }
  style>
head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js">script>
  <script>
    // 创建场景
    const scene = new THREE.Scene();
    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    // 创建几何体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    // 定位相机
    camera.position.z = 5;
    // 渲染场景
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  script>
body>
html>

在这个示例中，我们创建了一个简单的立方体，并使用 元素作为 WebGL 的渲染目标。通过 Three.js 的 API，我们可以方便地设置场景、相机、渲染器、几何体、材质等，并通过动画循环不断更新场景。

结论

Three.js 的主要载体是浏览器中的 元素，它依赖于 WebGL 技术来渲染 3D 图形。通过 JavaScript，Three.js 提供了一个易于使用的抽象层，使得开发者能够更容易地创建和管理复杂的 3D 场景。

八、this的问题

这个也是面试中经常会被问到并且很重要的一个问题。大家一定要熟练掌握

一、为什么要有this?

为了让对象中的函数有能力访问对象自己的属性

二、this的优点？

this可以显著的提升代码质量，减少上下文参数的传递

可以产生作用域的地方就可以用/this，除了块级作用域

就两种一个是全局，一个是函数体内。还有一个地方ever欺骗词法作用域也可以用this.

三、this的绑定规则1、默认绑定：

当一个函数独立调用，不带任何修饰符的时候

函数在哪个词法作用域下生效，函数的this就指向哪里

（只要是默认绑定，this一定指向window）

函数本身是没有词法作用域（[[scope]]）的，它的词法作用域是由函数声明的位置确定的或者this坚决不能访问词法作用域内部

var

在全局，通过var声明的变量相当于是在window对象上添加了一个属性

2、隐式绑定

当一个函数被一个对象所引用（非调用），再次调用时，函数中的this会指向该对象。

function foo(){
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
    // 相当于下面这样
    // foo: function foo(){
    //	console.log(this.a)
    // }
}
obj.foo() // 2

先解释下这段代码：obj中有个foo属性，然后这个属性的值又是一个函数体，就相当于foo这个函数体写在了foo这个key里面的value中，最后obj.foo()中obj.foo就是相当于foo这个函数体，然后()就是一个调用的意思

根据隐式绑定的规则，foo这个函数被obj这个函数引用，等你obj再次调用这个函数时，函数中的this最终指向了obj这个对象，而非全局，这就是隐式绑定，因此最终打印2

3、隐式丢失

隐式丢失是隐式绑定的一种，当一个函数被多个函数链式调用时，函数中的this最终指向引用函数的对象

function foo(){
    console.log(this.a);
}
var obj = {
    a: 2,
    foo: foo
}
var obj2 = {
    a: 3,
    obj: obj
}
obj2.obj.foo()

这段代码如何理解呢？我们有两种理解关于最后一行代码，一种是obj2.obj就是obj这个对象，然后obj这个对象去obj.foo()，就是成了一个隐式绑定，this会指向obj。另一种是obj2.(obj.foo())，obj.foo()就是foo()，然后obj2.foo()，相当于obj2调用了这个函数，this会指向obj2。两种理解好像都没问题，其实大部分人应该就是第一种理解，其实最终确实是第一种理解，换句话说，就近原则，最终输出2

4、显示绑定

显示绑定就是使用call、apply或bind方法人为干预他，让他代指谁

1、call

function foo(){
    console.log(this.a);
}
var obj = {
    a: 2
}
foo.call(obj) // 2

这个call的用法就是把foo的this指向了obj

foo中有参数时如何使用

function foo(n){
    console.log(this.a,n);
}
var obj = {
    a: 2
}
foo.call(obj,100) // 2 100

可以看出call与foo共用这个括号

2、apply

3、bind

五、new绑定

当使用new关键字进行实例化一个构造函数时，this最终指向该实例化对象

六、箭头函数

箭头函数没有this这个概念，在箭头函数中的this指向了外层第一个非箭头函数

九、如何实现一个三栏布局

具体的方法大家可以去看看我之前写的这篇文章

三栏布局：打造你想要的网页体验！前言： 什么是三栏布局？ 就是主题内容优先加载,左右固定宽度，中间自适应。简单的说就是当 - 掘金 ()

十、如何实现水平垂直居中

这个是css中经常会被面试官问到的问题，有时候面试官还会让你手写，大家一定要背出来

情景：两个方块，大的包含小的，让小的水平垂直居中

方法一：定位absolute+translate

给top和left分别一个50%，然后自身再top和left负50%

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: rgb(28, 101, 164);
            position: relative;
        }
        .wrap {
            width: 200px;
            height: 200px;
            background-color: green;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* margin-top: -100px; */
            /* margin-left: -100px; */
        }
    style>
head>
<body>
    <div class="box">
        <div class="wrap">div>
    div>
body>
html>

如果已知宽高的时候也可以不用translate,直接写成margin-left:-100px和margin-top:-100px.

方法二：定位+margin auto

<style>
    .father{
        width:500px;
        height:300px;
        border:1px solid #0a3b98;
        position: relative;
    }
    .son{
        width:100px;
        height:40px;
        background: #f0a238;
        position: absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
    }
 style>
 <div class="father">
    <div class="son">div>
 

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: rgb(28, 101, 164);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrap {
		   width: 200px;
            height: 200px;
            background-color: green;
        }
    style>
head>
<body>
    <div class="box">
        <div class="wrap">div>
    div>
body>
html>

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: rgb(28, 101, 164);
            display: grid;
            justify-content: center;
            align-items: center;
        }
        .wrap {
            width: 200px; 
            height: 200px; 
            background-color: green;
        }
    style>
head>
<body>
    <div class="box">
        <div class="wrap">hhhhhhdiv>
    div>
body>
html>

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: rgb(28, 101, 164);
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .wrap {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: green;
        }
    style>
head>
<body>
    <div class="box">
        <div class="wrap">hhhhhhdiv>
    div>
body>
html>