50 个JS 必须懂的面试题为你助力金九银十

时间  2019-11-06
标签 必须 懂的 面试 题为 助力 栏目 JavaScript 繁體版
原文   原文链接

做者：Kenmenjavascript

译者：前端小智css

来源：hackr.iohtml

阿里云最近在作活动，低至2折，有兴趣能够看看：promotion.aliyun.com/ntms/yunpar…前端

为了保证的可读性，本文采用意译而非直译。java

问题1：Java和JavaScript有什么不一样

Java JavaScript
Java是一种OOP编程语言。 JavaScript是一种OOP脚本语言。
它建立在虚拟机或浏览器中运行的应用程序。 代码在浏览器或node环境上运行。
须要编译Java代码。 JS代码都是文本的形式。

问题2：什么 Javascript

JavaScript 是一种轻量级的解释型编程语言，具备面向对象的特性，容许各位在其余静态HTML页面中构建交互性。 该语言的通用核心已嵌入Netscape，Internet Explorer和其余Web浏览器中。node

问题3： JS 支持哪些数据类型

JS 支持的数据类型:git

  • Undefined
  • Null
  • Boolean
  • String
  • Symbol
  • Number
  • Object

问题4：JavaScript的特性是什么

如下是JS的特性:程序员

  • JS 是一种轻量级，解释性编程语言。
  • 为了建立以网络为中心的应用程序而设计。
  • 补充和集成了 Java
  • 补充和集成了 HTML
  • 开放和跨平台

问题5：JavaScript是区分大小写

是的，JS是一种区分大小写的语言。关键字、变量、函数名和任何其余标识符必须始终使用一致的大写字母进行使用。github

问题6：JS 的优点是什么

如下使用JS的优势:编程

  • 更少的服务器交互 - 在将页面发送到服务器以前，能够验证用户输入,节省了服务器流量，意味着服务器的负载更少

  • 当即反馈 - 用户不须要等待页面从新加载来查看是否忘记输入某些内容。

  • 加强交互 - 在界面中，当用户使用鼠标悬停或经过键盘激活它们时会作出响应。

  • 丰富的接口 - 可使用JS包含拖放组件和滑块等项，为网站提供丰富的界面。

问题7：如何用JS建立对象

JS贼支持对象概念，用以下方式建立便可：

var emp = {
name: "Daniel",
age: 23
};
复制代码

问题8：如何用JS建立数组

JS 建立数组也很简单：

var x = [];
var y = [1, 2, 3, 4, 5];
复制代码

问题9：JS 中的命名函数是什么以及如何定义：

命名函数在定义后当即声明名称，可使用function关键字定义：

function named(){
// write code here
}
复制代码

问题10：是否能够将匿名函数分配给变量并将其做为参数传递给另外一个函数

能够。一个匿名函数能够分配给一个变量，它也能够做为参数传递给另外一个函数。

问题11：JS中的参数对象是什么&如何得到传递给函数的参数类型

JS 变量arguments表示传递给函数的参数。 使用typeof运算符，能够得到传递给函数的参数类型。以下：

function func(x){
console.log(typeof x, arguments.length);
}
func(); //==> "undefined", 0
func(7); //==> "number", 1
func("1", "2", "3"); //==> "string", 3
复制代码

问题12：JS中变量的做用域是什么

变量的做用域是程序中定义它的区域，JS变量只有两个做用域：

  • 全局变量 - 全局变量具备全局做用域，这意味着它在JS代码中的任何位置均可见。
  • 局部变量 - 局部变量仅在定义它的函数中可见，函数参数始终是该函数的本地参数。

问题13：JS 中“this”运算符的用途是什么？

this关键字引用它所属的对象。 根据使用位置，它具备不一样的值。 在方法中，这指的是全部者对象，而在函数中，这指的是全局对象。

问题14：什么是回调

回调函数是做为参数或选项传递给某个方法的普通JS函数。它是一个函数，在另外一个函数完成执行后执行，所以称为回调。在JS中，函数是对象，所以，函数能够接受函数做为参数，而且能够由其余函数返回。

问题15：什么是闭包？举个例子

只要在某个内部做用域内访问在当前做用域以外定义的变量，就会建立闭包。 它容许你从内部函数访问外部函数的做用域。 在JS中，每次建立函数时都会建立闭包。 要使用闭包，只需在另外一个函数内定义一个函数并暴露它。

