点滴积累

117 阅读4分钟

1、js数据类型

六种原始类型string null number undefined boolean symbol 对象类型:object

function test(person) {
  person.age = 26
  person = {
    name: 'yyy',
    age: 30
  }

  return person
}
const p1 = {
  name: 'yck',
  age: 25
}
const p2 = test(p1)
console.log(p1) // -> ?函数传参传递的是对象的地址副本
console.log(p2) // -> ? person被分配新的地址

2、stopPropagation和preventDefault作用

前者: 取消事件的进一步捕获或冒泡。 究竟是取消冒泡阶段处理还是捕获阶段处理呢,在所有 DOM 节点中都包含事件监听addEventListener()和 removeEventListener()这两个方法,并且它们都接受 3 个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。如果布尔值是 true,则在捕获阶段调用事件处理程序;如果是 false,表示在冒泡阶段调用事件处理程序。默认为冒泡阶段处理。 使用场景如:div和body同时添加click事件,当点击div时,不触发body的事件,只要在div执行语句之后使用e.stopPropagation()即可不触发body的事件。

3、typeOf

能判断:string number undefined boolean
不能判断:object(typeOf函数 =function) null(其实不是object)

5、看代码写输出结果

  • for循环里面settimeout
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
}
var声明提升到for外部,最终console.log(i) ,i就是3

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1)
}
let有暂时性死区,作用域只在for内部
  • 宏任务/微任务
setTimeout(() => {
    //执行后 回调一个宏事件
    console.log('内层宏事件3')
}, 0)
console.log('外层宏事件1');

new Promise((resolve) => {
    console.log('外层宏事件2');
    resolve()
}).then(() => {
    console.log('微事件1');
}).then(()=>{
    console.log('微事件2')
})
第一个宏任务进入主线程, 遇到 setTimeout  分发到宏任务Event Queue中
第一轮红任务:12,结束后:微事件12
第二轮红任务:内层宏事件3

函数提升优先于变量提升,函数提升会把整个函数挪到作用域顶部,变量提升只会把声明挪到作用域顶部

var 存在提升,我们能在声明之前使用。let、const 因为暂时性死区的原因,不能在声明前使用

var 在全局作用域下声明变量会导致变量挂载在 window 上,其他两者不会

let 和 const 作用基本一致,但是后者声明的变量不能再次赋值

6、简答

  • promise 到达时机返回结果。 all():将多个promise包装成一个实例,返回的是个数组。 race():最先结束的peomise就是实例最终状态 async await
  • npm install安装机制 npm 是 Node 的模块管理器

npm update 它会先到远程仓库查询最新版本,然后查询本地版本。如果本地版本不存在,或者远程版本较新,就会安装。

npm 模块仓库提供了一个查询服务,叫做 registry

这个网址后面跟上模块名,就会得到一个 JSON 对象,里面是该模块所有版本的信息。比如,访问 registry.npmjs.org/react,就会看到 react 模块所有版本的信息。

Node模块的安装过程是这样的。

1、发出npm install命令 2、npm 向 registry 查询模块压缩包的网址 3、下载压缩包, 4、解压压缩包到当前项目的node_modules目录

所有模块都从缓存安装,这样就大大加快了下载速度。 npm install --cache-min Infinity

  • css选择器 类 id 标签 伪类: 伪元素: 属性选择器 派生选择器(上下文选择器):后代 兄弟 子

其中伪类和伪元素的根本区别在于:它们是否创造了新的元素。

伪元素 :代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

image.png

伪类:存在DOM文档中,逻辑上存在但在文档树中却无须标识的“幽灵”分类。

image.png

  • 如何隐藏页面元素 display:none 被隐藏的元素不占据任何空间 仍然占据空间: 【opacity: 0;】 visibility: hidden 将元素移出可视区域: position: absolute; top: -999px; left: -999px;

7、手写代码(我还不太理解)

  • 实现debounce防抖:
  • 实现节流:防止用户多次重复触发请求,解决:设置定时器
原理:间隔到达一个周期才触发请求
  • 实现数组去重函数 方法一:set数据结构
const a=[1,1,2,3,3,2]
const arr=new Set(a)

方法一:indexOf方法