5.13号模拟前端面试10问

于 2024-05-13 17:32:45 发布
阅读量681 收藏 24
点赞数 10
分类专栏： 前端模拟面试篇 文章标签： 前端 面试 职场和发展
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44714345/article/details/138811791
版权

1.介绍箭头函数和普通函数的区别

箭头函数和普通函数在JavaScript中有一些重要的区别。以下是关于这些区别的详细解释：

语法结构上的差异：

  • 箭头函数使用更简洁的语法，它不需要使用function关键字，而是使用一个箭头（=>）来定义函数。
  • 箭头函数没有自己的this值，它会捕获其所在上下文的this值。
  • 箭头函数不能用作构造函数，不能使用new关键字来创建实例。

this关键字在两种函数中的不同行为和使用场景：

  • 普通函数的this值取决于函数的调用方式。在对象方法中，this指向调用该方法的对象；在全局作用域中，this指向全局对象（通常是window）；在事件处理程序中，this指向触发事件的元素。
  • 箭头函数没有自己的this值，它会捕获其所在上下文的this值。这意味着在箭头函数内部，this的值与外部代码块中的this值相同。

如何影响事件处理程序和回调函数的编写：

  • 在事件处理程序中，普通函数的this通常指向触发事件的元素，而箭头函数的this指向外部上下文。这可能导致意外的行为，因为箭头函数的this可能不是预期的元素。
  • 在回调函数中，由于普通函数的this值取决于调用方式，可能会导致意外的行为。而箭头函数的this值始终与外部上下文相同，可以避免这个问题。

对性能和内存的影响（如果有的话）：

  • 箭头函数的性能通常比普通函数略快，因为它们没有自己的this值，也没有arguments对象。这使得箭头函数在执行时更加高效。
  • 对于内存方面的影响，由于箭头函数没有自己的this值，它们不会创建自己的执行上下文，因此可能会略微减少内存占用。

使用箭头函数时需要注意的陷阱或限制：

  • 箭头函数不能用作构造函数，不能使用new关键字来创建实例。
  • 箭头函数没有自己的prototype属性，因此不能用作原型链继承的基础。
  • 箭头函数不能使用yield关键字，不能作为生成器函数。
  1. 代码示例来展示这些差异：
// 普通函数
function regularFunction() {
  console.log(this); // this 的值取决于函数的调用方式
}

// 箭头函数
const arrowFunction = () => {
  console.log(this); // this 的值与外部上下文相同
};

// 示例对象
const obj = {
  name: 'Object',
  method: function() {
    console.log(this); // this 指向调用该方法的对象
    const regularCallback = function() {
      console.log(this); // this 的值取决于函数的调用方式
    };
    regularCallback();
    const arrowCallback = () => {
      console.log(this); // this 的值与外部上下文相同
    };
    arrowCallback();
  }
};

obj.method();

在这个示例中，我们可以看到普通函数和箭头函数在this值上的差异。普通函数的this值取决于函数的调用方式，而箭头函数的this值与外部上下文相同。这在事件处理程序和回调函数中可能会导致不同的行为。

2. 介绍defineProperty⽅法，什么时候需要用到

defineProperty方法的基本概念和语法结构：

defineProperty是JavaScript中的一个方法，它属于Object对象的原型方法。这个方法用于在对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。它的语法结构如下：

Object.defineProperty(obj, prop, descriptor)

其中，obj是要在其上定义属性的对象，prop是要定义或修改的属性的名称，descriptor是一个描述符对象，用于描述这个属性的配置。

defineProperty方法在JavaScript中的主要用途：

defineProperty方法的主要用途是在对象上定义新属性或修改现有属性，并为这些属性提供一些配置选项。通过使用defineProperty方法，我们可以控制属性的可枚举性、可配置性、可写性以及是否具有getter和setter方法等。

实际场景：

一个实际的场景是在创建一个对象时，我们希望对对象的某些属性进行特殊处理，例如只读属性或具有特定行为的属性。这时，我们可以使用defineProperty方法来定义这些属性，并为它们提供相应的配置。

代码示例：

下面是一个使用defineProperty方法的代码示例：

// 创建一个空对象
const obj = {};

// 使用defineProperty方法定义一个只读属性
Object.defineProperty(obj, 'readOnlyProp', {
  value: 'This is a read-only property',
  writable: false, // 设置为不可写
  enumerable: true, // 设置为可枚举
  configurable: true // 设置为可配置
});

console.log(obj.readOnlyProp); // 输出 "This is a read-only property"

