那些你熟悉而又陌生的函数，该掌握它了！

点击上方 程序员成长指北&＃xff0c;关注公众号

回复1&＃xff0c;加入高级Node交流群

前言

五层境界

1. 我不知道我不知道

2. 我知道我不知道

3. 我知道我知道

4. 我不知道我知道

第三层境界以上的兄台&＃xff0c;可以直接离开了。

至于第五层境界&＃xff0c;无需知道还是不知道。

废话不多说&＃xff0c;进入正题&＃xff0c;一起探索那些你熟悉和又陌生的函数。

目录

因为手机端目录不显示&＃xff0c;单独写一份&＃xff1a;

• setTimeout && setInterval

• JSON.parse

• JSON.stringify

• addEventListener

• Array.from

• String.replace

• window.getComputeStyle

• localStorage.setItem

• 控制台特有的

setTimeout^[1] && setInterval^[2]

语法

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

我们最常用的是语法中的第二种
var timeoutID &＃61; scope.setTimeout(function[, delay]);
举个例子

setTimeout(()&＃61;>{console.log(&＃96;当前时间:${Date.now()}&＃96;);
}, 1000)

接着我们看再看第三种 setTimeout(code[, delay]), code就是代码字符串&＃xff0c;其底层实现就是调用eval&＃xff0c;你可能问题怎么知道的&＃xff0c;因为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( &＃96;console.log("当前时间:${Date.now()}")&＃96;, 1000)

这里有些掘友可能就直接贴到浏览器的控制台去测试&＃xff0c;我得提醒你&＃xff0c;很可能你不能正确执行&＃xff0c;而是收到类似下面的提示

[Report Only] Refused to evaluate a string as Javascript because &＃39;unsafe-eval&＃39; is not an   
allowed source of script in the following Content Security Policy directive: "script-src 
.........

这是因为CSP拦截了&＃xff0c;更多关于CSP的内容可以查看Content-Security-Polic^[3] 或者 阮大神的 Content Security Policy 入门教程^[4]

我们最后看第一种 setTimeout(function[, delay, arg1, arg2, ...]), 从第三个参数开始&＃xff0c;都会传给回调函数&＃xff0c; 我们看一段代码

setTimeout((startTime, tip)&＃61;>{const endTime &＃61; Date.now();console.log("时间已经过去了", endTime - startTime, "ms," ,tip);  // 时间已经过去了 501 ms, 该休息了
},500, Date.now(), "该休息了");

其实clearTimeout,clearInterval也有一点小意思&＃xff0c;clearTimeout能不能清除setInterval&＃xff1f;那反过来呢&＃xff1f;

var ticket &＃61; setTimeout(()&＃61;>{console.log("100ms后执行");
},100);var ticket2 &＃61; setTimeout(()&＃61;>{console.log("200ms后执行");
},200);
clearInterval(ticket);// 200ms后执行

有人会说&＃xff0c;这这这......&＃xff0c;年轻人&＃xff0c;不要较真。

题外话:

有传说 setTimeout 4ms的最小间隔。
这是有前提的&＃xff0c;如果四次以上的嵌套调用setTimeout&＃xff0c; 第五次起&＃xff0c;才会有这个4ms的约束。
更多可以参见 HTML standard timers-and-user-prompts^[5]。
你也可以去MDN setTimeout^[6]亲手测测。

这里补充一句&＃xff0c;标准归标准&＃xff0c;实现归实现&＃xff0c; 浏览器厂商那么多&＃xff0c;哈。

JSON.parse^[7]

语法

JSON.parse(text)
JSON.parse(text, reviver)

我们平时 99.99%的时候&＃xff0c;都在使用第一种。

reviver参数用TypeScript表示&＃xff0c;差不多是这样子的(key:string, value: any)&＃61;> any。

如果复用程序只转换某些值而不转换其他值&＃xff0c;那么一定要按原样返回所有未转换的值&＃xff0c;否则&＃xff0c;将从结果对象中删除这些值。

看个例子, 转换成对象后&＃xff0c; IDCard属性就没了。

JSON.parse(JSON.stringify({name: "tom",age: 18,phone: "15888787788",IDCard: "xxxx"
}), (key, value)&＃61;>{if(key &＃61;&＃61;&＃61; "IDCard"){return undefined}return value;});   // {name: "tom", age: 18, phone: "15888787788"}

这里有两点补充&＃xff1a;

