你的前端技术是否能通过这些高频面试题?(二)

简介: 你的前端技术是否能通过这些高频面试题?

你的前端技术是否能通过这些高频面试题?(一)https://developer.aliyun.com/article/1426320


7.const, let 和 var 有什么区别

constletvar 是用于声明变量的关键字,它们有以下区别:

  1. const:用于声明一个只读的常量,一旦被声明,它的值不能被修改。但是,如果是引用类型(例如对象、数组)时,引用本身是不能被修改的,但对象或数组中的属性或元素是可以修改的。
  2. let:用于声明一个块级作用域的变量,它的作用域仅限于当前的代码块,不会被提升到函数作用域或全局作用域。
  3. var:用于声明一个函数作用域或全局作用域的变量,它的作用域不受代码块的限制,而是在整个函数或全局范围内都可以访问。

下面是一个示例,展示 constletvar 的差异:

function test() {
  var a = 10;
  let b = 20;
  const c = 30;
  if (true) {
    var a = 50;
    let b = 60;
    const c = 70;
    console.log(a, b, c);
  }
  console.log(a, b, c);
}
test(); // 输出:50 60 70,10 20 30

在上面的示例中,使用 var 声明的变量 a 在代码块内部被重新赋值,同时在代码块外部也被重新赋值。这是因为 var 声明的变量的作用域不仅局限于代码块内部,而是在整个函数作用域范围内有效。而使用 letconst 声明的变量 bc 只在代码块内部有效,并且代码块内的重新赋值不会影响到代码块外部的变量。

因此,对于变量的声明,应该优先使用 constlet,避免使用 varconst 用于声明不会被重新赋值的常量(例如数学常数、常量字符串等),使用 let 声明变量并且在需要重新赋值的情况下使用它。如果您需要使用一个变量,但不希望它在函数或全局范围内被访问,请使用 let

8.处理 any 类型,如何避免 any

any 是 TypeScript 中的一种通用类型,用于表示任何类型的值。由于它是一种非常宽泛的类型,无法提供静态类型检查的保障,使用 any 类型会增加代码出错的风险,并且对于代码可读性和可维护性也不利。

为了更好地利用 TypeScript 的静态类型检查,应该尽可能避免使用 any 类型。下面是一些方法可以帮助您减少在代码中使用 any

  1. 尽可能地使用具体的类型:在代码中使用具体的类型可以帮助您充分利用 TypeScript 的类型检查功能,这有助于在开发过程中尽早发现潜在的类型转换错误等问题。例如,尽量使用字符串、数字、布尔等具体类型,而不是将它们视为 any 类型。
  2. 使用泛型:在需要处理多种类型的函数或类时,可以使用泛型来代替 any。泛型可以帮助您在编译时捕获类型错误,并提高代码的可读性和可维护性。
  3. 定义接口或类型别名:在需要包含多个属性或方法的复杂结构中,可以使用接口或类型别名来定义类型,而不是使用 any。使用接口或类型别名可以帮助您充分利用 TypeScript 的类型检查功能,并避免类型转换错误。
  4. 使用非空断言操作符:在某些情况下,可以使用非空断言操作符 ! 来告诉 TypeScript 某个变量不为空,从而避免将其视为 any 类型。但是,使用非空断言操作符需要慎重,可能会掩盖真正的类型错误。

总之,尽可能避免使用 any 类型可以帮助您充分利用 TypeScript 的静态类型检查功能,提高代码的可读性和可维护性。在编写代码时,应该尽可能使用具体的类型、泛型、接口等替代方案来代替 any 类型。

9.举几个常用的 Hook,并且解释一下作用

React Hooks 是 React 16.8 版本引入的新功能,当我们需要在函数式组件中使用状态和生命周期方法时,可以使用 Hooks,以下是几个常用的 Hooks。

  1. useState()

useState Hook 允许函数组件使用状态,这是一个能够重复使用的类似 this.state 和 this.setState 方法的 Hook。useState 为函数组件提供了在不转换为类的情况下存储和更新组件状态和其它变量的能力。

