[JS]精选面试题-2

1.谈⼀谈你理解的函数式编程

函数式编程（Functional Programming）是一种编程范式，通过函数的组合实现程序的功能

核心特性

1. 函数是第一等公民：在函数式编程中，函数不仅可以被调用，还可以像其他值（如整数、字符串）一样被传递、组合和操作。
2. 纯函数：函数式编程中的函数通常是纯函数，即给定相同的输入，总会产生相同的输出，且不会改变外部状态或产生副作用。

优点

1. 代码可读性强：大量使用函数，使得程序更加简洁和易于理解。
2. 可维护性高：每个函数都是独立的单元，易于维护。
3. 适合处理大规模数据：函数式编程的不可变性质使得并行处理大规模数据变得更加容易和安全。
4. 易于并发编程：由于函数没有副作用，因此可以避免并发编程中常见的死锁和竞态条件等问题。

缺点

1. 递归使用较多：函数式编程通常使用递归而不是循环来实现迭代逻辑，这可能导致栈溢出等问题。
2. 难以与现有系统集成：函数式编程与传统的命令式编程方法不兼容，与现有的系统集成可能会面临一些挑战。

应用场景

1. 并行和并发编程
2. 数据处理：函数式编程非常适合处理数据流
3. 数学运算：函数式编程非常适合处理数学运算和算法实现。

2.谈⼀谈箭头函数与普通函数的区别？

1. 写法与命名

• 箭头函数：通常是匿名的
• 普通函数：通常有明确的函数名

2. 构造函数

• 箭头函数：不能用作构造函数。因为箭头函数没有prototype属性，且this的绑定方式与普通函数不同。
• 普通函数：可以用作构造函数，通过new关键字来创建对象实例。普通函数具有prototype属性，可以添加方法和属性，供实例继承。

3. this的绑定

• 箭头函数：不绑定自己的this，而是继承自上一级作用域的this值。
• 普通函数：this的绑定取决于函数的调用方式。在全局上下文中，this指向全局对象（在浏览器中是window，在Node.js中是global）。在对象方法中，this指向调用该方法的对象。在作为构造函数时，this指向新创建的对象实例。此外，还可以通过call、apply和bind方法来显式地设置this的绑定。

4. arguments对象

• 箭头函数：不拥有arguments对象。如果需要访问参数列表，可以使用剩余参数（...args）
• 普通函数：每次调用时都会自动创建一个arguments对象，该对象包含了传递给函数的所有参数

3.xhtml , html, xml 有什么区别?

html是超文本标记语言, 主要作用是定义网页的结构, 在网页中展示数据,

xml是可扩展标记语言, 特点是通过标签定义数据结构, 主要作用是传输和储存数据,

xhtml是可扩展超文本标记语言, 就是对htm进行了严格的xml规范化, 目的就是取代html, 但是实际发展过程中, HTML5更受欢迎, w3c也停止了对xhtml的开发

XML和JSON的区别？

XML（eXtensible Markup Language）和JSON（JavaScript Object Notation）是两种常用于数据交换和存储的格式，以下是对这两种格式区别的详细分析：

1. 定义与起源

• XML：是一种可扩展标记语言，专门用于存储和交换数据。
• JSON：是一种轻量级的数据交换格式，基于JavaScript语言的一个子集。

2. 数据表示方式

• XML：使用标签来组织数据，每个标记都有开始和结束标签。这使得XML文件具有高度的结构化和可读性，但也导致文件体积较大。
• JSON：使用键值对来表示数据，键和值之间用冒号分隔，对象用花括号{}表示，数组用方括号[]表示。JSON的数据结构更加紧凑，因此文件体积通常较小。

3. 可读性与编码难度

• 可读性：XML的标签形式，对于人类阅读者来说可能更加直观；而JSON则以简洁的键值对结构，在编程和自动化处理中更加受欢迎。

4.JSON 的了解

一、JSON的定义与特点

JSON是一种轻量级的数据交换格式, 最初是从JavaScript中发展而来，如今已经成为一种独立于语言的数据交换格式。

JSON使用键值对来表示数据，键和值之间用冒号分隔，对象用花括号{}表示，数组用方括号[]表示。

JSON的数据结构紧凑, 非常简洁, 易于阅读理解, 并且文件体积较小。

二、JSON的解析与生成

序列化: JSON.stringify()函数将JavaScript对象转换为JSON字符串

反序列化: JSON.parse()函数将JSON字符串转换为JavaScript对象

5.对web标准、可⽤性、可访问性的理解

对Web标准的理解

Web标准是指万维网联盟（W3C）等权威组织制定的标准。这些标准旨在实现互联网的统一，确保不同平台、浏览器和设备能够正确的呈现网页内容，从而提高用户体验、减少开发和维护成本，并促进互联网的可持续发展。Web标准主要由以下三部分组成：

1. 结构标准：定义网页的结构，包括网页的元素、属性、标签等。常见的结构标准包括HTML（超文本标记语言）、XHTML（可扩展超文本标记语言）、XML（可扩展标记语言）等。HTML是Web页面内容的基础，通过标签来描述页面的结构和内容。
2. 表现标准：定义网页的表现，包括网页的样式、布局、动画等。常见的表现标准包括CSS（层叠样式表）、SVG（可缩放矢量图形）等。CSS用于控制网页的布局和样式，使网页在不同的设备和浏览器上呈现一致的效果。
3. 行为标准：定义网页的行为，包括网页的事件、交互等。常见的行为标准包括JavaScript、DOM（文档对象模型）等。JavaScript是一种编程语言，用于实现网页的动态效果和交互功能，而DOM则提供了访问和操作网页内容的接口。

对Web可用性的理解

