14万字 | 400多道JavaScript 面试题及详细答案01(建议收藏)

简介: 14万字 | 400多道JavaScript 面试题及详细答案(建议收藏)

1.在 JavaScript 中创建对象的可行方法有哪些?


有很多方法可以在 javascript 中创建对象,如下所示


1.对象构造函数:


创建空对象的最简单方法是使用 Object 构造函数。目前不推荐这种方法。


 var object = new Object();


2.对象的创建方法:


Object 的 create 方法通过将原型对象作为参数传递来创建一个新对象


 var object = Object.create(null);


3.对象字面量语法:


当传递 null 作为参数时,对象字面量语法等效于 create 方法


 var object = {};


4.函数构造器:


创建任何函数并应用 new 运算符来创建对象实例,


function Person(name){
     var object = {};
     object.name=name;
     object.age=21;
     return object;
  }
  var object = new Person("Sudheer");


5.带有原型的函数构造函数:


这类似于函数构造函数,但它使用原型作为其属性和方法,


function Person(){}
  Person.prototype.name = "Sudheer";
  var object = new Person();

这等效于使用具有函数原型的对象创建方法创建的实例,然后使用实例和参数作为参数调用该函数。


function func {};
  new func(x, y, z);
(或者)
  // 使用函数原型创建一个新实例。
  var newInstance = Object.create(func.prototype)
  // 调用函数
  var result = func.call(newInstance, x, y, z),
  // 如果结果是非空对象,则使用它,否则只使用新实例。
  console.log(result && typeof result === 'object' ? result : newInstance);

6.ES6 类语法:


ES6 引入类特性来创建对象


class Person {
     constructor(name) {
        this.name = name;
     }
  }
  var object = new Person("Sudheer");


7.单例模式:


Singleton 是一个只能实例化一次的对象。对其构造函数的重复调用返回相同的实例,这样可以确保它们不会意外创建多个实例。


var object = new function(){
     this.name = "Sudheer";
  }



2.什么是原型链?

原型链用于基于现有对象构建新类型的对象。它类似于基于类的语言中的继承。


对象实例上的原型可通过Object.getPrototypeOf(object)或proto属性获得,而构造函数上的原型可通过Object.prototype 获得。



3.call、apply、bind有什么区别?


Call、Apply 和 Bind 之间的区别可以用下面的例子来解释,


call: call() 方法调用一个函数,给定的this值和参数一一提供

var employee1 = {firstName: 'Haiyong', lastName: 'Rodson'};
var employee2 = {firstName: 'Jimmy', lastName: 'Baily'};
function invite(greeting1, greeting2) {
    console.log(greeting1 + ' ' + this.firstName + ' ' + this.lastName+ ', '+ greeting2);
}
invite.call(employee1, 'Hello', 'How are you?'); // Hello Haiyong Rodson, How are you?
invite.call(employee2, 'Hello', 'How are you?'); // Hello Jimmy Baily, How are you?

bind:返回一个新函数,允许你传递任意数量的参数

var employee1 = {firstName: 'Haiyong', lastName: 'Rodson'};
var employee2 = {firstName: 'Jimmy', lastName: 'Baily'};
function invite(greeting1, greeting2) {
    console.log(greeting1 + ' ' + this.firstName + ' ' + this.lastName+ ', '+ greeting2);
}
var inviteEmployee1 = invite.bind(employee1);
var inviteEmployee2 = invite.bind(employee2);
inviteEmployee1('Hello', 'How are you?'); // Hello Haiyong Rodson, How are you?
inviteEmployee2('Hello', 'How are you?'); // Hello Jimmy Baily, How are you?



Call 和 apply 可以互换。两者都立即执行当前函数。你需要决定是发送数组还是逗号分隔的参数列表更容易。你可以通过处理 Call 用于逗号(分隔列表)和 Apply 用于Array来记住。


而 Bind 创建一个新函数,该函数将this设置为传递给 bind() 的第一个参数。



4.什么是 JSON 及其常见操作?


JSON是一种基于文本的数据格式,遵循 JavaScript 对象语法,由道格拉斯·克罗克福德 (Douglas Crockford) 推行。 当你想通过网络传输数据时它很有用,它基本上只是一个扩展名为 .json 的文本文件,以及一个 MIME 类型的 application/json


解析:将字符串转换为原生对象


JSON.parse(text)


字符串化:将本机对象转换为字符串,以便可以通过网络传输


JSON.stringify(object)




5. 数组slice()方法的目的是什么?


所述slice()方法返回在数组作为新的数组对象中选定的元件。它选择从给定开始参数开始的元素,并在给定的可选结束参数处结束,不包括最后一个元素。如果省略第二个参数,则它会一直选择到最后。


这种方法的一些例子是,


let arrayIntegers = [1, 2, 3, 4, 5];

