那些你熟悉而又陌生的函數

時間  2021-08-12
標籤 javascript css html java node git 正則表達式 typescript 數組 瀏覽器 欄目 JavaScript 简体版
原文   原文鏈接

這是我參與更文挑戰的第10天，活動詳情查看： 更文挑戰javascript

前言

五層境界css

  1. 我不知道我不知道
  2. 我知道我不知道
  3. 我知道我知道
  4. 我不知道我知道

第三層境界以上的兄臺，能夠直接離開了。html

至於第五層境界，無需知道仍是不知道。java

廢話很少說，進入正題，一塊兒探索那些你熟悉和又陌生的函數。node

目錄

由於手機端目錄不顯示，單獨寫一份：git

setTimeout && setInterval

語法正則表達式

var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);

複製代碼

咱們最經常使用的是語法中的第二種
var timeoutID = scope.setTimeout(function[, delay]);
舉個例子typescript

setTimeout(()=>{
    console.log(`當前時間:${Date.now()}`);
}, 1000)
複製代碼

接着咱們看再看第三種 setTimeout(code[, delay]), code就是代碼字符串，其底層實現就是調用eval，你可能問題怎麼知道的，由於MDN對這個code參數有解釋。數組

code
An alternative syntax that allows you to include a string instead of a function, which is compiled and executed when the timer expires. This syntax is not recommended for the same reasons that make using eval() a security risk.瀏覽器

剛纔的代碼就等於下面的代碼

setTimeout( `console.log("當前時間:${Date.now()}")`, 1000)
複製代碼

這裏有些掘友可能就直接貼到瀏覽器的控制檯去測試，我得提醒你，極可能你不能正確執行，而是收到相似下面的提示

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an   
allowed source of script in the following Content Security Policy directive: "script-src ......... 複製代碼

這是由於CSP攔截了，更多關於CSP的內容能夠查看Content-Security-Polic 或者 阮大神的 Content Security Policy 入門教程

咱們最後看第一種 setTimeout(function[, delay, arg1, arg2, ...]), 從第三個參數開始，都會傳給回調函數， 咱們看一段代碼

setTimeout((startTime, tip)=>{
    const endTime = Date.now();
    console.log("時間已通過去了", endTime - startTime, "ms," ,tip);  // 時間已通過去了 501 ms, 該休息了
},500, Date.now(), "該休息了");
複製代碼

其實clearTimeout,clearInterval也有一點小意思，clearTimeout能不能清除setInterval？那反過來呢？

var ticket = setTimeout(()=>{
    console.log("100ms後執行");
},100);

var ticket2 = setTimeout(()=>{
    console.log("200ms後執行");
},200);
clearInterval(ticket);

// 200ms後執行
複製代碼

有人會說，這這這......，年輕人，不要較真。

題外話:

有傳說 setTimeout 4ms的最小間隔。
這是有前提的，若是四次以上的嵌套調用setTimeout， 第五次起，纔會有這個4ms的約束。
更多能夠參見 HTML standard timers-and-user-prompts。
你也能夠去MDN setTimeout親手測測。

這裏補充一句，標準歸標準，實現歸實現， 瀏覽器廠商那麼多，哈。

JSON.parse

語法

JSON.parse(text)
JSON.parse(text, reviver)
複製代碼

咱們平時 99.99%的時候，都在使用第一種。

reviver參數用TypeScript表示，差很少是這樣子的(key:string, value: any)=> any。

若是複用程序只轉換某些值而不轉換其餘值，那麼必定要按原樣返回全部未轉換的值，不然，將從結果對象中刪除這些值。

看個例子, 轉換成對象後， IDCard屬性就沒了。

JSON.parse(JSON.stringify({
  name: "tom",
  age: 18,
  phone: "15888787788",
  IDCard: "xxxx"
}), (key, value)=>{
  
  if(key === "IDCard"){
    return undefined
  }
  return value;
    
});   // {name: "tom", age: 18, phone: "15888787788"}
複製代碼

這裏有兩點補充：

  1. JSON.parse轉換的時候，是深度優先遍歷
  2. 最後一條key的值，是空值

看代碼：