问题16：列出一些内置方法及其返回的值。

内置方法 返回值
CharAt() 它返回指定索引处的字符。
Concat() 它链接两个或多个字符串。
forEach() 它为数组中的每一个元素调用一个函数。
indexOf() 它返回指定值第一次出现时调用字符串对象中的索引。
pop() 它从数组中删除最后一个元素并返回该元素。
push() 它将一个或多个元素添加到数组的末尾，并返回数组的新长度。
reverse() 反转数组元素的顺序。

问题17： JS中的变量命名约定是什么？

在JS中命名变量时要遵循如下规则:

  1. 我们不该该使用任何JS保留关键字做为变量名。例如，break或boolean变量名无效。

  2. JS 变量名不该该以数字(0-9)开头。它们必须以字母或下划线开头。例如，123name是一个无效的变量名，但123name或name123是一个有效的变量名。

  3. JS 变量名区分大小写。例如，Test和test是两个不一样的变量。

问题18：TypeOf 运算符是如何工做的

typeof运算符用于获取其操做数的数据类型。 操做数能够是文字或数据结构，例如变量，函数或对象。 它是一个一元运算符，放在它的单个操做数以前，能够是任何类型。 它的值是一个字符串，表示操做数的数据类型。

问题19：如何使用 JS 建立 cookie

建立cookie的最简单方法是为document.cookie对象分配一个字符串值，以下所示:

document.cookie = "key1 = value1; key2 = value2; expires = date";
复制代码

问题20：如何使用JS读取cookie

读取cookie就像写入cookie同样简单，由于document.cookie对象的值是cookie。

  • document.cookie的值是由分号分隔的name=value对的列表，其中name是cookie的名称，value是其字符串值。
  • 可使用split()方法将字符串分解为键和值。

问题21：如何使用 JS 删除 cookie

若是要删除cookie以便后续尝试读取cookie，则只需将过时日期设置为过去的时间。 我们应该定义cookie路径以确保删除正确的cookie。 若是未指定路径，某些浏览器将不容许我们删除cookie。

问题22：Attribute 和Property之间有什么区别

  • Attribute——提供关于元素的更多细节，如id、类型、值等。

  • Property —— 分配给属性的值，如type =“text”，value ='Name'等。

问题23：列出在JS代码中访问HTML元素的不一样方式

下面是在JS代码中访问 html 元素的方法列表:

  • getElementById(‘idname’): 按id名称获取元素
  • getElementsByClass(‘classname’): 获取具备给定类名的全部元素
  • getElementsByTagName(‘tagname’): 获取具备给定标记名称的全部元素
  • querySelector(): 此函数采用css样式选择器并返回第一个选定元素

问题24：JS代码在HTML文件中能够以多少种方式使用

主要有三种：

  • 行内
  • 内部
  • 外部

行内方式：

...
<input type="button" value="点击有惊喜" onclick="javascript:alert('哈哈哈哈')">
...
复制代码

内部方式：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
//声明一个函数(整个文档均可以使用)
function surprise() {
alert('恭喜你中了一百万')/*弹出框*/
}
</script>
</head>
。。。
</html>
复制代码

外部方式：

...
<!--不少html页面均可以调用js4.js页面-->
<script src="../../js/js4.js" type="text/javascript" charset="utf-8">
...
复制代码

问题25：在JS中定义变量的方法有哪些

在 JS 中声明变量有三种方式：

  • var – var 语句用于声明一个变量，我们能够选择初始化该变量的值。例子:var a =10;变量声明在代码执行以前处理。

  • const - 常量的值不能经过从新赋值来改变，而且不能从新声明。

  • let - 语句声明一个块级做用域的本地变量，而且可选的将其初始化为一个值。

问题26：什么是类型化语言

类型化语言中，值与值关联，而不是与变量关联，它有两种类型：

  • 动态:在这种状况下，变量能够包含多种类型，如在JS中，变量能够取number, string 类型。

  • 静态:在这种状况下，变量只能包含一种类型，就像在Java中声明为string的变量只能包含一组字符，不能包含其余类型。

问题27：Cookie 与 Local storage 与 Session storage 区别

特性 Cookie localStorage sessionStorage
数据的生命期 通常由服务器生成，可设置失效时间。若是在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，不然永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小 4K左右 通常为 5MB
与服务器端通讯 每次都会携带在HTTP头中，若是使用cookie保存过多数据会带来性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的通讯
易用性 须要程序员本身封装，源生的Cookie接口不友好 须要程序员本身封装，源生的Cookie接口不友好 源生接口能够接受，亦可再次封装来对Object和Array有更好的支持

