面经

7.12.

1. ES6 中的 let 和 const 与 var 的区别

特性	var	let	const
作用域	函数级	块级	块级
声明提升	会	不会	不会
重复声明	允许	不允许	不允许
修改值	允许	允许	不允许（常量）

解释:

• 作用域: var 声明的变量作用域为函数作用域，而 let 和 const 声明的变量作用域为块级作用域（一对花括号 {} 内）。
• 声明提升: var 声明的变量会被提升到函数顶部，而 let 和 const 不会。
• 重复声明: 使用 var 可以多次声明同一个变量，而 let 和 const 不允许在同一个作用域内重复声明变量。
• 修改值: var 和 let 声明的变量可以修改值，而 const 声明的变量是常量，不能修改其值。

2. MVC 和 MVVM 分别是什么？

• MVC (Model-View-Controller):

  模型-视图-控制器。

  • Model (模型): 数据层，负责数据的获取、存储和处理。
  • View (视图): 用户界面，负责数据的展示。
  • Controller (控制器): 业务逻辑层，负责处理用户交互，操作模型数据，并更新视图。

• MVVM (Model-View-ViewModel):

  模型-视图-视图模型。

  • Model (模型): 数据层，负责数据的获取、存储和处理。
  • View (视图): 用户界面，负责数据的展示，并与 ViewModel 进行数据绑定。
  • ViewModel (视图模型): 连接 Model 和 View 的桥梁，负责处理视图逻辑，并将 Model 数据转换为 View 可以展示的数据。

区别:

• MVC 中 Controller 负责处理用户交互和更新视图，而 MVVM 中 ViewModel 负责处理视图逻辑和数据绑定。
• MVVM 通过数据绑定实现 View 和 ViewModel 的同步更新，减少了 DOM 操作，提高了开发效率。

3. <img> 的 title 和 alt 有什么区别？

• alt (alternate text): 图片的替代文本，当图片无法加载时显示，用于辅助视障用户理解图片内容，也有利于 SEO。
• title: 鼠标悬停在图片上时显示的提示信息。

区别:

• alt 属性是必需的，title 属性是可选的。
• alt 属性用于描述图片内容，title 属性用于提供额外的提示信息。

4. jQuery 中 bind, live, on 的区别

• bind():

  为指定元素绑定事件处理程序，只对直接绑定元素有效。

  javascript

  $('button').bind('click', function() {
    // ...
  });

• live():

  为所有匹配选择器的元素绑定事件处理程序，包括未来动态添加的元素，但已弃用。

  javascript

  $('button').live('click', function() {
    // ...
  });

• on():

  是 bind() 和 live() 的替代方法，可以为指定元素或其后代元素绑定事件处理程序，支持事件委托。

  javascript

  $('ul').on('click', 'li', function() {
    // ...
  });

区别:

• bind() 只对直接绑定元素有效，live() 和 on() 支持事件委托。
• live() 已弃用，建议使用 on()。

5. 请描述 jQuery 的事件委托

事件委托是指将事件处理程序绑定到父元素上，利用事件冒泡机制，当子元素触发事件时，事件会冒泡到父元素，从而触发父元素上的事件处理程序。

优点:

• 减少事件绑定次数，提高性能。
• 可以为动态添加的元素绑定事件。

示例:

javascript

$('ul').on('click', 'li', function() {
  // 当点击 li 元素时，事件会冒泡到 ul 元素，从而触发该事件处理程序
  console.log('你点击了 li 元素');
});

6. webpack 和 gulp 的区别

• webpack: 模块打包工具，将各种模块依赖打包成静态资源。
• gulp: 基于流的自动化构建工具，可以自动化执行各种任务，例如文件压缩、代码合并、图片优化等。

区别:

• webpack 侧重于模块打包，gulp 侧重于自动化构建。
• webpack 内置了模块解析机制，gulp 需要借助插件实现。

7. 用 js 写一段 99 乘法表方法

javascript

for (let i = 1; i <= 9; i++) {
  let row = '';
  for (let j = 1; j <= i; j++) {
    row += `${j} * ${i} = ${j * i}\t`;
  }
  console.log(row);
}

8. 请说出三种减低页面加载时间的方法

1. 减少 HTTP 请求: 合并 CSS 和 JavaScript 文件，使用雪碧图技术。
2. 压缩文件大小: 压缩 CSS、JavaScript 和图片文件。
3. 使用浏览器缓存: 设置缓存策略，缓存静态资源。

9. 前端开发中，如何优化图像？图像格式的区别？

图像优化:

• 选择合适的图像格式。
• 压缩图像文件大小。
• 使用雪碧图技术。
• 使用懒加载技术。

图像格式区别:

• JPEG (Joint Photographic Experts Group): 有损压缩，适合照片等色彩丰富的图像。
• PNG (Portable Network Graphics): 无损压缩，支持透明度，适合图标、logo 等图像。
• GIF (Graphics Interchange Format): 支持动画，适合简单的动画效果。
• SVG (Scalable Vector Graphics): 矢量图形，可以无限缩放而不失真，适合图标、logo 等。
• WebP: 新一代图像格式，压缩率更高，画质更好，但浏览器兼容性较差。

10. 请列出常见的浏览器内核