1. JSON.parse转换的时候&＃xff0c;是深度优先遍历

2. 最后一条key的值&＃xff0c;是空值

看代码&＃xff1a;

JSON.parse(&＃39;{"1": 1, "2": 2, "3": {"4": 4, "5": {"6": 6}}}&＃39;, (key, value) &＃61;> {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^[8]

语法

JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)

第一种就不多说了。

后两个参数的说明如下

replacer 可选

• 如果该参数是一个函数&＃xff0c;则在序列化过程中&＃xff0c;被序列化的值的每个属性都会经过该函数的转换和处理&＃xff1b;

• 如果该参数是一个数组&＃xff0c;则只有包含在这个数组中的属性名才会被序列化到最终的 JSON 字符串中&＃xff1b;

• 如果该参数为 null 或者未提供&＃xff0c;则对象所有的属性都会被序列化。

space 可选
指定缩进用的空白字符串&＃xff0c;用于美化输出&＃xff08;pretty-print&＃xff09;&＃xff1b;

• 如果参数是个数字&＃xff0c;它代表有多少的空格&＃xff1b;上限为10。该值若小于1&＃xff0c;则意味着没有空格&＃xff1b;

• 如果该参数为字符串&＃xff08;当字符串长度超过10个字母&＃xff0c;取其前10个字母&＃xff09;&＃xff0c;该字符串将被作为空格&＃xff1b;

• 如果该参数没有提供&＃xff08;或者为 null&＃xff09;&＃xff0c;将没有空格。

到这里&＃xff0c;有些同学吃惊一把。其实掘金有很多关于这的文章

• 爆款 你不知道的 JSON.stringify() 的威力^[9]

• 有意思的JSON.parse、JSON.stringify^[10]

• 深拷贝系列 ———— 自己实现一个JSON.stringify和JSON.parse^[11]

当然我说的两点&＃xff1a;

• toJSON

• space参数

toJSON&＃xff1a;当一个需要被转换的对象定义了toJSON方法&＃xff0c; 会直接返回toJSON的值。举个栗子&＃xff1a;

var obj &＃61; {foo: &＃39;foo&＃39;,toJSON: function () {return &＃39;bar&＃39;;}
};
JSON.stringify(obj);      // &＃39;"bar"&＃39;

space&＃xff1a;参数是用于美化转化后格式的&＃xff0c;举个栗子: 保存JSON文件的时候&＃xff0c;尤其有用。当然&＃xff0c;下面的代码你放到浏览器&＃xff0c;有些浏览器可能看不出什么效果&＃xff0c;在nodejs执行&＃xff0c;然后保存文件就看到效果了。

JSON.stringify({ uno: 1, dos : 2 }, null, &＃39;\t&＃39;)
// &＃39;{            \
//     "uno": 1, \
//     "dos": 2  \
// }&＃39;

addEventListener

就这&＃xff0c;就这&＃xff0c;还怀疑我不会用。我就真觉得&＃xff0c;看到这里的有50%以上&＃xff0c;就真不全会。等看完&＃xff0c;如果是真不全会的&＃xff0c;麻烦评论区评论 一起围观作者。;

target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture)

四个9的可靠性&＃xff0c;99.9999%的通知&＃xff0c;都完全知道第三个参数是布尔值的情况。我也就不说了。

options 可选

可用的选项&＃xff1a;

• capture:  Boolean&＃xff0c;表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。

• once:  Boolean&＃xff0c;表示 listener 在添加之后最多只调用一次。如果是 true&＃xff0c; listener 会在其被调用之后自动移除。

• passive: Boolean&＃xff0c;设置为true时&＃xff0c;表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数&＃xff0c;客户端将会忽略它并抛出一个控制台警告。查看 使用 passive 改善的滚屏性能^[12] 了解更多.

• signal&＃xff1a;AbortSignal&＃xff0c;该 AbortSignal 的 abort() 方法被调用时&＃xff0c;监听器会被移除。

once

看到once是不是很熟悉&＃xff0c;EventEmitter, socket.io等等是不是都有&＃xff0c;这就是我们熟悉的那个啥模式。

其实 window本身一定程度上就是一个订阅发布中心&＃xff1a;

