No168.精选前端面试题，享受每天的挑战和学习

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

隐藏元素的属性有哪些

隐藏元素的属性主要有以下几种：

1. display: none
这是最常用的隐藏元素的属性之一。设置为"display: none"会使元素完全不显示，且不占据页面的空间。对应的CSS规则如下：

.element {
  display: none;
}
1
2
3

2. visibility: hidden
使用"visibility: hidden"属性可以隐藏元素，但是元素仍然会占据原本的空间。即使隐藏了元素，其布局空间依然存在，其他元素不会填充其空间。对应的CSS规则如下：

.element {
  visibility: hidden;
}
1
2
3

3. opacity: 0
通过将元素的不透明度设置为0，可以使元素变得透明并隐藏。与"display: none"不同，元素使用"opacity: 0"仍然占据着页面中的空间。对应的CSS规则如下：

.element {
  opacity: 0;
}
1
2
3

这些属性可以通过CSS的类选择器或者内联样式直接应用到HTML元素上。需要注意的是，虽然这些属性可以隐藏元素，但它们并不改变元素的可访问性。隐藏的元素仍然会被屏幕阅读器等辅助技术检测到和读取。

Js的基础类型，typeof和instanceof的区别

JavaScript的基础类型包括以下几种：

1. 布尔类型（Boolean）：true或false。
2. 数字类型（Number）：包括整数和浮点数。
3. 字符串类型（String）：包含文本数据。
4. 空值（null）：表示一个空对象指针。
5. 未定义（undefined）：表示一个未赋值的变量。
6. Symbol类型（Symbol）：引入ES6中的新类型，表示创建唯一的标识符。

typeof运算符用于确定一个值的数据类型，并返回一个字符串，表示该值的数据类型。typeof的结果包括以下几种：

1. “undefined”：如果值未定义。
2. “boolean”：如果值是布尔类型。
3. “number”：如果值是数字类型。
4. “string”：如果值是字符串类型。
5. “symbol”：如果值是Symbol类型。
6. “object”：如果值是对象或null。

需要注意的是，typeof null返回"object"，这是由于历史原因导致的一个已知的错误。
对于大多数对象，typeof返回"object"，但可以使用其他方法来检测特定对象类型。

instanceof运算符用于检查一个对象是否属于某个特定的类或构造函数。
它通过检查对象的原型链来确定对象的类型。

instanceof的语法如下：

object instanceof constructor
1

其中，object是要检查的对象，constructor是要检查的构造函数。

instanceof的结果是一个布尔值，如果对象是指定构造函数的实例，则返回true，否则返回false。

需要注意的是，instanceof只能检测对象的类型，而不能用于基础类型。
它可以用于检测自定义的对象类型，如自定义的类或构造函数，而不是基本的JavaScript类型。

数组的forEach和map方法有哪些区别？

数组的forEach()和map()方法是两种常用的遍历数组的方法，它们有以下区别：

1. 返回值：

   • forEach()方法没有返回值，它只是对数组中的每个元素执行提供的回调函数。
   • map()方法返回一个新的数组，该数组包含经过回调函数处理后的每个元素的返回值。

2. 针对原数组的影响：

   • forEach()方法不会改变原数组，只是遍历执行回调函数。
   • map()方法不仅会执行回调函数，还将返回的每个元素添加到一个新的数组中，不修改原数组。

3. 回调函数的参数：

   • forEach()方法的回调函数可以接收三个参数：当前元素值、当前索引和原数组本身。
   • map()方法的回调函数可以接收三个参数：当前元素值、当前索引和原数组本身，并且可以返回一个新的值。

下面是两个方法的使用示例：

使用 forEach() 方法：

const array = [1, 2, 3];
array.forEach((element, index) => {
  console.log(`Element at index ${index}: ${element}`);
});
1
2
3
4

使用 map() 方法：

const array = [1, 2, 3];
const newArray = array.map((element, index) => {
  return element * 2;
});
console.log(newArray); // 输出: [2, 4, 6]
1
2
3
4
5

总结：

• 如果你只是想遍历数组并进行操作，而不需要返回新的数组，可以使用 forEach() 方法。
• 如果你需要遍历数组并返回一个新的数组，每个元素可能经过某种转换或操作，可以使用 map() 方法。

闭包和作用域

闭包是作用域应用的特殊场景。
js中常见的作用域包括全局作用域、函数作用域、块级作用域。
要知道js中自由变量的查找是在函数定义的地方，向上级作用域查找，不是在执行的地方。
常见的闭包使用有两种场景：

• 一种是函数作为参数被传递；
• 一种是函数作为返回值被返回。

闭包（Closure）和作用域（Scope）是 JavaScript 中的两个重要概念。

作用域是指变量在代码中可访问的范围。JavaScript 采用的是词法作用域，也称为静态作用域，变量的作用域在代码编写时确定，与函数的调用位置无关。JavaScript 中存在全局作用域和函数作用域。在一个作用域内定义的变量，只能在该作用域或嵌套的作用域内访问，外部作用域不能直接访问内部作用域的变量。但是，内部作用域的代码可以访问外部作用域的变量。

闭包是指函数及其相关的引用环境组合而成的实体。简单来说，闭包是指有权访问另一个函数作用域内变量的函数。闭包可以在定义它的函数外部调用，并且可以访问该函数所在的作用域中定义的变量。JavaScript 中的函数都是闭包，因为它们可以访问外部作用域中的变量。

闭包的特点是即使在创建它的函数执行完毕后，闭包依然能保持对外部变量的引用，使得这些变量不会被垃圾回收机制回收。这种特性使得闭包非常有用，可以用于实现数据的私有化、封装等功能。但同时也需要注意，滥用闭包可能导致内存泄漏问题，因为闭包会一直引用外部环境中的变量。

下面是一个使用闭包的简单示例：

function outer() {
  var counter = 0;

  function inner() {
    counter++;
    console.log(counter);
  }

  return inner;
}

var increment = outer();
increment(); // 输出: 1
increment(); // 输出: 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在这个示例中，outer 函数返回了内部的 inner 函数。inner 函数形成了闭包，可以访问外部作用域 outer 中的变量 counter。每次调用 increment 函数时，counter 值会递增并打印出来。

总结：

• 作用域是变量的可访问范围，JavaScript 使用词法作用域。
• 闭包是函数及其相关的引用环境组合而成的实体，能够访问外部作用域中的变量。
• 闭包可以用于在函数外部访问函数内部的变量，实现数据私有化和封装等功能。
• 需要注意合理使用闭包，避免内存泄漏的问题。