js基礎(chǔ)面試題1-10道

1.document load 和 document ready 的區(qū)別

十余年的揭陽網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。網(wǎng)絡(luò)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整揭陽建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“揭陽網(wǎng)站設(shè)計”,“揭陽網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。

參考答案：文檔解析過程中，ready在加載圖片等外部資源前觸發(fā)，load在之后觸發(fā)。如果頁面中要是沒有圖片之類的媒體文件的話ready與load是差不多的，但是頁面中有文件就不一樣了，所以還是推薦大家在工作中用ready

解析：

DOM文檔解析：

頁面加載完成有兩種事件

1.load是當(dāng)頁面所有資源全部加載完成后（包括DOM文檔樹，css文件，js文件，圖片資源等），執(zhí)行一個函數(shù)

缺點：如果圖片資源較多，加載時間較長，onload后等待執(zhí)行的函數(shù)需要等待較長時間，所以一些效果可能受到影響

代碼形式：

2.$(document).ready()是當(dāng)DOM文檔樹加載完成后執(zhí)行一個函數(shù) （不包含圖片，css等）所以會比load較快執(zhí)行

在原生的jS中不包括ready()這個方法，Jquery才有，jquery中有 $().ready(function)。

代碼形式為：

參與互動

2.JavaScript 中如何檢測一個變量是一個 String 類型？

參考答案：三種方法（typeof、constructor、Object.prototype.toString.call()）

解析：

參與互動

3.請用 js 去除字符串空格？

參考答案：replace 正則匹配方法、str.trim()方法、JQ 方法：$.trim(str)方法

解析：

方法一：replace 正則匹配方法

去除字符串內(nèi)所有的空格：str = str.replace(/s*/g, "");

去除字符串內(nèi)兩頭的空格：str = str.replace(/^s*|s*$/g, "");

去除字符串內(nèi)左側(cè)的空格：str = str.replace(/^s*/, "");

去除字符串內(nèi)右側(cè)的空格：str = str.replace(/(s*$)/g, "");

示例：

方法二：str.trim()方法

trim()方法是用來刪除字符串兩端的空白字符并返回，trim 方法并不影響原來的字符串本身，它返回的是一個新的字符串。

缺陷：只能去除字符串兩端的空格，不能去除中間的空格

示例：

方法三：JQ 方法：$.trim(str)方法

$.trim() 函數(shù)用于去除字符串兩端的空白字符。

注意：$.trim()函數(shù)會移除字符串開始和末尾處的所有換行符，空格(包括連續(xù)的空格)和制表符。如果這些空白字符在字符串中間時，它們將被保留，不會被移除。

示例：

參與互動

4.js 是一門怎樣的語言，它有什么特點

參考答案：

1.腳本語言。JavaScript 是一種解釋型的腳本語言, C、C++等語言先編譯后執(zhí)行, 而 JavaScript 是在程序的運(yùn)行過程中逐行進(jìn)行解釋。

2.基于對象。JavaScript 是一種基于對象的腳本語言, 它不僅可以創(chuàng)建對象, 也能使用現(xiàn)有的對象。

3.簡單。JavaScript 語言中采用的是弱類型的變量類型, 對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求, 是基于 Java 基本語句和控制的腳本語言, 其設(shè)計簡單緊湊。

4.動態(tài)性。JavaScript 是一種采用事件驅(qū)動的腳本語言, 它不需要經(jīng)過 Web 服務(wù)器就可以對用戶的輸入做出響應(yīng)。

5.跨平臺性。JavaScript 腳本語言不依賴于操作系統(tǒng), 僅需要瀏覽器的支持。

參與互動

5.== 和 === 的不同

參考答案： == 是抽象相等運(yùn)算符，而 === 是嚴(yán)格相等運(yùn)算符。 == 運(yùn)算符是在進(jìn)行必要的類型轉(zhuǎn)換后，再比較。 === 運(yùn)算符不會進(jìn)行類型轉(zhuǎn)換，所以如果兩個值不是相同的類型，會直接返回 false 。使用 == 時，可能發(fā)生一些特別的事情，例如：

