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

JS对象转数组的方法

在 JavaScript 中，可以通过多种方式将对象转换为数组。以下是几种常见的方法：

1. 使用 Object.keys() 方法：该方法返回一个包含对象的所有可枚举属性的数组。然后，可以使用数组的 map() 方法将每个属性映射为对象的值。

const obj = { a: 1, b: 2, c: 3 };
const arr = Object.keys(obj).map(key => obj[key]);
console.log(arr); // 输出：[1, 2, 3]

2. 使用 Object.values() 方法：该方法返回一个包含对象所有可枚举属性的值的数组。

const obj = { a: 1, b: 2, c: 3 };
const arr = Object.values(obj);
console.log(arr); // 输出：[1, 2, 3]

3. 使用 Object.entries() 方法：该方法返回一个包含对象所有可枚举属性的键值对的数组。可以使用数组的 map() 方法将每个键值对映射为对象的值。

const obj = { a: 1, b: 2, c: 3 };
const arr = Object.entries(obj).map(([key, value]) => value);
console.log(arr); // 输出：[1, 2, 3]

以上方法可以根据具体的需求选择合适的方式将对象转换为数组。

简单案例：从这个对象{skuCode: “20602505”，skuName: “根茎蔬菜”}中拿到skuCode的值，并且封装成数组数据

可以使用以下代码从给定的对象中获取skuCode的值，并将其封装为数组数据：

const obj = {skuCode: "20602505", skuName: "根茎蔬菜"};
const skuCodeArray = [obj.skuCode];
console.log(skuCodeArray);  // 输出：['20602505']

这里使用了对象的属性访问方式obj.skuCode来获取skuCode的值，并将其作为元素放入一个数组skuCodeArray中。你可以根据需要进一步使用数组数据。

click的所有修饰符及其作用

以下是 click 事件的常用修饰符及其作用的总结：

注意：修饰符可以结合使用，例如： @click.stop.prevent 会同时阻止事件冒泡和默认行为。

使用修饰符可以在事件触发时改变事件的行为，从而满足特定的需求。

position的absolute与fixed共同点与不同点

position属性用于控制元素的定位方式。absolute和fixed都是position的属性值，它们有一些共同点和不同点：

共同点：

1. 两者都是相对于最近的具有定位属性的父元素（比如设置了position为relative或fixed）或根元素（即浏览器窗口）进行定位。
2. 使用absolute或fixed的元素可以通过top、right、bottom、left属性来调整其位置。

不同点：

1. absolute定位是相对于最近的具有定位属性的父元素，而fixed定位是相对于浏览器窗口进行定位。
2. absolute定位的元素会脱离正常的文档流，不占据原本的空间位置，而fixed定位的元素会固定在屏幕上的某个位置，不会随滚动而变化。
3. 在滚动页面时，absolute元素会跟随父元素滚动，而fixed元素会保持固定位置。
4. absolute元素的定位是基于父元素的位置计算的，而fixed元素的定位是相对于浏览器窗口的位置计算的。

总结起来，absolute定位和fixed定位都可以用于元素的定位，但相对于定位的基准点不同，效果也会有所差异。

在实际开发中，前端开发工程师如何测量代码性能

在实际开发中，前端开发工程师可以采取以下方法来测量代码性能：

1. 使用浏览器控制台：现代浏览器提供了强大的开发者工具，其中包括性能分析功能。你可以使用浏览器控制台中的性能工具来记录和分析页面加载时间、网络请求时间、JavaScript执行时间等指标。
   
2. 使用性能分析工具：有很多性能分析工具可用于测量前端代码的性能。例如，Google Chrome浏览器的Lighthouse工具可以提供关于网页加载性能、渲染性能、缓存利用率等方面的详细报告。还有其他一些第三方工具如WebPageTest、PageSpeed Insights等也可以帮助你评估代码性能。
   
3. 进行代码审查：通过仔细审查代码，你可以尝试识别可能导致性能问题的代码片段。例如，对于大量循环、频繁的DOM操作、重复的网络请求等，都是潜在的性能瓶颈。通过优化这些代码，你可以提高前端应用的性能。
   
4. 进行性能测试：性能测试是一种通过模拟实际用户使用场景来评估前端应用性能的方法。你可以使用工具如JMeter、LoadRunner等来模拟多用户同时使用应用的场景，并且测量应用在不同负载下的性能表现。
   

以上是一些常见的测量前端代码性能的方法，通过这些方法可以帮助你发现潜在的性能问题，并进行优化以提高应用的性能。

ajax 的过程是怎样的

AJAX（Asynchronous JavaScript and XML）是一种在网页中进行异步数据传输的技术。它允许通过在不刷新整个页面的情况下，与服务器进行数据交换和更新部分页面内容。以下是 AJAX 的基本过程：

