阅读 72

JavaScript的琐事

这是我参与8月更文挑战的第29天,活动详情查看:8月更文挑战

window.getComputedstyle(element,pseudoElement)

用来获取一个元素的样式的,和 elemet.style 获取样式不同,element.style 只能获取到内联样式,而这个方法可以获取到所有的样式,但是这个方法只能读,不能写入,而 element.style 是可读可写的,所以我们一般是用的这个方法来读,然后再用 element.style 来修改 样式 的

className classList

element.style window.getComputedstyle

  • HTML/Css/Js 各司其职
  • 应当避免不必要的由JS直接操作样式
  • 可以用class 来表示状态
  • 纯展示类交互寻求零 js 方案

防抖与节流:限制函数执行的次数

当你的函数被多次调用的时候,我们就需要用到防抖这个知识点

TDZ(暂时性死区): letconst 声明的变量不会被提升到作用域顶部,如果在声明前访问这些变量,会导致错误,这是因为 JavaScript 引擎在扫描代码发现变量声明时,要么将他们提升到作用域顶部(遇到 var 声明),要么将声明放在 TDZ 中(遇到 let 和 const 声明)。访问 TDZ 中的变量会触发运行时错误。只有执行过变量声明语句后,变量才会从 TDZ 中移除,然后方可访问

Object.freeze(x)

Object.freeze() 方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

传值与传址

基本类型复制是值的复制,互相不受影响。下例中将a变量的值赋值给b变量后,因为基本类型变量是独立的所以a的改变不会影响b变量的值。

 let a = 100;
 let b = a;
 a = 200;
 console.log(b);
复制代码

对于引用类型来讲,变量保存的是引用对象的指针。变量间赋值时其实赋值是变量的指针,这样多个变量就引用的是同一个对象。

 let a = {
   web: "后盾人"
 };
 let b = a;
 a.web = "hdcms";
 console.log(b);
复制代码

for/in

用于遍历对象的所有属性,for/in主要用于遍历对象,不建议用来遍历数组。

遍历数组操作

for/of

用来遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构。

for/in 不同的是 for/of 每次循环取其中的值而不是索引。

大小写转换

将字符转换成大写格式

 console.log('houdunren.com'.toUpperCase()); //HOUDUNREN.COM
复制代码

转字符为小写格式

 console.log('houdunren.com'.toLowerCase()); //houdunren.com
复制代码

函数在使用 let/const 时不会被压入window

形参实参

形参是在函数声明时设置的参数,实参指在调用函数时传递的值。

  • 形参数量大于实参时,没有传参的形参值为 undefined
  • 实参数量大于形参时,多于的实参将忽略并不会报错

获取属性名

使用 Object.getOwnPropertyNames 可以获取对象的属性名集合

 let hd = { name: '后盾人', year: 2010 }
 const names = Object.getOwnPropertyNames(hd)
 console.log(names)
 // ["name", "year"]
复制代码

任务队列 分为 主线程的同步任务队列 宏任务队列 微任务队列

其中 主任务队列 > 微任务队列 > 宏任务队列

promise 是放进微任务队列的

定时器是放入 宏任务队列的

当任务队列中有异步任务的时候,会先执行主线程的任务,然后同时定时器会执行,当定时器执行完的时候,会先放入宏任务队列,然后再等主线程的任务完成的时候,再去执行微任务队列,当微任务队列的任务都执行完的时候,才会去执行宏任务队列

call() 会改变 this 的指向,并且立即执行调用

文章分类
前端
文章标签