let arrayIntegers1 = arrayIntegers.slice(0,2); // returns [1,2]

let arrayIntegers2 = arrayIntegers.slice(2,3); // returns [3]

let arrayIntegers3 = arrayIntegers.slice(4); //returns [5]


注意: Slice 方法不会改变原始数组,而是将子集作为新数组返回。


6.数组splice()方法的目的是什么?


splice() 方法用于向/从数组添加/删除项目,然后返回被删除的项目。第一个参数指定插入或删除的数组位置,而选项第二个参数指示要删除的元素数。每个附加参数都添加到数组中。


这种方法的一些例子是,


let arrayIntegersOriginal1 = [1, 2, 3, 4, 5];
let arrayIntegersOriginal2 = [1, 2, 3, 4, 5];
let arrayIntegersOriginal3 = [1, 2, 3, 4, 5];
let arrayIntegers1 = arrayIntegersOriginal1.splice(0,2); // returns [1, 2]; original array: [3, 4, 5]
let arrayIntegers2 = arrayIntegersOriginal2.splice(3); // returns [4, 5]; original array: [1, 2, 3]
let arrayIntegers3 = arrayIntegersOriginal3.splice(3, 1, "a", "b", "c"); //returns [4]; original array: [1, 2, 3, "a", "b", "c", 5]


注意: Splice 方法修改原始数组并返回删除的数组。



7.slice()和splice()有什么区别?


表格形式的一些主要区别


slice() splice()

不修改原始数组(不可变) 修改原始数组(可变)

返回原始数组的子集 将删除的元素作为数组返回

用于从数组中选取元素 用于在数组中插入或删除元素

目录
相关文章
|
19天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
41 5
|
8天前
|
JavaScript 前端开发 测试技术
「一劳永逸」送你21道高频JavaScript手写面试题(上)
「一劳永逸」送你21道高频JavaScript手写面试题
36 0
|
1月前
|
设计模式 JavaScript 前端开发
最常见的26个JavaScript面试题和答案
最常见的26个JavaScript面试题和答案
44 1
|
1月前
|
存储 JavaScript 前端开发
【JavaScript】面试手撕浅拷贝
引入 浅拷贝和深拷贝应该是面试时非常常见的问题了,为了能将这两者说清楚,于是打算用两篇文章分别解释下深浅拷贝。 PS: 我第一次听到拷贝这个词,有种莫名的熟悉感,感觉跟某个英文很相似,后来发现确实Copy的音译,感觉这翻译还是蛮有意思的
45 6
|
1月前
|
JavaScript 前端开发
【JavaScript】面试手撕节流
上篇我们讲了防抖,这篇我们就谈谈防抖的好兄弟 -- 节流。这里在老生常谈般的提一下他们两者之间的区别,顺带给读者巩固下。
53 3
|
2月前
|
前端开发 JavaScript UED
【JavaScript】面试手撕防抖
防抖: 首先它是常见的性能优化技术,主要用于处理频繁触发的浏览器事件,如窗口大小变化、滚动事件、输入框内容改变等。在用户连续快速地触发同一事件时,防抖机制会确保相关回调函数在一个时间间隔内只会被执行一次。
36 0
|
2月前
|
前端开发 JavaScript 算法
【JavaScript】面试手撕数组排序
这章主要讲的是数组的排序篇,我们知道面试的时候,数组的排序是经常出现的题目。所以这块还是有必要进行一下讲解的。笔者观察了下前端这块的常用算法排序题,大概可以分为如下
24 2
|
2月前
|
JavaScript 前端开发 索引
【JavaScript】面试手撕数组原型链(易)
续借上文,这篇文章主要讲的是数组原型链相关的考题,有些人可能会纳闷,数组和原型链之间有什么关系呢?我们日常使用的数组forEach,map等都是建立在原型链之上的。举个🌰,如我有一个数组const arr = [1,2,3]我想要调用arr.sum方法对arr数组的值进行求和,该如何做呢?我们知道数组没有sum函数,于是我们需要在数组的原型上定义这个函数,才能方便我们调用,具体代码如下。接下来我们就是采用这种方式去实现一些数组常用的方法。
39 6
|
2月前
|
JavaScript 前端开发
【JavaScript】面试手写题精讲之数组(上)
该专题主要是讲解我们在面试的时候碰到一些JS的手写题, 确实这种手写题还是比较恶心的。有些时候好不容易把题目写出来了,突然面试官冷不丁来一句有没有更优的解法,直接让我们僵在原地。为了解决兄弟们的这些困扰,这个专题于是就诞生啦。我们会将一些常见的不是最优解的答案作为对比,方便大家更好理解。
38 3
|
3月前
|
存储 人工智能 JavaScript
【利用AI刷面试题】AI:十道JavaScript面试题巩固一下知识
【利用AI刷面试题】AI:十道JavaScript面试题巩固一下知识