面試是一個自我提高的過程,但願如下記錄可以幫助本身在面試中有所收穫。css
第一家是一個天使輪的公司,面試沒有筆試,令我感到很無奈,面試官貌似不是技術,問了我兩個題目:html
第二個題目我沒答上來,由於壓根沒用過。下面是這兩個題目的答案。vue
<!--第一題-->
var xhr = new XMLHttpRquest()
xhr.send("GET","API",true)
shr.onreadystatechange = function(){
if(xhr.readystate === 4){
if(xhr.status === 200){
JSON.parse(xhr.responseText)
}
}
}
<!--第二題-->
var ws = new websocket('http://128.12.1.2:8080')
ws.onmesage = function(e){
console.log(e.data)
}
ws.onopen = function(e){
ws.send('hello')
if(ws.bufferedAmount === 0){
console.log('發送完畢')
}
}
ws.onclose = function(e){
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
}
ws.onerror = function(e){
}
複製代碼
第二家是一箇中型的公司,下面是面試過程:node
<!--大致分爲三類-->
<!--成功--> 200 成功 201 請求成功並建立了新的鏈接 202 已接收 服務器已經接受請求,可是還沒有處理 <!--請求失敗--> 400 錯誤請求 401 未受權 要求驗證身份 403 服務器拒絕 <!--重定向--> 300 多種選擇 301 永久移動 302 臨時移動 <!--服務器錯誤--> 500 服務器代碼運行出錯 503 服務器關閉 複製代碼
這個題我開始使用border的特性畫出了三角形,而後使用border-raduis 使其一邊變成弧形react
width:0px;
border-bottom : 100px solid red;
border-left : 30px solid transparent;
border-right: 30px solid transparent;
border-raduis : 50%
複製代碼
可是面試官說他想要一個任意角度的扇形 我沒想出來,回來看了一波博客,感受這是本身理解出的最簡單的方法·····jquery
<style> .r1 { position: absolute; width: 200px; height: 200px; border-radius: 50%; background-color: yellow; clip: rect(0, 100px, 200px, 0); } .r2 { position: absolute; width: 200px; height: 200px; border-radius: 50%; background-color: white; clip: rect(0, 100px, 200px, 0); transform: rotate(40deg); } </style>
<div class="r1"></div>
<div class="r2"></div>
複製代碼
<!--必須爲position:absolute-->
clip:rect(30px 200px 200px 20px)
複製代碼
值 | 描述 |
---|---|
shape | 設置元素的形狀。惟一合法的形狀值是:rect (top, right, bottom, left) |
auto | 默認值。不該用任何剪裁。 |
inherit | 規定應該從父元素繼承 clip 屬性的值。 |
function test(a,b){
alert(b)
return function(c){
return test(c,a)
}
}
複製代碼
複製代碼
怎麼激活flex佈局css3
display:flex
display:inline-flex
容器的屬性es6
flex-direction: row | row-reverse | column |column-reverse
//主軸的方向flex-wrap: nowrap 默認 | wrap 換行第一行在上面 | wrap-reverse 換行,第一行在下面
// 在項目超過默認軸線排列數量的狀況下 (使用百分比) 超出一行的容器,以什麼方式排列flex-flow: <flex-direction> || <flex-wrap> 默認值 row nowrap
// 前兩個屬性的綜合justify-content: flex-start| flex-end | center| space-between | space-around
// 主軸X軸方向的對其方式align-items: flex-start | flex-end | center | baseline
基於項目裏面的文字的base-line
| stretch
上下填滿 //交叉軸Y軸上面的對齊凡是必須對父元素設置自由盒屬性
display:flex;
,而且設置排列方式爲橫向排列flex-direction:row
;而且設置換行,flex-wrap:wrap
;這樣這個屬性的設置纔會起做用。web
align-content:stretch 默認 | flex-start| flex-end | center| space-between | space-around
項目屬性面試
order:<integer>
默認0
目的排序 數值越小越靠前flex-grow:<integer>
默認0
及在項目中佔幾份 通常爲1
份flex-shrink: <integer> 項目縮小比例
默認1
在空間不足時,爲了使全部項目在一行,數值越大小放嚴重flex-basis: <length> || auto
默認爲auto
若是設置px
則佔據實際寬度flex:
是上面三個值的簡寫 快捷值有auto(1 1 auto) none(0 0 auto)
align-self:
除了 auto
都和 align-items
同樣估計這個要認真學一下了
// 仍是用本身的蠢方法實現的
var nodes = [
{ id: 10, title: 'dw10', parentId: 4 },
{ id: 2, title: 'dw2', parentId: 0 },
{ id: 4, title: 'dw4', parentId: 2 },
{ id: 12, title: 'dw12', parentId: 2 },
{ id: 8, title: 'dw8', parentId: 4 },
{ id: 9, title: 'dw8', parentId: 12 }
]
nodes.sort((a, b) => {
return a.parentId - b.parentId
})
function toTree(arr) {
const root = arr[0]
_Tree(arr, root)
return root
}
function _Tree(arr, root) {
for (let i = 0; i < arr.length; i++) {
if (arr[i].parentId === root.id) {
if (root.child) {
root.child.push(arr[i])
} else {
root.child = [arr[i]]
}
}
}
var child = root.child
if (child && child.length !== 0) {
for (let i = 0; i < child.length; i++) {
_Tree(arr, child[i])
}
}
}
toTree(nodes)
複製代碼
本身的理解
class Man{
constructor(name){
this.name = name
}
getName(){
return this.name
}
static Factory(name){
return new Man(name)
}
}
複製代碼
<!--注意點:必定要在子盒子裏面添加內容,由於子盒子的div自己是沒有寬高的,若是你不加內容,根本沒法實現效果-->
<style> .one { position: relative; width: 200px; height: 200px; background-color: rebeccapurple; } .two { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } </style>
<div class="one">
<div class="two">wo</div>
</div>
<style> .one { display: table-cell; text-align: center; vertical-align: middle; width: 100px; height: 100px; background-color: red; } .two { display: inline-block; } </style>
<div class="one">
<div class="two">wo</div>
</div>
複製代碼
var str = 'i have a dream'
<!--第一種-->
var str1 = str.replace(/d\w+m$/g,'apple')
var index_d = str.indexOf('d')
var arr = str.split('')
<!--第二種-->
var arr2 = arr.slice(0,index_d) // 0 到 d 可是不包括d 不改變原來 返回已被被截取的目標 arr和str 都有這樣的方法 和substring 的參數同樣 起始位置
var str2 = arr2.concat('apple').join('')
<!--第三種-->
var arr3 = str.split('')
var arr4 = arr3.splice(index_d,5,'apple') // arr3 = 'dream' 數組專有 改變原有數組
var str3 = arr3.join('')
<!--還有好多種...-->
複製代碼
對string 和 array的全部操做方法進行總結
string
charAt(index) && chartCodeAt(index)
返回指定位置的字符 返回指定位置的字符的unicode
編碼substr(startIndex,length) substring(startIndex,endIndex)
截取的字符串不包括end
。 slice()
和substring同樣,可是能夠是負數 以上三種不對源字符串有影響toUpperCase toLowerCase
indexOf indexLastOf()
split
array
indexOf()
push pop shift unshift
splice(index,length,....)
會影響原數組slice(index,end)
不會影響原數組forEach((item,index,arr)=>{})
不產生新數組,可是arr這個參數能夠改變原數組map((item,index,arr)=>{})
return
能夠產生一個新數組 arr 不能夠操控原數組reduce((prevalue,item,index,arr)=>{},startVaule)
聚合 startValue
是第一次循環是prevalue
的初始值// 統計字符串中字符出現的次數
let str = 'fsadfasdfagagajkgnahjgasdjfajsfjk';
let strArr = str.split('');
console.log(strArr);
let sr = strArr.reduce((preValue, curValue, curIndex, array) => {
if (!preValue[curValue]) {
preValue[curValue] = 0;
}
preValue[curValue] += 1;
return preValue;
}, {})
console.log(sr);
複製代碼
flier((item,index,array)=>{ return true})
過濾sort()
排序arr.sort((left,right)=>{
//升序
return left-right
// 降序
return right-left
})
複製代碼
盒子模型會有那些問題:
種類 | 解決方法 |
---|---|
上下兩個div | 底部元素產生bfc,使用position:absolute |
父子元素div | 父級元素加上border:1px solid transparent 或者overflow:hidden |
function observer(obj){
// 遞歸邊界
if(!obj || typeof obj !== 'object'){
return
}
Object.keys(obj).forEach((item,index,arr)=>{
defineReactive(obj,item,obj[item])
observer(obj[item])
})
}
function defineReactive(data,key,val){
Object.defineProperty(data,key ,{
enumerable:true,
configurale:true,
get:function(){
// 須要在這裏添加訂閱者
return val
},
set:function(newValue){
val = newValue
console.log('屬性'+key+'被監聽了'+'如今的值爲'+newValue)
// 在這裏通知訂閱者去更新視圖
}
})
}
var library = {
book1: {
name: ''
},
book2: ''
};
observer(library)
library.book1.name = 'vue權威指南';
library.book2 = '沒有此書籍';
// 再往下面的東西不想啃了 這裏用到的是 發佈-訂閱者模式
複製代碼
請求頭字段 | 做用 |
---|---|
Cache-control | 控制cookie 的緩存 |
Connection | 瀏覽器想要的鏈接方式 好比keep-alive |
Date | 報文建立報文時間 |
If-Modified-Since | 對應響應頭裏面的 Last-Modofied 控制緩存 |
If-None-Match | 配合響應頭ETag使用 |
Host | 請求的服務器域名 |
響應頭 | 做用 |
---|---|
Location | 客戶端重定向的uri |
server | 服務器的名字 |
ETag | 指紋 |
Last-Modofied | 上一次服務器文件修改的時間 |
下面是http請求中cache-conctrol
清除浮動
overflow:hidden
,按照它的第一個特性,應該將子元素超出的部分截掉,可是由於子元素有浮動,沒法裁剪,全部只能由父元素增長高度去包裹住子元素,使得父元素擁有了高度,而這個高度是跟隨子元素自適應的高度,這樣就把浮動的子元素包含在父元素內了。怎麼產生bfc?
看到有道友文章中把display:table也認爲能夠生成BFC,其實這裏的主要緣由在於Table會默認生成一個匿名的table-cell,正是這個匿名的table-ccell生成了BFC
瀏覽器專門創建了一個反常規思惟的從右往左的匹配規則就是爲了避免對全部元素進行遍歷 遍歷的節點會變少
<script async src="script.js"></script>
複製代碼
當瀏覽器遇到 script 標籤時,文檔的解析不會中止,其餘線程將下載腳本,腳本下載完成後開始執行腳本,腳本執行的過程當中文檔將中止解析,直到腳本執行完畢
<script defer src="myscript.js"></script>
複製代碼
當瀏覽器遇到 script 標籤時,文檔的解析不會中止,其餘線程將下載腳本,待到文檔解析完成,腳本纔會執行。