1. 创建 XMLHttpRequest 对象： 在 JavaScript 中，首先需要创建一个 XMLHttpRequest 对象，用于发送和接收数据。可以使用如下代码创建一个 XMLHttpRequest 对象：

const xhr = new XMLHttpRequest();

1. 配置请求参数： 在发送 AJAX 请求之前，需要设置请求的类型、URL 和其他参数。通过 XMLHttpRequest 对象的相应属性和方法可以进行配置，例如使用 open() 方法设置请求的方法和 URL：

xhr.open('GET', 'https://api.example.com/data', true);

1. 发送请求： 配置完成后，使用 send() 方法发送请求到服务器：

xhr.send();

1. 处理服务器响应： 一旦请求被发送，服务器会处理请求并返回相应的数据。在异步请求中，JavaScript 会继续执行后续的代码，而不会等待服务器的响应。可以通过监听 XMLHttpRequest 对象上的 onreadystatechange 事件来处理服务器的响应：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应数据
    console.log(xhr.responseText);
  }
};

1. 在这个例子中，当 readyState 的值为 4（表示响应已完成）且 status 的值为 200（表示成功）时，可以处理响应数据。
2. 获取响应数据： 在成功接收到服务器响应后，可以通过 responseText 或 responseXML 属性获取响应数据。如果服务器返回的是文本数据，可以使用 responseText 获取；如果服务器返回的是 XML 格式的数据，可以使用 responseXML 获取。
   

以上就是 AJAX 的基本过程：创建 XMLHttpRequest 对象，配置请求参数，发送请求，处理服务器响应，并获取响应数据。这种异步技术使得网页能够实现动态更新内容，提供更好的用户体验。

javascript里面的继承怎么实现，如何避免原型链上面的对象共享

在 JavaScript 中，继承可以通过不同的方式实现，如原型继承、构造函数继承、类继承（ES6）等。

对于避免原型链上的对象共享，下面介绍两种常用的继承方式并提供相应的解决方案：

1. 原型继承：原型继承是 JavaScript 中最基本的继承方式，它通过创建对象的实例来继承原型对象的属性和方法。常用的原型继承方法有原型链继承和对象连接继承。

• 原型链继承： 实现原型链继承时，子对象通过原型链继承父对象的属性和方法。但是由于所有子对象共享同一个原型对象，因此对原型对象的修改会影响到所有子对象。要避免这种共享问题，可以在创建子对象时，通过一个空对象作为父对象的原型来实现。例如：

function Parent() {
  this.name = "John";
}
Parent.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}!`);
};
function Child() {}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
const child1 = new Child();
child1.name = "Alice";
child1.sayHello(); // Hello, Alice!
const child2 = new Child();
child2.name = "Bob";
child2.sayHello(); // Hello, Bob!

• 对象连接继承：对象连接继承通过将父对象的属性和方法拷贝到子对象中来实现继承。这样每个子对象都有独立的属性和方法，不会共享原型对象。例如：

function createParent() {
  const parent = {
    name: "John",
    sayHello() {
      console.log(`Hello, ${this.name}!`);
    }
  };
  return Object.assign({}, parent);
}
const parent = createParent();
function createChild(parent) {
  const child = Object.assign({}, parent);
  child.name = "Alice";
  return child;
}
const child1 = createChild(parent);
child1.sayHello(); // Hello, Alice!
const child2 = createChild(parent);
child2.sayHello(); // Hello, John! (不会共享父对象的属性)

1. 注意：原型继承依赖于原型链，在一些情况下会导致对象关联性和命名冲突等问题。因此，使用原型继承时需要谨慎考虑。
   
2. 构造函数继承： 构造函数继承通过在子对象的构造函数中调用父对象的构造函数来实现继承。这种继承方式避免了原型链上的共享问题。例如：

function Parent() {
  this.name = "John";
  this.sayHello = function() {
    console.log(`Hello, ${this.name}!`);
  };
}
function Child() {
  Parent.call(this); // 使用 call 方法调用父对象的构造函数
  this.name = "Alice"; // 子对象可以覆盖父对象的属性
}
const child1 = new Child();
child1.sayHello(); // Hello, Alice!
const child2 = new Child();
child2.sayHello(); // Hello, Alice! (不会共享父对象的属性)

1. 构造函数继承创建了独立的属性和方法，每个子对象都有自己的副本，解决了共享原型对象的问题。

通过选择适当的继承方式，可以避免原型链上的对象共享问题。如果需要更复杂的继承结构或者希望遵循现代的 JavaScript 开发标准，可以考虑使用 ES6 引入的类继承机制来实现继承。类继承提供了更直观和面向对象的语法，并且可以通过关键字 extends 实现继承，避免了原型链上的共享问题。