JSON.parse('{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}', (key, value) => {
  console.log(key); // log the current property name, the last is "".
  return value;     // return the unchanged property value.
});

// 1
// 2
// 4
// 6
// 5
// 3
// ""
複製代碼

JSON.stringify

語法

JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)
複製代碼

第一種就很少說了。

後兩個參數的說明以下

replacer 可選

  • 若是該參數是一個函數，則在序列化過程當中，被序列化的值的每一個屬性都會通過該函數的轉換和處理；
  • 若是該參數是一個數組，則只有包含在這個數組中的屬性名纔會被序列化到最終的 JSON 字符串中；
  • 若是該參數爲 null 或者未提供，則對象全部的屬性都會被序列化。

space 可選

指定縮進用的空白字符串，用於美化輸出（pretty-print）；

  • 若是參數是個數字，它表明有多少的空格；上限爲10。該值若小於1，則意味着沒有空格；
  • 若是該參數爲字符串（當字符串長度超過10個字母，取其前10個字母），該字符串將被做爲空格；
  • 若是該參數沒有提供（或者爲 null），將沒有空格。

到這裏，有些同窗吃驚一把。其實掘金有不少關於這的文章

固然我說的兩點：

  • toJSON
  • space參數

toJSON： 當一個須要被轉換的對象定義了toJSON方法， 會直接返回toJSON的值。 舉個栗子：

var obj = {
  foo: 'foo',
  toJSON: function () {
    return 'bar';
  }
};
JSON.stringify(obj);      // '"bar"'
複製代碼

space： 參數是用於美化轉化後格式的，舉個栗子: 保存JSON文件的時候，尤爲有用。 固然，下面的代碼你放到瀏覽器，有些瀏覽器可能看不出什麼效果，在nodejs執行，而後保存文件就看到效果了。

JSON.stringify({ uno: 1, dos : 2 }, null, '\t')
// '{ \
// "uno": 1, \
// "dos": 2 \
// }'
複製代碼

addEventListener

就這，就這，還懷疑我不會用。 我就真以爲，看到這裏的有50%以上，就真不全會。 等看完，若是是真不全會的，麻煩評論區評論 一塊兒圍觀做者。 ;

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture)
複製代碼

四個9的可靠性，99.9999%的通知，都徹底知道第三個參數是布爾值的狀況。我也就不說了。

options 可選

可用的選項：

  • capture: Boolean，表示 listener 會在該類型的事件捕獲階段傳播到該 EventTarget 時觸發。
  • once: Boolean，表示 listener 在添加以後最多隻調用一次。若是是 true， listener 會在其被調用以後自動移除。
  • passive: Boolean，設置爲true時，表示 listener 永遠不會調用 preventDefault()。若是 listener 仍然調用了這個函數，客戶端將會忽略它並拋出一個控制檯警告。查看 使用 passive 改善的滾屏性能 瞭解更多.
  • signal：AbortSignal，該 AbortSignal 的 abort() 方法被調用時，監聽器會被移除。

once

看到once是否是很熟悉，EventEmitter, socket.io等等是否是都有，這就是咱們熟悉的那個啥模式。

其實 window自己必定程度上就是一個訂閱發佈中心：

function _dispatch(type, data) {
    const ev = new CustomEvent(type, { detail: data });
    window.dispatchEvent(ev);
}

window._on = window.addEventListener
window._emit = _dispatch;
window._once = (type, callback) => {
    window.addEventListener(type, callback, {
        once: true,
        capture: true
    })
}

window._on("event-x", (ev) => {
    console.log("event-x 收到數據:", ev.detail);
});

window._once("event-once", (ev) => {
    console.log("event-once 收到數據:", ev.detail);
}, {
    once: true,
});  

window._emit("event-x", {
    uid: 100,
    message: "i love you"
})

window._emit("event-once", {
    uid: -100,
    message: "you love me"
});

window._emit("event-once", {
    uid: -100,
    message: "you love me"
});

// event-x 收到數據: {uid: 100, message: "i love you"}
// event-once 收到數據: {uid: -100, message: "you love me"}
複製代碼

實際上，不只僅是Window，任何繼承了 EventTarget的對象，都具有這樣的能力。

passive

