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

創(chuàng)新互聯(lián)擁有一支富有激情的企業(yè)網(wǎng)站制作團(tuán)隊(duì),在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)深耕十載,專業(yè)且經(jīng)驗(yàn)豐富。十載網(wǎng)站優(yōu)化營銷經(jīng)驗(yàn),我們已為成百上千中小企業(yè)提供了成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)解決方案,按需定制制作,設(shè)計(jì)滿意,售后服務(wù)無憂。所有客戶皆提供一年免費(fèi)網(wǎng)站維護(hù)!
參考答案:
參與互動(dòng)
72.變量提升
參考答案:
A、js 代碼執(zhí)行的過程
B、變量提升發(fā)生的環(huán)境:發(fā)生在代碼所處的當(dāng)前作用域。
解析:
對應(yīng)面試題
參與互動(dòng)
73.如何阻止冒泡與默認(rèn)行為
參考答案:
解析:
當(dāng)需要阻止冒泡行為時(shí),可以使用
當(dāng)需要阻止默認(rèn)行為時(shí),可以使用
參與互動(dòng)
74.js 中 this 閉包 作用域
參考答案:
this:指向調(diào)用上下文
閉包:定義一個(gè)函數(shù)就開辟了一個(gè)局部作用域,整個(gè) js 執(zhí)行環(huán)境有一個(gè)全局作用域
作用域:一個(gè)函數(shù)可以訪問其他函數(shù)中的變量(閉包是一個(gè)受保護(hù)的變量空間)
參與互動(dòng)
75.javascript 的本地對象,內(nèi)置對象和宿主對象
參考答案:
1.本地對象
ECMA-262 把本地對象(native object)定義為“獨(dú)立于宿主環(huán)境的 ECMAScript 實(shí)現(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個(gè)對象,常用的是Array對象、Date對象、正則表達(dá)式對象、string對象、Global對象
3.宿主對象
由ECMAScript實(shí)現(xiàn)的宿主環(huán)境提供的對象,可以理解為:瀏覽器提供的對象。所有的BOM和DOM都是宿主對象。
參與互動(dòng)
76.javascript 的同源策略
參考答案:一段腳本只能讀取來自于同一來源的窗口和文檔的屬性
解析:
同源策略:限制從一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。(來自 MDN 官方的解釋)
簡單來說就是:一段腳本只能讀取來自于同一來源的窗口和文檔的屬性,這里的同一來源指的是主機(jī)名、協(xié)議和端口號的組合 具體解釋:
(1)源包括三個(gè)部分:協(xié)議、域名、端口(http 協(xié)議的默認(rèn)端口是 80)。如果有任何一個(gè)部分不同,則源不同,那就是跨域了。
(2)限制:這個(gè)源的文檔沒有權(quán)利去操作另一個(gè)源的文檔。這個(gè)限制體現(xiàn)在:(要記住)
Cookie、LocalStorage 和 IndexDB 無法獲取。
無法獲取和操作 DOM。
不能發(fā)送 Ajax 請求。我們要注意,Ajax 只適合同源的通信。
同源策略帶來的麻煩:ajax 在不同域名下的請求無法實(shí)現(xiàn),需要進(jìn)行跨域操作
參與互動(dòng)
77.事件冒泡與事件捕獲
參考答案:
事件冒泡:由最具體的元素(目標(biāo)元素)向外傳播到最不具體的元素
事件捕獲:由最不確定的元素到目標(biāo)元素
參與互動(dòng)
78.foo = foo||bar ,這行代碼是什么意思?為什么要這樣寫?
參考答案:
這種寫法稱為短路表達(dá)式
解析:
相當(dāng)于
常用于函數(shù)參數(shù)的空判斷
參與互動(dòng)
79.復(fù)雜數(shù)據(jù)類型如何轉(zhuǎn)變?yōu)樽址?/p>
參考答案:
參與互動(dòng)
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)如果該方法存在于一個(gè)對象的原型鏈上,那么 this 指向的是調(diào)用這個(gè)方法的對象,就像該方法在對象上一樣。
上述例子中,對象 p 沒有屬于它自己的 f 屬性,它的 f 屬性繼承自它的原型。當(dāng)執(zhí)行 p.f()時(shí),會查找 p 的原型鏈,找到 f 函數(shù)并執(zhí)行。因?yàn)?f 是作為 p 的方法調(diào)用的,所以函數(shù)中的 this 指向 p。
(2)相同的概念也適用于當(dāng)函數(shù)在一個(gè) getter 或者 setter 中被調(diào)用。用作 getter 或 setter 的函數(shù)都會把 this 綁定到設(shè)置或獲取屬性的對象。
(3)call()和 apply()方法:當(dāng)函數(shù)通過 Function 對象的原型中繼承的方法 call() 和 apply() 方法調(diào)用時(shí), 其函數(shù)內(nèi)部的 this 值可綁定到 call() apply() 方法指定的第一個(gè)對象上, 如果第一個(gè)參數(shù)不是對象,JavaScript 內(nèi)部會嘗試將其轉(zhuǎn)換成對象然后指向它。
(4)bind()方法:由 ES5 引入, 在 Function 的原型鏈上, Function.prototype.bind。通過 bind 方法綁定后, 函數(shù)將被永遠(yuǎn)綁定在其第一個(gè)參數(shù)對象上, 而無論其在什么情況下被調(diào)用。
2.4 構(gòu)造函數(shù)中的 this
當(dāng)一個(gè)函數(shù)用作構(gòu)造函數(shù)時(shí)(使用 new 關(guān)鍵字),它的 this 被綁定到正在構(gòu)造的新對象。
構(gòu)造器返回的默認(rèn)值是 this 所指的那個(gè)對象,也可以手動(dòng)返回其他的對象。
特殊例子
當(dāng) this 碰到 return 時(shí)
2.5 setTimeout setInterval
(1)對于延時(shí)函數(shù)內(nèi)部的回調(diào)函數(shù)的 this 指向全局對象 window;
(2)可以通過 bind()方法改變內(nèi)部函數(shù) this 指向。
3.1 作為一個(gè) DOM 事件處理函數(shù)
當(dāng)函數(shù)被用作事件處理函數(shù)時(shí),它的 this 指向觸發(fā)事件的元素(針對 addEventListener 事件)。
3.2 作為一個(gè)內(nèi)聯(lián)事件處理函數(shù)
(1)當(dāng)代碼被內(nèi)聯(lián)處理函數(shù)調(diào)用時(shí),它的 this 指向監(jiān)聽器所在的 DOM 元素;
(2)當(dāng)代碼被包括在函數(shù)內(nèi)部執(zhí)行時(shí),其 this 指向等同于 普通函數(shù)直接調(diào)用的情況,即在非嚴(yán)格模式指向全局對象 window,在嚴(yán)格模式指向 undefined:
4.1 全局環(huán)境中
在全局代碼中,箭頭函數(shù)被設(shè)置為全局對象:
4.2 this 捕獲上下文
箭頭函數(shù)沒有自己的 this,而是使用箭頭函數(shù)所在的作用域的 this,即指向箭頭函數(shù)定義時(shí)(而不是運(yùn)行時(shí))所在的作用域。
4.2 this 捕獲上下文
箭頭函數(shù)沒有自己的 this,而是使用箭頭函數(shù)所在的作用域的 this,即指向箭頭函數(shù)定義時(shí)(而不是運(yùn)行時(shí))所在的作用域。
在 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)致這個(gè)箭頭函數(shù)里面的 this,總是指向 handler 對象。如果不使用箭頭函數(shù)則指向全局 document 對象。
4.6 箭頭函是不適用場景
(1)箭頭函數(shù)不適合定義對象的方法(方法內(nèi)有 this),因?yàn)榇藭r(shí)指向 window;
(2)需要?jiǎng)討B(tài) this 的時(shí)候,也不應(yīng)使用箭頭函數(shù)。
參與互動(dòng)
1.document load 和 document ready 的區(qū)別
參考答案:文檔解析過程中,ready在加載圖片等外部資源前觸發(fā),load在之后觸發(fā)。如果頁面中要是沒有圖片之類的媒體文件的話ready與load是差不多的,但是頁面中有文件就不一樣了,所以還是推薦大家在工作中用ready
解析:
DOM文檔解析:
頁面加載完成有兩種事件
1.load是當(dāng)頁面所有資源全部加載完成后(包括DOM文檔樹,css文件,js文件,圖片資源等),執(zhí)行一個(gè)函數(shù)
缺點(diǎn):如果圖片資源較多,加載時(shí)間較長,onload后等待執(zhí)行的函數(shù)需要等待較長時(shí)間,所以一些效果可能受到影響
代碼形式:
2.$(document).ready()是當(dāng)DOM文檔樹加載完成后執(zhí)行一個(gè)函數(shù) (不包含圖片,css等)所以會比load較快執(zhí)行
在原生的jS中不包括ready()這個(gè)方法,Jquery才有,jquery中有 $().ready(function)。
代碼形式為:
參與互動(dòng)
2.JavaScript 中如何檢測一個(gè)變量是一個(gè) String 類型?
參考答案:三種方法(typeof、constructor、Object.prototype.toString.call())
解析:
參與互動(dòng)
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 方法并不影響原來的字符串本身,它返回的是一個(gè)新的字符串。
缺陷:只能去除字符串兩端的空格,不能去除中間的空格
示例:
方法三:JQ 方法:$.trim(str)方法
$.trim() 函數(shù)用于去除字符串兩端的空白字符。
注意:$.trim()函數(shù)會移除字符串開始和末尾處的所有換行符,空格(包括連續(xù)的空格)和制表符。如果這些空白字符在字符串中間時(shí),它們將被保留,不會被移除。
示例:
參與互動(dòng)
4.js 是一門怎樣的語言,它有什么特點(diǎn)
參考答案:
1.腳本語言。JavaScript 是一種解釋型的腳本語言, C、C++等語言先編譯后執(zhí)行, 而 JavaScript 是在程序的運(yùn)行過程中逐行進(jìn)行解釋。
2.基于對象。JavaScript 是一種基于對象的腳本語言, 它不僅可以創(chuàng)建對象, 也能使用現(xiàn)有的對象。
3.簡單。JavaScript 語言中采用的是弱類型的變量類型, 對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求, 是基于 Java 基本語句和控制的腳本語言, 其設(shè)計(jì)簡單緊湊。
4.動(dòng)態(tài)性。JavaScript 是一種采用事件驅(qū)動(dòng)的腳本語言, 它不需要經(jīng)過 Web 服務(wù)器就可以對用戶的輸入做出響應(yīng)。
5.跨平臺性。JavaScript 腳本語言不依賴于操作系統(tǒng), 僅需要瀏覽器的支持。
參與互動(dòng)
5.== 和 === 的不同
參考答案: == 是抽象相等運(yùn)算符,而 === 是嚴(yán)格相等運(yùn)算符。 == 運(yùn)算符是在進(jìn)行必要的類型轉(zhuǎn)換后,再比較。 === 運(yùn)算符不會進(jìn)行類型轉(zhuǎn)換,所以如果兩個(gè)值不是相同的類型,會直接返回 false 。使用 == 時(shí),可能發(fā)生一些特別的事情,例如:
如果你對 == 和 === 的概念不是特別了解,建議大多數(shù)情況下使用 ===
參與互動(dòng)
6.怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)?
參考答案:
1)創(chuàng)建新節(jié)點(diǎn)
2)添加、移除、替換、插入
3)查找
參與互動(dòng)
7.事件委托是什么
參考答案:利用事件冒泡的原理,讓自己的所觸發(fā)的事件,讓他的父元素代替執(zhí)行!
解析:
1、那什么樣的事件可以用事件委托,什么樣的事件不可以用呢?
2、為什么要用事件委托
3、事件冒泡與事件委托的對比
4、事件委托怎么取索引?
拓展:
參考
參與互動(dòng)
8.require 與 import 的區(qū)別
參考答案:兩者的加載方式不同、規(guī)范不同
第一、兩者的加載方式不同,require 是在運(yùn)行時(shí)加載,而 import 是在編譯時(shí)加載
require('./a')(); // a 模塊是一個(gè)函數(shù),立即執(zhí)行 a 模塊函數(shù)
var data = require('./a').data; // a 模塊導(dǎo)出的是一個(gè)對象
var a = require('./a')[0]; // a 模塊導(dǎo)出的是一個(gè)數(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 特點(diǎn):社區(qū)方案,提供了服務(wù)器/瀏覽器的模塊加載方案。非語言層面的標(biāo)準(zhǔn)。只能在運(yùn)行時(shí)確定模塊的依賴關(guān)系及輸入/輸出的變量,無法進(jìn)行靜態(tài)優(yōu)化。
import 特點(diǎn):語言規(guī)格層面支持模塊功能。支持編譯時(shí)靜態(tài)分析,便于 JS 引入宏和類型檢驗(yàn)。動(dòng)態(tài)綁定。
參與互動(dòng)
9.javascript 對象的幾種創(chuàng)建方式
參考答案:
第一種:Object 構(gòu)造函數(shù)創(chuàng)建
這行代碼創(chuàng)建了 Object 引用類型的一個(gè)新實(shí)例,然后把實(shí)例保存在變量 Person 中。
第二種:使用對象字面量表示法
對象字面量是對象定義的一種簡寫形式,目的在于簡化創(chuàng)建包含大量屬性的對象的過程。也就是說,第一種和第二種方式創(chuàng)建對象的方法其實(shí)都是一樣的,只是寫法上的區(qū)別不同
在介紹第三種的創(chuàng)建方法之前,我們應(yīng)該要明白為什么還要用別的方法來創(chuàng)建對象,也就是第一種,第二種方法的缺點(diǎn)所在:它們都是用了同一個(gè)接口創(chuàng)建很多對象,會產(chǎn)生大量的重復(fù)代碼,就是如果你有 100 個(gè)對象,那你要輸入 100 次很多相同的代碼。那我們有什么方法來避免過多的重復(fù)代碼呢,就是把創(chuàng)建對象的過程封裝在函數(shù)體內(nèi),通過函數(shù)的調(diào)用直接生成對象。
第三種:使用工廠模式創(chuàng)建對象
在使用工廠模式創(chuàng)建對象的時(shí)候,我們都可以注意到,在 createPerson 函數(shù)中,返回的是一個(gè)對象。那么我們就無法判斷返回的對象究竟是一個(gè)什么樣的類型。于是就出現(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)行自主檢測:
同時(shí)我們也應(yīng)該明白,按照慣例,構(gòu)造函數(shù)始終要應(yīng)該以一個(gè)大寫字母開頭,而非構(gòu)造函數(shù)則應(yīng)該以一個(gè)小寫字母開頭。
那么構(gòu)造函數(shù)確實(shí)挺好用的,但是它也有它的缺點(diǎn):
就是每個(gè)方法都要在每個(gè)實(shí)例上重新創(chuàng)建一遍,方法指的就是我們在對象里面定義的函數(shù)。如果方法的數(shù)量很多,就會占用很多不必要的內(nèi)存。于是出現(xiàn)了第五種創(chuàng)建對象的方法
第五種:原型創(chuàng)建對象模式
使用原型創(chuàng)建對象的方式,可以讓所有對象實(shí)例共享它所包含的屬性和方法。
如果是使用原型創(chuàng)建對象模式,請看下面代碼:
當(dāng)為對象實(shí)例添加一個(gè)屬性時(shí),這個(gè)屬性就會屏蔽原型對象中保存的同名屬性。
這時(shí)候我們就可以使用構(gòu)造函數(shù)模式與原型模式結(jié)合的方式,構(gòu)造函數(shù)模式用于定義實(shí)例屬性,而原型模式用于定義方法和共享的屬性
第六種:組合使用構(gòu)造函數(shù)模式和原型模式
解析: 參考
參與互動(dòng)
10.JavaScript 繼承的方式和優(yōu)缺點(diǎn)
參考答案:六種方式
場景:var str = “hello world!”
a.str.char() //返回指定下標(biāo)的值
Str.char(2) //”l”
b.Str.indexOf() //返回指定值的下標(biāo)
Str.indexOf(‘e’) //’1’
c.Str.lastIndexOf() //返回最后指定值的下標(biāo)
Str.lastIndexOf(‘l’) //’9’
d.Str.concat() //拼接字符串
Str.concat(“mother fuck!”) //”hello world!mother fuck!”
Console.log(str) //”hello world!”
e.Str.substr(n,m) //從n開始截取m個(gè)字符
Str.substr(1,2) //’el’
f.Str.substring(n,m) //從n開始m結(jié)束截取字符串,不包含m
Str.substring(6,11) //”world”
g.Str.slice(n,m) //同substring,slice可以截取數(shù)組,substring不能截取數(shù)組
Str.slice(6,11) //”world”
h.Str.split //返回?cái)?shù)組
Str.split(‘ ’) //[‘hello’, ‘world!’]
Str.aplit(‘l’) //[‘he’, ‘’, ‘o wor’, ‘d!’]
i.Str.replace() //以下三個(gè)方法都是通過正則表達(dá)式對原字符串進(jìn)行更改的
j.Str.match()
k.Str.search()
場景:const obj = {x: 0, y: 1}
Const obj2 = {x: 1, z: 2,fn: {number: 1}}
a.Object.assign() //合并對象,實(shí)行的是淺拷貝
Object.assign(obj, obj2)
Console.log(obj) //{x: 1, y: 1, z: 2,fn: {number: 1}}
b.Object.create() //新建一個(gè)對象,可以使用原型鏈繼承
Var newObj = Object.create(obj, {newValue: ‘newAdd’})
Console.log(newObj) //{newValue: ‘newAdd’}
Console.log(newObj.x) //0
c.Object.defineProperties() //往對象里面添加或修改新屬性,值類型
Object.defineProperties(obj, {name: {value: ‘歐’}}) //添加屬性
Console.log(obj) //{x: 0, y: 1, name: ‘歐’}
Object.defineProperties(obj, {name: {value: ‘林’, writable: true}}) //修改屬性
Console.log(obj) //{x: 0, y: 1, name: ‘林’}
d.Object.defineProperty() //往對象里面添加新屬性,可以是引用類型
Object.defineProperty(obj, ‘name’, {value: function() {return ‘歐’}})
Console.log(obj.name()) //’歐’
e.Object.keys() //返回對象所有key,以數(shù)組類型輸出
Console.log(Object.keys(obj)) //[‘x’, ‘y’]
f.Object.values() //返回對象所有的value,以數(shù)組類型輸出
Console.log(Object.values(obj)) //[0, 1]
場景:var arr = new array(1,2,3)
a.push() //向數(shù)組尾部添加元素
arr.push(4)
console.log(arr) //[1,2,3,4]
b.unshift() //向數(shù)組頭部添加元素
arr.unshift(0)
console.log(arr) //[0,1,2,3]
c.pop() //刪除數(shù)組尾部的元素
arr.pop()
console.log(arr) //[1,2]
d.shift() //刪除數(shù)組頭部的元素
arr.shift()
console.log(arr) //[2,3]
e.indexOf() //返回指定元素的下標(biāo)
arr.indexOf(2) //1
f.slice(n,m) //從n開始m結(jié)束截取數(shù)組,不包括m,此方法不會更改元數(shù)組
console.log(arr.slice(1,2)) // [2]
console.log(arr) //[1,2,3]
g.splice() //刪除數(shù)組指定元素
arr.splice(1) //刪除從下標(biāo)1開始到最后的所有元素
console.log(arr) //[1]
arr.splice(1,2) //刪除從下標(biāo)1開始往后的2個(gè)元素
console.log(arr) //[1]
arr.splice(1,2,3,4) //刪除從下標(biāo)1開始往后2個(gè)元素并用3,4替代
console.log(arr) //[1,3,4]
h.reverse() //數(shù)組翻轉(zhuǎn)
arr.reverse()
console.log(arr) //[3,2,1]
i.sort() //從小到大排序數(shù)組
arr.sort()
console.log(arr) //[1,2,3]
j.forEach() //以下提供了幾種遍歷的方法
k.map()
l.filter() //數(shù)組過濾,如果數(shù)組的元素的對象,可以通過對象的屬性名來過濾元素,用法跟C#的Linq一樣。
var newArr = [{id:1,name:’元素1’},{id:2,name:’元素2’}]
console.log(newArr.filter(item = item.id===1)) //[{id:1,name:’元素1’}]
console.log(newArr) //[{id:1,name:’元素1’},{id:2,name:’元素2’}]
m.every()
n.some()
o.find()
p.findIndex()
增刪改查
場景:div class=”div” id=”div”/div
a.document.createElement() //創(chuàng)建節(jié)點(diǎn)
var newDiv = document.createElement()
b.document.craeteTextNode() //創(chuàng)建文本節(jié)點(diǎn)
var newDivText = document.craeteTextNode(‘這是新創(chuàng)建的節(jié)點(diǎn)’)
c.div.appendChild() //向節(jié)點(diǎn)添加最后一個(gè)子節(jié)點(diǎn)
newDiv.appendChild(newDivText)
d.document.getElementById() //通過Id獲取節(jié)點(diǎn)
var div = document.getElementById(‘div’)
e.div.parentNode //獲取父節(jié)點(diǎn)
f.div.childNode //獲取子節(jié)點(diǎn),返回一個(gè)集合
var child = div.childNodes
g.div.nextSibling,div.previousSibling,div.firstChild,div.lastChild
分別為,獲取下一個(gè)兄弟節(jié)點(diǎn),上一個(gè)兄弟節(jié)點(diǎn),第一個(gè)子節(jié)點(diǎn),最后一個(gè)子節(jié)點(diǎn)。
h.div.insetBefore() //插入到特定位置
div.insetBefore(newDiv, null) //插入到最后,跟appendchild用法一樣
div.insetBefore(newDiv, div.firstChild) //插入到第一個(gè)子節(jié)點(diǎn)之前
div.insetBefore(newDiv, div.lastChild) //插入到最后節(jié)點(diǎn)之前
i.div.replaceChild() //替換節(jié)點(diǎn)
div.replaceChild(newDiv, div.firstChild) //替換第一個(gè)子節(jié)點(diǎn),原節(jié)點(diǎn)會被刪除
j.div.removeChild() //刪除子節(jié)點(diǎn)
k.cloneNode(true/false) //克隆節(jié)點(diǎn),true為深克隆,false為淺克隆
l.document.querySelector(),document.querySelectorAll() //通過css選擇器搜索匹配的節(jié)點(diǎn),querySelector返回匹配的第一個(gè)節(jié)點(diǎn),querySelectorAll返回所有節(jié)點(diǎn)
document.querySelector(‘div.div’) //返回class為div的div標(biāo)簽節(jié)點(diǎn)
document.querySelector(‘#div’) //返回id為div的節(jié)點(diǎn)
m.document.getElementsByTagName(),document.getElementsByName(),document.getElementsByClassName() //返回符合需求的集合
n.div.setAttribute() //給元素添加屬性
div.setAttribute(‘name’: ‘div’)
o.removeAttribute(),getAttribute(),hasAttribute() //各種操作屬性的方法
1、什么是MVVM框架?它適用于哪些場景?
MVVM框架是一個(gè) Model-View-View Model框架,其中 ViewModel連接模型Model)和視圖(View)。
在數(shù)據(jù)操作比較多的場景中,MVVM框架更合適,有助于通過操作數(shù)據(jù)渲染頁面。
2、active- class是哪個(gè)組件的屬性?
它是 vue-router模塊的 router-link組件的屬性。
3、如何定義Vue- router的動(dòng)態(tài)路由?
在靜態(tài)路由名稱前面添加冒號,例如,設(shè)置id動(dòng)態(tài)路由參數(shù),為路由對象的path屬性設(shè)置/:id。
4、如何獲取傳過來的動(dòng)態(tài)參數(shù)?
在組件中,使用$router對象的 params.id,即 $route.params.id 。
5、vue- router有哪幾種導(dǎo)航鉤子?
有3種。
第一種是全局導(dǎo)航鉤子:router.beforeEach(to,from,next)。作用是跳轉(zhuǎn)前進(jìn)行判斷攔截。
第二種是組件內(nèi)的鉤子。
第三種是單獨(dú)路由獨(dú)享組件。
6、mint-ui是什么?如何使用?
它是基于 Vue.js的前端組件庫。用npm安裝,然后通過 import導(dǎo)入樣式和JavaScript代碼。vue.use(mintUi)用于實(shí)現(xiàn)全局引入, import {Toast} from ' mint-ui'用于在單個(gè)組件局部引入。
7、V-model是什么?有什么作用?
v- model是 Vue. js中的一條指令,可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定。
8、Vue.js中標(biāo)簽如何綁定事件?
綁定事件有兩種方式。
第一種,通過v-on指令, 。
第二種,通過@語法糖, input@ click= doLog()/。
9、vuex是什么?如何使用?在哪種功能場景中使用它?
vuex是針對 Vue. js框架實(shí)現(xiàn)的狀態(tài)管理系統(tǒng)。
為了使用vuex,要引入 store,并注入Vue.js組件中,在組件內(nèi)部即可通過$ ostore訪問 store對象。
使用場景包括:在單頁應(yīng)用中,用于組件之間的通信,例如音樂播放、登錄狀態(tài)管理、加入購物車等。
10、如何實(shí)現(xiàn)自定義指令?它有哪些鉤子函數(shù)?還有哪些鉤子函數(shù)參數(shù)?
自定義指令包括以下兩種。
它有如下鉤子函數(shù)。
鉤子函數(shù)的參數(shù)如下。
11、至少說出vue.js中的4種指令和它們的用法。
相關(guān)指令及其用法如下。
12、Vue-router是什么?它有哪些組件?
它是 Vue. js的路由插件。組件包括 router-link和 router-vIew。
13、導(dǎo)航鉤子有哪些?它們有哪些參數(shù)?
導(dǎo)航鉤子又稱導(dǎo)航守衛(wèi),又分為全局鉤子、單個(gè)路由獨(dú)享鈞子和組件級鈞子。
全局鉤子有 beforeEach、beforeResolve(Vue2.5.0新增的)、 afterEach。
單個(gè)路由獨(dú)享鉤子有 beforeEnter。
組件級鉤子有 beforeRouteEnter、 beforeRouteUpdate(Vue2.2新增的) beforeRouteLeave。
它們有以下參數(shù)。
14、Vue.js的雙向數(shù)據(jù)綁定原理是什么?
具體步驟如下。
(1)對需要觀察的數(shù)據(jù)對象進(jìn)行遞歸遍歷,包括子屬性對象的屬性,設(shè)置set和get特性方法。當(dāng)給這個(gè)對象的某個(gè)值賦值時(shí),會觸發(fā)綁定的set特性方法,于是就能監(jiān)聽到數(shù)據(jù)變化。
(4)MVVM是數(shù)據(jù)綁定的入口,整合了 Observer、 Compile和 Watcher三者,通過Observer來監(jiān)聽自己的 model數(shù)據(jù)變化,通過 Compile來解析編譯模板指令,最終利用Watcher搭起 Observer和 Compile之間的通信橋梁,達(dá)到數(shù)據(jù)變化通知視圖更新的效果。利用視圖交互,變化更新數(shù)據(jù) model變更的雙向綁定效果。
15、請?jiān)敿?xì)說明你對Vue.js生命周期的理解。
總共分為8個(gè)階段,分別為 beforeCreate、created、beforeMount、 mounted、beforeUpdate、 updated、 beforeDestroyed、 destroyed。
當(dāng)使用組件的kep- alive功能時(shí),增加以下兩個(gè)周期。
Vue2.5.0版本新增了一個(gè)周期鉤子:ErrorCaptured,當(dāng)捕獲一個(gè)來自子孫組件的錯(cuò)誤時(shí)調(diào)用。
16、請描述封裝Vue組件的作用過程。
組件可以提升整個(gè)項(xiàng)目的開發(fā)效率,能夠把頁面抽象成多個(gè)相對獨(dú)立的模塊,解決了傳統(tǒng)項(xiàng)目開發(fā)中效率低、難維護(hù)、復(fù)用性等問題。
使用Vue.extend方法創(chuàng)建一個(gè)組件,使用Vue.component方法注冊組件。子組件需要數(shù)據(jù),可以在 props中接收數(shù)據(jù)。而子組件修改妤數(shù)據(jù)后,若想把數(shù)據(jù)傳遞給父組件,可以采用emit方法。
17、你是怎樣認(rèn)識vuex的?
vuex可以理解為一種開發(fā)模式或框架。它是對 Vue. js框架數(shù)據(jù)層面的擴(kuò)展。通過狀態(tài)(數(shù)據(jù)源)集中管理驅(qū)動(dòng)組件的變化。應(yīng)用的狀態(tài)集中放在 store中。改變狀態(tài)的方式是提交 mutations,這是個(gè)同步的事務(wù)。異步邏輯應(yīng)該封裝在 action中。
18、Vue- loader是什么?它的用途有哪些?
它是解析.vue文件的一個(gè)加載器,可以將 template/js/style轉(zhuǎn)換成 JavaScript模塊。
用途是通過 vue-loader, JavaScript可以寫 EMAScript 6語法, style樣式可以應(yīng)用scss或less, template可以添加jade語法等。
19、請說出vue.cli項(xiàng)目的src目錄中每個(gè)文件夾和文件的用法。
assets文件夾存放靜態(tài)資源;components存放組件;router定義路由相關(guān)的配置;view是視圖;app. vue是一個(gè)應(yīng)用主組件;main.js是入口文件。
20、在Vue.cli中怎樣使用自定義組件?在使用過程中你遇到過哪些問題?
具體步驟如下。
(1)在 components目錄中新建組件文件,腳本一定要導(dǎo)出暴露的接口。
(2)導(dǎo)入需要用到的頁面(組件)。
(3)將導(dǎo)入的組件注入uejs的子組件的 components屬性中。
(4)在 template的視圖中使用自定義組件。
21、談?wù)勀銓ue.js的 template編譯的理解。
簡而言之,就是首先轉(zhuǎn)化成AST( Abstract Syntax Tree,抽象語法樹),即將源代碼語法結(jié)構(gòu)抽象成樹狀表現(xiàn)形式,然后通過 render函數(shù)進(jìn)行渲染,并返回VNode( Vue. js的虛擬DOM節(jié)點(diǎn))。
詳細(xì)步驟如下。
(1)通過 compile編譯器把 template編譯成AST, compile是 create Compiler的返回值, createCompiler用來創(chuàng)建編譯器。另外, compile還負(fù)責(zé)合并 option。
(2)AST會經(jīng)過 generate(將AST轉(zhuǎn)化成 render funtion字符串的過程)得到 render函數(shù), render的返回值是 VNode, VNode是 Vue.Js的虛擬DOM節(jié)點(diǎn),里面有標(biāo)簽名子節(jié)點(diǎn)、文本等。
22、說一下Vue.js中的MVVM模式。
MVVM模式即 Model- View- ViewModel模式。
Vue.js是通過數(shù)據(jù)驅(qū)動(dòng)的, Vue. js實(shí)例化對象將DOM和數(shù)據(jù)進(jìn)行綁定,一旦綁定,和數(shù)據(jù)將保持同步,每當(dāng)數(shù)據(jù)發(fā)生變化,DOM也會隨著變化。
ViewModel是Vue.js的核心,它是 Vue.js的一個(gè)實(shí)例。Vue.js會針對某個(gè)HTML元素進(jìn)行實(shí)例化,這個(gè)HTML元素可以是body,也可以是某個(gè)CSS選擇器所指代的元素。
DOM Listeners和 Data Bindings是實(shí)現(xiàn)雙向綁定的關(guān)鍵。DOM Listeners監(jiān)聽頁面所有View層中的DOM元素,當(dāng)發(fā)生變化時(shí),Model層的數(shù)據(jù)隨之變化。Data Bindings會監(jiān)聽 Model層的數(shù)據(jù),當(dāng)數(shù)據(jù)發(fā)生變化時(shí),View層的DOM元素也隨之變化。
23、v-show指令和v-if指令的區(qū)別是什么?
v-show與v-if都是條件渲染指令。不同的是,無論v-show的值為true或 false,元素都會存在于HTML頁面中;而只有當(dāng)v-if的值為true時(shí),元素才會存在于HTML頁面中。v-show指令是通過修改元素的 style屬性值實(shí)現(xiàn)的。
24、如何讓CSS只在當(dāng)前組件中起作用?
在每一個(gè)Vue.js組件中都可以定義各自的CSS、 JavaScript代碼。如果希望組件內(nèi)寫的CSS只對當(dāng)前組件起作用,只需要在Style標(biāo)簽添加Scoped屬性,即 。
25、如何創(chuàng)建vue.js組件?
在vue.js中,組件要先注冊,然后才能使用。具體代碼如下
26、如何實(shí)現(xiàn)路由嵌套?如何進(jìn)行頁面跳轉(zhuǎn)?
路由嵌套會將其他組件渲染到該組件內(nèi),而不是使整個(gè)頁面跳轉(zhuǎn)到 router-view定義組件渲染的位置。要進(jìn)行頁面跳轉(zhuǎn),就要將頁面渲染到根組件內(nèi),可做如下配置。
首先,實(shí)例化根組件,在根組件中定義組件渲染容器。然后,掛載路由,當(dāng)切換路由時(shí),將會切換整個(gè)頁面。
27、ref屬性有什么作用?
有時(shí)候,為了在組件內(nèi)部可以直接訪問組件內(nèi)部的一些元素,可以定義該屬性此時(shí)可以在組件內(nèi)部通過this. $refs屬性,更快捷地訪問設(shè)置ref屬性的元素。這是一個(gè)原生的DOM元素,要使用原生 DOM API操作它們,例如以下代碼。
注意:在Ve2.0中,ref屬性替代了1.0版本中v-el指令的功能。
28、Vue. js是什么?
Vue. js的目標(biāo)是通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)綁定的組件開發(fā)。
29、描述vue.js的一些特性。
Vue.js有以下持性。
(1)MVVM模式。
數(shù)據(jù)模型( Model)發(fā)生改變,視圖(View)監(jiān)聽到變化,也同步改變;視圖(View)發(fā)生改變,數(shù)據(jù)模型( Model)監(jiān)聽到改變,也同步改變。
使用MVVM模式有幾大好處。
(2)組件化開發(fā)
(3)指令系統(tǒng)
(4)Vue2.0開始支持虛擬DOM。
但在Vue1.0中,操作的是真實(shí)DOM元素而不是虛擬DOM,虛擬DOM可以提升頁面的渲染性能。
30、描述vue.js的特點(diǎn)。
Vue. js有以下特點(diǎn)。
31、在vue.js中如何綁定事件?
通過在v-on后跟事件名稱=“事件回調(diào)函數(shù)( )”的語法綁定事件。事件回調(diào)函數(shù)的參數(shù)集合( )可有可無。如果存在參數(shù)集合( ),事件回調(diào)函數(shù)的參數(shù)需要主動(dòng)傳遞,使用事件對象要傳遞 $event。當(dāng)然,此時(shí)也可以傳遞一些其他自定義數(shù)據(jù)。如果沒有參數(shù)集合,此時(shí)事件回調(diào)函數(shù)有一個(gè)默認(rèn)參數(shù),就是事件對象。事件回調(diào)函數(shù)要定義在組件的 methods屬性中,作用域是 Vue. js實(shí)例化對象,因此在方法中,可以通過this使用 Vue. js中的數(shù)據(jù)以及方法,也可以通過@語法糖快速綁定事件,如@事件名稱=“事件回調(diào)函數(shù)( )”。
32、請說明 組件的作用。
當(dāng) 包裹動(dòng)態(tài)組件時(shí),會緩存不活動(dòng)的組件實(shí)例,而不是銷毀它們。
keep-alive是一個(gè)抽象組件,它自身不會渲染一個(gè)DOM元素,也不會出現(xiàn)在父組件鏈中。
當(dāng)在 內(nèi)切換組件時(shí),它的 activated和 deactivated這兩個(gè)生命周期鈞子函數(shù)將會執(zhí)行。
33、axios是什么?如何使用它?
axios是在vue2.0中用來替換 vue-resource.js插件的一個(gè)模塊,是一個(gè)請求后臺的模。
用 npm install axios安裝 axios。基于 EMAScript 6 的 EMAScript Module規(guī)范,通過 import關(guān)鍵字將 axios導(dǎo)入,并添加到 Vue. js類的原型中。這樣每個(gè)組件(包括vue.js實(shí)例化對象)都將繼承該方法對象。它定義了get、post等方法,可以發(fā)送get或者post請求。在then方法中注冊成功后的回調(diào)函數(shù),通過箭頭函數(shù)的作用域特征,可以直接訪問組件實(shí)例化對象,存儲返回的數(shù)據(jù)。
34、在 axios中,當(dāng)調(diào)用 axios.post('api/user')時(shí)進(jìn)行的是什么操作?
當(dāng)調(diào)用post方法表示在發(fā)送post異步請求。
35、sass是什么?如何在ue中安裝和使用?
sass是一種CSS預(yù)編譯語言安裝和使用步驟如下。
(1)用npm安裝加載程序( sass-loader、 css-loader等加載程序)。
(2)在 webpack. config. js中配置sass加載程序。
(3)在組件的 style標(biāo)簽中加上lang屬性,例如lang="scss"。
36、如何在 Vue. js中循環(huán)插入圖片?
對“src”屬性插值將導(dǎo)致404請求錯(cuò)誤。應(yīng)使用 v-bind:src格式代替。
代碼如下:
131.用原生 JavaScript 的實(shí)現(xiàn)過什么功能嗎?
參考答案:輪播圖、手風(fēng)琴、放大鏡、3D動(dòng)畫效果等,切記,所答的一定要知道實(shí)現(xiàn)原理!,不知道還不如不說!
參與互動(dòng)
132.javascript 代碼中的"use strict"; 是什么意思 ? 使用它區(qū)別是什么?
參考答案:意思是使用嚴(yán)格模式,使用嚴(yán)格模式,一些不規(guī)范的語法將不再支持
參與互動(dòng)
133.簡述創(chuàng)建函數(shù)的幾種方式
參考答案:
參與互動(dòng)
134.window.location.search() 返回的是什么?
參考答案:查詢(參數(shù))部分。除了給動(dòng)態(tài)語言賦值以外,我們同樣可以給靜態(tài)頁面, 并使用 javascript 來獲得相信應(yīng)的參數(shù)值 返回值:?ver=1.0id=timlq 也就是問號后面的!
參與互動(dòng)
135.window.location.hash 返回的是什么?
參考答案:錨點(diǎn) , 返回值:#love ;
參與互動(dòng)
136.window.location.reload() 作用?
參考答案:刷新當(dāng)前頁面
參與互動(dòng)
137.為什么不能定義 1px 左右的 p 容器?
參考答案: IE6 下這個(gè)問題是因?yàn)槟J(rèn)的行高造成的,解決的方法也有很多,例如: overflow:hidden | zoom:0.08 | line-height:1px
參與互動(dòng)
138.BOM 對象有哪些,列舉 window 對象?
參考答案:
參與互動(dòng)
139.簡述 readonly 與 disabled 的區(qū)別
參考答案:
參與互動(dòng)
140.為什么擴(kuò)展 javascript 內(nèi)置對象不是好的做法?
參考答案:
參與互動(dòng)
141.什么是三元表達(dá)式?“三元”表示什么意思?
參考答案:三元如名字表示的三元運(yùn)算符需要三個(gè)操作數(shù)。
語法是 條件 ? 結(jié)果1 : 結(jié)果2; .這里你把條件寫在問號(?)的前面后面跟著用冒號(:)分隔的結(jié)果1和結(jié)果2。滿足條件時(shí)結(jié)果1否則結(jié)果2。
參與互動(dòng)
142.我們給一個(gè) dom 同時(shí)綁定兩個(gè)點(diǎn)擊事件,一個(gè)用捕獲,一個(gè)用冒泡,你來說下會執(zhí)行幾次事件,然后會先執(zhí)行冒泡還是捕獲
參考答案:所有事件的順序是:其他元素捕獲階段事件 - 本元素代碼順序事件 - 其他元素冒泡階段事件 。
參考
參與互動(dòng)
144.簡述一下 Handlebars 的基本用法?
參考答案:沒有用過的話說出它是干什么的即可
參與互動(dòng)
143.簡述一下 Handlerbars 的對模板的基本處理流程, 如何編譯的?如何緩存的?
參考答案:
參與互動(dòng)
145.前端 templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
參考答案:
參與互動(dòng)
146.知道什么是 webkit 么? 知道怎么用瀏覽器的各種工具來調(diào)試和 debug 代碼么?
參考答案:Webkit 是瀏覽器引擎,包括 html 渲染和 js 解析功能,手機(jī)瀏覽器的主流內(nèi)核,與之相對應(yīng)的引擎有 Gecko(Mozilla Firefox 等使用)和 Trident(也稱 MSHTML,IE 使用)。 對于瀏覽器的調(diào)試工具要熟練使用,主要是頁面結(jié)構(gòu)分析,后臺請求信息查看,js 調(diào)試工具使用,熟練使用這些工具可以快速提高解決問題的效率
參與互動(dòng)
147.如何測試前端代碼? 知道 BDD, TDD, Unit Test 么? 知道怎么測試你的前端工程么(mocha, sinon, jasmin, qUnit..)?
參考答案:了解 BDD 行為驅(qū)動(dòng)開發(fā)與 TDD 測試驅(qū)動(dòng)開發(fā)已經(jīng)單元測試相關(guān)概念
參與互動(dòng)
148.JavaScript 的循環(huán)語句有哪些?
參考答案:while for do while forEach
參與互動(dòng)
149.作用域-編譯期執(zhí)行期以及全局局部作用域問題
參考答案:js 執(zhí)行主要的兩個(gè)階段:預(yù)解析和執(zhí)行期
參與互動(dòng)
150.如何添加 html 元素的事件,有幾種方法?請列舉
參考答案:直接在標(biāo)簽里添加;在元素上添加、使用事件注冊函數(shù)添加
參與互動(dòng)
151.列舉瀏覽器對象模型 BOM 里常用的至少 4 個(gè)對象,并列舉 window 對象的常用方法至少 5 個(gè)
參考答案:
對象:Window document location screen history navigator
方法:Alert() confirm() prompt() open() close()
參與互動(dòng)
152.事件綁定的方式
參考答案:
參與互動(dòng)
153.事件循環(huán)
參考答案:事件循環(huán)是一個(gè)單線程循環(huán),用于監(jiān)視調(diào)用堆棧并檢查是否有工作即將在任務(wù)隊(duì)列中完成。如果調(diào)用堆棧為空并且任務(wù)隊(duì)列中有回調(diào)函數(shù),則將回調(diào)函數(shù)出隊(duì)并推送到調(diào)用堆棧中執(zhí)行。
參與互動(dòng)
154.事件模型
參考答案:
解析:參考
參與互動(dòng)
155.如何自定義事件
參考答案:
1.原生提供了 3 個(gè)方法實(shí)現(xiàn)自定義事件 2.createEvent,設(shè)置事件類型,是 html 事件還是 鼠標(biāo)事件 3.initEvent 初始化事件,事件名稱,是否允許冒泡,是否阻止自定義事件 4.dispatchEvent 觸發(fā)事件
MDN
參與互動(dòng)
156.target 和 currentTarget 區(qū)別
參考答案:
參與互動(dòng)
157.prototype 和__proto__的關(guān)系是什么
參考答案:
所有的對象都擁有__proto__屬性,它指向?qū)ο髽?gòu)造函數(shù)的 prototype 屬性
所有的函數(shù)都同時(shí)擁有__proto__和 protytpe 屬性 函數(shù)的__proto__指向自己的函數(shù)實(shí)現(xiàn) 函數(shù)的 protytpe 是一個(gè)對象 所以函數(shù)的 prototype 也有__proto__屬性 指向 Object.prototype
Object.prototype.__proto__指向 null
參與互動(dòng)
158.什么是原型屬性?
參考答案:從構(gòu)造函數(shù)的prototype屬性出發(fā)找到原型,這時(shí)候就把原型稱之為構(gòu)造函數(shù)的原型屬性
參與互動(dòng)
159.什么是原型對象?
參考答案:從實(shí)例的__proto__出發(fā),找到原型,這時(shí)候就把原型稱之為實(shí)例的原型對象。
參與互動(dòng)
160.使用 let、var 和 const 創(chuàng)建變量有什么區(qū)別
參考答案:
let 和 const 的區(qū)別在于:let 允許多次賦值,而 const 只允許一次。
本文標(biāo)題:關(guān)于面試題javascript基礎(chǔ)的信息
路徑分享:http://chinadenli.net/article39/dsspesh.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供商城網(wǎng)站、企業(yè)建站、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站策劃、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)