// 尝试修改只读属性的值
obj.readOnlyProp = 'Try to modify the value';
console.log(obj.readOnlyProp); // 仍然输出 "This is a read-only property"

在这个示例中，我们使用defineProperty方法在obj对象上定义了一个名为readOnlyProp的只读属性。我们将其值设置为'This is a read-only property'，并将其设置为不可写、可枚举和可配置。当我们尝试修改这个属性的值时，它的值不会改变，因为它被设置为只读。

3. for…in 和 object.keys的区别

for..in循环和Object.keys()方法在处理对象时有一些差异。

for..in循环用于遍历对象的可枚举属性，包括原型链上的属性。它会遍历对象的所有可枚举属性，无论这些属性是否属于对象本身。这可能导致遍历到不需要的属性，因此需要谨慎使用。

示例：

const obj = { a: 1, b: 2 };
obj.__proto__.c = 3;

for (let key in obj) {
  console.log(key); // 输出 "a"、"b" 和 "c"
}

Object.keys()方法返回一个由对象自身的（不包括原型链上的）所有可枚举属性组成的数组。它只返回对象本身的属性，不会遍历到原型链上的属性。

示例：

const obj = { a: 1, b: 2 };
obj.__proto__.c = 3;

const keys = Object.keys(obj);
console.log(keys); // 输出 ["a", "b"]

总结：

  • for..in循环适用于遍历对象的所有可枚举属性，包括原型链上的属性。
  • Object.keys()方法适用于获取对象自身的所有可枚举属性的键名数组。

4. 介绍闭包，使用场景

闭包是指一个函数可以访问其外部作用域中的变量，即使该函数在其外部作用域之外被调用。在JavaScript中，闭包是通过定义一个函数内部的函数来实现的。以下是一个简单的闭包实现示例：

function outer() {
  var count = 0;

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

  return inner;
}

var counter = outer();
counter(); // 输出 1
counter(); // 输出 2

在前端开发中，闭包的典型应用场景包括：

  1. 模块化：通过闭包，我们可以将私有变量和函数封装在一个模块中，从而实现模块化开发。例如，我们可以创建一个计数器模块，只暴露一个increment方法给外部使用，而内部的状态则被隐藏起来。
function createCounter() {
  var count = 0;

  function increment() {
    count++;
    return count;
  }

  return {
    increment: increment
  };
}

var counter = createCounter();
console.log(counter.increment()); // 输出 1
console.log(counter.increment()); // 输出 2
  1. 事件处理：在事件处理程序中，我们可能需要访问外部作用域中的变量。通过闭包，我们可以将这些变量传递给事件处理程序，而不会污染全局作用域。
function handleClick(element) {
  var message = '点击了元素';

  element.addEventListener('click', function() {
    console.log(message);
  });
}

var button = document.querySelector('button');
handleClick(button);
  1. 防抖和节流：在前端开发中，我们经常需要对一些频繁触发的事件（如滚动、输入等）进行优化，以提高性能。通过闭包，我们可以实现防抖和节流功能，避免事件处理程序被频繁调用。
