目錄
1.你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?
2.每個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
58.已知如下代碼，如何修改才能讓圖片寬度爲 300px ？注意下面代碼不可修改。
1.你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麼?
Firefox：gecko內核
Safari:webkit內核
Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome:Blink(基於webkit，Google與Opera Software共同開發)
2.每個HTML文件裏開頭都有個很重要的東西，Doctype，知道這是幹什麼的嗎？
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。（重點：告訴瀏覽器按照何種規範解析頁面）
3.div+css的佈局較table佈局有什麼優點？
1.表現與結構相分離。
2.頁面加載速度更快、結構化清晰、頁面顯示簡潔。
3.易於優化（seo）搜索引擎更友好，排名更容易靠前。
4.性能更高，因爲table變化很容易造成性能的問題，比如重繪，迴流
4.CSS選擇器有哪些？
1.標籤選擇器
2.id選擇器
3.類選擇器
4.子選擇器
ul>li ,指的第一代子li選擇器
5.後代選擇器
ul li,指的是後代所有的li元素
6.相鄰選擇器
li+li,除了本身的所有相鄰選擇器
h1+p，h1相鄰後面一個兄弟元素起作用
7.通配選擇器
8.屬性選擇器
a[href="zhuyu"]
9.僞類選擇器
5.@import和link引入css的差別
1.link是標籤不存在兼容性問題
2.link是標籤可以通過js操縱
3.link是邊加載html邊加載css，而@import是加載完成html再開始加載css，這樣網絡延遲後很容易造成沒有css
4.link是標籤，可以設置其他屬性，但是@import只能加載css屬性
6.常用的行內元素有哪些，塊級元素有哪些
常用塊級元素：h1,h2,h3,div,p,ul,li
常用行內置換元素（可以設置寬高）：image,input
常用行內非置換元素：span.em,i,a
7.css3新增僞類選擇器
p:fisrt-child p:last-child p:nth-child(3)意思是p標籤是否是他父類元素的第一元素，如果是給p標籤加一個內容。
p:first-of-type :last-of-type :only-of-type 指的是第幾個了，不再做判斷
a:link未被訪問的鏈接，a:visited已經被拜訪的內容
:before :after前後插入內容，content設置插入內容的值，可以設置插入內容的樣式。
8.typeof打印奇怪的幾個
typeof(NAN)是打印一個number類型
typeof(funtion(){})構造函數打印出function
typeof(Object)是一個function，因爲是構造函數Object
9.模塊化應用
三個js文件中的方法層次引用，不使用模塊的形式
使用script依次引入，順序必須按照，因爲是強依賴，函數中的變量必須是全局變量，才能暴露給對方，缺點造成全局變量污染，第二引入麻煩，很容易分不清代碼關係。
使用模塊化關係
AMD：異步模塊定義
使用require和define定義。
CommonJs
是node.js規範
不是異步的，是同步一次性加載，構建工具高度自動化解決
10.inline-block之間的空白解決方案
inline-block之間的空白導致出現的問題，比如左邊是一個導航，右邊是一個導航，通過clac來計算長度的，那麼正規算出來長度是應該在一行中，有了空白那麼長度就會不一致。
1.將上面</div>和下面的<div>寫在一排。
2.</div不閉合，寫在下一排。
3.父元素不設置字體大小，子元素重設置
11.僞類選擇器
1.：active，點擊纔有的
2.：link未訪問
3.：visited已經訪問過的
4.：hover懸浮在上面的
12.em,rem,px區別
em:相對元素，向上繼承直至到根元素，默認16px,相對於父元素設置，可以繼承
rem:參照與根元素設置html
px:一個像素，更加精確的還原設計圖。
13.postion內容詳解
默認：static，top,left，bottom,right，z-index等等屬性沒有作用
fixed：脫離文檔流，可以設置top等等屬性，可以用來設置固定導航欄和固定背景圖片
relative：相對定位
position:absolute絕對定位
position:sticky粘性定位
14.關於js異步循環操作的問題
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script>
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].onclick = function () {
alert(i);
}
}
</script>
效果：每次都打印出4，原因是，js單線程的，事件，定時器等等被阻塞執行
方法一
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
li[i].index = i;
li[i].onclick = function () {
alert(this.index);
}
}
方法二：將全局作用域改爲局部作用域，使用let變量。
方法三：使用閉包的知識
<script>
var li = document.getElementsByTagName("li");
for (var i = 0; i < li.length; i++) {
a = function (i) {
li[i].onclick = function () {
alert(i);
}
};
a(i)
}
</script>
15.關於for語句的理解錯誤
打印出來是18，並列的內容執行時，滿足兩個其中一個條件也要繼續執行。
for (i = 0, j = 0; i < 6, j < 10; i++, j++) {
x = i + j;
}
console.log(x);
16.var，不加var，let，const用法區別
var在方法裏面定義是局部變量，在方法外面是全局變量
不加var，在執行方法後是全局變量。
let：函數作用域，不能重複聲明，不會變量提升，不會預處理。
const：常量定義用法和let一樣，但是不能改變其值，定義必須賦值。
17.關於變量提升和預處理的問題
<script>
var a = 10;
console.log(a);
function fn() {
console.log(a);
var a = 10;
}
fn();
console.log(a);
</script>
打印出來結果是10 undefined 10，原因是，變量提升和預處理的原因，裏面定義了變量，就不會在外面去找，也就是裏面的var預處理提升到函數裏面第一句，但是沒賦值，也就是undefined
<script>
var a = 10;
console.log(a);
function fn() {
console.log(a);
a = 20;
}
fn();
console.log(a);
</script>
打印結果是10 10 20。因爲沒有預處理的變量提升，就在外面尋找變量，後面的a=20,修改變量值，因爲不加var是全局變量了。
優先級：變量》函數》參數》提升
1.變量不管是在函數裏面還是函數外面，預處理變量提升的問題都是隻提升預處理，沒賦值，例子把調用了變量的函數放在var前面執行，那是沒有值的，只是定義了。
function fn1() {
console.log(a);
}
fn1();//undefined
var a = 10;
var a = 20;
function fn2() {
console.log(a);
}
fn2();//20
2.變量和函數覆蓋的問題，變量和變量，函數和函數後面覆蓋前面的
如果是變量的形式定義函數的話，那麼和函數相比不管怎麼樣的順序，優先級都是變量定義的函數。
<script>
function fn1() {
console.log("1")
}
var fn1 = function () {
console.log("2")
}
fn1();
</script>
出現下面這種情況一般是變量優先級高於函數，但是假如變量只是定義了，沒有賦值，同名的函數就會覆蓋,打印出好函數
<script>
function x() {};
var x ;
console.log(x);
</script>
18.Javascript瀏覽器垃圾回收機制
1.Gc回收機制：
Javascript具有自動垃圾回收機制(GC:Garbage Collecation)，也就是說，執行環境會負責管理代碼執行過程中使用的內存。
原理：原理：垃圾收集器會定期（週期性）找出那些不在繼續使用的變量，然後釋放其內存。
函數定義的局部變量在函數執行完成後就自動刪除，除非含有內部函數的閉包不會被清除。全局變量在頁面執行完成後清除。
實例：
<script>
function f1() {
var a = {
name: "朱宇",
age: 20
}
}
function f2() {
var b = {
name: "朱宇",
age: 20
};
return b;
}
var a = f1();
var b = f2();
try {
console.log(a);
} catch (error) {
console.log(error)
}
console.log(b);
</script>
效果：a爲undefied,b爲對象實例。返回的對象掛載在Windows上面，那麼這樣的好處就是變成全局變量了，那麼就不會被銷燬，因此保存在window上面。
2.標記清除
原理：js中最常用的垃圾回收方式就是標記清除。當變量進入環境時，例如，在函數中聲明一個變量，就將這個變量標記爲“進入環境”。從邏輯上講，永遠不能釋放進入環境的變量所佔用的內存，因爲只要執行流進入相應的環境，就可能會用到它們。而當變量離開環境時，則將其標記爲“離開環境”。通俗來說，就是使用一個函數包裹全局變量，然後執行這個函數不需要的函數變量就無效了，因此像閉包這種引入外部變量被清除了，然後閉包被清除。
<script>
function fn1() {
var a = 10;
var b = 20;
var c = 30;
var d = 40;
}
fn1();
</script>
3.引用計數
原理：引用計數的含義是跟蹤記錄每個值被引用的次數。當聲明瞭一個變量並將一個引用類型值賦給該變量時，則這個值的引用次數就是1。如果同一個值又被賦給另一個變量，則該值的引用次數加1。相反，如果包含對這個值引用的變量又取得了另外一個值，則這個值的引用次數減1。當這個值的引用次數變成0時，則說明沒有辦法再訪問這個值了，因而就可以將其佔用的內存空間回收回來。這樣，當垃圾回收器下次再運行時，它就會釋放那些引用次數爲0的值所佔用的內存。
內存管理的內容：
內存管理GC時，你會造成短時間無法響應，對於遊俠這種快速響應的，問題就會很大。
優化策略：
1.增量GC：一次處理一點，下次再處理的一點
2.分類GC:將回收的對象分類爲臨時性，持久性，減少遍歷，減少時間
19.內存泄露和內存溢出區別及其原因
內存泄露：佔用內存沒有及時釋放，內存泄露過多會造成內存溢出。
內存泄露：運行內存超過提供的內存。
到處內存溢出的原因：
1.佔用內存較大的全局變量。
2.閉包的使用。
3.沒有及時清理的定時器。
20.閉包相關知識
閉包定義：內部函數引用了外部變量
閉包應用：
1.封存局部變量：
<script>
function fn1() {
var money = 100000;
function fn2() {
money++;
console.log(money);
}
return fn2;
}
var f = fn1();
f();
f();
</script>
2.上面提到過的用於局部作用域，使用閉包函數封存局部作用域
3.內部函數形參引用外部函數傳來的實參
21.設置內容過多自動隱藏
.ell {
text-overflow: ellipsis;//超過部分使用省略號
white-space: nowrap;//文本不會換行
overflow: hidden;//超過部分隱藏
}
text-overflow超出文本寬度怎麼處理，clip直接裁剪，ellipsis使用省略號
white-space:不能換行，也就是防止指定寬度，你卻換行到第二行。還有其他的屬性normal清楚空格，pre保留空格
22.清楚浮動僞類總結
.clearfloat:after {
display: block;
content: "";
clear: both;
}
這種設置僞類清楚浮動的好處就是，可以定義一個類，專門用於清除浮動，而且沒有其他的副作用，如果使用overflow:hidden有的影響就是超過部分的內容就被隱藏了，邊框以內的內容都是超出隱藏了，那麼問題來了，假如你的內容需要蓋住下面的邊框，超過邊框以內的內容都被隱藏了，那麼就無效了，所以這樣清楚浮動有弊端
23.img和input，span等內容水平對齊
在需要對齊的兩個都採用採用vertical:middle，才能存在一行
24.關於搜索框裏面的搜索圖標
圖標內容都是採用padding-left就可以了，但是input搜索框會不斷地增大，注意調整搜索框的大小。
25.輪播圖的製作
26.tab選項卡的切換
27.關於position中fixed佈局將頁面導航欄固定
28.關於box-shadow
box-shadow:x y 模糊度大小 color inset
分別是x寬度，y寬度，模糊度大小，陰影顏色，默認不寫inset是外陰影，寫了inset爲內陰影
當x,y都爲0，這樣四周都是一樣的陰影效果，通過設置模糊度大小設置其他
x,y爲正值的情況下，向右向下陰影
29.關於函數this指向打印
<script>
function Foo() {
getName = function () {
alert(1)
};
return this;
}
Foo.getName = function () {
alert(2)
}
Foo.prototype.getName = function () {
alert(3)
}
var getName = function () {
alert(4)
}
function getName() {
alert(5)
}
//Foo.getName();//2
//getName(); //4
//Foo().getName();//1
//getName();//1
// new Foo().getName();//3
</script>
解釋：關於第一個function Foo()這一個是函數方法getName，不要當做對象方法了，因爲對象的方法是具有this.getName指向的。那麼這個函數裏面的getName是一個匿名函數，並且這個匿名函數沒有加var，意味着執行了這個函數後就是全局變量，綁定在全局window上面，那return返回的this是什麼意思呢，意思就是window，最近指向就是window。倘若將他當做對象實例化的話，這個方法只會去原型對象裏面尋找，不會在對象中找到這個，因爲沒有this指向。
30.數組去重方法介紹
30.1利用object特性
var b = {
5: 10,
"5": 20
}
這個打印出來是隻有一個5：20的鍵值對，也就是會將索引字符串轉換爲數字，並且後面的索引覆蓋前面的。
那麼可以利用這一屬性封裝出一個去重函數，注意和boolean值做判斷時，也就是true==true，後面不要變成true="true"了。
<script>
var a = [12, 45, 45, "45", 64];
var b = {
a: 142,
b: 244
}
console.log(b)
function unchat(arr) {
var brr = [],
obj = {};
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = true//設置這一個的作用是第二個內容
brr.push(arr[i]);
}
}
return brr;
}
console.log(unchat(a));
</script>
30.2使用ES6中的Set自動去重
<script>
var a = [12, 16, "12", "18", 82, 12];
var b = new Set(a);
console.log(b);
</script>
關於Set數據結構的其他內容提示。
<script>
var a = [12, 16, "12", "18", 82, 12];
var b = new Set(a);
//添加add
a.add("20");
//測試長度
console.log(a.size);
//刪除delete
a.delete("12");
//for of遍歷
for (let i of a) {
console.log(a);
}
//判斷是否含有目標內容has
console.log(a.has(12));
//將set轉換array
console.log(Array.from(a));
</script>
30.3.Map數據結構介紹
<script>
var map = new Map();
map.set("zhuyu", "zhuming")
console.log(map);
console.log(map.get("zhuyu"));
console.log(map.size)
var a = {
name: "zhuyu",
age: 20,
na: "1234"
}
console.log(Object.keys(a).length) //測試對象長度
</script>
31.0.1+0.2是否等於0.3
由於沒有浮點型類型，所以是二進制轉換爲10進制來看，所以不等於0.3.
32.關於閉包封裝變量的題
<script>
function Foo() {
var i = 0;
return function () {
console.log(i++);
}
}
var f1 = Foo();
var f2 = Foo();
f1();//0
f1();//1
f2();//0
</script>
33.判斷是否爲數組的3種方法
<script>
var a = [12, 45, 45, 78];
var b = {
name: "zhuyu",
age: 21
};
var c = 12;
//第一種
console.log(a instanceof Array);
console.log(b instanceof Array);
console.log(c instanceof Array);
//第二種
console.log(a.constructor.name);
console.log(b.constructor.name);
console.log(c.constructor.name);
//第三種
console.log(Object.prototype.toString.call(a));
console.log(Object.prototype.toString.call(b));
console.log(Object.prototype.toString.call(c));
</script>
34.事件冒泡和事件捕獲
事件冒泡：從目標位置向外層執行
事件捕獲：從最外層到目標位置執行
瀏覽器默認事件冒泡，使用addEventListener來指定事件冒泡和事件捕獲，第三個參數用於表示，true:事件捕獲，false:事件冒泡，在ie9及其以上支持事件捕獲
<style>
#main1 {
width: 400px;
height: 400px;
background-color: red;
}
#main2 {
width: 300px;
height: 300px;
background-color: green;
}
#main3 {
width: 200px;
height: 200px;
background-color: orange;
}
#main4 {
width: 100px;
height: 100px;
background: black;
}
</style>
</head>
<body>
<div id="main1">
main1
<div id="main2">
main2
<div id="main3">
main3
<div id="main4">
main4
</div>
</div>
</div>
</div>
<script>
function getId(id) {
return document.getElementById(id);
}
getId("main1").addEventListener("click", function () {
console.log("main1");
}, false);
getId("main2").addEventListener("click", function () {
console.log("main2");
}, flase)
getId("main3").addEventListener("click", function () {
console.log("main3");
}, false)
getId("main4").addEventListener("click", function () {
console.log("main4");
}, false)
</script>
35.阻止事件冒泡和默認事件
阻止事件冒泡
getId("main1").onclick = function (e) {
var e = window.event || e
if (e.stopPropagation) {
e.stopPropagation()
} else {
e.cancelBubble = true;
}
}
阻止默認事件
<script>
var a = document.getElementById("a");
a.onclick = function (e) {
if (e.preventDefault) {
e.preventDefault();
console.log("zhuyu")
} else {
window.event.returnValue == false;
console.log("ie")
}
}
</script>
36.new操作符，fas發生了哪些事情
1.創建對象
2.object.__proto__=Fun.prototype
3.this指向從window等轉向此對象
37.js預加載
什麼是預加載：就是提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染
預加載的好處：增加用戶體驗，但是會加載服務器的負擔
實現預加載的三種方法
1.使用css中的background
可通過CSS的background屬性將圖片預加載到屏幕外的背景上。只要這些圖片的路徑保持不變，當它們在Web頁面的其他地方被調用時，瀏覽器就會在渲染過程中使用預加載（緩存）的圖片。簡單、高效，不需要任何JavaScript。
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
2.使用單純js
<div class="hidden">
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var images = new Array()
function preload() {
for (i = 0; i < preload.arguments.length; i++) {
images[i] = new Image()
images[i].src = preload.arguments[i]
}
}
preload(
"http://domain.tld/gallery/image-001.jpg",
"http://domain.tld/gallery/image-002.jpg",
"http://domain.tld/gallery/image-003.jpg"
)
//--><!]]>
</script>
</div>
3.使用ajax
window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.js');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://domain.tld/preload.css');
xhr.send('');
// preload image
new Image().src = "http://domain.tld/preload.png";
}, 1000);
};
38.js延遲加載(懶加載)
第一種defer
<script src="file.js" defer> </script>
第二種ansyc
<script src="file.js" async> </script>
第三種動態DOM創建
39.嚴格模式
優點：幫助解決一些不規範的js代碼，減少壓縮體積
缺點：會造成運行中斷，壓縮可能會出問題
40.判斷圖片是否加載完成
<img src="./1.jpg" alt="" id="img">
<script>
var img = document.getElementById("img");
var timer = setInterval(function () {
if (img.complete) {
clearInterval(timer);
alert("zhuyu")
} else {
alert("失敗")
}
}, 10)
</script>
41.判斷數據類型
const type = data => Object.prototype.toString.call(data).replace(/^\[object (.+)\]$/, '$1').toLowerCase()準確判斷數值類型。
42.作用域細節
<script>
function fun(n, o) {
console.log(o);
return {
fun: function (m) {
return fun(m, n)
}
}
}
var a = fun(0);
a.fun(1);
a.fun(2);
a.fun(3);
console.log("第二次使用")
var b = fun(0).fun(1).fun(2).fun(3);
var c = fun(0).fun(1);
c.fun(2);
c.fun(3);
</script>
43.事件委託（事件代理）
爲什麼要使用事件委託：在對於多個一樣的選項標籤，比如li這種，你綁定事件的時候使用循環選取，這個時候後期添加的節點沒有在選擇之中，那麼後期添加的節點是沒有綁定上事件。我們通過事件冒泡，事件不直接綁定在li上面，而是後冒泡的父節點裏面。這樣的好處在於通過後面的父節點獲取實時節點綁定改變內容。
<body>
<ul id="uls">
<li class="li">1</li>
<li class="li">2</li>
<li class="li">3</li>
</ul>
<button id="btn">添加節點</button>
<script>
var uls = document.getElementById("uls")
var li = document.getElementsByClassName("li")
console.log("開始執行")
for (let i = 0; i < li.length; i++) {
console.log(li[i])
li[i].onclick = function () {
this.style.background = "red";
}
}
var btn = document.getElementById("btn");
var a = li.length + 1;
btn.onclick = function () {
var node = document.createElement("li");
node.innerHTML = a++;
uls.appendChild(node);
}
</script>
</body>
這個時候後期添加節點是沒有綁定到事件的，則使用事件綁定。
在IE/Opera中，是window.event，而在Firefox中，是event
注意：獲取的tar是最裏層節點。
<body>
<ul id="uls">
<li class="li">1</li>
<li class="li">2</li>
<li class="li">3</li>
</ul>
<button id="btn">添加節點</button>
<script>
var uls = document.getElementById("uls")
var li = document.getElementsByClassName("li")
console.log("開始執行")
uls.onclick = function (e) {
var e = window.event || e;
console.log(e.srcElement)
var tar = e.srcElement || e.target;
if (tar.nodeName == "LI") {
tar.style.background = "red";
}
}
var btn = document.getElementById("btn");
var a = li.length + 1;
btn.onclick = function () {
var node = document.createElement("li");
node.innerHTML = a++;
uls.appendChild(node);
}
</script>
</body>
44.關於js類型轉換的問題
遵守三條準則
1.加法裏面：字符串第一優先，number第二優先，沒有字符串或者數字，那麼除了null,true和其他相加轉換爲1，undefined這種是相加爲NAN，對象和任何相加爲string
2.減法爲轉換爲數字進行運算
45.websocket和ajax
websocket是一直連接通訊，ajax是請求才連接，不請求就不連接
題外話：document.getElementByTagName打印出來是HTMLCollection，函數參數arguments打印出來是arguments不是數組，使用Array.from.
46.獲取一個節點下面的所有節點
<div id="d">
<p>
<li><span></span></li>
</p>
<span><em></em></span>
</div>
<script>
var d = document.getElementById("d")
console.log(d.getElementsByTagName("*"))
</script>
47.給數組添加一個實例化固有的去重方法
每一個對象都有的方法的話，在原型方法上面進行方法定義。
<script>
Array.prototype.unique = function () {
var obj = {};
var b = []
for (let i = 0; i < this.length; i++) {
if (!obj[this[i]]) {
obj[this[i]] = true;
b.push(this[i]);
}
}
return b;
}
var arr = [12, 12, "12", 45, 67];
console.log(arr.unique());
</script>
48.nextElementSibling
獲取下一個兄弟節點，用於郵箱驗證成功，然後後面緊挨着的兄弟節點添加內容
<body>
<input type="text"><strong></strong>
<button id="btn">點擊</button>
<script>
var input = document.getElementsByTagName("input")[0];
var btn = document.getElementById("btn");
btn.onclick = function () {
input.nextElementSibling.innerHTML = "點擊成功"
}
console.log(input);
</script>
</body>
49.將多維數組轉換爲一維數組
<script>
function Arr(arr, brr) {
var brr = brr || []
for (let i = 0; i < arr.length; i++) {
if (Object.prototype.toString.call(arr[i]) == "[object Array]") {
Arr(arr[i], brr);
} else {
brr.push(arr[i]);
}
}
return brr;
}
var b = []
Arr([12, 45, 78, [12, 45, [211, 65]]], b);
console.log(b)
</script>
這個裏面使用兩個參數，第二個參數使用一個固定數組傳入，然後使用遞歸。
50.數組解構，箭頭函數
<script>
var arr = (a, ...b) => {
return [a, b]
}
console.log(arr(1, 4, 4, 4, 4, 4))
</script>
效果：[1,[4,4,4,4,4]]
51.合併對象
<script>
var a = {
name: "zhuyu",
thing: {
date: 2019,
gun: "yes"
}
}
var b = {
age: 21
}
var ob = Object.assign(a, b);
console.log(ob)
</script>
這個是一個淺拷貝，也就是複製的內存地址，沒有創建新的內存空間。
11.在HTML中添加ico文件
<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>
52.將一個數組中的多個小數組轉化爲一個對象數組
var a=[[1,2,3],[4,5,6],[7,8,9],[10,11,12]];
function f1(a){
var arr=[];
arr=a.map((item)=>{
[x,y,z]=item;
return {x,y,z}
})
return arr;
}
console.log(f1(a));
53.解決跨域
- JSONP 跨域 ： 這種方式跨域是通過script標籤引入js文件，這個js文件又會返回一個js函數調用，也就是請求後通過callback的方式回傳結果
優點：
1.不受同源策略的限制
2.兼容性更好
3.支持老版本瀏覽器
缺點：只支持get請求 - CORS 跨域
其原理是使用自定義的http頭部請求，讓瀏覽器與服務器之間進行溝通，從而決定請求或響應是否成功
優點：
1.支持所有類型的http請求
2.比jsonp有更好的錯誤處理機制
3.被大多數瀏覽器所支持 - h5的postMessage方法
window.postMessage(message,targetOrigin) 方法是html5新引進的特性，可以使用它來向其它的window對象發送消息，無論這個window對象是屬於同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。這種方法不能和服務端交換數據，只能在兩個窗口（iframe）之間交換數據
54.http狀態碼解析
301，302 都是HTTP狀態的編碼，都代表着某個URL發生了轉移，不同之處在於：
301 redirect: 301 代表永久性轉移(Permanently Moved)。
302 redirect: 302 代表暫時性轉移(Temporarily Moved )。
都是用過location對象進行轉移，並且301返回一個重定向的新的網址，302返回一個暫存的舊的網址
400客戶端語法錯誤，服務器無法識別
404客戶端請求的數據不存在
401沒有帶權限，或者權限錯誤
403帶了權限，並且已經驗證了
500服務器內容錯誤
501服務器無法完成請求的功能
502網關或者代理服務器收到一個無效的響應
55.ajax的優勢
優點
1.無刷新頁面請求，使產品更快，更小更友好
2.服務器端的任務轉嫁到客戶端處理
3.減輕瀏覽器負擔，節約帶寬
4.基於標準化對象，不需要安裝特定的插件
5.徹底將頁面與數據分離
缺點
1.無法使用回退按鈕
2.不利於網頁的SEO
3.不能發送跨域請求
56.get和pos請求的區別
1.get採用明文傳輸，post採用request body傳輸，get相對於post不那麼安全
2.GET請求會被瀏覽器主動cache，而POST不會，除非手動設置。
3.get請求回退無害，post請求回退會重寫請求
4.get請求會有長度限制，post一般是沒有的
5.get只支持url編碼，post幾乎支持所有編碼
57.display:none,opacity:0;visibility:hidden區別
總結一下： 結構： display:none: 會讓元素完全從渲染樹中消失，渲染的時候不佔據任何空間, 不能點擊， visibility: hidden:不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見，不能點擊 opacity: 0: 不會讓元素從渲染樹消失，渲染元素繼續佔據空間，只是內容不可見，可以點擊
繼承： display: none和opacity: 0：是非繼承屬性，子孫節點消失由於元素從渲染樹消失造成，通過修改子孫節點屬性無法顯示。 visibility: hidden：是繼承屬性，子孫節點消失由於繼承了hidden，通過設置visibility: visible;可以讓子孫節點顯式。
性能： displaynone : 修改元素會造成文檔迴流,讀屏器不會讀取display: none元素內容，性能消耗較大 visibility:hidden: 修改元素只會造成本元素的重繪,性能消耗較少讀屏器讀取visibility: hidden元素內容 opacity: 0 ： 修改元素會造成重繪，性能消耗較少
聯繫：它們都能讓元素不可見
58.已知如下代碼，如何修改才能讓圖片寬度爲 300px ？注意下面代碼不可修改。
<img src="1.jpg" style="width:480px!important;”>
解決：
<img src="1.jpg" style="width:480px!important; max-width: 300px">
<img src="1.jpg" style="width:480px!important; transform: scale(0.625, 1);" >
<img src="1.jpg" style="width:480px!important; width:300px!important;">