js，jquery備忘錄

1.var s = str.charCodeAt();轉ASCII碼

2.String.fromCharCode(65);轉字母

3.es6 ... (擴展運算符)，將一個數組轉化成由逗號分割的隊列。

如：arr = [1,2,3] ...arr => 1,2,3;

當你須要找一個數組中的最小值的時候即可以Math.min(...arr);

4.arr.reduce(function(){},初始值)；累計一個數組中的元素,

如累加：arr.reduce(function(x,y){

return x + y;

}，0)//初始值我理解爲x的初始值爲0；也就是須要求和的值。

5.es6 set 集合長度用size；

6.es7 padStart（自定義長度，自定義值）頭部補全

如：「123」.padStart（「5」，「0」）；=》「00123」；

7.Number.isInterger()用來判斷一個數是不是整數。

8.判斷兩個數組是否相等：arr1.toString()==arr2.toString().

9.實現反轉的sort排序：sort（x=>1）//箭頭函數

10.replace（）想要替換全部匹配的值時，要在正則表達式那裏加上g，也就是全局，不然他只會匹配第一個。

11.$("li:gt(index));取大於索引的全部值。

12.判斷二進制數可否被3整除正則表達式：var reg = /^0*(1(01*0)*10*)*$/

13.instanceOf 用來判斷一個對象是不是由另外一個對象生成的

typeOf 用來判斷類型

14.//判斷二進制數可否被五整除：

/*let divisibleByFive = /^(0|1(10)*(0|11)(01*01|01*00(10)*(0|11))*1)+$/*/

15.在一個數組中有null和false時；

在轉化爲字符串時，null會變成空位，false會變成「false」；

在判斷數組元素是否爲0或者「0」時，要用===；由於若是是==；false會轉化爲0。

16.將二維數組扁平化：[].concat(...arr);

17.四捨五入且保留兩位小數的方法：num.toFixed(2);保留兩位小數；

若是是 +num.toFixed(2)則表明整數依然保留整數，小數保留兩位。

Math.round(num*100)/100；

18.反轉一個數組：不用reverse（）：reverse=a=>[...a].map(a.pop,a)；

19.判斷url是否能被正確連接

function checkUrl(url, name)
{
$.ajax({
url: url,
type: "get",
dataType : 'jsonp',
crossDomain : true,

complete: function(xhr, textStatus) {
if( xhr.readyState === 4 && xhr.status === 200 )
{
表明能訪問連接成功
}
}
});
}

 

20.在作一些網頁上的tab欄切換的時候，建議用jquery的show（）和hide（）方法來實現。（且默認隱藏的元素也用hide（）方法初始化）。

21.jquery記錄index：$（this）.index（）。

22.substring（index）表明從索引處開始截取；substring（a，b）表明從下標爲a處截取長度爲b-a個字符。（參數不爲負數）
slice（）和substr（）形似，參數能夠爲負數。

23.運用jquery或者js不能直接獲取到after，before的樣式；若是須要修改此樣式，應該新定義一個class，再給class定義after或before去覆蓋以前的樣式。

24.當運用layui的彈出層想彈出layui的表格時，能夠以下寫：

html頁面：
<script type="text/html" id="alerttable">//注意type
<div id="creattable"></div>
</script>
js：
layui.use('table',function(){
var table = layui.table;

table.render({
elem:「#creattable」,.....//子節點
})
})
layer.open({
area:['1200px','600px'],
content:$("#alerttable").html()//父節點
});

25.$.extend(合併到此處，對象1，對象2)合併對象。

26.ES6 對象提供了 Object.assign()這個方法來實現淺複製。（將源對象可枚舉的屬性拷貝給目標對象）。

27.驗證的八個正則表達式（手機號，密碼，身份證，日期，驗證碼等）https://www.cnblogs.com/hejun26/p/9811090.html。

28.jquery提供closest（selector）方法，尋找所匹配的第一個選擇器元素，dom向上遍歷。

29.Object.create()建立一個新對象，使用現有的對象來提供新建立的對象的__proto__。（能夠用此方法來實現類式繼承）

30.Symbol的做用很是的專注，換句話說其設計出來就只有一個目的——做爲對象屬性的惟一標識符，防止對象屬性衝突發生。
(https://www.zhangxinxu.com/wordpress/2018/04/known-es6-symbol-function/)

31.js移除Array中指定元素：

首先須要找到元素的下標：

var array = [2, 5, 9];
var index = array.indexOf(5);
使用splice函數進行移除：

if (index > -1) {
array.splice(index, 1);
}

32.用 apply 將數組添加到另外一個數組
concat確實具備咱們想要的行爲，但它實際上並不附加到現有數組，而是建立並返回一個新數組。 可是咱們想要附加到咱們現有的陣列：
var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

33.正則表達式中\s表明匹配空格；\S表明非空白字符。

34.我也不知道爲何，網上也有不少iframe獲取父頁面的元素和獲取子頁面的元素，可我恰恰就只能從子iframe獲取父頁面的dom元素；奇了怪了，記錄一下：（已解決，博客園已記錄）
window.parent.document.getElementById("id");子iframe獲取父級的元素。

35.正則表達式懶惰限定符：（列舉兩個）（詳情見https://www.cnblogs.com/lizhenlin/p/6654934.html）
"*?" 重複任意次，但儘量少重複
　　 如 "acbacb" 正則 "a.*?b" 只會取到第一個"acb" 本來能夠所有取到但加了限定符後，只會匹配儘量少的字符 ，而"acbacb"最少字符的結果就是"acb"

"??" 重複0次或1次，但儘量少重複
　　 如 "aaacb" 正則 "a.??b" 只會取到最後的三個字符"acb"

36.僞數組轉化爲數組：(均不改變原僞數組)
能夠用es6的Array.from();
var arr = Array.prototype.slice.call(arguments);

37.$("table").on("click","tbody tr td:nth-child(n)",function(){}) //n取整數，表明點擊表格的第幾列觸發。

38.要習慣使用axios去獲取數據（https://www.kancloud.cn/yunye/axios/234845）

39.正則表達式 ？表明前面的字符只能匹配一次或零次。

40.str.match（/reg/）獲得一個數組，數組第一個值爲結果，第二個值爲子表達式，且它會按照最長匹配的字符串進行獲取。

41.前端圖片壓縮上傳(純js的質量壓縮，非長寬壓縮)（https://www.cnblogs.com/007sx/p/7583202.html）

42.$("<img/>")爲一個set的方法，是創建一個新的標籤元素"img"並賦予相應標籤相應的屬性，如：$("<img/>").attr("src", src).load(function () {})

43.ajax設置成同步時（async:false），瀏覽器的渲染(UI)線程和js線程是互斥的，在執行js耗時操做時，頁面渲染會被阻塞掉。
當咱們執行異步ajax的時候沒有問題，但當設置爲同步請求時，其餘的動做（ajax函數後面的代碼，還有渲染線程）都會中止下來。

44.$("img").size()計算文檔中全部圖片的數量==$("img").length。

45.$("img").selector返回傳給jQuery（）的原始選擇器，此處爲img。

46.jquery ajax參數：traditional:true時，傳值時能夠傳數組。

47.ajax 與 xhrFields: { withCredentials: true }：
xhrFields 大概的意思是，默認狀況下，標準的跨域請求是不會發送cookie等用戶認證憑據的。
因此，當你再次訪問遠程api的時候，cookie是不會被帶上的，因而乎，服務器理所固然地認爲你尚未登陸。
用XMLHttpRequest請求的時候，咱們須要設置屬性 withCredentials=true ;

48.document.getElementById().scrollIntoView();讓制定id的元素出如今滾動層頂部。

49.當涉及到滾動事件的時候，若是哪個元素給了定高且有overflow：auto；則已這個元素爲節點觸發滾動事件,而不只僅侷限於屏幕滾動。
如：$("#id").scroll(function（）{})；

50.debugger；會中斷程序運行，能夠用來調試。

51.trigger（event,[param]）;觸發某個元素的綁定事件。

52.window是javascript的頂層對象，全部的全局變量都是它的屬性。（V8，Rhino引擎除外）

53.（0，eval）（「this」）;//逗號表達式只解析逗號後面的，此表達式至關於eval（‘this’）

由於在嚴格模式下，匿名函數中的this爲undefined；
爲了防止在嚴格模式下window變量被賦予undefined，使用(0, eval)(‘this’)就能夠把this從新指向頂層對象。

54.JS添加事件和解綁事件：addEventListener()與removeEventListener()
正確用法：function bodyScroll(event){
event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll,false);
document.body.removeEventListener('touchmove',bodyScroll,false);//共用函數bodyScroll不能帶參數

55.取消事件：對象.事件模型 = null；

56.window.history.pushState(null,null,url)無刷新頁面改變頁面路徑，url爲改變後的路徑。
（服務器端被搜索的內容放進<noscript></noscript>中，結合這個可讓搜索引擎抓取AJAX內容？
http://www.ruanyifeng.com/blog/2013/07/how_to_make_search_engines_find_ajax_content.html）

57.猜測：感受能利用history.length來獲取網頁瀏覽歷史物品詳情頁的數據。

58.popstate事件

每當同一個文檔的瀏覽歷史(即history對象)出現變化時，就會觸發popstate事件

59.require.js模塊化開發：http://www.ruanyifeng.com/blog/2012/11/require_js.html（三部曲）

60.es6數組的擴展方法
includes（）判斷數組中是否包含；
find（）查找對應的值
findIndex（）

61.var arr = [1,2,3];
type of arr //obj
Array.isArray(arr) //true判斷是數組

62.淺拷貝指的是新數組拷貝的是對象的引用，即原對象值改變，數組也變。

63.indexOf（）傳兩個參數的時候，第二個參數爲搜索的開始位置。

64.跨域通訊：postMessage(message, targetOrigin);
message :信息內容，低版本瀏覽器只支持字符串，高版本能夠各類數據都行
targetOrigin :目標窗口的源，能夠是字符串*表示無限制，或URI,須要協議端口號和主機都匹配纔會發送
window.onload = function(){
window.frames[0].postMessage("str","協議+域名+端口號【url可加可不加】")
}
接收postMessage發送的信息MessageEvent
window.addEventListener("message", function(event){
//var origin = event.origin || event.originalEvent.origin;
if(event.source!=window.parent) return;//不是父窗口發的就不接收
....
}, false);
MessageEvent四個屬性：
1.message（類型）
2.data（window.postMessage的第一個參數）
3.origin（調用postMessage時頁面的當前狀態）
4.source（調用postMessage的窗口信息）

65.複選框全選賦值時用$('input[type=checkbox]').prop('checked',true);
用attr時有些版本會只能執行一次，因此用prop
若是你要去恢復或者改變DOM狀態值，相似checked，selected，disabled等表單元素的狀態，最好使用.prop()方法。

66.在layui中，凡是動態加載的表單，表格數據都要從新render一下。

67.監聽文本框改變的一種方法：
addEventListener('keyup', function (event) {
obj.msg = event.target.value
})

68.在HTML body部分中的JavaScripts會在頁面加載的時候被執行。
在HTML head部分中的JavaScripts會在被調用的時候才執行。

69.任何對象轉爲布爾值，都會獲得 true（切記！在 JS 中，只有 0，-0，NaN，""，null，undefined 這六個值轉布爾值時，結果爲 false）。

70.在查找 b.n 是首先查找 b 對象自身有沒有 n 屬性，若是沒有會去原型（prototype）上查找

71.DHTML 的動態樣式的做用是使網頁做者改變內容的外部特徵而不強制用戶再次下載所有內容

72.es6：‘Promise 對象表明一個異步操做，有3種狀態：Pending(進行中)、Resolved(已完成，又稱Fulfilled)和Rejected(已完成)’

73.垃圾回收規則以下：
1.全局變量不會被回收。
2.局部變量會被回收，也就是函數一旦運行完之後，函數內部的東西都會被銷燬。
3.只要被另一個做用域所引用就不會被回收

74.undefined和null與任何有意義的值比較返回的都是false，可是null與undefined之間互相比較返回的是true。

75.1+ +"2"
+"2"中的加號是一元加操做符，+"2"會變成數值2，所以1+ +"2"至關於1+2=3.

76.file文件對象是一個只讀對象，想要改變須要定義全局變量遍歷存儲文件信息,並對此全局變量進行更改再操做。

77.parseInt(num,10)；按10進制去處理字符串，碰到非數字字符，會將後面的所有無視。

78.parseInt("10000",2);將二進制數轉化爲十進制

79.正則表達式\1表明引用第一個分組，\2引用第二個分組；分組就是（）裏的內容，一個（）叫一個分組。
判斷一個字符串中有沒有連續相同的兩個字符：
/([a-zA-Z])\1/.test(str)
假設aa；首先a屬於a-z，\1再引用一次a，爲aa，符合條件，返回true；
假設ab；首先a屬於a-z，\1再引用一次a，爲aa，不符合條件，返回false。

80.js將0開頭的數默認爲8進制的數

81.正則表達式模式修飾符s的做用主要是可以匹配換行，在處理換行數據時，一般會用到。

82.jQuery限制字符字數的方法（多行文本超出...）
//限制字符個數
$(".zxx_text_overflow").each(function(){
var maxwidth=23;
if($(this).text().length > maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
});

83.[\u4e00-\u9fa5]表示中文字符匹配

84.this.replace(/^\s*(.*?)\s*$/, '$1')；去掉先後空格，$1表示第一個括號裏的值。

85.前瞻：
exp1(?=exp2) 查找exp2前面的exp1
後顧：
(?<=exp2)exp1 查找exp2後面的exp1
負前瞻：
exp1(?!exp2) 查找後面不是exp2的exp1
負後顧：
(?<!=exp2)exp1 查找前面不是exp2的exp1

86.Array.prototype.flat()將數組按照指定深度扁平化。Array.prototype.flat(Infinity)不管多少層都扁平化。

87.在華爲手機中，運用qCode生成的二維碼是經過canvas展現的，img標籤被隱藏，並且img.src沒有任何內容。

88.數組的一些方法是否改變原數組及返回值

改變原數組的：

shift：將第一個元素刪除而且返回刪除元素，空即爲undefined
unshift：向數組開頭添加元素，並返回新的長度
pop：刪除最後一個並返回刪除的元素
push：向數組末尾添加元素，並返回新的長度
reverse：顛倒數組順序
sort：對數組排序
splice:splice(start,length,item)刪，增，替換數組元素，返回被刪除數組，無刪除則不返回

不改變原數組的：

concat：鏈接多個數組，返回新的數組
join：將數組中全部元素以參數做爲分隔符放入一個字符
slice：slice(start,end)，返回選定元素
map,filter,some,every等不改變原數組

89.爲了解決網頁卸載時，異步請求沒法成功的問題，瀏覽器特別實現了一個 Beacon API，容許異步請求脫離當前主線程，放到瀏覽器進程裏面發出，這樣能夠保證必定能發出。

window.addEventListener('unload', function (event) {
navigator.sendBeacon('/log', 'foo=bar');
});
上面代碼中，navigator.sendBeacon()方法能夠保證，異步請求必定會發出。第一個參數是請求的網址，第二個參數是發送的數據。
注意，Beacon API 發出的是 POST 請求。

90.所謂"反彈追蹤"，就是網頁跳轉時，先跳到一個或多箇中間網址，以便收集信息，而後再跳轉到原來的目標網址。

// <a id="target" href="https://baidu.com">click</a>
const theLink = document.getElementById('target');
theLink.addEventListener('click', function (event) {
event.preventDefault();
window.location.href = '/jump?url=' +
encodeURIComponent(theLink.getAttribute('href'));
});
上面代碼中，用戶點擊的時候，會強制跳到一箇中間網址，將信息攜帶過去，處理完畢之後，再跳到原始的目標網址。
谷歌和百度如今都是這樣作，點擊搜索結果時，會反彈屢次，才跳到目標網址。

91.在小數調用toFixed()方法後，會轉變爲字符串。

92.關於內存管理可瞭解垃圾回收機制。

93.微任務包括 process.nextTick ，promise ，Object.observe ，MutationObserver

宏任務包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering
不少人有個誤區，認爲微任務快於宏任務，實際上是錯誤的。由於宏任務中包括了 script ，瀏覽器會先執行一個宏任務，
接下來有異步代碼的話就先執行微任務。因此正確的一次 Event loop 順序是這樣的

執行同步代碼，這屬於宏任務
執行棧爲空，查詢是否有微任務須要執行
執行全部微任務
必要的話渲染 UI
而後開始下一輪 Event loop，執行宏任務中的異步代碼

94.apply() 的參數爲空時，默認調用全局對象