如果你對 == 和 === 的概念不是特別了解，建議大多數(shù)情況下使用 ===

參與互動

6.怎樣添加、移除、移動、復(fù)制、創(chuàng)建和查找節(jié)點？

參考答案：

1）創(chuàng)建新節(jié)點

2）添加、移除、替換、插入

3）查找

參與互動

7.事件委托是什么

參考答案：利用事件冒泡的原理，讓自己的所觸發(fā)的事件，讓他的父元素代替執(zhí)行！

解析：

1、那什么樣的事件可以用事件委托，什么樣的事件不可以用呢？

2、為什么要用事件委托

3、事件冒泡與事件委托的對比

4、事件委托怎么取索引？

拓展：

參考

參與互動

8.require 與 import 的區(qū)別

參考答案：兩者的加載方式不同、規(guī)范不同

第一、兩者的加載方式不同，require 是在運(yùn)行時加載，而 import 是在編譯時加載

require('./a')(); // a 模塊是一個函數(shù)，立即執(zhí)行 a 模塊函數(shù)

var data = require('./a').data; // a 模塊導(dǎo)出的是一個對象

var a = require('./a')[0]; // a 模塊導(dǎo)出的是一個數(shù)組 ====== 哪都行

import $ from 'jquery';

import * as _ from '_';

import {a, b, c} from './a';

import {default as alias, a as a_a, b, c} from './a'; ======用在開頭

第二、規(guī)范不同，require 是 CommonJS/AMD 規(guī)范，import 是 ESMAScript6+規(guī)范

第三、require 特點：社區(qū)方案，提供了服務(wù)器/瀏覽器的模塊加載方案。非語言層面的標(biāo)準(zhǔn)。只能在運(yùn)行時確定模塊的依賴關(guān)系及輸入/輸出的變量，無法進(jìn)行靜態(tài)優(yōu)化。

import 特點：語言規(guī)格層面支持模塊功能。支持編譯時靜態(tài)分析，便于 JS 引入宏和類型檢驗。動態(tài)綁定。

參與互動

9.javascript 對象的幾種創(chuàng)建方式

參考答案：

第一種：Object 構(gòu)造函數(shù)創(chuàng)建

這行代碼創(chuàng)建了 Object 引用類型的一個新實例，然后把實例保存在變量 Person 中。

第二種：使用對象字面量表示法

對象字面量是對象定義的一種簡寫形式，目的在于簡化創(chuàng)建包含大量屬性的對象的過程。也就是說，第一種和第二種方式創(chuàng)建對象的方法其實都是一樣的，只是寫法上的區(qū)別不同

在介紹第三種的創(chuàng)建方法之前，我們應(yīng)該要明白為什么還要用別的方法來創(chuàng)建對象，也就是第一種，第二種方法的缺點所在：它們都是用了同一個接口創(chuàng)建很多對象，會產(chǎn)生大量的重復(fù)代碼，就是如果你有 100 個對象，那你要輸入 100 次很多相同的代碼。那我們有什么方法來避免過多的重復(fù)代碼呢，就是把創(chuàng)建對象的過程封裝在函數(shù)體內(nèi)，通過函數(shù)的調(diào)用直接生成對象。

第三種：使用工廠模式創(chuàng)建對象

在使用工廠模式創(chuàng)建對象的時候，我們都可以注意到，在 createPerson 函數(shù)中，返回的是一個對象。那么我們就無法判斷返回的對象究竟是一個什么樣的類型。于是就出現(xiàn)了第四種創(chuàng)建對象的模式。

第四種: 使用構(gòu)造函數(shù)創(chuàng)建對象

對比工廠模式，我們可以發(fā)現(xiàn)以下區(qū)別：

1.沒有顯示地創(chuàng)建對象

2.直接將屬性和方法賦給了 this 對象

3.沒有 return 語句