Web可用性是一个多因素概念，包括系统的学习成本、使用成本、系统的有效性、用户满意度。

主要措施:

1. 简洁明了的界面：保持界面简洁，使用户能够轻松找到所需的信息。
2. 一致性和可预测性：保持系统的一致性，使用户能够准确预期网站的行为。
3. 清晰的导航：提供明确的导航路径和导航元素，帮助用户快速找到所需的内容。
4. 反馈和确认：给与用户明确的操作反馈，以增强用户的控制感和信任感。

对Web可访问性的理解

Web可访问性（Accessibility）是指Web内容对于残障用户的可阅读和可理解性。

提高可访问性的主要方法包括：

1. 提供替代文本：为图像、图表等视觉元素提供替代文本（alt文本），以便屏幕阅读器等辅助技术能够解读和呈现这些元素。
2. 使用语义化标记：使用HTML的语义化标记来描述网页的结构和内容，以便辅助技术能够理解网页的层次结构和元素之间的关系。
3. 确保键盘可访问性：确保网站的所有功能都可以通过键盘来访问和操作，以便那些无法使用鼠标的用户（如视障用户）能够使用网站。
4. 良好的内容层级：使用清晰易读的字体, 划分明显的内容层级，以便视觉障碍用户轻松使用网站。

7.说⼏条写JavaScript的基本规范

良好的编码规范可以显著提高代码的可读性、可维护性和性能。

1. 变量声明

• 避免⼀⾏声明多个变量
• 优先使用const声明变量

2. 比较运算符

• 优先使用全等运算符(===)

3. 数组和对象的创建

• 优先使用字面量创建数组和对象

4. 控制结构

• switch语句：必须带有default分支，以处理未匹配到任何case的情况。
• if和for语句：即使只有一行代码，也应使用大括号{}来明确代码块的范围

6. 命名规范

• 局部变量遵循小驼峰命名法
• 全局变量使用大写字母和下划线命名
• 类和构造函数遵循大驼峰命名法命名
• 函数遵循小驼峰命名法, 使用动词开头

8. 拆分文件

• 使用外链的JS和CSS
• JS放在文档的底部
• CSS放在文档的头部

8.什么是按需加载

按需加载是前端性能优化中的重要措施，其核心理念是根据用户的实际操作来加载相应的资源。

优点

1. 提升性能：相比一次性加载, 按需加载可以减少初始的加载时间
2. 减少服务器压力：由于减少了不必要的资源加载，服务器的负载也会相应降低
3. 提升用户体验：用户可以根据自己的需求加载内容，而不必等待所有资源加载完成才能使用页面

实现方式

1. 懒加载（Lazy Loading）：对于图片、视频等媒体资源，可以采用懒加载的方式，即当用户滚动到这些资源所在的位置时才进行加载。
2. 代码分割（Code Splitting）：在构建前端项目时，可以将代码分割成多个小块（chunks），然后根据需要动态加载这些小块。这通常通过Webpack等构建工具来实现。
3. 异步组件（Async Components）：在Vue等现代前端框架中，可以使用异步组件来实现按需加载。这些组件在需要时才会被加载和渲染。
4. 按需导入（Dynamic Imports）：在JavaScript中，可以使用动态导入语法（如import()）来按需加载模块。这种方式允许你在需要某个模块时才加载它。

9.说说严格模式的限制

JavaScript的严格模式（Strict Mode）是一种具有限制性的JavaScript模式，它使代码隐式地脱离了“懒散（sloppy）模式”，从而以更加严格的方式对代码进行检测和执行。

1. 变量声明：

• • 变量必须通过关键字进行声明

1. 删除变量、函数或函数参数：

• • 不允许使用delete操作符删除变量、函数或函数参数

1. 只读属性赋值：

• • 不允许对只读属性（如通过const关键字声明的常量）进行赋值

1. this值：

• • 在严格模式下，全局函数的this不再指向全局对象，而是undefined
  • 除非通过call()、apply()或bind()明确指定

1. 重复的函数参数名：

• • 严格模式下，函数的参数不能重复
  • 在非严格模式下，重复的函数参数名会被忽略。

1. with语句：

• • 不允许使用with语句。with语句允许将对象的属性添加到作用域链中，可能导致代码可读性和性能问题。

10.常⻅兼容性问题？

由于不同浏览器对JavaScript的实现细节和特性支持程度存在差异，因此同一份代码在不同浏览器上可能会表现出不同的行为

1. 新语法支持

• 问题描述：不同浏览器对新特性支持程度不同。
• 解决方法：

• • 使用Babel等JavaScript编译器将ES6+代码转换为向后兼容的ES5代码。

2. DOM差异

• 问题描述：不同浏览器对DOM的操作和渲染存在差异
• 问题示例: 盒模型的差异, 导致的 margin 和 padding 不同。
• 解决方法：

• • 全局的样式初始化
  • 简化或避免DOM操作，从根本上解决问题。

3. 事件处理差异

• 问题描述：旧版IE浏览器使用IE事件模型，而其他浏览器使用W3C标准事件模型。
• 解决方法：

• • 不同的事件模型在事件注册, 事件解绑, 事件对象都存在差异
  • 如果需要兼容旧版IE使浏览器,就需要用条件注释或特性检测添加额外的兼容逻辑

• 举例:

• • IE 下, event 对象有 x , y 属性,但是没有 pageX , pageY 属性
  • Firefox 下, event 对象有 pageX , pageY 属性,但是没有 x,y 属性 .

4.最佳实践

• 避免使用特定的浏览器API：这些扩展或API可能在其他浏览器中不可用，从而导致兼容性问题。
• 使用现代的开发工具和框架：这些工具和框架通常已经处理了大部分的兼容性问题，并提供了丰富的文档和社区支持。