=前端面試匯總

1.清除盒模型的浮動方式

way 1: 最后追加元素,

設置 clear:both;

way 2: 偽元素清除

div::after{

clear:both,

content:'',

height:0;

line-height:0;

display:block;

visiablity:hidden;

}

div{

zoom:1; // ie下生效設置或者檢索縮放比例

}

way 3: 父元素增加overflow:hidden;

2.谷歌瀏覽器在標準模式下不支持小于12px的文字娩脾,如何讓它支持小于12px的文字

使用 -webkit-text-size-adjust:none;? 對谷歌的27.0一下版本有效贱呐,27.0以上無效,只支持英文,對英文無效砰琢,新的版本已經(jīng)禁止了修改該屬性胡桨,可以使用transform:scale(0.8) 來進行調整,當然容器也會隨著縮小烫堤,要注意重新調整位置荣赶。

3.火狐下文本無法撐開整個容器高度凤价,如何解決?css hack

div{

height:auto!important;

height:200px;

min-height:200px;

}

4.CSS3新增的選擇器有哪些拔创?

子元素選擇器利诺,相鄰兄弟選擇器,通用兄弟選擇器剩燥,群組選擇器

子元素:? ? 父 > 子

相鄰兄弟:? 元素 + 兄弟

通用兄弟: 元素 ~ 兄弟

群組:? 元素1慢逾,元素2,,,, ,

css3屬性選擇器:

Element[attribute]? ? Element[attribute=”value”]? 可以用通配符? ^ 開頭 $ 結尾 ~ 包含屬性? * 屬性值包含

Element[attribute^=”value”]

css3偽類選擇器:

行為偽類:

:hover? :active(點擊) :focus(input光標選中)

錨點偽類:

:link? :visited

狀態(tài)偽類:

:enabled :disabled? :checked :unchecked

偽元素:

::before? ? 和content配合使用

::after 和content配合使用 多用于清除浮動

::selection? 選中文本的背景色? ie9支持

E:first-child 獲取第一個

E:last-child? 獲取最后一個

E:nth-child(n) 獲取e類型的第幾個后代? 從1開始計數(shù)

E:nth-child(an + b)? 這里的n 代表 從 0 開始灭红,依次遞增的自然數(shù)

E:nth-child(even)

E:nth-child(odd)

:not 否定選擇器

Element::first-line 根據(jù)“first-line”偽元素中的樣式對Element元素的第一行文本進行格式化

Element::first-letter? 用于向文本的首字母設置特殊樣式

Element:nth-last-child(N)? ? 匹配屬于其元素的第N個子元素的每個元素侣滩,不論元素的類型,從最后一個子元素開始計數(shù)

Element:nth-of-last-type(N)? ? 匹配屬于父元素的特定類型的第N個子元素的每個元素变擒,從最后一個子元素開始計數(shù)? 帶著type都是要和選擇器元素的類型相同君珠,child則是直接返回所有子元素

Element:empty? 沒有子節(jié)點的元素

Element:only-child

Element:last-of-type 匹配屬于父元素的特定類型的最后一個子元素的每個元素

Element:first-of-type? 匹配屬于其父元素的特定類型的首個子元素的每個元素

html5新增標簽

aricle:頁面上構建完整并且獨立的內容 如小說,文章娇斑,報道類

aside:用來裝載非正文類的內容 如 廣告 側邊欄

section:標簽定義文檔中的節(jié) 例如小說中的一章

header:頁面頭部?

footer:頁腳

nav:標簽定義顯示導航鏈接

hgroup:標簽用于網(wǎng)頁或區(qū)段

figure>figcaption

<figure>:標簽包含獨立的媒體內容策添,如圖像 圖表 照片等等

<figcaption>標簽定義figure元素的標題(caption)

details>summary

<details>標簽用于描述文檔或文檔某個部分的細節(jié),而這個細節(jié)并不需要文檔加載時就展示悠菜,而是可以折疊舰攒。

屬性:open定義details是否可見

<summary>默認顯示的details元素的標題

datalist>option

輸入框提示列表 ? ?input的list屬性值為datalist的id

progress :進度條 ?屬性:max:進度完成 value:定義當前進度值

mark:標記需要突出顯示的文本

keygen:表單的密鑰對生成器

權重:

行內樣式(1000)>ID選擇器(100)>類,屬性選擇器和偽類選擇器(10)>元素和偽元素(1)>*(0)

background-origin(指定背景圖片從哪里開始顯示)

box-sizing(控制盒模型的組成模式)

content-box:? 使用此值時, 盒模型的組成模式是, 元素寬度 = content + padding + border;