import React, { useState } from 'react';
function Example() {
  // 声明一个新的状态变量,名为 "count"
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

在上述示例中,useState 的初始值为 0,然后修改 count 的值需要使用 setCount 方法。每次修改了 count 的值,整个组件都会重新渲染。

  1. useEffect()

useEffect 可以用来在函数组件中执行副作用操作,例如获取远程数据、添加或删除 DOM 元素等。useEffect 在每次渲染后执行,但是可以根据需要进行激活和清除。

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 更新文档标题
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

上述示例中,每次 count 改变,useEffect 执行后会修改文本标题。如果需要进行清除操作,则需要返回一个清除函数:

useEffect(() => {
  // 执行副作用操作
  return () => {
    // 清除操作
  };
});
  1. useContext()

useContext 用于在组件之间共享数据,可以避免使用 props 进行层层传递。通过使用 useContext,您可以将公共数据从父组件提取并将其传递到子组件中。

import React, { useContext } from 'react';
// 创建一个上下文对象
const MyContext = React.createContext(defaultValue);
function ChildComponent() {
  // 读取 MyContext 的值
  const contextValue = useContext(MyContext);
  return (
    <div>
      {contextValue}
    </div>
  );
}
function ParentComponent() {
  // 将值传递给 MyContext
  return (
    <MyContext.Provider value="Hello World!">
      <ChildComponent />
    </MyContext.Provider>
  );
}

在上述示例中,将值“Hello World!”传递给 MyContext,并在 ChildComponent 中使用 const contextValue = useContext(MyContext) 访问该上下文的值。

React Hooks 还有很多其它 Hook,比如 useReduceruseRefuseCallbackuseMemo 等,不同的 Hook 对应不同的用途。在实践中,您可以根据具体需要选择适当的 Hook,避免重复代码和 class 声明。

10.List, Map, Set 有什么区别?

ListMapSet 都是 JavaScript 中常用的数据结构,它们有以下区别:

  1. List:一组有序的值的集合,类似于数组。你可以通过索引或值来访问列表中的一项。List 具有可变性,可以添加、删除或修改其元素。在 JavaScript 中,可以使用数组(Array)实现类似 List 的数据结构。
// 使用数组实现类似于 List 的数据结构
const list = ['a', 'b', 'c'];
list.push('d');
console.log(list); // ['a', 'b', 'c', 'd']
  1. Map:一组键值对的集合,可以像字典一样使用。每个键都必须是唯一的,而且可以通过键快速查找值。Map 具有可变性,可以添加、删除或修改其键值对。在 JavaScript 中,可以使用对象(Object)实现类似 Map 的数据结构。
// 使用对象实现类似于 Map 的数据结构
const map = { a: 1, b: 2, c: 3 };
map.d = 4;
console.log(map); // { a: 1, b: 2, c: 3, d: 4 }
  1. Set:一组唯一值的集合,不考虑元素的顺序。Set 具有可变性,可以添加或删除其元素。在 JavaScript 中,可以使用数组(Array)和indexOf()或者includes()方法或者对象字面量({})实现类似 Set 的数据结构。
// 使用数组和 indexOf() 方法实现类似于 Set 的数据结构
const set1 = ['a', 'b', 'c'];
if (!set1.includes('d')) {
  set1.push('d');
}
console.log(set1); // ['a', 'b', 'c', 'd']
// 使用对象字面量实现类似于 Set 的数据结构
const set2 = { a: true, b: true, c: true };
set2.d = true;
console.log(Object.keys(set2)); // ['a', 'b', 'c', 'd']

综上所述,ListMapSet 的主要区别在于其元素的组织方式和基本操作。List 以有序方式组织元素,随着元素个数增加,查找速度变慢;Map 以键值对的形式组织元素,查找速度较快,但是需要占用更多内存;Set 则是以无序方式组织元素,并保证元素唯一。在实际开发中,应根据要求和场景的不同,选择适合的数据结构。

相关文章
|
7天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
11天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
30 5
|
25天前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
51 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
28天前
|
机器学习/深度学习 前端开发 搜索推荐
未来趋势下的前端开发技术探索
随着人工智能和物联网技术的快速发展,前端开发领域也面临着新的挑战和机遇。本文将探讨未来趋势下前端开发技术的发展方向和应用场景,为广大前端开发者提供启示与思路。
|
3天前
|
前端开发 算法 JavaScript
如何优化前端性能:探索图片压缩与延迟加载技术
本文深入探讨了前端性能优化中的关键问题:图片压缩与延迟加载技术。通过介绍图片压缩的原理和方法,并结合实例说明了如何有效减少图片大小、提升加载速度;同时,详细解析了延迟加载技术的实现原理及其在提高页面加载性能中的作用,为前端开发者提供了实用的优化方案。
|
5天前
|
SQL 安全 网络协议
关于技术面试问题
360 SQL的存储引擎 SQL注入写shell的条件,用法 GPC是什么?开启了怎么绕过 Mysql一个@和两个@什么区别 IIS解析漏洞,不同版本有什么漏洞,还有什么容器解析漏洞 wireshark抓包,数据报经过三层交换机、路由的变化,NAT协议描述,地址进入内网怎么变化 linux计划任务,黑客隐藏自己的计划任务会怎么做。windows计划任务怎么设定
107 0
|
17天前
|
编解码 前端开发 JavaScript
探索前端开发中的新趋势:WebAssembly 技术应用与展望
本文将深入探讨前端开发中的新趋势——WebAssembly 技术,介绍其在前端领域的应用场景和优势,并展望未来在前端开发中的潜在影响。通过对 WebAssembly 技术的原理解析和实际案例分析,帮助读者更好地了解并应用这一新兴技术。
|
25天前
|
前端开发 JavaScript NoSQL
从前端到后端:构建全栈开发的技术生态
本文将探讨如何在全栈开发中构建完整的技术生态,从前端到后端各个层面进行深入剖析,讨论不同技术之间的协作与整合,为开发人员提供全面的指导与启示。
|
29天前
|
前端开发 JavaScript Java
|
29天前
|
机器学习/深度学习 人工智能 前端开发
探索未来的前端开发趋势:WebAssembly 技术的崛起
随着互联网的快速发展,前端开发的需求也日益增长。本文将深入探讨一项引起广泛关注的新兴技术——WebAssembly,探索其在前端开发中的应用以及对未来的影响。