查看 使用 passive 改善的滾屏性能 瞭解更多

signal

這個signal是AbortController的一部分，其主要做用是用來終止請求。

而在此處的做用，是用來移除監聽器。

以下的代碼，若是註釋controller.abort();, 就會收到兩條消息。

var controller = new AbortController();
var signal = controller.signal;

function _dispatch(type, data) {
    const ev = new CustomEvent(type, { detail: data });
    window.dispatchEvent(ev);
}

window.addEventListener("event-x", ev => {
    console.log("event-x:收到數據：", ev.detail);
}, {
    signal
});

_dispatch("event-x", "i love you");
// 終止
controller.abort();
_dispatch("event-x", "i love you");

// event-x:收到數據： i love you
複製代碼

到此若是你真的全會，麻煩評論區評論 一塊兒圍觀做者。

Array.from

Array.from(arrayLike[, mapFn[, thisArg]])
複製代碼

重點是這個mapFn:

apFn 可選 若是指定了該參數，新數組中的每一個元素會執行該回調函數。

先看妙用， 造一個1-100的數組，哦， so easy!

Array.from({length:100}, (val, index)=>  index + 1 );
複製代碼

字符串

Array.from('foo'); 
// [ "f", "o", "o" ]
複製代碼

Set

const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]
複製代碼

Map 這個地方你們看着可能有點迷，更多詳情Map 與數組的關係

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map); // 等同於 [...map.entries()]
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];
複製代碼

序列生成器

const range = (start, stop, step) => Array.from(
    { length: (stop - start) / step + 1}, 
    (_, i) => start + (i * step)
);

// Generate numbers range 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]
複製代碼

range在Python裏面是自帶的，你看咱們JS的實現也很簡單。

String.replace

str.replace(regexp|substr, newSubStr|function)

特殊變量名

特殊變量名 讓這個replace屬於化神後期, 下面的$2, $1就是字符串參數。

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");
// Smith, John
console.log(newstr)
複製代碼

全部的字符串參數以下：