function debounce(func, wait) {
  var timeout;

  return function() {
    var context = this;
    var args = arguments;

    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

window.addEventListener('scroll', debounce(function() {
  console.log('滚动事件触发');
}, 500));

在这些场景下选择使用闭包的优势是可以实现模块化、保护私有变量和提高性能。然而，需要注意的是，过度使用闭包可能导致内存泄漏，因此在使用闭包时要注意及时释放不再使用的变量。

5. 使用闭包特权函数的使用场景

闭包是指一个函数可以访问其外部作用域中的变量，即使该函数在其外部作用域之外被调用。在JavaScript中，闭包是通过定义一个函数内部的函数来实现的。特权函数是指一个函数可以访问并操作另一个函数内部的变量和作用域。

在实际开发中，闭包常用于创建私有变量和实现模块化。例如，我们可以使用闭包来创建一个计数器模块，只暴露一个increment方法给外部使用，而内部的状态则被隐藏起来。

function createCounter() {
  var count = 0;

  function increment() {
    count++;
    return count;
  }

  return {
    increment: increment
  };
}

var counter = createCounter();
console.log(counter.increment()); // 输出 1
console.log(counter.increment()); // 输出 2

特权函数常用于实现装饰器模式，可以在不修改原始函数的情况下，为其添加额外的功能。例如，我们可以使用特权函数来实现一个日志记录器，用于记录函数的调用次数和执行时间。

function privilegedFunction(fn) {
  var callCount = 0;
  var totalTime = 0;

  return function() {
    callCount++;
    var startTime = Date.now();
    var result = fn.apply(this, arguments);
    var endTime = Date.now();
    totalTime += (endTime - startTime);
    console.log('调用次数：', callCount);
    console.log('总执行时间：', totalTime);
    return result;
  };
}

function add(a, b) {
  return a + b;
}

var loggedAdd = privilegedFunction(add);
console.log(loggedAdd(1, 2)); // 输出 3
console.log(loggedAdd(3, 4)); // 输出 7

总之，闭包和特权函数是JavaScript中非常重要的概念，它们可以帮助我们更好地组织和管理代码，提高代码的可维护性和可复用性。在实际开发中，我们需要根据具体的需求和场景来灵活运用这些概念。

6. get和post有什么区别

Web前端面试中关于GET和POST请求的对比

一、区别

  1. 请求方式：

    • GET：用于从指定的资源请求数据。它通常用于数据查询，不会修改服务器上的数据。
    • POST：用于向指定的资源提交要被处理的数据。它通常用于数据提交，例如表单提交或文件上传。

  2. 数据传输方式：

    • GET：请求的数据会附加在URL之后，以?分割URL和传输的数据，参数之间以&相连。因此，GET请求的数据会暴露在URL中，不能用于传输敏感信息。
    • POST：请求的数据会放置在HTTP请求包的body中发送，不会暴露在URL中，所以传输的数据量没有限制，并且能发送敏感信息。

  3. 数据长度限制：

    • GET：由于浏览器对URL长度的限制，GET请求传输的数据量有大小限制（通常在2K左右）。
    • POST：理论上POST请求没有大小限制，但实际限制取决于服务器配置和客户端浏览器。

  4. 安全性：

    • GET：由于数据暴露在URL中，所以安全性较低。
    • POST：数据不会暴露在URL中，安全性较高。

  5. 幂等性：

    • GET：幂等的，即多次请求同一资源，结果都是一样的。
    • POST：非幂等的，多次请求同一资源，结果可能会不同（比如提交表单）。

  6. 缓存：

    • GET：请求可以被缓存。
    • POST：请求不会被缓存，除非特别设置。

  7. 书签和后退按钮：

    • GET：请求可以被收藏为书签，并且可以通过浏览器后退按钮返回。
    • POST：请求不能被收藏为书签，并且无法通过浏览器后退按钮返回。

二、应用场景

  • GET：通常用于查询操作，如搜索、读取数据等。
  • POST：通常用于更新、添加、删除数据等操作，或者需要提交大量数据的场景。

三、最佳实践

  • 当从服务器请求数据时，使用GET方法；当向服务器发送数据（如提交表单）时，使用POST方法。
  • 避免在GET请求的URL中包含敏感信息，如密码、密钥等。
  • 在使用POST方法时，确保服务器端有适当的验证和错误处理机制。
  • 尽量减少POST请求中传输的数据量，以提高性能和安全性。

四、代码示例

GET请求示例（使用JavaScript的fetch API）：

fetch('https://example.com/api/data?id=123')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

POST请求示例（使用JavaScript的fetch API和FormData）：

const formData = new FormData();
formData.append('username', 'JohnDoe');
formData.append('password', 'password123');

fetch('https://example.com/api/login', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

7.React15/16.x的区别

React 15和React 16.x版本之间的主要区别集中在架构变化、渲染机制以及新特性的引入上。以下是具体分析：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. 架构变化：在React 15中，Reconciler层使用递归的协调算法，即深度优先遍历整个组件树来协调更新，这可能在处理大型组件树时导致性能问题。而在React 16中，引入了Fiber架构，这是一种更灵活的协调算法，将协调过程拆分成可中断的小任务单元，允许在渲染过程中中断和恢复，提高了性能。
  2. 渲染机制：React 15使用的是基于栈的调和器（Stack Reconciler），它是一种同步、递归的方式，当JavaScript执行时间过长超出帧时间时，可能会导致页面刷新没有时间执行样式布局和绘制。而React 16中的Fiber Reconciler能够更好地响应用户输入，避免了长时间的JS执行导致的页面卡顿现象。
  3. 新特性的引入：React 16.x版本引入了一些新的特性和API，例如支持render返回非组件类型的值，如字符串、数组和数字等，而React 15只支持返回单一组件。此外，React 16还提供了createPortal、createContext、createRef、forwardRef等新的API，这些新特性使得开发更加灵活和便捷。

综上所述，从React 15到React 16.x的升级带来了架构上的优化和新特性的加入，这些改进使得React更加强大和高效。

8.重新渲染render会做些什么

在前端开发中，重新渲染（render）是更新用户界面以反映最新数据或状态的过程。当用户与界面进行交互，或者应用程序的状态发生变化时，通常会触发重新渲染。

这个过程通常涉及以下步骤：

  1. 状态更新：当组件的props或state发生变化时，React会标记该组件为“需要更新”。

  2. 协调（Reconciliation）：React会创建一个新的虚拟DOM树，并与旧的树进行比较，找出需要更新的部分。

  3. 渲染：React计算出最小的变化集，并将这些变化应用到实际的DOM上，从而更新用户界面。

一个简单的React组件示例：

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

在上面的例子中，当用户点击按钮时，setCount函数会被调用，更新count的状态。这会导致组件的重新渲染，React会重新计算并返回新的JSX树，然后比较新旧树之间的差异，并更新DOM以反映新的count值。

优化策略：

  1. 避免不必要的渲染：使用React.memo、useMemo和useCallback来避免不必要的组件渲染和计算。

  2. 列表渲染优化：使用React.Fragment和key属性来优化列表的渲染性能。

  3. 代码分割：使用React的懒加载（React.lazy）和Suspense来按需加载组件，减少首次渲染的时间。

  4. 减少DOM操作：利用React的虚拟DOM和Diffing算法来减少实际DOM操作，从而提高性能。

  5. 使用Profiler API：React DevTools提供了Profiler工具，可以帮助你识别性能瓶颈并进行优化。

通过实施这些优化策略，你可以提高应用程序的性能，减少不必要的重新渲染，并为用户提供更好的体验。

9.哪些方法会触发react重新渲染

在React中，以下方法会触发组件的重新渲染：

  1. 状态更新（State Updates）：当组件的状态发生变化时，React会重新渲染该组件。可以使用this.setState()方法来更新组件的状态，并触发重新渲染。例如：
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}
  1. 属性更新（Props Updates）：当组件的属性发生变化时，React也会重新渲染该组件。父组件传递的属性值发生变化时，子组件会接收到新的属性值并重新渲染。例如：
class ParentComponent extends React.Component {
  state = { message: 'Hello' };

  render() {
    return <ChildComponent message={this.state.message} />;
  }
}

class ChildComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
  }
}
  1. 强制重新渲染（Forced Re-rendering）：可以使用forceUpdate()方法强制组件进行重新渲染。这在某些特殊情况下是有用的，但通常不建议频繁使用。例如：