4.終于可以識別的對象的類型。對于檢測對象類型，我們應(yīng)該使用 instanceof 操作符，我們來進(jìn)行自主檢測：

同時我們也應(yīng)該明白，按照慣例，構(gòu)造函數(shù)始終要應(yīng)該以一個大寫字母開頭，而非構(gòu)造函數(shù)則應(yīng)該以一個小寫字母開頭。

那么構(gòu)造函數(shù)確實挺好用的，但是它也有它的缺點：

就是每個方法都要在每個實例上重新創(chuàng)建一遍，方法指的就是我們在對象里面定義的函數(shù)。如果方法的數(shù)量很多，就會占用很多不必要的內(nèi)存。于是出現(xiàn)了第五種創(chuàng)建對象的方法

第五種：原型創(chuàng)建對象模式

使用原型創(chuàng)建對象的方式，可以讓所有對象實例共享它所包含的屬性和方法。

如果是使用原型創(chuàng)建對象模式，請看下面代碼：

當(dāng)為對象實例添加一個屬性時，這個屬性就會屏蔽原型對象中保存的同名屬性。

這時候我們就可以使用構(gòu)造函數(shù)模式與原型模式結(jié)合的方式，構(gòu)造函數(shù)模式用于定義實例屬性，而原型模式用于定義方法和共享的屬性

第六種：組合使用構(gòu)造函數(shù)模式和原型模式

解析： 參考

參與互動

10.JavaScript 繼承的方式和優(yōu)缺點

參考答案：六種方式

javascript測試題

一 ：

1. A （b c聲明的分別是對象和數(shù)組，不會報錯，d也會報錯，但是是編譯錯誤，不是運(yùn)行期錯誤）

---------------------------------------------------

2.B

---------------------------------------------------

3.C(a明顯錯了，null和undefined都是頂級對象，沒有constructor，b不說了，三個等號匹配類型，他們沒有類型，不會相等，d是比較特殊的，NaN是個數(shù)字引用，它不等于任何值)

二：

4.AB（JavaScript算是Jscript的子集，Google一下Jscript就清楚了，第二個根本就是胡扯，C飄過了，Ajax的全稱是Asynchronous JavaScript and XML，當(dāng)然必須用JavaScript）

---------------------------------------------------

5.ACE（這是個考JSON寫法的題，屬于基礎(chǔ)知識，不解釋了）

---------------------------------------------------

6.AB（自己把它們寫出來就知道了）

---------------------------------------------------

7.ABCDE

---------------------------------------------------

8.ABCDE(iframe是個框架，通過腳本可以實現(xiàn)內(nèi)部外部的互相通信，當(dāng)然也可以互相改變大小)

---------------------------------------------------

9.ABCDE(CAPTION必須緊跟在table標(biāo)簽之后，其他的不解釋了)

---------------------------------------------------

10.D（window.opener指向上一級的window對象，reload方法是不存在的，window.location="a.html"本身就是個錯誤語句）

三：

1.sort方法用于對數(shù)組進(jìn)行排序，它的參數(shù)是個閉包函數(shù)，用來確定排序規(guī)則，默認(rèn)是按照大小從小到大排列，但是如果有參數(shù)，就會按照參數(shù)的返回值的正負(fù)來判斷，比如要對一個數(shù)字?jǐn)?shù)組進(jìn)行倒序排序就需要一個閉包函數(shù)

var a = function(x,y){return y-x;};

然后把這個閉包作為參數(shù)傳進(jìn)去：

[3,2,1,5,8].sort(a); //=[8,5,3,2,1]

實現(xiàn)機(jī)制就是對數(shù)組進(jìn)行兩兩比較，如果閉包的返回值是負(fù)值，順序就互相調(diào)換，正值或者零就不變，相當(dāng)于一個簡寫的冒泡排序法

---------------------------------------------------

2.

DIV是block元素，默認(rèn)自己占一行具備width,height等block才有的css樣式，SPAN是inline元素，內(nèi)嵌在DHTML結(jié)構(gòu)中，默認(rèn)不換行

