56期问题及答案
1. let和const,var的区别
在 JavaScript 中,let
、const
和 var
是用于声明变量的关键字,它们之间有一些重要的区别:
作用域:
var
:使用var
声明的变量具有函数作用域或全局作用域。如果在函数内部声明的变量,那么它只在该函数内部有效。如果在函数外部声明的变量,那么它在整个代码文件中都有效。let
和const
:使用let
和const
声明的变量具有块级作用域。块级作用域是指变量只在声明的代码块(通常是花括号{}
包裹的区域)内有效。在函数内部或其他块级作用域内使用let
或const
声明的变量,在代码块外部是无法访问的。
变量提升:
var
:使用var
声明的变量会发生变量提升。这意味着变量声明会被提升到代码的顶部,但变量的赋值仍然保留在原来的位置。因此,在变量声明之前访问变量,会返回undefined
。let
和const
:使用let
和const
声明的变量也会进行变量提升,但与var
不同,let
和const
的变量在变量声明之前是不可访问的。这种现象称为"暂时性死区"(Temporal Dead Zone,TDZ)。
重复声明:
var
:使用var
可以重复声明同一个变量,而不会报错。在重复声明后,变量会被覆盖。let
和const
:使用let
和const
声明的变量在同一作用域内不允许重复声明,否则会导致语法错误。
变量值的修改:
var
和let
:使用这两个关键字声明的变量,其值可以修改。const
:使用const
声明的变量是常量,其值在声明后不能再修改。
综上所述,推荐在现代 JavaScript 开发中优先使用 let
和 const
来声明变量,因为它们具有块级作用域和更严格的规则,可以避免许多常见的问题。而 var
已经逐渐被淘汰,因为它的作用域和变量提升机制容易引起意外的 bug。
2.详细讲一下你了解到的flex布局
Flex 布局(Flexbox)是一种用于在容器中对子元素进行灵活的布局的 CSS3 特性。它通过定义容器的属性来控制子元素的布局方式,使得在不同屏幕尺寸下,页面布局可以更加灵活和自适应。Flex 布局的目标是使子元素在容器中能够均匀地分布,并可以轻松地对其进行对齐、排列和调整。
Flex 布局的主要概念包括以下几个部分:
Flex 容器(Flex Container):采用 Flex 布局的元素成为 Flex 容器。使用
display: flex;
或display: inline-flex;
可以将元素设置为 Flex 容器。Flex 容器的子元素称为 Flex 项目。Flex 项目(Flex Item):Flex 容器内的子元素称为 Flex 项目。每个 Flex 项目可以具有自己的 Flex 属性,用于控制其在 Flex 容器中的布局。
Flex 轴(Flex Axis):Flex 容器有两个轴,主轴(main axis)和交叉轴(cross axis)。主轴是 Flex 项目的排列方向,而交叉轴垂直于主轴。Flex 项目可以根据主轴和交叉轴来进行对齐和排列。
Flex 布局的主要属性包括以下几个:
flex-direction
:指定 Flex 容器的主轴方向,可以是row
(水平方向,从左到右)、row-reverse
(水平方向,从右到左)、column
(垂直方向,从上到下)或column-reverse
(垂直方向,从下到上)。justify-content
:指定 Flex 项目在主轴上的对齐方式,可以是flex-start
(左对齐)、flex-end
(右对齐)、center
(居中对齐)、space-between
(两端对齐,项目之间间距相等)、space-around
(每个项目两侧间距相等,项目之间间距是项目与容器边缘间距的两倍)或space-evenly
(每个项目两侧间距相等)。align-items
:指定 Flex 项目在交叉轴上的对齐方式,可以是flex-start
(顶部对齐)、flex-end
(底部对齐)、center
(居中对齐)、baseline
(基线对齐)或stretch
(拉伸对齐,使项目占满交叉轴空间)。flex-wrap
:指定 Flex 项目是否换行,可以是nowrap
(不换行,所有项目在一行上排列)、wrap
(换行,多行排列)或wrap-reverse
(换行,多行反向排列)。
下面是一个简单的 Flex 布局的示例:
<!DOCTYPE html>
<html>
<head>
<title>Flex 布局示例</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 1px solid #ccc;
}
.item {
width: 100px;
height: 100px;
background-color: #f00;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
在这个示例中,我们创建了一个 Flex 容器(.container
),其中包含三个 Flex 项目(.item
)。容器设置了 display: flex;
,表示它采用 Flex 布局。然后,我们通过 justify-content: center;
3. 讲解你了解到的栈和队列
栈(Stack)和队列(Queue)是两种常见的数据结构,它们分别用于存储和操作数据的特定方式。以下是对栈和队列的简要介绍以及用JavaScript实现的示例代码:
栈(Stack): 栈是一种后进先出(Last-In-First-Out,LIFO)的数据结构,即最后入栈的元素最先出栈。栈的操作主要包括入栈(push)和出栈(pop)两种。在栈中,新的元素总是被添加到栈的顶部,而删除元素也是从栈的顶部进行。
实现栈的示例代码:
class Stack {
constructor() {
this.items = [];
}
push(item) {
this.items.push(item);
}
pop() {
if (this.items.length === 0) {
return null;
}
return this.items.pop();
}
peek() {
if (this.items.length === 0) {
return null;
}
return this.items[this.items.length - 1];
}
isEmpty() {
return this.items.length === 0;
}
size() {
return this.items.length;
}
clear() {
this.items = [];
}
}
// 使用示例
const stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
console.log(stack.pop()); // 输出 3
console.log(stack.peek()); // 输出 2
console.log(stack.isEmpty()); // 输出 false
console.log(stack.size()); // 输出 2
stack.clear();
console.log(stack.isEmpty()); // 输出 true
队列(Queue): 队列是一种先进先出(First-In-First-Out,FIFO)的数据结构,即最先入队的元素最先出队。队列的操作主要包括入队(enqueue)和出队(dequeue)两种。在队列中,新的元素总是被添加到队列的末尾,而删除元素则是从队列的前端进行。
实现队列的示例代码:
class Queue {
constructor() {
this.items = [];
}
enqueue(item) {
this.items.push(item);
}
dequeue() {
if (this.items.length === 0) {
return null;
}
return this.items.shift();
}
front() {
if (this.items.length === 0) {
return null;
}
return this.items[0];
}
isEmpty() {
return this.items.length === 0;
}
size() {
return this.items.length;
}
clear() {
this.items = [];
}
}
// 使用示例
const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
console.log(queue.dequeue()); // 输出 1
console.log(queue.front()); // 输出 2
console.log(queue.isEmpty()); // 输出 false
console.log(queue.size()); // 输出 2
queue.clear();
console.log(queue.isEmpty()); // 输出 true
57期
如何实现长宽比
vue中functional组件的特点,什么时候适合用functional
http复杂请求和普通请求的区别
上面问题的答案会在第二天的公众号推文中公布,大家可以关注公众号:程序员每日三问,第一时间获得推送内容。
学习不打烊,充电加油只为遇到更好的自己,每天早上9点纯手工发布面试题(死磕自己,愉悦大家) 希望大家在这浮夸的程序员圈里保持冷静,每天坚持花20分钟来学习与思考,在千变万化,类库层出不穷的今天,不要等到找工作时才狂刷题,提倡每日学习。