2023.07.07面试偏前端angular
===和==的区别
==和===是JavaScript中的两个比较运算符，用于比较两个值的相等性。
==是松散相等运算符，它会进行类型转换后再比较值是否相等。如果两个值的类型不同，==会尝试将它们转换为相同的类型，然后再进行比较。例如，1 == '1'会返回true，因为它们在进行比较之前会被转换为相同的类型。
===是严格相等运算符，它不会进行类型转换，只有在两个值的类型和值都相等时才会返回true。例如，1 === '1'会返回false，因为它们的类型不同。
总结起来，==是松散相等运算符，会进行类型转换后再比较值是否相等；===是严格相等运算符，不会进行类型转换，只有在类型和值都相等时才会返回true。
angular怎么创建一个组件
1、使用Angular CLI命令行工具创建一个新的组件： ng generate component component-name 这将在项目中的src/app目录下创建一个新的组件文件夹，并生成组件所需的文件。
2. 在组件类中定义组件的逻辑和属性：
import { Component } from '@angular/core';
@Component({
selector: 'app-component-name',
templateUrl: './component-name.component.html',
styleUrls: ['./component-name.component.css']
})
export class ComponentNameComponent {
// 组件的属性和逻辑
}在@Component装饰器中，我们可以定义组件的选择器、模板文件和样式文件的路径。
3. 在组件的模板文件中定义组件的HTML结构和样式：
4. 在需要使用该组件的模块中导入并声明该组件：
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ComponentNameComponent } from './component-name.component';
@NgModule({
declarations: [ComponentNameComponent],
imports: [CommonModule],
exports: [ComponentNameComponent]
})
export class ComponentNameModule { }在declarations数组中声明该组件，并在exports数组中导出该组件，以便其他模块可以使用它。
5. 在需要使用该组件的模板文件中使用组件的选择器：
angular如何跳转页面
在Angular中，可以使用路由来实现页面之间的跳转
1. 配置路由：
在app-routing.module.ts文件中，配置路由信息，指定路径和对应的组件：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }在上述代码中，我们定义了两个路由：一个是根路径的路由，对应HomeComponent组件；另一个是about路径的路由，对应AboutComponent组件。
2. 在模板文件中添加路由链接：
在需要跳转的地方，使用routerLink指令添加路由链接：
Go to About在上述代码中，我们使用routerLink指令创建了一个链接，点击该链接将跳转到/about路径。
3. 在根模块中导入路由模块：
在app.module.ts文件中，导入并添加AppRoutingModule到imports数组中：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule],
bootstrap: [AppComponent]
})
export class AppModule { }在上述代码中，我们将AppRoutingModule添加到imports数组中，以便在应用程序中使用路由。
angular guard类型
在Angular中，有几种不同类型的Guard可以用于保护路由和组件。以下是一些常见的Guard类型：
1. CanActivate：用于确定是否可以激活路由。可以使用它来检查用户是否有权限访问某个路由。
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree {
// 检查用户是否有权限访问路由
return true; // 或者返回一个Observable、Promise或UrlTree
}
} 2. CanActivateChild：类似于CanActivate，但用于确定是否可以激活子路由。
import { Injectable } from '@angular/core';
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivateChild {
canActivateChild(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable | Promise | boolean | UrlTree {
// 检查用户是否有权限访问子路由
return true; // 或者返回一个Observable、Promise或UrlTree
}
} 3. CanDeactivate：用于确定是否可以离开当前路由。可以使用它来询问用户是否要离开未保存的表单。
import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class FormGuard implements CanDeactivate {
canDeactivate(
component: any,
currentRoute: ActivatedRouteSnapshot,
currentState: RouterStateSnapshot,
nextState?: RouterStateSnapshot): Observable | Promise | boolean | UrlTree {
// 检查是否可以离开当前路由
return true; // 或者返回一个Observable、Promise或UrlTree
}
} 以上是一些常见的Guard类型，它们可以用于保护路由和组件。在每个Guard中，我们可以实现相应的逻辑来确定是否允许执行特定的操作。Guard可以返回一个布尔值、一个Observable、一个Promise或一个UrlTree对象，以指示是否允许执行操作或导航到特定的路由。
nodejs for in和for of区别
for...in和for...of是两种不同的循环语句，用于遍历对象和数组的元素。
- for...in循环用于遍历对象的可枚举属性。它会遍历对象的所有属性，包括继承的属性。在每次迭代中，变量会被赋值为当前属性的键名。
for (let key in object) {
// 遍历对象的属性
}for...of循环用于遍历可迭代对象的元素。它可以遍历数组、字符串、Set、Map等可迭代对象。在每次迭代中，变量会被赋值为当前元素的值。
for (let element of iterable) {
// 遍历可迭代对象的元素
}总结起来，for...in用于遍历对象的属性，而for...of用于遍历可迭代对象的元素。
angualr怎么访问后台service
要访问后台服务，可以使用Angular的HttpClient模块。
1. 导入HttpClient模块：
在需要使用后台服务的组件中，导入HttpClient模块：
import { HttpClient } from '@angular/common/http';2. 注入HttpClient：
在组件的构造函数中注入HttpClient：
constructor(private http: HttpClient) { }3. 发起HTTP请求：
使用HttpClient的方法（如get、post、put等）发起HTTP请求：
this.http.get(url).subscribe(data => {
// 处理返回的数据
}, error => {
// 处理错误
});项目多语言怎么实现
要在Angular项目中实现多语言功能，可以使用ngx-translate库
1. 安装ngx-translate：
在项目根目录下运行以下命令来安装ngx-translate：
npm install @ngx-translate/core @ngx-translate/http-loader --save
2. 配置ngx-translate：
在根模块中导入ngx-translate模块，并配置翻译文件的加载器：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
})
],
bootstrap: [AppComponent]
})
export class AppModule { }3. 创建翻译文件：
在项目的assets目录下创建翻译文件，如en.json和zh.json，并填写对应的翻译文本：
// en.json
{
"hello": "Hello",
"welcome": "Welcome"
}
// zh.json
{
"hello": "你好",
"welcome": "欢迎"
}4. 在组件中使用ngx-translate：
在需要显示翻译文本的组件中，导入ngx-translate服务，并使用其翻译功能：
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-example',
template: `
{{ 'hello' | translate }}
{{ 'welcome' | translate }}
`
})
export class ExampleComponent {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en'); // 设置默认语言
translate.use('en'); // 使用指定语言
}
}在上述代码中，我们使用管道（translate）来调用ngx-translate的翻译功能，并传递需要翻译的文本。
5. 切换语言：
在需要切换语言的地方，调用ngx-translate的use方法，传入对应的语言标识：
changeLanguage(language: string): void {
this.translate.use(language);
}promise和rxjs的区别，常用场景
Promise和RxJS都是用于处理异步操作的工具，但它们有一些区别。
1. 处理方式：Promise是一次性的，它只能处理单个异步操作的结果。而RxJS是基于观察者模式的，可以处理多个异步操作的结果，并且可以实现更复杂的操作链。
2. 操作符：RxJS提供了丰富的操作符，如map、filter、reduce等，可以对异步数据进行转换、过滤和聚合等操作。而Promise只提供了then和catch方法，功能相对较少。
3. 取消操作：RxJS可以通过使用Subject或其他取消机制来取消异步操作。而Promise没有内置的取消机制，一旦创建就无法取消。
4. 多次订阅：RxJS的Observable可以被多次订阅，每次订阅都会重新执行异步操作。而Promise只能被订阅一次，多次订阅会返回相同的结果。
常用场景：
- 如果只需要处理单个异步操作的结果，可以使用Promise。例如，发送HTTP请求并处理返回的数据。
- 如果需要处理多个异步操作的结果，并且需要进行复杂的操作链，可以使用RxJS。例如，从多个数据源获取数据并进行转换、过滤和聚合等操作。
总结起来，Promise适用于处理单个异步操作的结果，而RxJS适用于处理多个异步操作的结果，并且提供了更丰富的操作符和取消机制。
网站是怎么防止恶意攻击
网站防止恶意攻击的方法有很多，以下是一些常见的防御措施：
1. 输入验证和过滤：对用户输入的数据进行验证和过滤，以防止恶意代码注入。可以使用正则表达式、输入限制和白名单过滤等方法来实现。
2. 身份验证和授权：使用身份验证和授权机制来限制对敏感数据和功能的访问。可以使用会话管理、令牌验证和访问控制列表等方法来实现。
3. 安全头部设置：通过设置安全头部，如X-XSS-Protection、Content-Security-Policy和Strict-Transport-Security等，来增加网站的安全性。
4. 防止暴力破解：限制登录尝试次数、使用验证码、实施IP封锁等方法来防止暴力破解攻击。
5. 防止跨站脚本攻击（XSS）：对用户输入的数据进行转义和过滤，以防止恶意脚本的执行。可以使用安全的模板引擎和输入过滤器来实现。
6. 防止跨站请求伪造（CSRF）：使用CSRF令牌和验证机制来防止恶意网站对用户进行伪造请求。
7. 定期更新和修补漏洞：及时更新和修补网站的软件和组件，以防止已知漏洞的利用。
请注意，以上只是一些常见的防御措施，具体的防御方法应根据网站的需求和情况进行选择和实施。同时，还应定期进行安全审计和漏洞扫描，以确保网站的安全性。
前台UT怎么实现
1. 创建测试文件：
在与组件文件相同的目录下创建一个测试文件，命名规则为组件名.spec.ts，例如example.component.spec.ts。
2. 导入依赖项：
在测试文件中导入需要的依赖项，包括要测试的组件、Angular的测试工具和断言库。
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ExampleComponent } from './example.component';3. 编写测试用例：
在测试文件中编写测试用例，使用describe和it函数来组织和描述测试。
describe('ExampleComponent', () => {
let component: ExampleComponent;
let fixture: ComponentFixture;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ExampleComponent]
}).compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ExampleComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create the component', () => {
expect(component).toBeTruthy();
});
it('should display the correct title', () => {
const titleElement = fixture.nativeElement.querySelector('h1');
expect(titleElement.textContent).toContain('Hello');
});
}); 在上述代码中，我们使用beforeEach函数来设置测试环境和准备测试数据。然后，使用it函数来编写具体的测试用例。在测试用例中，我们可以使用断言库（如expect）来验证组件的行为和输出。
4. 运行测试：
在命令行中运行以下命令来执行测试：
ng test
这将启动Angular的测试运行器，并执行所有的测试用例。测试结果将显示在命令行中。
通过按照以上步骤编写和运行测试用例，我们可以在Angular项目中实现单元测试。测试用例可以验证组件的行为和输出是否符合预期，以确保代码的质量和可靠性。
后台nodeisUT 怎么实现http验证，怎么mock数据，怎么跳过不实际要测试的代码
tyepscript和JS比较有什么优势
TypeScript相对于JavaScript有以下优势：
1. 静态类型检查：TypeScript是JavaScript的超集，添加了静态类型检查的功能。这意味着在编译时会检查类型错误，减少了在运行时出现的类型相关错误的可能性。
2. 更好的IDE支持：由于TypeScript具有明确的类型信息，IDE可以提供更好的代码补全、错误检查和重构等功能，提高了开发效率。
3. 更好的可维护性：TypeScript的静态类型检查和强类型约束可以提高代码的可读性和可维护性。类型注解和接口定义可以使代码更易于理解和修改。
4. 更丰富的语言特性：TypeScript引入了许多新的语言特性，如类、模块、泛型、装饰器等，使得代码更具表达力和可扩展性。
5. 更好的生态系统：TypeScript是由Microsoft开发和维护的，拥有庞大的社区和活跃的开发者生态系统。许多流行的JavaScript库和框架都提供了TypeScript的类型定义文件，使得在TypeScript中使用它们更加方便。
总结起来，TypeScript相对于JavaScript具有静态类型检查、更好的IDE支持、更好的可维护性、更丰富的语言特性和更好的生态系统等优势。这些优势使得TypeScript成为许多开发者首选的语言，特别是在大型项目和团队合作中。
项目怎么进行身份验证
- Access Token（访问令牌）：用于向受保护的资源发出请求的凭证。访问令牌通常包含有关用户身份和权限的信息，并在每次请求中发送给服务器进行验证。
- ID Token（身份令牌）：用于验证用户身份的令牌。身份令牌通常包含有关用户身份的信息，如用户名、电子邮件地址等。
- JWK（JSON Web Key）：用于加密和验证令牌的公钥。JWK是一个包含公钥信息的JSON对象，可以用于验证令牌的签名。
- Issuer（发行者）：用于标识令牌的发行者。发行者是一个可信的实体，负责颁发令牌并验证其有效性。
- Audience（受众）：用于指定令牌的预期接收者。受众是一个或多个可以接收和验证令牌的实体。
AWS apigateway auth jwtauth
angualr数据传递有哪些方式html到ts文件
1. 双向绑定：使用双向绑定可以实现HTML元素和TS变量之间的数据传递。通过在HTML元素上使用[(ngModel)]指令，可以将输入框、复选框等元素的值绑定到TS变量，并实现双向数据绑定。
export class ExampleComponent {
name: string;
}
在上述代码中，输入框的值将与name变量进行双向绑定。
2. 事件绑定：使用事件绑定可以在HTML元素上监听事件，并在TS文件中执行相应的逻辑。通过在HTML元素上使用(eventName)语法，可以将事件绑定到TS方法。
export class ExampleComponent {
handleClick() {
// 处理点击事件的逻辑
}
}
在上述代码中，当按钮被点击时，handleClick方法将被调用。
3. 模板变量：使用模板变量可以在HTML文件中引用元素，并将其传递给TS文件。通过在HTML元素上使用#variableName语法，可以创建一个模板变量，并在TS文件中使用@ViewChild装饰器来引用它。
import { ViewChild, ElementRef } from '@angular/core';
export class ExampleComponent {
@ViewChild('inputElement') inputElement: ElementRef;
handleClick(value: string) {
// 处理点击事件的逻辑，可以使用this.inputElement来访问输入框元素
}
}
在上述代码中，通过模板变量inputElement引用了输入框元素，并在handleClick方法中使用this.inputElement来访问输入框的值。
promis返回的数据类型是什么
Promise返回的数据类型是Promise对象。Promise是JavaScript中用于处理异步操作的一种机制，它表示一个异步操作的最终完成或失败，并返回一个包含操作结果的Promise对象。
Promise对象有三种状态：pending（进行中）、fulfilled（已完成）和rejected（已拒绝）。当异步操作完成时，Promise对象的状态会从pending变为fulfilled，并返回操作结果；当异步操作失败时，Promise对象的状态会从pending变为rejected，并返回错误信息。
CI/CD是怎么实现的，有哪些步骤
CI/CD（持续集成/持续交付）是一种软件开发实践，旨在通过自动化和频繁的代码集成、构建、测试和部署来提高软件交付的速度和质量。以下是实现CI/CD的一般步骤：
1. 代码管理：使用版本控制系统（如Git）管理代码，并将代码存储在代码仓库中。
2. 持续集成：在代码仓库中设置持续集成服务器（如Jenkins），以便在代码提交时自动触发构建和测试过程。
3. 构建：在持续集成服务器上配置构建任务，使用构建工具（如Maven、Gradle或npm）来编译代码、生成可执行文件或构建容器镜像等。
4. 测试：在构建过程中执行各种测试，包括单元测试、集成测试和端到端测试等。可以使用测试框架（如JUnit、Selenium或Cypress）来编写和运行测试。
5. 部署：在构建和测试通过后，将构建结果部署到目标环境中。可以使用自动化部署工具（如Ansible、Docker或Kubernetes）来自动化部署过程。
6. 自动化：通过脚本和工具链来自动化CI/CD过程，减少人工干预和减少错误。
7. 监控和反馈：在部署后，监控应用程序的运行状态，并收集日志和指标。可以使用监控工具（如Prometheus或ELK Stack）来实现监控和日志收集。
通过实施CI/CD，开发团队可以实现快速、可靠和可重复的软件交付。每次代码提交都会触发自动化构建、测试和部署过程，从而减少手动操作和减少错误。这样可以提高开发效率、降低风险，并使软件交付更加可靠和可预测。
1. 创建项目：在Azure DevOps中创建一个项目，用于托管代码和配置CI/CD流程。
2. 版本控制：将代码存储在版本控制系统中，如Git。可以使用Azure DevOps的Git存储库或与其他版本控制系统集成。
3. 定义构建流程：创建一个构建流程，用于自动化构建代码。可以使用Azure Pipelines来定义构建流程，配置构建步骤、构建触发条件和构建代理等。
# azure-pipelines.yml
trigger:
branches:
include:
- main
pool:
vmImage: 'ubuntu-latest'
steps:
- script: |
npm install
npm run build
displayName: 'Build'
4. 配置测试：在构建流程中添加测试步骤，用于自动化运行测试。可以使用适合项目的测试框架和工具，并在构建流程中配置测试命令。
# azure-pipelines.yml
steps:
- script: |
npm install
npm run test
displayName: 'Run Tests'
5. 定义发布流程：创建一个发布流程，用于自动化部署代码。可以使用Azure Pipelines来定义发布流程，配置部署步骤、目标环境和部署触发条件等。
# azure-pipelines.yml
steps:
- script: |
npm install
npm run deploy
displayName: 'Deploy'
6. 配置部署环境：在Azure DevOps中配置目标环境，如测试环境和生产环境。可以使用Azure资源管理器（ARM）模板或其他部署工具来自动化环境配置。
7. 设置持续集成：将构建和测试流程与版本控制系统集成，以实现持续集成。可以配置触发条件，使得每次代码提交或合并到指定分支时都会触发构建和测试流程。
8. 设置持续交付：将发布流程与持续集成流程集成，以实现持续交付。可以配置触发条件，使得每次构建成功后都会触发部署流程。
通过按照以上步骤使用Azure DevOps，我们可以实现CI/CD流程。Azure DevOps提供了一套集成的工具和服务，包括Azure Pipelines、Azure Repos、Azure Test Plans和Azure Artifacts等，可以帮助我们自动化构建、测试和部署软件。