高频JS面试题，持续更新ing

小y的日常

已于 2023-07-11 17:44:16 修改

阅读量85

点赞数 1

文章标签： javascript 开发语言 ecmascript

于 2023-07-10 14:07:31 首次发布

本文链接：https://blog.csdn.net/qq_34141545/article/details/131637450

版权

1.继承有哪些方法？

原型链继承：

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}!`);
};

function Child(age) {
  this.age = age;
}

Child.prototype = new Parent('Alice');
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
  console.log(`${this.name} is ${this.age} years old.`);
};

// 创建子类实例
const child = new Child(10);

// 调用子类继承的方法
child.sayHello(); // 输出：Hello, Alice!
child.sayAge(); // 输出：Alice is 10 years old.

构造函数继承：

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}!`);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype.sayAge = function() {
  console.log(`${this.name} is ${this.age} years old.`);
};

// 创建子类实例
const child = new Child('Alice', 10);

// 调用子类继承的方法
child.sayHello(); // 输出：Hello, Alice!
child.sayAge(); // 输出：Alice is 10 years old.

组合继承（原型链 + 构造函数）：

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}!`);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
  console.log(`${this.name} is ${this.age} years old.`);
};

// 创建子类实例
const child = new Child('Alice', 10);

// 调用子类继承的方法
child.sayHello(); // 输出：Hello, Alice!
child.sayAge(); // 输出：Alice is 10 years old.

原型式继承：

function createObj(parent) {
  function F() {}
  F.prototype = parent;
  return new F();
}

const parent = {
  name: 'Alice',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const child = createObj(parent);
child.age = 10;
child.sayAge = function() {
  console.log(`${this.name} is ${this.age} years old.`);
};

// 调用子对象继承的方法
child.sayHello(); // 输出：Hello, Alice!
child.sayAge(); // 输出：Alice is 10 years old.

寄生式继承：

function createObj(parent) {
  const child = Object.create(parent);
  child.sayAge = function() {
    console.log(`${this.name} is ${this.age} years old.`);
  };
  return child;
}

const parent = {
  name: 'Alice',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const child = createObj(parent);
child.age = 10;

// 调用子对象继承的方法
child.sayHello(); // 输出：Hello, Alice!
child.sayAge(); // 输出：Alice is 10 years old.

寄生组合式继承：

function inheritPrototype(child, parent) {
  const prototype = Object.create(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

function Parent(name) {
  this.name = name;
}

Parent.prototype.sayHello = function() {
  console.log(`Hello, ${this.name}!`);
};

function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}

inheritPrototype(Child, Parent);

Child.prototype.sayAge = function() {
  console.log(`${this.name} is ${this.age} years old.`);
};

// 创建子类实例
const child = new Child('Alice', 10);

// 调用子类继承的方法
child.sayHello(); // 输出：Hello, Alice!
child.sayAge(); // 输出：Alice is 10 years old.

2.数组有哪些方法？

修改数组自身的方法：
- push()：向数组末尾添加一个或多个元素，并返回新的长度。
- pop()：移除并返回数组的最后一个元素。
- shift()：移除并返回数组的第一个元素。
- unshift()：向数组开头添加一个或多个元素，并返回新的长度。
- splice()：从指定位置删除、替换或插入元素。
  
  修改数组自身的方法
返回新数组的方法：
- concat()：将多个数组或值合并为一个新数组。
- slice()：返回从指定索引开始到指定索引结束（不包括结束索引）的子数组。
- filter()：创建一个新数组，包含满足条件的原数组元素。
- map()：创建一个新数组，包含对原数组每个元素调用回调函数的结果。
- flat()：将嵌套数组拉平为一维数组。
- flatMap()：先使用映射函数映射每个元素，然后将结果拉平为一维数组。
- reverse()：颠倒数组中元素的顺序。
- sort()：原地排序数组的元素。
- slice()：返回数组的一部分作为新数组。
  
  返回新数组的方法
返回单个值的方法：
- join()：将数组中的所有元素连接成一个字符串。
- indexOf()：返回指定元素在数组中的第一个匹配项的索引。
- lastIndexOf()：返回指定元素在数组中的最后一个匹配项的索引。
- find()：返回满足条件的数组中第一个元素。
- findIndex()：返回满足条件的数组中第一个元素的索引。
- some()：检测数组中是否至少有一个元素满足条件。
- every()：检测数组中的所有元素是否都满足条件。
- reduce()：对数组元素从左到右应用一个函数，将其简化为单个值。
- reduceRight()：对数组元素从右到左应用一个函数，将其简化为单个值。
检查和转化数组的方法：
- isArray()：检查给定值是否为数组类型。
- includes()：检查数组是否包含指定元素。
- toString()：将数组转换为字符串。
- toLocaleString()：将数组转换为本地化的字符串表示形式。

3. vue的路由模式有哪些？

1.hash模式

特点:在url地址上有#号

实现的原理:原生的hasChange事件来实现,来监听hash值的变化

window.onhaschange=function(){}

刷新页面的时候:不会去发送请求,页面不会有任何问题,不需要后端来配合

2.history模式

特点:在url地址上没有#号,比较与hash模式看起来好看一些

实现的原理:利用的是history的api 来实现的 popState() 来实现的

刷新页面的时候:会去发送请求然后会导致页面出现找不到的情况,需要后端来配合解决

4.vue的插槽有几种

默认插槽，具名插槽，作用域插槽

vue中的插槽，指的是子组件中提供给父组件使用的一个占位符；用标签表示，父组件可以在这个占位符中填充任何模板代码，比如HTML、组件等，填充的内容会替换掉子组件的标签（替换占位符）。

5.原型和原型链

在JavaScript中，每个对象都有一个特殊的内部属性称为原型（prototype）。原型是一个普通的对象，它包含可以被其他对象继承的共享属性和方法。当我们访问一个对象的属性或方法时，如果该对象本身没有定义这个属性或方法，JavaScript引擎会通过原型链来查找并获取。

原型链（prototype chain）是由一系列对象连接而成的链式结构，用于查找对象的属性和方法。当我们访问一个对象的属性或方法时，JavaScript引擎首先会检查对象自身是否具有该属性或方法。如果没有找到，则继续在对象的原型上查找，直到找到该属性或方法或者到达原型链的末端（即Object.prototype）。这样就形成了对象和原型之间的连接关系，即原型链。

简单来说，原型和原型链的作用是实现对象之间的继承和共享属性/方法的机制。

举个例子：

// 定义一个构造函数
function Person(name) {
  this.name = name;
}

// 在Person的原型上定义一个方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
}

// 创建一个Person对象
const person = new Person('Alice');

// 调用person对象的sayHello方法
person.sayHello();