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

时间  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教程