DIV中可以包含SPAN，但是SPAN中包含DIV是不符合W3C標(biāo)準(zhǔn)的。

---------------------------------------------------

3.

innerHTML屬性 是標(biāo)示一個包含標(biāo)簽內(nèi)部全部html代碼的字符串

outerHTML屬性 是標(biāo)示一個不但包含標(biāo)簽內(nèi)部而且包含標(biāo)簽本身全部html代碼的字符串

innerText屬性 是標(biāo)示一個包含標(biāo)簽內(nèi)所有文本的字符串，不包含html標(biāo)簽的任何內(nèi)容

---------------------------------------------------

4.

1.標(biāo)簽必須閉合

2.所有元素屬性與屬性名稱必須為小寫字母

3.所有屬性值必須加上引號

---------------------------------------------------

5

日媽這個問題真讓人惱火，問的也太大了，web標(biāo)準(zhǔn)也太多了，列常用的吧：

1.XHTML應(yīng)該加上doctype

2.標(biāo)簽必須閉合而且規(guī)范排布

3.所有屬性值加上引號

4.特殊元素加上必要的屬性，比如img應(yīng)該帶著alt，script應(yīng)該帶著type而不是平時經(jīng)?？吹降膌anguage

5.屬性和屬性值全部改成小寫，不能出現(xiàn)STYLE="WIDTH:100%"

6.把css和JavaScript改成外部引用

7.不要亂套標(biāo)簽，比如在span或者li里面套div

8.布局不要用table，會造成大量的垃圾代碼

9.表單元素帶上label

10.把出這個題的人斃了！

javascript的題。

1.D

理由:js是弱類型語言，沒有強(qiáng)類型語言那么多的變量類型

2.D

理由:其他瀏覽器都可以運(yùn)行

3.D

理由:在瀏覽器打開調(diào)試窗口，在Console里可以看到

4.A

理由:js組成部分包括核心、文檔對象模型、瀏覽器對象模型

5.A

理由:不加var就是全局變量，外部也可以訪問

6.D

理由:不考慮兼容性下，let的確不錯

7.B

理由:分號可以不加

8.C

理由:bool和null是基本數(shù)據(jù)類型，數(shù)組是引用類型

9.D

理由:字符串通常用單引號或雙引號表示

10.B

理由:數(shù)組的成員通過索引訪問，就像這個[0]

關(guān)于CSS/HTML/JAVASCRIPT的10道選擇題

1.D

2.D

3.C

4.C

5.B

6.B

7.B

8.A

特別是后面三個題目，花了時間喔，還要按題目要求把JS或JQ代碼寫出來執(zhí)行，再選答案。希望對你有幫助。這題目應(yīng)該網(wǎng)頁前端的題目喔。哈哈，還好我是搞前端開發(fā)的。

js基礎(chǔ)面試題71-80道題目

71.IE 和標(biāo)準(zhǔn)下有哪些兼容性的寫法

參考答案：

參與互動

72.變量提升

參考答案：

A、js 代碼執(zhí)行的過程

B、變量提升發(fā)生的環(huán)境：發(fā)生在代碼所處的當(dāng)前作用域。

解析：

對應(yīng)面試題

參與互動

73.如何阻止冒泡與默認(rèn)行為

參考答案：

解析：

當(dāng)需要阻止冒泡行為時，可以使用

當(dāng)需要阻止默認(rèn)行為時，可以使用

參與互動

74.js 中 this 閉包 作用域

參考答案：

this：指向調(diào)用上下文

閉包：定義一個函數(shù)就開辟了一個局部作用域，整個 js 執(zhí)行環(huán)境有一個全局作用域

作用域：一個函數(shù)可以訪問其他函數(shù)中的變量（閉包是一個受保護(hù)的變量空間）

參與互動

75.javascript 的本地對象，內(nèi)置對象和宿主對象

參考答案：

1.本地對象