border-box:? ? 使用此值時, 盒模型的組成模式是, 元素寬度 = content(即使設置了padding和border, 元素的整體寬高不變

5.CSS3動畫animate

關鍵幀(@keyframes)

animation: dropdown 8s linear infinite;

.c:hover{animation: 2s change 3 forwards;}? forwards為保持在結束狀態(tài)

不需要觸發(fā) 可以循環(huán)播放

transition? 0.4s linear background 1s

6.ES6實現(xiàn)數(shù)組去重

1. newarray = [... new Set(oldarray)]

2 .newarray = Array.from(new Set(oldarray))

3 .? function unique(arr) {

const res = new Map();

return arr.filter((a) => !res.has(a) && res.set(a, 1))

}

7.Vue中v-if和v-show的區(qū)別

v-if 直接添加或者刪除整個dom元素

v-show dom渲染出來了? 但是設置了display:none

8.Vue阻止事件冒泡

事件后增加? .stop? 阻止冒泡

.prevent 阻止默認事件

.native? 原生事件綁定到組件

如果原生組件在其他元素的包裹下悔醋,使用摩窃。native方法可能會失效,這是可以使用 this.$listener,v-on="$listeners" 將所有的事件監(jiān)聽器指向這個組件的某個特定的子元素,和計算屬性配合使用芬骄。

Vue.component('base-input', {

? inheritAttrs: false,

? props: ['label', 'value'],

? computed: {

inputListeners: function () {

? var vm = this

? // `Object.assign` 將所有的對象合并為一個新對象

? return Object.assign({},

// 我們從父級添加所有的監(jiān)聽器

this.$listeners,

// 然后我們添加自定義監(jiān)聽器猾愿,

// 或覆寫一些監(jiān)聽器的行為

{

? // 這里確保組件配合 `v-model` 的工作

? input: function (event) {

vm.$emit('input', event.target.value)

? }

}

? )

}

? },

? template: `

<label>

? {{ label }}

? <input

v-bind="$attrs"

v-bind:value="value"

v-on="inputListeners"

? >

</label>

? })

9.Vue的生命周期

beforCreate?

create

beforeMounted

mounted

beforeUpdate

update

beforeDestroy

destroy

10.Vue的watch是怎么運作的

Vue的數(shù)據(jù)雙向綁定有3大核心:Observer,Dep,Watcher

12.實現(xiàn)水平垂直居中

way 1:

對于行級元素或者行級塊元素:display:table-cell和vertical-align、text-align账阻,使父元素內的所有行內元素水平垂直居中(內部div設置display:inline-block即可)蒂秘。這在子元素不確定寬高和數(shù)量時,

對table-cell元素設置百分比(如100%)的寬高值時無效的淘太,但是可以將父元素設置display:table姻僧,再將父元素設置百分比寬高,子元素table-cell會自動撐滿父元素蒲牧。這就可以做相對于整個頁面的水平垂直居中

way2:

div {

position: relative; /* 相對定位或絕對定位均可 */

width:500px;

height:300px;

top: 50%;

left: 50%;

margin: -150px 0 0 -250px;? ? /* 外邊距為自身寬高的一半 */

? }

? way3:

? div {

position: absolute; /* 相對定位或絕對定位均可 */

width:500px;

height:300px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

way4:

? .container {

display: flex;

align-items: center; /* 垂直居中 */

justify-content: center; /* 水平居中 */

}

.container div {

width: 100px;

height: 100px;

}?

13.cookie撇贺、localStore和sessionStore的區(qū)別

共同點:都是保存在瀏覽器端馆里、且同源的

區(qū)別:

1刨秆、cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和服務器間來回傳遞骂远,而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)送給服務器挎扰,僅在本地保存翠订。cookie數(shù)據(jù)還有路徑(path)的概念巢音,可以限制cookie只屬于某個路徑下

2、存儲大小限制也不同尽超,cookie數(shù)據(jù)不能超過4K官撼,同時因為每次http請求都會攜帶cookie、所以cookie只適合保存很小的數(shù)據(jù)橙弱,如會話標識歧寺。sessionStorage和localStorage雖然也有存儲大小的限制燥狰,但比cookie大得多棘脐,可以達到5M或更大

3、數(shù)據(jù)有效期不同龙致,sessionStorage:僅在當前瀏覽器窗口關閉之前有效蛀缝;localStorage:始終有效,窗口或瀏覽器關閉也一直保存目代,因此用作持久數(shù)據(jù)屈梁;cookie:只在設置的cookie過期時間之前有效,即使窗口關閉或瀏覽器關閉

4榛了、作用域不同在讶,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁面霜大;localstorage在所有同源窗口中都是共享的构哺;cookie也是在所有同源窗口中都是共享的

5、web Storage支持事件通知機制战坤,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者

6曙强、web Storage的api接口使用更方便

14.get和post的區(qū)別

對于GET方式的請求,瀏覽器會把http header和data一并發(fā)送出去途茫,服務器響應200(返回數(shù)據(jù))碟嘴; ff瀏覽器發(fā)送一個包? 不管是post還是get

網(wǎng)絡差的時候可以判斷數(shù)據(jù)是否完整。

而對于POST囊卜,瀏覽器先發(fā)送header娜扇,服務器響應100 continue,瀏覽器再發(fā)送data栅组,服務器響應200 ok(返回數(shù)據(jù))雀瓢。

get參數(shù)通過url傳遞,post放在request body中笑窜。

get請求在url中傳遞的參數(shù)是有長度限制的致燥,而post沒有。

get比post更不安全排截,因為參數(shù)直接暴露在url中嫌蚤,所以不能用來傳遞敏感信息辐益。

get請求只能進行url編碼,而post支持多種編碼方式脱吱。

get會主動cache,請求參數(shù)會被完成的保留到瀏覽記錄里智政,而post不會。

15.瀏覽器渲染頁面的過程

HTML解析出DOM Tree

CSS解析出Style Rules

將二者關聯(lián)生成Render Tree

Layout 根據(jù)Render Tree計算每個節(jié)點的信息

Painting 根據(jù)計算好的信息繪制整個頁面

Repaint ——屏幕的一部分要重畫箱蝠,比如某個CSS的背景色變了续捂。但是元素的幾何尺寸沒有變。

Reflow 元件的幾何尺寸變了宦搬,我們需要重新驗證并計算Render Tree牙瓢。是Render Tree的一部分或全部發(fā)生了變化。這就是Reflow间校,或是Layout矾克。

發(fā)起請求;

解析HTML憔足;

解析樣式胁附;

執(zhí)行JavaScript;

布局滓彰;

繪制

頁面優(yōu)化:

HTML文檔結構層次盡量少控妻,最好不深于六層;

腳本盡量后放揭绑,放在前即可弓候;

少量首屏樣式內聯(lián)放在標簽內;

樣式結構層次盡量簡單洗做;

在腳本中盡量減少DOM操作弓叛,盡量緩存訪問DOM的樣式信息,避免過度觸發(fā)回流诚纸;

減少通過JavaScript代碼修改元素樣式撰筷,盡量使用修改class名方式操作樣式或動畫;

動畫盡量使用在絕對定位或固定定位的元素上畦徘;

隱藏在屏幕外毕籽,或在頁面滾動時,盡量停止動畫井辆;

盡量緩存DOM查找关筒,查找器盡量簡潔;

涉及多域名的網(wǎng)站杯缺,可以開啟域名預解析

16.CSS怎么渲染的

? 瀏覽器CSS匹配不是從左到右進行查找蒸播,而是從右到左進行查找。

? css樣式規(guī)則渲染是先就近渲染,然后才依據(jù)選擇符權重進行渲染袍榆。

? :important > 內聯(lián) > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 >通配符 > 繼承

瀏覽器下載的順序是從上到下胀屿,渲染的順序也是從上到下,下載和渲染是同時進行的包雀。

在渲染到頁面的某一部分時宿崭,其上面的所有部分都已經(jīng)下載完成(并不是說所有相關聯(lián)的元素都已經(jīng)下載完)。

如果遇到語義解釋性的標簽嵌入文件(JS腳本才写,CSS樣式)葡兑,那么此時IE的下載過程會啟用單獨連接進行下載。

并且在下載后進行解析赞草,解析過程中讹堤,停止頁面所有往下元素的下載。

樣式表在下載完成后房资,將和以前下載的所有樣式表一起進行解析蜕劝,解析完成后,將對此前所有元素(含以前已經(jīng)渲染的)重新進行渲染轰异。

JS、CSS中如有重定義暑始,后定義函數(shù)將覆蓋前定義函數(shù)搭独。

? 渲染效率與下面三點有關:

css選擇器的查詢定位效率

瀏覽器的渲染模式和算法

要進行渲染內容的大小

17.怎么理解原型鏈

object.prototype

18.transition和keyframes的區(qū)別

1:transition需要一個事件來觸發(fā),比如hover廊镜,所以沒法在網(wǎng)頁加載時自動發(fā)生

2: transition是一次性的牙肝,不能重復發(fā)生,除非一再觸發(fā)嗤朴。

3: transition只能定義開始狀態(tài)和結束狀態(tài)配椭,不能定義中間狀態(tài),也就是說只有兩個狀態(tài)雹姊。

4:一條transition規(guī)則股缸,只能定義一個屬性的變化,不能涉及多個屬性吱雏。

keyframes 可以定義中間狀態(tài)敦姻,還可以設定是否循環(huán)調用,不需要事件觸發(fā)歧杏。

19. 實現(xiàn)一個方法镰惦,返回一個boolean值,判斷輸入是否為回文犬绒。

str = str.replace(/W/g, '').toLowerCase();? ? ? //將非a-Z0-9-的字符替換為空旺入,轉為小寫字符

return (str == str.split('').reverse().join(''));? //字符串分割 反轉 重新連接 如果等于原先則為true

20.js中的數(shù)據(jù)類型

基本:string 、 number 凯力、 symbol 茵瘾、boolean 急膀、undefined

復雜類型:Object 、 array龄捡、 function

1. undefined:未定義的變量卓嫂,或未賦值的變量,或不存在的變量屬于undefined聘殖;

2. NaN:非數(shù)字類型晨雳,但是NaN屬于number,可用isNaN();來判斷是否屬于非數(shù)字奸腺。NaN不和任何值相等餐禁,包括NaN本身。NaN兩個N大寫突照,中間的a小寫帮非。

3. boolean:布爾值,我們常說的真假讹蘑,真為1末盔,假為0。只有這兩個值座慰。

4. null:空陨舱,屬于object,但是判斷null == undefined時返回true版仔。判斷null === undefined時為false游盲;

21.反轉字符串

1. 使用 Array的reverse()方法

char[] c = original.spilt('');

Array.Reverse(c);

2. 逆序遍歷

3. public static String strReverseWithRecursive(String string){

? ? ? ? if(string==null||string.length()==0)return string;

? ? ? ? int length = string.length();

? ? ? ? if(length==1){

? ? ? ? ? ? return string;

? ? ? ? }else{

? ? ? ? ? ? return? strReverseWithRecursive(string.substring(1))+string.charAt(0);

? ? ? ? }

? ? }

22.用CSS實現(xiàn)三角形

div{

width:0px;

height:0px;

border-left:20px solid transparent;

border-right:20px solid transparent;

border-top:20px solid #000;

border-bottom:0px;

}

23.不使用border,畫個1px的線蛮粮,在標準模式和怪異模式下展示一樣

<divstyle="width:100%;height:1px;background-color:black"></div>

<? hr size="1" > 不太兼容

24.說一下CSS Reset的作用和好處

css? reset的作用就是重置這些默認樣式益缎,使樣式表現(xiàn)一致;

為了讓頁面獲得瀏覽器跨瀏覽器的兼容性然想,需要用重置文件css代碼覆蓋瀏覽器默認的樣式來統(tǒng)一樣式莺奔。

25.什么是BFC,作用是什么又沾?

1. BFC 塊級格式上下文弊仪,浮動元素和絕對定位元素,非塊級盒子的塊級容器(例如 inline-blocks, table-cells, 和 table-captions)杖刷,

以及overflow值不為“visiable”的塊級盒子励饵,都會為他們的內容創(chuàng)建新的BFC(塊級格式上下文)。

2. 生成BFC元素的子元素會一個接一個的放置滑燃。垂直方向上他們的起點是一個包含塊的頂部役听,兩個相鄰子元素之間的垂直距離取決于元素的margin特性。在BFC中相鄰的塊級元素外邊距會折疊。

特點:? 內部的Box會在垂直方向上一個接一個的放置

垂直方向上的距離由margin決定典予。(完整的說法是:屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊甜滨,與方向無關。)

每個元素的左外邊距與包含塊的左邊界相接觸(從左向右)瘤袖,即使浮動元素也是如此衣摩。(這說明BFC中子元素不會超出他的包含塊,而position為absolute的元素可以超出他的包含塊邊界)

BFC的區(qū)域不會與float的元素區(qū)域重疊

計算BFC的高度時捂敌,浮動子元素也參與計算

BFC就是頁面上的一個隔離的獨立容器艾扮,容器里面的子元素不會影響到外面元素,反之亦然

看到以上的幾條約束占婉,讓我想起學習css時的幾條規(guī)則

Block元素會擴展到與父元素同寬泡嘴,所以block元素會垂直排列

垂直方向上的兩個相鄰DIV的margin會重疊,而水平方向不會(此規(guī)則并不完全正確)

浮動元素會盡量接近往左上方(或右上方)

為父元素設置overflow:hidden或浮動父元素逆济,則會包含浮動元素

3.產(chǎn)生條件

1).float的值不是none酌予。

2)、position的值不是static或者relative奖慌。

3)抛虫、display的值是inline-block、table-cell升薯、flex莱褒、table-caption或者inline-flex

4)、overflow的值不是visible,

4. 作用

1).阻止垂直外邊距(margin-top涎劈、margin-bottom)折疊

2).包含浮動元素

與浮動元素相鄰的已生成BFC的元素不能與浮動元素相互覆蓋,可以實現(xiàn)左右固定寬度? 中間自適應。? 左右模塊設置浮動阅茶,中間元素設置overflow:hidden

總結一句話:就是垂直方向上的margin會重合

27.Restful的規(guī)范理解

? ? RESTful是一種架構的規(guī)范與約束蛛枚、原則,符合這種規(guī)范的架構就是RESTful架構脸哀。

28.怎么解決瀏覽器的跨域

1. jsonp? 為啥script請求不存在跨域:因為script? link? 和 img? 等請求不受同源策略限制蹦浦,ajax異步請求則受同源策略限制。

2. 后端進行處理? 過濾器中指定可跨域? Access-control-allow-origin

3. document.domain? Cookie是服務器寫入瀏覽器的一段信息撞蜂,只有同源的網(wǎng)頁才能共享盲镶,但是,兩個網(wǎng)頁一級域名相同蝌诡,只是二級域名不同溉贿,瀏覽器允許通過設置document.domain共Cookie。

4. 瀏覽器窗口有window.name屬性浦旱。這個屬性的最大特點是宇色,無論是否同源,只要在同一個窗口里,前一個網(wǎng)頁設置這個屬性宣蠕,后一個網(wǎng)頁就可以讀取它例隆。

29.實現(xiàn)一個方法,傳入一個參數(shù)抢蚀,判斷這個參數(shù)是不是整數(shù)镀层,用運算表達式實現(xiàn)

1. X^0 === X;

2. Math.round(x) === x;? 或者可以使用ceil和floor判斷

3. (typeof x === 'number') && (x % 1 === 0);? ?

注意:? 使用parseInt的時候,存在局限性 當數(shù)值比較大的時候皿曲,數(shù)據(jù)在進行parseInt的時候會轉化為String唱逢,這時會出現(xiàn)科學計數(shù)法即指數(shù)形式,1e+21 這時解析到1以后就不解析了 直接返回1了谷饿。結果錯誤 使用parseInt的時候惶我,存在局限性 當數(shù)值比較大的時候,數(shù)據(jù)在進行parseInt的時候會轉化為String博投,這時會出現(xiàn)科學計數(shù)法即指數(shù)形式绸贡,1e+21 這時解析到1以后就不解析了 直接返回1了。結果錯誤

實現(xiàn)一個方法毅哗,返回一個boolean值听怕,判斷輸入是否為回文。

str = str.replace(/W/g, '').toLowerCase();? ? ? //將非a-Z0-9-的字符替換為空虑绵,轉為小寫字符

return (str == str.split('').reverse().join(''));? //字符串分割 反轉 重新連接 如果等于原先則為true

30.正則

不以 尿瞭。。 開頭? ? ^(?!ab)[a-z]+$? ? 不以ab開頭的字符串

不以 翅睛。声搁。 結尾 ? ^[a-z]+(?<!bc)$? ? 不以bc結尾的字符串

31. 頁面的防抖和節(jié)流

防抖:使用延時處理,基本是使用setTimeOut進行處理捕发。

? ? function debouce(func,delay,immediate){

? ? ? var timer = null;

? ? ? return function(){

? ? ? ? var context = this;

? ? ? ? var args = arguments;

? ? ? ? if(timer) clearTimeout(time);

? ? ? ? if(immediate){

? ? ? ? ? ? //根據(jù)距離上次觸發(fā)操作的時間是否到達delay來決定是否要現(xiàn)在執(zhí)行函數(shù)

? ? ? ? ? ? var doNow = !timer;

? ? ? ? ? ? //每一次都重新設置timer疏旨,就是要保證每一次執(zhí)行的至少delay秒后才可以執(zhí)行

? ? ? ? ? ? timer = setTimeout(function(){

? ? ? ? ? ? ? ? timer = null;

? ? ? ? ? ? },delay);

? ? ? ? ? ? //立即執(zhí)行

? ? ? ? ? ? if(doNow){

? ? ? ? ? ? ? ? func.apply(context,args);

? ? ? ? ? ? }

? ? ? ? }else{

? ? ? ? ? ? timer = setTimeout(function(){

? ? ? ? ? ? ? ? func.apply(context,args);

? ? ? ? ? ? },delay);

? ? ? ? }

? ? }

}

節(jié)流流:節(jié)流函數(shù)允許一個函數(shù)在規(guī)定的時間內只執(zhí)行一次。

節(jié)流和防抖動最大的區(qū)別就是扎酷,節(jié)流函數(shù)不管事件觸發(fā)有多頻繁檐涝,都會保證在規(guī)定時間內一定會執(zhí)行一次真正的事件處理函數(shù)。

節(jié)流時間戳實現(xiàn):

var throttle = function(func,delay){

? ? var prev = Date.now();

? ? return function(){

? ? ? ? var context = this;

? ? ? ? var args = arguments;

? ? ? ? var now = Date.now();

? ? ? ? if(now-prev>=delay){

? ? ? ? ? ? func.apply(context,args);

? ? ? ? ? ? prev = Date.now();

? ? ? ? }

? ? }

}

節(jié)流定時器實現(xiàn):

// 簡單的節(jié)流函數(shù)

function throttle(func, wait, mustRun) {

var timeout,startTime = new Date();

return function() {

var context = this,args = arguments,curTime = new Date();

clearTimeout(timeout);

// 如果達到了規(guī)定的觸發(fā)時間間隔法挨,觸發(fā) handler

if(curTime - startTime >= mustRun){

func.apply(context,args);

startTime = curTime;

// 沒達到觸發(fā)間隔谁榜,重新設定定時器

}else{

timeout = setTimeout(func, wait);

}

};

};

32.深度克隆

1.function copyObject(Target,Origin){

var Target = Target||{};

for (const key in Origin) {

//判斷是否是自己的屬性

if (Origin.hasOwnProperty(key)) {

if( Origin[key]!== null &&? typeof(Origin[key]) == "Object"){

if(Object.prototype.toString.call(Origin[key]) == "[Object Array]"){? //call方法表示調用?

Target[key] = [];

}else{

Target[key] = {};

}

copyObject(Target[key],Origin[key]);

}else{

Target[key] = Origin[key];

}

}

}

}

2. 使用object.assign參數(shù)為true時為深拷貝

? 判斷一個對象是array的方法:

? 1. arr instance Array ;

? 2. arr.constructor === Array ? ? 1 2 存在漏洞

? 3. Object.prototype.toString? ? 最嚴謹

33 . transform屬性

功能:該屬性允許我們對元素進行旋轉、縮放凡纳、移動或傾斜窃植。

屬性? translate(x,y)? 按照x y 軸移動距離

? scale(x,y)? ? ? 按照 水平 垂直距離縮放?

? rotate(angle)? ? 按照角度旋轉? 參數(shù)為角度? 360度 為? 2*Math.pi

? skew(x-angle,y-angle)? 按照角度傾斜? ?

? matrix(n,n,n,n,n,n)? 矩陣轉換

34.vuex中mutation需要在methods中調用,值可以在computed中獲取

store中只有mutation是的時候? 不存在action的時候? ?

methods中調用

this.$store.commit(mutation下定義的名稱);?

獲取的時候?

this.$store.state.獲取對象的名稱

存在action的時候? action中執(zhí)行?

? increment(context){

context.commit(mutation中定義的函數(shù));

? },

methods中使用?

this.$store.dispatch(actions下定義的名稱);

獲取的時候?

this.$store.state.獲取對象的名稱

35.css預處理語言

saaa? 變量? $mainColor: #0982c1;? ? 引用? ? color: $publicColor;

less? 變量 @mainColor: #0982c1;? ? 引用? ? color: @publicColor;

stylus Stylus對變量名沒有任何限定惫企,你可以是$開始撕瞧,也可以是任意字符陵叽,

而且與變量值之間可以用冒號、空格隔開丛版,需要注意的是 Stylus (0.22.4) 將會編譯 @ 開始的變量巩掺,但其對應的值并不會賦予該變量,換句話說页畦,在 Stylus 的變量名不要用 @ 開頭胖替。

預處理優(yōu)點:

1.層級關系更明確

2 section {

? margin: 10px;

? nav {

height: 25px;

a {

? color: #0982C1;

? &amp;:hover {

text-decoration: underline;

? }

}

? }

}

36.axios跨域處理:原理為服務器代理

1. 修改config下的index.js 中的

proxyTable: {

? '/api': {

target: 'https://api.douban.com',// 請換成你的地址

changeOrigin: true,

pathRewrite: {

? '^/api': ''

}

? }

}

2 .增加main.js中的Vue.prototype.HOST = '/api'

請求時 路徑就變?yōu)? this.HOST + 后邊地址+參數(shù)

38.created中使用axios加載數(shù)據(jù)? 值放在data中的時候 then方法中使用箭頭函數(shù)?

then的內部不能使用Vue的實例化的this, 因為在內部 this 沒有被綁定。

解決:聲明self? self.users= res.data;或者使用 ES6 的 箭頭函數(shù)arrow function豫缨,箭頭方法可以和父方法共享變量独令。

created() {? ? ? ?

axios.post('http://jsonplaceholder.typicode.com/users'').then((res) => {? ? ? ? ? ?

this.users= res.data;? ? ?

})? ?

},

39.標準模式:瀏覽器按W3C標準解析執(zhí)行代碼。

? 怪異模式:兼容老頁面好芭。使用瀏覽器自己的方式解析執(zhí)行代碼燃箭,因為不同瀏覽器解析執(zhí)行的方式不一樣

① 不存在doctype或形式不正確會導致怪異模式;

② 有過渡/框架dtd沒有URI會導致頁面以怪異模式呈現(xiàn)舍败;

③ IE中招狸,如果doctype聲明在xml之后,會導致怪異模式邻薯。

40.浮動的原理

float 屬性定義元素在哪個方向浮動裙戏。以往這個屬性總應用于圖像,使文本圍繞在圖像周圍厕诡,不過在 CSS 中累榜,任何元素都可以浮動。浮動元素會生成一個塊級框灵嫌,自動增加display:block屬性壹罚,而不論它本身是何種元素

float設置的浮動元素對塊級元素不可見,會覆蓋掉浮動元素寿羞,對文本元素和bfc元素可見渔嚷。

41. Javascript 中函數(shù)聲明和函數(shù)表達式是存在區(qū)別的,函數(shù)聲明在JS解析時進行函數(shù)提升稠曼,因此在同一個作用域內,

不管函數(shù)聲明在哪里定義客年,該函數(shù)都可以進行調用霞幅。而函數(shù)表達式的值是在JS運行時確定,并且在表達式賦值完成后量瓜,該函數(shù)才能調用

42. #main-navigation {? }? ? ? /* ID(最快) */

body.home #page-wrap {? }? /* ID */

.main-navigation {? }? ? ? /* Class */

ul li a.current {? }? ? ? /* Class *

ul {? }? ? ? ? ? ? ? ? ? ? /* Tag */

ul li a {? }? ? ? ? ? ? ? ? /* Tag */

* {? }? ? ? ? ? ? ? ? ? ? /* Universal(慢) */

#content [title='home']? ? /* Universal */

43. property是DOM中的屬性司恳,是JavaScript里的對象;

attribute是HTML標簽上的特性绍傲,它的值只能夠是字符串

property會從attribute中獲取同步扔傅,然而attribute不會從property中獲取同步

attribute(特性)耍共,是我們賦予某個事物的特質或對象。

property(屬性)猎塞,是早已存在的不需要外界賦予的特質试读。

44. 自調用函數(shù)執(zhí)行之后,如果沒有return 返回值或者聲明變量接受返回值荠耽,都會立即消失钩骇,?

output為一個輸出文本的函數(shù),執(zhí)行

output(typeof (function (){output('hello world')})());

執(zhí)行結果為? hello world? undefined

首先執(zhí)行 自執(zhí)行函數(shù)? 函數(shù)打印? hello world?

然后執(zhí)行 typeof 空? 輸出 undefined

45. noscript? 標簽用來定義在腳本未被執(zhí)行時的替代內容

此標簽可被用于可識別 script標簽但無法支持其中的腳本的瀏覽器铝量。

46 .js引擎

1. 創(chuàng)建一個全局對象(Global Object) 倘屹, 這個對象全局只存在一份,它的屬性在任何地方都可以訪問慢叨,它的存在伴隨著應用程序的整個生命周期? 將 window? math date string等? 取得時候直接用即可放在全局對象上

2. JS引擎需要構建一個執(zhí)行環(huán)境棧 也要創(chuàng)建一個全局執(zhí)行環(huán)境EC 纽匙,并將這個全局執(zhí)行環(huán)境EC壓入執(zhí)行環(huán)境棧中。執(zhí)行環(huán)境棧的作用是為了保證程序能夠按照正確的順序被執(zhí)行拍谐。

3. JS引擎還要創(chuàng)建一個與EC關聯(lián)的全局變量對象vo? 并把VO指向全局對象烛缔,VO中不僅包含了全局對象的原有屬性,還包括在全局定義的變量x 和函數(shù) A赠尾,與此同時力穗,在定義函數(shù)A的時候,

還為 A 添加了一個內部屬性scope气嫁,并將scope指向了VO当窗。每個函數(shù)在定義的時候,都會創(chuàng)建一個與之關聯(lián)的scope屬性寸宵,scope總是指向定義函數(shù)時所在的環(huán)境崖面。此時的ECStack結構如下:

4. S引擎會創(chuàng)建函數(shù)A的執(zhí)行環(huán)境EC,然后EC推入執(zhí)行環(huán)境棧的頂部并獲取執(zhí)行權梯影。此時執(zhí)行環(huán)境棧中有兩個執(zhí)行環(huán)境巫员,分別是全局執(zhí)行環(huán)境和函數(shù)A執(zhí)行環(huán)境,A的執(zhí)行環(huán)境在棧頂甲棍,全局執(zhí)行環(huán)境在棧的底部简识。然后,創(chuàng)建函數(shù)A的作用域鏈(Scope Chain) 感猛,在javascript中七扰,每個執(zhí)行環(huán)境都有自己的作用域鏈,用于標識符解析陪白,當執(zhí)行環(huán)境被創(chuàng)建時颈走,它的作用域鏈就初始化為當前運行函數(shù)的scope所包含的對象。

47.JS的執(zhí)行機制是:

js解析過程分為兩個階段:預編譯期(預處理)與執(zhí)行期咱士。

首先判斷JS是同步還是異步立由,同步就進入主進程轧钓,異步就進入event table

異步任務在event table中注冊函數(shù),當滿足觸發(fā)條件后锐膜,被推入event queue?

同步任務進入主線程后一直執(zhí)行毕箍,直到主線程空閑時,才會去event queue中查看是否有可執(zhí)行的異步任務枣耀,如果有就推入主進程中

執(zhí)行一個宏任務霉晕,過程中如果遇到微任務,就將其放到微任務的“事件隊列”里

當前宏任務執(zhí)行完成后捞奕,會查看微任務的“事件隊列”牺堰,并將里面全部的微任務依次執(zhí)行完

重復以上2步驟,結合event loop(1) event loop(2)颅围,就是更為準確的JS執(zhí)行機制

48 . match是string的方法

regex中方法

1. test(); 是否匹配?

2. exec(); 匹配的結果

3. complie(); 在執(zhí)行腳本中編譯整則表達式

49. 異步async

1. async 函數(shù)中可能會有 await 表達式伟葫,這會使 async 函數(shù)暫停執(zhí)行,等待表達式中的 Promise 解析完成后繼續(xù)執(zhí)行 async 函數(shù)并返回解決結果院促。

2. async 函數(shù)返回一個 Promise 對象筏养,當函數(shù)執(zhí)行的時候,一旦遇到 await 就會先返回常拓,等到觸發(fā)的異步操作完成渐溶,再接著執(zhí)行函數(shù)體內后面的語句。

51.? boolean 轉為false的6個值? ? undefined 弄抬、null 茎辐、 '' 、NaN 掂恕、 0 拖陆、 false 。

false == '0'? true

false === '0' false

52. 預編譯(函數(shù)執(zhí)行前)※

1. 創(chuàng)建AO對象(Active Object)

2. 查找函數(shù)形參及函數(shù)內變量聲明懊亡,形參名及變量名作為AO對象的屬性依啰,值為undefined

3. 實參形參相統(tǒng)一,實參值賦給形參

4. 查找函數(shù)聲明店枣,函數(shù)名作為AO對象的屬性速警,值為函數(shù)引用

預編譯(腳本代碼塊script執(zhí)行前)

1. 查找全局變量聲明(包括隱式全局變量聲明,省略var聲明)鸯两,變量名作全局對象的屬性坏瞄,值為undefined

3. 查找函數(shù)聲明,函數(shù)名作為全局對象的屬性甩卓,值為函數(shù)引用】

注意: 預編譯階段發(fā)生變量聲明和函數(shù)聲明,沒有初始化行為(賦值)蕉斜,匿名函數(shù)不參與預編譯只有在解釋執(zhí)行階段才會進行變量初始化

53. 閉包? :函數(shù)執(zhí)行返回值為次函數(shù)聲明的內部函數(shù)? 會產(chǎn)生閉包? 閉包會產(chǎn)生內存泄漏逾柿,settimeout的第一個參數(shù)不是函數(shù)的時候缀棍,也容易產(chǎn)生內存泄漏。

54. cookie怎么存儲 存儲在哪里

cookie使用 set存儲? get獲取? ?

cookie存儲在瀏覽器端机错,每次請求會攜帶cookie

是客戶端用來存儲數(shù)據(jù)的一種選項爬范,它既可以在客戶端設置也可以在服務器端設置。cookie會跟隨任意HTTP請求一起發(fā)送弱匪。

缺點:一是增加了網(wǎng)絡流量青瀑,二是數(shù)據(jù)容量有限,最多只能存儲4kb的數(shù)據(jù)萧诫,瀏覽器之間各有不同斥难,三是不安全。

55. promise.all().then()? race()?

.then 執(zhí)行回調函數(shù)

Promise.all() // 所有的都有完成帘饶,相當于 且

?Promise.race() // 完成一個即可哑诊,相當于 或 不管成功與否,也可以返回失敗


**就先發(fā)這么多吧及刻,后邊的一百多道我再總結總結**

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末镀裤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子缴饭,更是在濱河造成了極大的恐慌暑劝,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件颗搂,死亡現(xiàn)場離奇詭異担猛,居然都是意外死亡,警方通過查閱死者的電腦和手機峭火,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進店門毁习,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卖丸,你說我怎么就攤上這事纺且。” “怎么了稍浆?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵载碌,是天一觀的道長。 經(jīng)常有香客問我衅枫,道長嫁艇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任弦撩,我火速辦了婚禮步咪,結果婚禮上,老公的妹妹穿的比我還像新娘益楼。我一直安慰自己猾漫,他們只是感情好点晴,可當我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著悯周,像睡著了一般粒督。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上禽翼,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天屠橄,我揣著相機與錄音,去河邊找鬼闰挡。 笑死锐墙,一個胖子當著我的面吹牛,可吹牛的內容都是我干的解总。 我是一名探鬼主播贮匕,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼花枫!你這毒婦竟也來了刻盐?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤劳翰,失蹤者是張志新(化名)和其女友劉穎敦锌,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體佳簸,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡乙墙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了生均。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片听想。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖马胧,靈堂內的尸體忽然破棺而出汉买,到底是詐尸還是另有隱情,我是刑警寧澤佩脊,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布蛙粘,位于F島的核電站,受9級特大地震影響威彰,放射性物質發(fā)生泄漏出牧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一歇盼、第九天 我趴在偏房一處隱蔽的房頂上張望舔痕。 院中可真熱鬧,春花似錦、人聲如沸赵讯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽边翼。三九已至,卻和暖如春鸣剪,著一層夾襖步出監(jiān)牢的瞬間组底,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工筐骇, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留债鸡,地道東北人。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓铛纬,卻偏偏與公主長得像厌均,于是被迫代替她去往敵國和親戈稿。 傳聞我的和親對象是個殘疾皇子违诗,可洞房花燭夜當晚...
    茶點故事閱讀 44,654評論 2 354

推薦閱讀更多精彩內容