前端随记（不定时更新）

西八哟
109 阅读3分钟

原来内容都是随时记录在腾讯文档上的（可能有些内容是很老的），想着换个地方一起分享下，有问题随时指正，或者有想法的也可以发表

data-*的好处

  1. 用于存储数据在标签内 用法<el data-*='value'>
  2. h5的新属性
  3. 通过element.dataset获取

h5新模块

  1. 网站头部标签
  2. 导航标签
  3. 内容标签
  4. 文章标签
  5. 侧边栏
  6. 网站底部标签

sleep（没卵用看着好玩）

function sleep(delay) {
    var start = new Date().getTime();
    while (new Date().getTime() < start + delay);
}

原始类型直接作用于value上的方法 ..

123..toString() //  123

直接用于value上操作符 ..

随机数方法

toFixed五舍六入的情况

x.x5 实际储存的值可能是x.x5000000000000003或者x.x49999999999999999999

所以不同的.5会有不同的取值情况，尽量还是用Math.round

位运算符 & |

字母 charCodeAt a = 97 b ++

& 二进制按位取值 同为1则是1 其他是0

| 有一个1就是1

1 & 2

01 & 10 = 0

通常内存泄漏的情况

  1. 意外产生的全局变量(未开strict模式)

  2. 未及时清理的定时器

  3. 未及时清理的dom

  4. 闭包

  5. 未及时清理的事件监听

作用域链

  1. 作用域链为方法声明所在位置，而非调用位置(后续猜测，函数提升所以a先为3再被a=1覆盖)

再后续补充猜测括号外的理解应该为真：JS是一个文本作用域的语言，也就是说，变量的作用域在写这个变量的时候就已经确定了

再次更新js是词法作用域，变量访问范围仅由声明时候区域决定

调试DOMtips

  1. 打印dom的时候加上[]即可展示成对象的形式

纯函数

不会更改入参且相同的入参始终会得到相同的结果

eventloop

主线程的同步任务会对异步任务队列造成一定的影响

宏微任务会先挂载到对应的线程，再根据eventloop和自身时间添加到任务队列

先同后异 先微后宏

await下相当于promise.then 故2会进入微任务队列

同种的listener会分开执行各自的方法，但是直接调用会按主线程执行相同的方法（eg.click）

视频地址

async await

语法糖，会对返回值包裹一层promise，本质是generator+co的官方实现

async function a(){
     await 1
     console.log(2)
}
//等同于
function a(){
     new Promise(r=>r(1)).then(()=>console.log(2))
}

列表的key

使用index作为key的话，对数组的操作会破坏原有数据的key，造成没必要的开销同时对于输入类的DOM造成错误的更新

深入解析index作为key的负面影响

关于在Chrome中尝试请求数量达到最大并发数

背景：随便找了个node框架写了个2s后返回hello wolrd的接口，在前端请求多次后发现network中返回结果是阻塞的每2s返回一个，firefox中返回正常，

原因：Chrome浏览器锁定了缓存，并等待看到一个请求的结果，然后再次请求相同的资源

stackoverflow.com/questions/2…

宏微任务

为什么promise是微任务，setTimeout是宏任务？

Js自己的回调就是微任务，宿主环境的回调就是宏任务

宿主就是浏览器环境或者node环境

浏览器与js之间的关系

严格的讲JS是一个单线程语言(Web Worker只能算个子线程，并不是独立的线程)，它可能运行在各种环境中，以chrome为例作为JS的宿主环境，它自身是非常复杂的，首先chrome是多进程的，出于安全考虑，chrome为每个标签页都创建了独立的进程，这样在某些页面出现问题时不会影响其他页面一起出问题。在各个进程内部有又多个线程，主要是:

  1. js引擎线程

  2. ui渲染线程

  3. 浏览器事件触发线程

  4. http请求线程

  5. 定时器触发线程

  6. 事件轮询处理线程： event loop

js引擎线程和ui渲染线程互斥，会造成浏览器（前端）是单线程的既视感

js为什么是单线程

运行机制简单，多线程操作dom的结果是不可预估的，也没有线程锁这样的机制所以是单线程

h5引入web worker 提供多线程js能力（实际是子线程 并不是独立的）没有操作dom的能力，

从设计模式上来讲叫Master-Slave主从模式，所以js严格来讲还是单线程

webpack5 模块联邦

配置好模块联邦会单独生成一个文件，在消费者配置引用然后动态import即可使用

个人理解为可引用线上资源（后续看看生成的文件是否进行了特殊处理 只有webpack5才能打包引用）

对象的key为对象时key会触发toString()

Map和weakMap

区别

  1. weakMap只接受对象作为key（提案Symbol也可以作为key）

  2. key是弱引用，对象被回收了对应的引用就会被回收，key value都会消失

Class内部a,b两种写法区别

class C{
    a(){
        console.log(this)
    }
    b = () => {console.log(this)}
}
c = new C()
c.a() // c
f = c.a
f() // undefined // es6中类禁止指向全局对象
c.b() // c

a消耗小，a是直接定义在原型链上的， b相当于在每个实例上赋值

正方形矩阵对角线翻转算法

// 主对角线翻转
    for (let i = 0; i < n; i++) {
        for (let j = 0; j < i; j++) {
            [matrix[i][j], matrix[j][i]] = [matrix[j][i], matrix[i][j]];
        }
    }

构造函数返回自定义对象

如果构造函数返回自定义对象那个new出来的实例对象（其实是无效，并没有实例对象，就是返回的对象）的构造函数是Object

function Foo() {
    this.a = 1;
    return {
        a: 4,
        b: 5
    };
}
Foo.prototype.a = 6;
Foo.prototype.b = 7;
Foo.prototype.c = 8;
var o = new Foo();
console.log(o.a);
console.log(o.b);
console.log(o.c);
// 4, 5, undefined

avatar
文章
阅读
粉丝