function _dispatch(type, data) {const ev &＃61; new CustomEvent(type, { detail: data });window.dispatchEvent(ev);
}window._on &＃61; window.addEventListener
window._emit &＃61; _dispatch;
window._once &＃61; (type, callback) &＃61;> {window.addEventListener(type, callback, {once: true,capture: true})
}window._on("event-x", (ev) &＃61;> {console.log("event-x 收到数据:", ev.detail);
});window._once("event-once", (ev) &＃61;> {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"}

实际上&＃xff0c;不仅仅是Window&＃xff0c;任何继承了 EventTarget^[13]的对象&＃xff0c;都具备这样的能力。

passive

查看 使用 passive 改善的滚屏性能^[14] 了解更多

signal

这个signal是AbortController^[15]的一部分&＃xff0c;其主要作用是用来终止请求。

而在此处的作用&＃xff0c;是用来移除监听器。

如下的代码&＃xff0c;如果注释controller.abort();, 就会收到两条消息。

var controller &＃61; new AbortController();
var signal &＃61; controller.signal;function _dispatch(type, data) {const ev &＃61; new CustomEvent(type, { detail: data });window.dispatchEvent(ev);
}window.addEventListener("event-x", ev &＃61;> {console.log("event-x:收到数据&＃xff1a;", ev.detail);
}, {signal
});_dispatch("event-x", "i love you");
// 终止
controller.abort();
_dispatch("event-x", "i love you");// event-x:收到数据&＃xff1a;i love you

到此如果你真的全会&＃xff0c;麻烦评论区评论 一起围观作者。

Array.from

Array.from(arrayLike[, mapFn[, thisArg]])

重点是这个mapFn:

apFn 可选 如果指定了该参数&＃xff0c;新数组中的每个元素会执行该回调函数。

先看妙用&＃xff0c; 造一个1-100的数组&＃xff0c;哦&＃xff0c; so easy!

Array.from({length:100}, (val, index)&＃61;> index &＃43; 1 );

字符串

Array.from(&＃39;foo&＃39;); 
//  [ "f", "o", "o" ]

Set

const set &＃61; new Set([&＃39;foo&＃39;, &＃39;bar&＃39;, &＃39;baz&＃39;, &＃39;foo&＃39;]);
Array.from(set);
// [ "foo", "bar", "baz" ]

Map 这个地方大家看着可能有点迷&＃xff0c;更多详情Map 与数组的关系^[16]

const map &＃61; new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map); // 等同于 [...map.entries()]
// [[1, 2], [2, 4], [4, 8]]const mapper &＃61; new Map([[&＃39;1&＃39;, &＃39;a&＃39;], [&＃39;2&＃39;, &＃39;b&＃39;]]);
Array.from(mapper.values());
// [&＃39;a&＃39;, &＃39;b&＃39;];Array.from(mapper.keys());
// [&＃39;1&＃39;, &＃39;2&＃39;];

序列生成器

const range &＃61; (start, stop, step) &＃61;> Array.from({ length: (stop - start) / step &＃43; 1}, (_, i) &＃61;> start &＃43; (i * step)
);// Generate numbers range 0..4
range(0, 4, 1);
// [0, 1, 2, 3, 4]

range在Python里面是自带的&＃xff0c;你看我们JS的实现也很简单。

String.replace

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

特殊变量名

特殊变量名 让这个replace属于化神后期, 下面的$2, $1就是字符串参数。

var re &＃61; /(\w&＃43;)\s(\w&＃43;)/;
var str &＃61; "John Smith";
var newstr &＃61; str.replace(re, "$2, $1");
// Smith, John
console.log(newstr)

所有的字符串参数如下&＃xff1a;

第二个参数为函数

为了方便理解&＃xff0c;先看&＃xff1a;

function replacer(match, p1, p2, p3, offset, string) {// p1 is nondigits, p2 digits, and p3 non-alphanumericsreturn [p1, p2, p3].join(&＃39; - &＃39;);
}
var newString &＃61; &＃39;abc12345#$*%&＃39;.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  // abc - 12345 - #$*%

p1, p2, p3对应着 特殊变量名 $1, $2, $3,

更多的细节移步MDN 函数参数^[17]

window.getComputeStyle

大家都知道&＃xff0c;CSS有权重的说法&＃xff0c;有style的&＃xff0c;有css里面的各种&＃xff0c;有浏览器的默认样式&＃xff0c;等等。
鬼知道&＃xff0c;最后生效的是哪些样式。鬼就等于这个getComputeStyle。

先看个例子&＃xff1a;

dummy