• Trident (IE): IE 浏览器使用的内核。
• Gecko (Firefox): Firefox 浏览器使用的内核。
• WebKit (Safari, Chrome): Safari 和 Chrome 浏览器使用的内核。
• Blink (Chrome, Opera): 从 WebKit 发展而来，Chrome 和 Opera 浏览器使用的内核。

11. HTML5 哪些标签可以做 SEO 优化？

• <title>: 页面标题。
• <meta>: 元数据，例如 description、keywords 等。
• <h1> - <h6>: 标题标签。
• <img>: 图片标签，使用 alt 属性描述图片内容。
• <a>: 链接标签，使用 title 属性提供链接描述。

12. src 和 href 的区别

• src (source): 用于嵌入资源，例如图片、视频、脚本等，浏览器会立即加载 src 引用的资源。
• href (hypertext reference): 用于建立超链接，浏览器会在用户点击链接时才加载 href 引用的资源。

13. 页面导入样式时，使用 link 和 @import 有什么区别？

• link: 属于 HTML 标签，浏览器会并行加载 link 引用的样式文件。
• @import: 属于 CSS 语法，浏览器会先加载 HTML 文件，然后才加载 @import 引用的样式文件。

区别:

• link 加载速度更快。
• link 兼容性更好。
• @import 可以用于导入 CSS 文件中的部分样式。

14. 清除浮动有哪些方式？

1. 添加额外标签: 在浮动元素后面添加一个空的块级元素，并设置 clear: both 样式。
2. 使用伪元素: 为父元素添加 ::after 伪元素，并设置 clear: both 样式。
3. 设置父元素高度: 为父元素设置固定高度。
4. 使用 overflow 属性: 为父元素设置 overflow: hidden 或 overflow: auto 样式。

15. 怎么实现水平垂直居中？

方法一：Flexbox 布局

css

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法二：绝对定位 + transform

css

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

16. 怎么实现左边定宽，右边自适应布局？

html

<div class="container">
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>

css

.container {
  display: flex;
}

.left {
  width: 200px;
}

.right {
  flex: 1;
}

17. 怎么实现中间自适应宽度，左右两栏固定宽度布局？

html

<div class="container">
  <div class="left">左边</div>
  <div class="center">中间</div>
  <div class="right">右边</div>
</div>

css

.container {
  display: flex;
}

.left {
  width: 200px;
}

.right {
  width: 200px;
}

.center {
  flex: 1;
}

18. display: none; 与 visibility: hidden 的区别是什么？

• display: none;: 元素不显示，不占据空间，浏览器不会渲染该元素。
• visibility: hidden;: 元素不可见，但占据空间，浏览器会渲染该元素。

19. input 和 textarea 的区别

• input: 用于输入单行文本，例如用户名、密码等。
• textarea: 用于输入多行文本，例如评论、留言等。

20. 400, 401, 403 状态码分别代表什么？

• 400 Bad Request: 客户端请求语法错误，服务器无法理解。
• 401 Unauthorized: 用户未授权，需要提供身份验证信息。
• 403 Forbidden: 服务器拒绝访问，即使提供身份验证信息也不行。

21. 简单描述下微信小程序的相关文件类型

• .js: JavaScript 代码文件，用于处理逻辑。
• .json: 配置文件，用于配置页面、组件等。
• .wxml: 微信小程序的视图文件，类似于 HTML。
• .wxss: 微信小程序的样式文件，类似于 CSS。

22. 微信小程序的 wxss 和 css 有哪些不一样的地方？

• 新增尺寸单位 rpx: 用于适配不同屏幕尺寸。
• **不支持选择器 *: ** 无法选择所有元素。
• 样式隔离: 不同页面和组件的样式相互隔离。

23. 微信小程序页面间有哪些传递数据的方法？

• URL 参数: 在跳转页面时，可以通过 URL 参数传递数据。
• 全局变量: 定义全局变量，在不同页面共享数据。
• 本地存储: 使用 wx.setStorageSync() 和 wx.getStorageSync() 进行本地数据存储。

24. 微信小程序如何实现下拉刷新？

在页面 JSON 文件中设置 enablePullDownRefresh: true，并在 JavaScript 文件中监听 onPullDownRefresh 事件。

javascript

// 页面 JSON 文件
{
  "enablePullDownRefresh": true
}

// 页面 JS 文件
Page({
  onPullDownRefresh: function () {
    // 执行下拉刷新逻辑
  }
})

25. 微信小程序 bindtap 和 catchtap 的区别是什么？

• bindtap: 绑定点击事件，不会阻止事件冒泡。
• catchtap: 绑定点击事件，会阻止事件冒泡。

26. 简述下微信小程序 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch() 的区别

• wx.navigateTo(): 保留当前页面，跳转到新页面，可以返回。
• wx.redirectTo(): 关闭当前页面，跳转到新页面，无法返回。
• wx.switchTab(): 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
• wx.navigateBack(): 返回上一级页面。
• wx.reLaunch(): 关闭所有页面，打开到应用内的某个页面。

27. 微信小程序的生命周期函数分别是什么？

• onLoad: 页面加载时触发。
• onShow: 页面显示时触发。
• onReady: 页面初次渲染完成时触发。
• onHide: 页面隐藏时触发。
• onUnload: 页面卸载时触发。

懒加载实现方式、轮播图实现方式、登录等实现方式（熟悉项目）

7.12第二个面试：

PS \ CSS3 \ HTML5 \ jQuery \ Canves \

代码：

数组去重、数组排序