问题28: ‘==‘ 和 ‘===‘ 区别

==： 两边值类型不一样的时候，要先进行类型转换，再比较。 ===：不作类型转换，类型不一样的必定不等。

一言以蔽之：==先转换类型再比较，===先判断类型，若是不是同一类型直接为false。

问题29：null 和 undefined 区别

undefined是基本数据类型 表示未定义 缺乏的意思。

null是引用数据类型，是对象，表示空对象

undefined是从null派生出来的 因此undefined==null 为 true

问题 30：undeclared 和 undefined 区别？

undeclared的变量是程序中不存在且未声明的变量。 若是程序尝试读取未声明变量的值，则会遇到运行时错误。undefined的变量是在程序中声明但未赋予任何值的变量，若是程序试图读取未定义变量的值，则返回undefined的值。

问题 31： 列出一些JS框架

JS框架是用JavaScript编写的应用程序框架，它与控制流中的JS库不一样，一些最经常使用的框架是：

  • Vue
  • Angular
  • React

问题 32： window 与 document 的区别：

window:JS 的 window 是一个全局对象，它包含变量、函数、history、location。

document:document也位于window之下，能够视为window的属性。

问题 33： innerHTML 和 innerText 的区别

innerHTML:也就是从对象的起始位置到终止位置的所有内容,包括Html标签。

innerText:从起始位置到终止位置的内容, 但它去除Html标签

问题 34：JS中的事件冒泡是什么

事件冒泡是HTML DOM API中事件传播的一种方式，当一个事件发生在另外一个元素中的一个元素中，而且两个元素都注册了该事件的句柄时。经过冒泡，事件首先由最内部的元素捕获和处理，而后传播到外部元素。执行从该事件开始，并转到其父元素。而后执行传递给父元素，以此类推，直到body元素。

问题 35：NaN 是什么

NaN 即非数值（Not a Number），NaN 属性用于引用特殊的非数字值，该属性指定的并非不合法的数字。

NaN 属性 与 Number.Nan 属性相同。

提示： 请使用 isNaN() 来判断一个值是不是数字。缘由是 NaN 与全部值都不相等，包括它本身。

问题 36：JS的原始/对象类型如何在函数中传递？

二者之间的一个区别是，原始数据类型是经过值传递的，对象是经过引用传递的。

  • 值传递：意味着建立原始文件的副本。把它想象成一对双胞胎:他们出生的时候如出一辙，可是双胞胎中的老大在战争中失去了一条腿，而老二却没有。
  • 引用传递: 意味着建立原始文件的别名。当我妈妈叫沙雕的时候，虽然个人名字叫小智，但这并非说我就忽然就克隆了一个本身:我仍然是我，只是能够用不一样名字来称呼我而已。

问题 37：如何在JS中将任意基的字符串转换为整数

parseInt(string, radix) 将一个字符串 string 转换为 radix 进制的整数， radix 为介于2-36之间的数,以下：

parseInt("4F", 16)
复制代码

问题 38：2+5+ '3'的结果是什么

因为2和5是整数，它们将以数字形式相加。由于3是一个字符串，它将与 7 拼接，结果是73。

问题 39：export 和 import 是什么

import和export有助于我们编写模块化JS代码。 使用import和export，我们能够将代码拆分为多个文件，以下：