class MyComponent extends React.Component {
  forceRender = () => {
    this.forceUpdate();
  }

  render() {
    // ...
  }
}

这些方法都会触发组件的重新渲染，确保React能够根据最新的数据和状态来更新界面。

10.state和props触发更新的生命周期分别有什什么区别

在React框架中，state和props是触发组件更新的两种主要机制，但它们之间存在明显的区别。

state是组件内部的私有数据，只能通过组件内部的方法来改变。当state更新时，React会重新渲染该组件及其子组件。例如，在类组件中，你可以使用this.setState()来更新state，如下所示：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 }); // 更新state，触发重新渲染
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

在这个例子中，每次点击按钮时，都会调用handleClick方法并使用this.setState()更新count的值，这会触发组件的重新渲染。

另一方面，props是组件的输入，从父组件传递给子组件。子组件不能直接修改其接收到的props，只能使用它们来渲染UI。如果父组件的state或props发生变化，并且这些变化影响到了传递给子组件的props，那么子组件也会触发重新渲染。但请注意，这是由父组件的重新渲染和props的传递导致的，而不是子组件内部主动触发的。

总之，state和props都可以触发组件的重新渲染，但它们的来源和更新方式是不同的。state是组件内部的私有数据，可以通过setState方法来更新；而props则是从父组件传递给子组件的输入，子组件不能直接修改它们。

t: {this.state.count}


Increment

);
}
} 
在这个例子中，每次点击按钮时，都会调用`handleClick`方法并使用`this.setState()`更新`count`的值，这会触发组件的重新渲染。

另一方面，`props`是组件的输入，从父组件传递给子组件。子组件不能直接修改其接收到的`props`，只能使用它们来渲染UI。如果父组件的`state`或`props`发生变化，并且这些变化影响到了传递给子组件的`props`，那么子组件也会触发重新渲染。但请注意，这是由父组件的重新渲染和`props`的传递导致的，而不是子组件内部主动触发的。

总之，`state`和`props`都可以触发组件的重新渲染，但它们的来源和更新方式是不同的。`state`是组件内部的私有数据，可以通过`setState`方法来更新；而`props`则是从父组件传递给子组件的输入，子组件不能直接修改它们。
极客前端探索者
关注
  • 10
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值