碎片

269 阅读1分钟

setTimeout、setInterval MDN

//第三个及以后的参数
   setTimeout(()=>{
    alert('Second')  
  },1000,setTimeout(()=>{
     alert('First')    
  },500));
//模拟setInterval
var timer = setTimeoutfunction() {  //'use strict' : 命名函数
     //doing something
     timer = setTimeout(arguments.callee, interval)  
 }, interval);

递归
函数的调用会在内存生成"调用帧"(call frame)保存调用位置和内部变量等信息 ,若内部函数再调用还会形成记录,所有记录形成一个"调用栈"(call stack)。
递归优化:TCO优化(v8已不支持)、trampoline函数

function trampoline(fn){
    while (fn && fn instanceof Function){
      fn=fn();
    }
    return fn;
} 

行内元素间隙
这个间隙来自行内元素间的空白。行内元素间的所有空白会折叠为一个,可通过html中注释删除空白。

背景图
background: "#fff url(XXX) no-repeat center center/cover"

数据方法
Object.fromEntries()
Array.prototype.flat

正则
数字:
/^\d+$/.test(parseInt(num)) // 0 及 正整数

html字符串转文档碎片
document.createRange().createContextualFragment(tagString)

管理工具
nrm: 切换源 , 参考:segmentfault.com/a/119000000…
nvm: 切换node版本 ,参考: bubkoo.com/2017/01/08/…

scroll平滑滚动, 及元素进入视区
css: scroll-behavior:smooth
js: target.scrollIntoView({behavior: "smooth"});

对象动态属性

key = 'age'
a = {
    name: dylan,
    ...( false && {[key]: 21} || {})
}

resize窗口

 window.dispatchEvent(new Event("resize"));

数组方法

 Array.from({length:n},()=>'a');
 [...Array(n).keys()];
 Array(n).fill('a');

对象方法

//顺序遍历属性
const obj = { a: 1,b: 2}
 Reflect.ownKeys(obj) 
 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))
 // 包括直接挂在目标对象上的可枚举、不可枚举、Symbols的属性组成的数组, IE不支持
 Object.getOwnPropertyNames(obj) // ES5, IE9+

正则匹配实现整数位的千分位

(num || 0).toString().replace(/(?<!(?:\d+\.(?:\d+?)))(\d)(?=(?:\d{3})+(?:\.\d+)?$)/g, '$1,')

//  exp1(?=exp2):查找 exp2 前面的 exp1。
// (?<=exp2)exp1:查找 exp2 后面的 exp1。
//  exp1(?!exp2):查找后面不是 exp2 的 exp1。
// (?<!exp2)exp1:查找前面不是 exp2 的 exp1。
// (?:exp)	匹配exp,不捕获匹配的文本,不分配组号。