ECMA-262 把本地對象（native object）定義為“獨立于宿主環(huán)境的 ECMAScript 實現(xiàn)提供的對象"。簡單來說，本地對象就是 ECMA-262 定義的類（引用類型）。它們包括：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

2.內(nèi)置對象

JS中內(nèi)置了17個對象，常用的是Array對象、Date對象、正則表達(dá)式對象、string對象、Global對象

3.宿主對象

由ECMAScript實現(xiàn)的宿主環(huán)境提供的對象，可以理解為：瀏覽器提供的對象。所有的BOM和DOM都是宿主對象。

參與互動

76.javascript 的同源策略

參考答案：一段腳本只能讀取來自于同一來源的窗口和文檔的屬性

解析：

同源策略：限制從一個源加載的文檔或腳本如何與來自另一個源的資源進(jìn)行交互。這是一個用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。（來自 MDN 官方的解釋）

簡單來說就是：一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機(jī)名、協(xié)議和端口號的組合 具體解釋：

（1）源包括三個部分：協(xié)議、域名、端口（http 協(xié)議的默認(rèn)端口是 80）。如果有任何一個部分不同，則源不同，那就是跨域了。

（2）限制：這個源的文檔沒有權(quán)利去操作另一個源的文檔。這個限制體現(xiàn)在：（要記?。?/p>

Cookie、LocalStorage 和 IndexDB 無法獲取。

無法獲取和操作 DOM。

不能發(fā)送 Ajax 請求。我們要注意，Ajax 只適合同源的通信。

同源策略帶來的麻煩：ajax 在不同域名下的請求無法實現(xiàn)，需要進(jìn)行跨域操作

參與互動

77.事件冒泡與事件捕獲

參考答案：

事件冒泡：由最具體的元素（目標(biāo)元素）向外傳播到最不具體的元素

事件捕獲：由最不確定的元素到目標(biāo)元素

參與互動

78.foo = foo||bar ，這行代碼是什么意思？為什么要這樣寫？

參考答案：

這種寫法稱為短路表達(dá)式

解析：

相當(dāng)于

常用于函數(shù)參數(shù)的空判斷

參與互動

79.復(fù)雜數(shù)據(jù)類型如何轉(zhuǎn)變?yōu)樽址?/p>

參考答案：

參與互動

80.javascript 中 this 的指向問題

參考答案：

解析：

全局環(huán)境下，this 始終指向全局對象（window），無論是否嚴(yán)格模式；

2.1 普通函數(shù)

普通函數(shù)內(nèi)部的 this 分兩種情況，嚴(yán)格模式和非嚴(yán)格模式。

（1）非嚴(yán)格模式下，沒有被上一級的對象所調(diào)用, this 默認(rèn)指向全局對象 window。

（2）嚴(yán)格模式下，this 指向 undefined。

2.2 函數(shù)作為對象的方法

（1）函數(shù)有被上一級的對象所調(diào)用，那么 this 指向的就是上一級的對象。

（2）多層嵌套的對象，內(nèi)部方法的 this 指向離被調(diào)用函數(shù)最近的對象（window 也是對象，其內(nèi)部對象調(diào)用方法的 this 指向內(nèi)部對象， 而非 window）。

特殊例子

2.3 原型鏈中的 this

（1）如果該方法存在于一個對象的原型鏈上，那么 this 指向的是調(diào)用這個方法的對象，就像該方法在對象上一樣。

上述例子中，對象 p 沒有屬于它自己的 f 屬性，它的 f 屬性繼承自它的原型。當(dāng)執(zhí)行 p.f()時，會查找 p 的原型鏈，找到 f 函數(shù)并執(zhí)行。因為 f 是作為 p 的方法調(diào)用的，所以函數(shù)中的 this 指向 p。

（2）相同的概念也適用于當(dāng)函數(shù)在一個 getter 或者 setter 中被調(diào)用。用作 getter 或 setter 的函數(shù)都會把 this 綁定到設(shè)置或獲取屬性的對象。