//------ lib.js ------</span>
export const sqrt = Math.sqrt;</span>
export function square(x) {</span>
return x * x;</span>
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
 
//------ main.js ------</span>
 { square, diag } from 'lib';
console.log(square(5)); // 25
console.log(diag(4, 3)); // 5
复制代码

问题40：JS中的“严格”模式是什么以及如何启用？

严格模式是在代码中引入更好的错误检查的一种方法。

  • 当使用严格模式时，不能使用隐式声明的变量，或为只读属性赋值，或向不可扩展的对象添加属性。

  • 能够经过在文件，程序或函数的开头添加“use strict”来启用严格模式

问题41：JS 中的 prompt 框是什么

提示框是容许用户经过提供文本框输入输入的框。 prompt() 方法显示一个对话框，提示访问者输入。 若是您但愿用户在输入页面以前输入值，则一般会使用提示框。 弹出提示框时，用户必须在输入输入值后单击“肯定”或“取消”才能继续。

问题42：下面代码的输出是什么？

var Y = 1;
if (eval(function f(){}))
{
  y += typeof F;
}
console.log(y);
复制代码

打印1undefined。if条件语句使用eval求值，所以eval(function f(){})返回函数f(){}(为真)。所以，在if语句中，执行typeof f返回undefined，由于if语句代码在运行时执行，而if条件中的语句在运行时计算。

问题43：call 和 apply有什么区别

call和apply能够用来从新定义函数的执行环境，也就是this的指向；call和apply都是为了改变某个函数运行时的context，即上下文而存在的，换句话说，就是为了改变函数体内部this的指向。

call()调用一个对象的方法，用另外一个对象替换当前对象，能够继承另一个对象的属性，它的语法是：

Function.call(obj[, param1[, param2[, [,...paramN]]]]);
复制代码

说明：call方法能够用来代替另外一个对象调用一个方法，call方法能够将一个函数的对象上下文从初始的上下文改变为obj指定的新对象，若是没有提供obj参数，那么Global对象被用于obj

apply() 和call()方法同样，只是参数列表不一样，语法：

Function.apply(obj[, argArray]);
复制代码

说明：若是argArray不是一个有效数组或不是arguments对象，那么将致使一个TypeError，若是没有提供argArray和obj任何一个参数，那么Global对象将用做obj。

问题44：如何在JS中清空数组

有许多方法能够用来清空数组:

方法一：

arrayList = []
复制代码

上面的代码将把变量arrayList设置为一个新的空数组。若是在其余任何地方都没有对原始数组arrayList的引用，则建议这样作，由于它实际上会建立一个新的空数组。我们应该当心使用这种清空数组的方法，由于若是你从另外一个变量引用了这个数组，那么原始的引用数组将保持不变。

方法二：

arrayList.length = 0;
复制代码

上面的代码将经过将其length设置为0来清除现有数组。这种清空数组的方式还会更新指向原始数组的全部引用变量。 所以，当你想要更新指向arrayList的全部引用变量时，此方法颇有用。

方法三：

arrayList.splice(0, arrayList.length);
复制代码

这处方法也行，固然这种清空数组的方法也将更新对原始数组的全部引用。

方法四：

while(arrayList.length)
{
  arrayList.pop();
}
复制代码

上面的实现也能够空数组，但一般不建议常用这种方式。

问题45：如下代码的输出什么

var output = (function(x)
{
  delete x;
  return x;
}
)(0);
console.log(output);
复制代码

打印 0。delete操做符用于从对象中删除属性。这里x不是一个对象，而是一个局部变量，删除操做符不影响局部变量。

问题46：如下代码的输出什么

var X = { foo : 1}; 
var output = (function() 
{ 
  delete X.foo; 
  return X.foo; 
} 
)(); 
console.log(output);
复制代码

输出 undefined。delete操做符用于删除对象的属性。X是一个具备foo属性的对象，因为它是一个自调用函数，因此我们将从对象X中删除foo属性。这样作以后，当我们试图引用一个被删除的foo属性时，结果是undefined。

问题47：如下代码的输出什么

var foo = function Bar()
{
  return 7;
};
typeof Bar();
复制代码

输出将是引用错误。函数定义只能有一个引用变量做为其函数名。

问题49：为何要将JS源文件的所有内容包装在一个函数中

这是一种愈来愈广泛的作法，被许多流行的JS库所采用。 这种技术围绕文件的整个内容建立一个闭包，最重要的是，它能够建立一个私有命名空间，从而有助于避免不一样JS模块和库之间潜在的名称冲突。

该技术的另外一个特性是容许为全局变量提供一个简单的别名，这在jQuery插件中常用。

问题50：JS中的转义字符是什么

JS转义字符使我们可以在不破坏应用程序的状况下编写特殊字符。转义字符(\)用于处理特殊字符，如单引号、双引号、撇号和&号，在字符前放置反斜杠使其显示。

如：document.write("I am a \"good\" boy")

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：hackr.io/blog/javasc…

交流（欢迎加入群，群工做日都会发红包，互动讨论技术）

阿里云最近在作活动，低至2折，有兴趣能够看看：promotion.aliyun.com/ntms/yunpar…

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。

每次整理文章，通常都到2点才睡觉，一周4次左右，挺苦的，还望支持，给点鼓励

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程