首頁  >  文章  >  web前端  >  50個JavaScript面試與解答(收藏)

50個JavaScript面試與解答(收藏)

青灯夜游
青灯夜游轉載
2019-11-26 15:52:1917453瀏覽

50個JavaScript面試與解答(收藏)

問題1:Java和JavaScript有什麼不同

Java JavaScript
Java是一種OOP程式語言。 JavaScript是一種OOP腳本語言。
它會建立在虛擬機器或瀏覽器中執行的應用程式。 程式碼在瀏覽器或node環境上運行。
需要編譯Java程式碼。 JS程式碼都是文字的形式。

問題2:什麼Javascript

JavaScript 是一種輕量級的解釋型程式語言,具有物件導向的特性,允許各位在其他靜態HTML頁面中建立互動性。該語言的通用核心已嵌入Netscape,Internet Explorer和其他網頁瀏覽器中。

推薦相關文章2020年最全js面試題整理(最新)

問題3: JS 支援哪些資料型別

50個JavaScript面試與解答(收藏)

JS 支援的資料型別:

 ● Undefined

 ● Null

# ● Boolean

 ● String

 」 Object

問題4:JavaScript的特性是什麼

#以下是JS的特性:

50個JavaScript面試與解答(收藏) ● JS 是一種輕量級,解釋性程式語言。

 ● 為了創建以網路為中心的應用程式而設計。

 ● 補充與整合了Java

 ● 補充與整合了HTML

 ● 開放與跨平台

#問題5: JavaScript是區分大小寫

是的,JS是一種區分大小寫的語言。關鍵字、變數、函數名和任何其他標識符必須始終使用一致的大寫字母進行使用。

問題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

運算符,可以獲得傳遞給函數的參數類型。如下:<pre class="brush:php;toolbar:false">function func(x){ console.log(typeof x, arguments.length); } func(); //==> "undefined", 0 func(7); //==> "number", 1 func("1", "2", "3"); //==> "string", 3</pre>問題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保留关键字作为变量名。例如,breakboolean变量名无效。
  2. JS 变量名不应该以数字(0-9)开头。它们必须以字母或下划线开头。例如,123name是一个无效的变量名,但123namename123是一个有效的变量名。
  3. JS 变量名区分大小写。例如,Testtest是两个不同的变量。

问题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>
...

内部方式:

nbsp;html>


<meta>
<script>
//声明一个函数(整个文档都可以使用)
function surprise() {
alert('恭喜你中了一百万')/*弹出框*/
}
</script>

。。。

外部方式:

...
<!--很多html页面都可以调用js4.js页面-->
<script>
...</script>

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

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

 ● varvar 语句用于声明一个变量,咱们可以选择初始化该变量的值。例子:var a =10;变量声明在代码执行之前处理。

 ● const - 常量的值不能通过重新赋值来改变,并且不能重新声明。

 ● let - 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。

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

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

  • 动态:在这种情况下,变量可以包含多种类型,如在JS中,变量可以取number, string 类型。
  • 静态:在这种情况下,变量只能包含一种类型,就像在Java中声明为string的变量只能包含一组字符,不能包含其他类型。

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

內建方法 傳回值
僅在目前會話下有效,關閉頁面或瀏覽器後被清除一般為5MB
特性 Cookie localStorage sessionStorage
資料的生命期 一般由伺服器生成,可設定失效時間。如果在瀏覽器端產生Cookie,預設是關閉瀏覽器後失效 除非被清除,否則永久保存
存放資料大小 4K左右
######與伺服器端通訊### ###每次都會攜帶在HTTP頭中,如果使用cookie保存過多資料會帶來效能問題######僅在客戶端(即瀏覽器)中保存,不參與和伺服器的通訊## ##########易用性######需要程式設計師自己封裝,源生的Cookie介面不友善######需要程式設計師自己封裝,源生的Cookie介面不友善   源生介面可以接受,亦可再次封裝對Object和Array有較好的支援############

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

==: 两边值类型不同的时候,要先进行类型转换,再比较。
===:不做类型转换,类型不同的一定不等。

一言以蔽之:==先转换类型再比较,===先判断类型,如果不是同一类型直接为false

问题29:null 和 undefined 区别

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

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

undefined是从null派生出来的  所以undefined==nulltrue

问题 30:undeclared 和 undefined 区别?

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

问题 31: 列出一些JS框架

50個JavaScript面試與解答(收藏)

JS框架是用JavaScript编写的应用程序框架,它与控制流中的JS库不同,一些最常用的框架是:

 ● Vue

 ● Angular

 ● React

问题 32: window 与 document 的区别:

window:JS 的 window 是一个全局对象,它包含变量、函数、historylocation

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'的结果是什么

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

问题 39:export 和 import 是什么

importexport有助于咱们编写模块化JS代码。 使用importexport,咱们可以将代码拆分为多个文件,如下:

//------ lib.js ------
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
 
//------ main.js ------
 { 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);

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

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

callapply可以用来重新定义函数的执行环境,也就是this的指向;callapply都是为了改变某个函数运行时的context,即上下文而存在的,换句话说,就是为了改变函数体内部this的指向。

call()调用一个对象的方法,用另一个对象替换当前对象,可以继承另外一个对象的属性,它的语法是:

Function.call(obj[, param1[, param2[, [,...paramN]]]]);

说明:call方法可以用来代替另一个对象调用一个方法,call方法可以将一个函数的对象上下文从初始的上下文改变为obj指定的新对象,如果没有提供obj参数,那么Global对象被用于obj

apply()call()方法一样,只是参数列表不同,语法:

Function.apply(obj[, argArray]);

说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个TypeError,如果没有提供argArrayobj任何一个参数,那么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);

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

问题46:以下代码的输出什么

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

输出 undefineddelete操作符用于删除对象的属性。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")

原文:https://hackr.io/blog/javascript-interview-questions

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

相关学习推荐:javascript视频教程

以上是50個JavaScript面試與解答(收藏)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除