變量名 表明的值
$$ 插入一個 "$"
$& 插入匹配的子串。
$` 插入當前匹配的子串左邊的內容。
$' 插入當前匹配的子串右邊的內容。
$n 假如第一個參數是 RegExp對象，而且 n 是個小於100的非負整數，那麼插入第 n 個括號匹配的字符串。提示：索引是從1開始。若是不存在第 n個分組，那麼將會把匹配到到內容替換爲字面量。好比不存在第3個分組，就會用「$3」替換匹配到的內容。
$ 這裏Name 是一個分組名稱。若是在正則表達式中並不存在分組（或者沒有匹配），這個變量將被處理爲空字符串。只有在支持命名分組捕獲的瀏覽器中才能使用

第二個參數爲函數

爲了方便理解，先看：

function replacer(match, p1, p2, p3, offset, string) {
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%
複製代碼

p1, p2, p3對應着 特殊變量名 $1, $2, $3,

更多的細節移步MDN 函數參數

window.getComputeStyle

你們都知道，CSS有權重的說法，有style的，有css裏面的各類，有瀏覽器的默認樣式，等等。
鬼知道，最後生效的是哪些樣式。 鬼就等於這個getComputeStyle。

先看個例子：

<style> #elem-container{ position: absolute; left: 100px; top: 200px; height: 100px; z-index: 1; } </style>

<div id="elem-container">dummy</div>

<script> let elem = document.getElementById("elem-container"); const ps = window.getComputedStyle(elem,null) console.log(ps..getPropertyValue("height")); // 100px </script>
複製代碼

讀值方式

  1. ps.getPropertyValue("z-index");
  2. ps["z-index"];
  3. ps.zIndex （同style的讀取）

上面的三種方式都是可行的。

返回值爲解析值

getComputedStyle的返回值是 解析值, 常跟CSS2.1中的計算值是相同的值。 但對於一些舊的屬性，好比width, height, padding 它們的值又爲 應用值。

計算值： 例如，如一個元素的屬性值爲 font-size:16px 和 padding-top:2em, 則 padding-top 的計算值爲 32px (字體大小的2倍)。
應用值： 好比：span 指定 position: absolute 後display 變爲 block。

其次值和設置的值不必定是一樣的格式，
好比你設置的 color的值是 red，返回的值是 rgb(255, 0, 0);
好比你說的 transform transform: translate(10px, 10px),返回的值是 matrix(1, 0, 0, 1, 10, 10)。

第二個參數 pseudoElt

pseudoElt 可選
指定一個要匹配的僞元素的字符串。必須對普通元素省略（或null）

就是用來獲取僞元素的最終樣式, 常見的有 ::after, ::before, ::marker, ::line-marker。

<style> h3::after { content: "rocks!"; } </style>

<h3>generated content</h3>

<script> let h3 = document.querySelector('h3'), result = getComputedStyle(h3, '::after').content; alert(`the generated content is: ${result}`); console.log(`the generated content is: ${result}`); // the generated content is: "rocks!" </script>
複製代碼

寫在最後，getComputeStyle會觸發重排，固然不少獲取寬高的都會觸發重排。內心有這個概念就行。

localStorage && sessionStorage

storage事件

這裏要說的是localStorage.setItem，其自己沒有什麼好說的。 與其對應的有一個storage事件，其能夠監聽storage的值的變化。

A.html

localStorage.setItem("data", JSON.stringify({
    a: 1,
    b: 3
}))
複製代碼

B.html

window.addEventListener("storage", (ev) => {
    console.log("key:", ev.key);   // key: data
    console.log("oldValue:", ev.oldValue); // oldValue: null
    console.log("newValue:", ev.newValue);  // newValue: {"a":1,"b":3}
    console.log("storageArea:", ev.storageArea); 
    // storageArea: Storage {ev: "{\"a\":1,\"b\":3}", length: 1}
    console.log("url:", ev.url); // url: http://127.0.0.1:8080/A.html
});
複製代碼

從上面隱藏兩個細節

  1. A.html調用setItem, B.html監聽事件

由於A.html自身是監聽不到這個事件的

  1. storage事件對象上有oldValue喝newValue屬性

能夠得出，設置一樣的值，不會觸發事件。

讓setItem的頁面監聽storage事件

原理，重寫setItem事件

var originalSetItem = sessionStorage.setItem;
localStorage.setItem = function (key, newValue) {
    var itemEvent = new CustomEvent("c-storage", {
        detail: {
            oldValue: localStorage.getItem(key),
            newValue,
            key,
            url: location.href
        }
    });
    window.dispatchEvent(itemEvent);
    originalSetItem.apply(this, arguments);
}

window.addEventListener("c-storage", function (ev) {
    console.log("ev", ev.detail);
}
// key: "data"
// newValue: 1624506604683
// oldValue: "1624506595323"
// url: "http://127.0.0.1:8080/LA.html"

localStorage.setItem("data", Date.now());
複製代碼

IE貌似有bug，同頁面 Storage 變化監聽有提到

控制檯特有的

console系列

那些 console.table, console.time, console.assert0, console.count, console.group我就不說了。

恰恰說一下console.log
console.log定義樣式：來源多彩的 console.log

// 1. 將css樣式內容放入數組
const styles = [
  'color: green', 
  'background: yellow', 
  'font-size: 30px',
  'border: 1px solid red',
  'text-shadow: 2px 2px black',
  'padding: 10px',
].join(';'); 
// 2. 利用join方法講各項以分號鏈接成一串字符串
// 3. 傳入styles變量
console.log('%cHello There', styles);

複製代碼

輸出： image.png

符號函數系列

方法 說明
$_ 最後一個評估值
$(selector) document.querySelector
?(selector) document.querySelectorAll
$x(path) XPathEvaluator 
$x("/html/body")
複製代碼

image.png

其餘

getEventListeners:
你有沒有碰到過，想查詢某個元素的全部監聽函數的需求，在頁面裏面是沒有這種功能。 可是控制檯是有的 看圖

image.png

clear: 清空控制檯

寫在最後

寫做不易，一讚一評，就是我最大的動力。

同頁面 Storage 變化監聽
setTimeout
setInterval
Map 與數組的關係
timers-and-user-prompts
多彩的console.log
推薦幾個不錯的console調試技巧

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程