首页 > 400个最常见的 JavaScript 面试问答(1)
头像
海拥
编辑于 07-21 14:37
+ 关注

400个最常见的 JavaScript 面试问答(1)

写在前面的

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

大家一定要记得点赞收藏呀!!!

编号 问题
1 在 JavaScript 中创建对象的可行方法有哪些?
2 什么是原型链?
3 call、apply、bind有什么区别?
4 什么是 JSON 及其常见操作?
5 数组slice()方法的目的是什么?
6 数组splice()方法的目的是什么?
7 slice()和splice()有什么区别?
8 你如何比较 Object 和 Map
9 == 和 === 运算符有什么区别?
10 什么是 lambda 或 箭头函数?

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。
正零和负零彼此相等。

  1. 如果两个布尔操作数都为真或都为假,则两个布尔操作数严格相等。
  2. 如果两个对象引用同一个对象,则它们严格相等。
  3. Null 和 Undefined 类型与 === 不相等,但与 == 相等。即, null===undefined --> falsenull==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!

全部评论

(9) 回帖
加载中...
话题 回帖

近期热帖

近期精华帖

热门推荐