（3）call()和 apply()方法：當(dāng)函數(shù)通過 Function 對象的原型中繼承的方法 call() 和 apply() 方法調(diào)用時， 其函數(shù)內(nèi)部的 this 值可綁定到 call() apply() 方法指定的第一個對象上， 如果第一個參數(shù)不是對象，JavaScript 內(nèi)部會嘗試將其轉(zhuǎn)換成對象然后指向它。

（4）bind()方法：由 ES5 引入， 在 Function 的原型鏈上， Function.prototype.bind。通過 bind 方法綁定后， 函數(shù)將被永遠(yuǎn)綁定在其第一個參數(shù)對象上， 而無論其在什么情況下被調(diào)用。

2.4 構(gòu)造函數(shù)中的 this

當(dāng)一個函數(shù)用作構(gòu)造函數(shù)時（使用 new 關(guān)鍵字），它的 this 被綁定到正在構(gòu)造的新對象。

構(gòu)造器返回的默認(rèn)值是 this 所指的那個對象，也可以手動返回其他的對象。

特殊例子

當(dāng) this 碰到 return 時

2.5 setTimeout setInterval

（1）對于延時函數(shù)內(nèi)部的回調(diào)函數(shù)的 this 指向全局對象 window；

（2）可以通過 bind()方法改變內(nèi)部函數(shù) this 指向。

3.1 作為一個 DOM 事件處理函數(shù)

當(dāng)函數(shù)被用作事件處理函數(shù)時，它的 this 指向觸發(fā)事件的元素（針對 addEventListener 事件）。

3.2 作為一個內(nèi)聯(lián)事件處理函數(shù)

（1）當(dāng)代碼被內(nèi)聯(lián)處理函數(shù)調(diào)用時，它的 this 指向監(jiān)聽器所在的 DOM 元素；

（2）當(dāng)代碼被包括在函數(shù)內(nèi)部執(zhí)行時，其 this 指向等同于 普通函數(shù)直接調(diào)用的情況，即在非嚴(yán)格模式指向全局對象 window，在嚴(yán)格模式指向 undefined：

4.1 全局環(huán)境中

在全局代碼中，箭頭函數(shù)被設(shè)置為全局對象：

4.2 this 捕獲上下文

箭頭函數(shù)沒有自己的 this，而是使用箭頭函數(shù)所在的作用域的 this，即指向箭頭函數(shù)定義時（而不是運(yùn)行時）所在的作用域。

4.2 this 捕獲上下文

箭頭函數(shù)沒有自己的 this，而是使用箭頭函數(shù)所在的作用域的 this，即指向箭頭函數(shù)定義時（而不是運(yùn)行時）所在的作用域。

在 setTimeout 中的 this 指向了構(gòu)造函數(shù)新生成的對象，而普通函數(shù)指向了全局 window 對象。

4.3 箭頭函數(shù)作為對象的方法使用

箭頭函數(shù)作為對象的方法使用，指向全局 window 對象；而普通函數(shù)作為對象的方法使用，則指向調(diào)用的對象。

4.4 箭頭函數(shù)中，call()、apply()、bind()方法無效

4.5 this 指向固定化

箭頭函數(shù)可以讓 this 指向固定化，這種特性很有利于封裝回調(diào)函數(shù)

上面代碼的 init 方法中，使用了箭頭函數(shù)，這導(dǎo)致這個箭頭函數(shù)里面的 this，總是指向 handler 對象。如果不使用箭頭函數(shù)則指向全局 document 對象。

4.6 箭頭函是不適用場景

（1）箭頭函數(shù)不適合定義對象的方法（方法內(nèi)有 this），因為此時指向 window；

（2）需要動態(tài) this 的時候，也不應(yīng)使用箭頭函數(shù)。

參與互動

本文標(biāo)題：javascript介紹題目,javascript題目解答
網(wǎng)站URL：http://aaarwkj.com/article26/dsisjjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、網(wǎng)站改版、ChatGPT、自適應(yīng)網(wǎng)站、網(wǎng)頁設(shè)計公司、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)