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()

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

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

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

目录
相关文章
|
3月前
|
JSON JavaScript 前端开发
Javascript基础 86个面试题汇总 (附答案)
该文章汇总了JavaScript的基础面试题及其答案,涵盖了JavaScript的核心概念、特性以及常见的面试问题。
63 3
|
3月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
4月前
|
JavaScript 前端开发
常见的JS面试题
【8月更文挑战第5天】 常见的JS面试题
62 3
|
1月前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
35 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
4月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
45 0
|
4月前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
4月前
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码
|
4月前
|
JavaScript 前端开发
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
|
5月前
|
缓存 JavaScript 前端开发
js高频面试题,整理好咯
中级前端面试题,不低于12k,整理的是js较高频知识点,可能不够完善,大家有兴趣可以留言补充,我会逐步完善,若发现哪里有错,还请多多斧正。