400个最常见的 JavaScript 面试问答（1）

写在前面的

点击订阅专栏，即可查阅全部内容及后续更新

大家好，我是 海拥 ，专注于前端知识的分享。今天将给大家带来的是 400 个最常见的 JavaScript 面试问答第一部分。接下来我会持续更新（争取日更，也可能每周3-5篇），每小节大概 10 道题左右，总共会有 400 多道。

本专栏持续在牛客更新，
大家一定要记得点赞收藏呀！！！

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?

apply：调用具有给定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.apply(employee1, ['Hello', 'How are you?']); // Hello Haiyong Rodson, How are you?
invite.apply(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() |
|--|--|
不修改原始数组（不可变） | 修改原始数组（可变）
返回原始数组的子集 |将删除的元素作为数组返回
用于从数组中选取元素 |用于在数组中插入或删除元素

⬆ 返回顶部

8.你如何比较 Object 和 Map

Object 与Maps 的相似之处在于，它们都允许您将键设置为值、检索这些值、删除键以及检测某个键是否存储了某些内容。由于这个原因，对象在历史上被用作地图。但是在某些情况下，使用 Map 有一些重要的区别。

• Object 的键是字符串和符号，而它们可以是 Map 的任何值，包括functions、Object 和任何primitive。
• Map 中的键是有序的，而添加到 Object 的键不是。因此，当迭代它时，一个 Map 对象按插入的顺序返回键。
• 您可以使用 size 属性轻松获取 Map 的大小，而 Object 中的属性数量必须手动确定。
• Map 是可迭代的，因此可以直接迭代，而迭代 Object 需要以某种方式获取其键并对其进行迭代。
• 一个对象有一个原型，所以如果你不小心，地图中有一些默认的键可能会与你的键发生冲突。从 ES5 开始，这可以通过使用 map =Object.create(null) 绕过，但很少这样做。
• Map在涉及频繁添加和删除密钥对的场景中可能表现得更好。

⬆ 返回顶部

9.== 和 === 运算符有什么区别？

JavaScript 提供了严格(===, !==) 和类型转换(==, !=) 相等比较。严格运算符考虑变量的类型，而非严格运算符根据变量的值进行类型校正/转换。严格的运算符遵循以下不同类型的条件，

1. 当两个字符串具有相同的字符序列、相同的长度以及相应位置的相同字符时，它们是严格相等的。
2. 当两个数字在数值上相等时，它们严格相等。即，具有相同的数值。这里有两种特殊情况，

NaN 不等于任何东西，包括 NaN。
正零和负零彼此相等。

3. 如果两个布尔操作数都为真或都为假，则两个布尔操作数严格相等。
4. 如果两个对象引用同一个对象，则它们严格相等。
5. Null 和 Undefined 类型与 === 不相等，但与 == 相等。即， null===undefined --> false 但 null==undefined --> true
   一些涵盖上述情况的例子，

0 == false   // true
0 === false  // false
1 == "1"     // true
1 === "1"    // false
null == undefined // true
null === undefined // false
'0' == false // true
'0' === false // false
[]==[] or []===[] //false, 引用内存中的不同对象
{}=={} or {}==={} //false, 引用内存中的不同对象

⬆ 返回顶部

10.什么是 lambda 或 箭头函数？

箭头函数是函数表达式的较短语法，没有自己的this、arguments、super 或 new.target。这些函数最适合非方法函数，它们不能用作构造函数。

⬆ 返回顶部

希望大家能够给海海 点赞+收藏+关注 ，你的支持是海海更新的动力！后面我会持续分享面试经验 & 前端相关的专业知识。

最后祝大家都能找到满意的实习和 offer！

<a href="https://www.nowcoder.com/profile/533772245"><img src="https://uploadfiles.nowcoder.com/images/20220626/533772245_1656221096208/9E55363DB131EF7BE7E7CB2A7CC5831A"></a>