record

css

nth-child

• :nth-child(-n+3) 选择第1至第3的元素

scss

• #{} 表示将变量与文本连接在一起
  • 例如：.test-#{$i} $i为变量

string

string杂记

• string不可变的，字符串一旦被创建就不能对某个字符进行改变，例如：

  let test_str = 'mob';
      test_str[0] = 'j';
  

  这样修改，test_str的值还是mob，字符串是不可变的。
  只能对test_str赋予其他值，方可改变。

Array

slice()

• 该方法不传参，将浅拷贝这个数组
• 该方法传递一个参数，将从该索引位置一直切到数组末尾

sort() 根据返回值设置正/倒序

• 1 --> 正序(从小到大)
• -1 --> 倒序

splice(start, deleteCount, [item1, item2…]) 可删除、替换或者添加内容

** 该方法会删除原修改原数组

• start 为开始索引位置
• deleteCount 为删除个数
• item 要添加进数组的元素

数组杂记

• some()、every()等数组方法会返回匹配的boolean
• find()返回匹配的第一个值。同理，findIndex()返回匹配的第一个索引值
• pop()和shift()不接受参数，每次只能删除一个元素。返回被删除的值

Object

拷贝对象

• Object.assign() --> Object.assign({}, testObj)
• JSON.parse(JSON.stringify(testObj))

Object.freeze() 冻结对象，不能被修改

对象杂记

• 对象属性动态匹配

  const method = video.paused ? 'play' : 'pause';
  video[method]();

• javascript几乎所有的对象都有prototype属性，这个属性属于它所在的构造函数
• 当new实例后的对象中存在同样的变量/方法，可将这些变量/方法 存放在构造函数的原型上，减少重复代码
  • 例如：Brid.prototype.numLegs = 4
• Object.freeze() 冻结对象，不能被修改
• isPrototypeOf() 检查一个对象是否存在于另一个对象的原型链上
• 手动设置新对象原型时需给原型定义constructor属性，否则将会清除对象的constructor属性
  • 例如，javascript Bird.prototype = { constructor: Bird …… }

其他杂记

• document.documentElement.style.setProperty()，通过此方法可以设置css变量
• ?? 当前一个变量为undefined或null时取后一个。例如：test1 ?? test2
• 尽量使用map、filter、reduce、find等方法
• $(event.target) 点击源元素
• // => 表示显示的结果
• 递归函数在没有函数调用时，必需有一个跳出钩子，否则永远不会执行完毕。跳出钩子例如：

    if(n <= 0) { return 1 }
  

• img元素根据父元素宽高自动调整大小，而不会超过图片的原始大小

    img {
      max-width: 100%;
      height: auto;
    }
  

• 在所有js代码都不加分号的前提下，如遇一行开头是()、{}、[]时需要加分号(😉，否则报错
  • 注：以下这种情况不加分号会报错。
  • 解决方法：在匿名函数 ( 前加上分号 // --> ?(function() {})()

    console.log(4)
    (function() {})()
  

• 当文件中只有一个值需要导出的时候，通常使用export default {}来导出
  • 注意：不能将export default和var、let或const同时使用
• javascript有六种原始(不可变)数据类型：String、Number、Booleam、Null、Undefined、Array、Symbol，和一种可变数据类型:Object
• 判断正整数：num > 0 && num % parseInt(num) === 0
• 判断奇偶数
  • const hasTrue = num => !!(num & 1) ? true : false
• 求幂运算符 ** 栗子：const num = 3**2

原型链

一般的，构造函数的prototype 和 实例的__proto__都是共同指向它们的原型对象

• Object.prototype 并不是原型链的终点，Object.prototype也有自己的__proto__ 指向null,这个才是原型链终点

正则表达式

测试正则表达式的方法

• .test(str) 将正则表达式跟字符串匹配，成功返回true，反之false
• .match(reg)

符号

• ^ 一般表示为首匹配。当放在[^]里面时，表示匹配某个未指定的字符
• . 匹配所有
• • 匹配一个或多个（字符必须时连着重复）
• • 匹配零个或多个
• ？惰性匹配（匹配最短字符串）或 匹配零个或一个
• \w [a-z0-9_] \W：与\w相反，匹配非数字字母
• \d [0-9] \D: 与\d相反
• \s 匹配空白字符

匹配案例

• 校验整数 // --> /^[-+]?\d*$/
• 校验小数 // --> /^[-+]?\d+(.\d+)?$/

localStorage 与 sessionStorage

用法以localStorage为例，localStorage 与 sessionStorage用法一致

基础变量

• localStorage.setItem('基础变量', 'value')
• localStorage.getItem('基础变量')

引用变量

• localStorage.setItem('引用变量', JSON.stringify(value))
• JSON.parse(localStorage.getItem('引用变量', value))

其他用法

• localStorage.removeItem('基础变量')
• 清空：localStorage.clear()

两者的生命周期

• localStorage：除非手动清空，否则一直存在
• sessionStorage：生命结束于当前标签页关闭或者浏览器关闭

加密库：crypto-js

面试问题

load、$(document).ready、DOMContentLoaded的区别？

• DOM树构建完成 // --> DOMContentLoaded触发、**$(document).ready()**触发
• 页面加载完成 // --> load事件触发

includes 比 indexOf好在哪？

includes()可以检测NaN，而indexOf()检测不到。includes()内部使用Number.isNaN对NaN进行了匹配

什么是文档碎片

是什么：一个容器，暂时存放创建的dom元素

• 使用document.createDocumentFragment()创建
• 用处：将需要添加的大量元素添加到文档碎片中，再将文档碎片插入到需要添加的位置，大大减少dom操作，提高性能

深拷贝与浅拷贝的区别：

• 深拷贝层层拷贝；浅拷贝只拷贝最外一层，深层只是引用
• 在深拷贝中，新对象的更改不会影响原始对象；而在浅拷贝中，新对象中的更改，原始对象也随之修改
• 在深拷贝中，原始对象不与新对象共享相同的属性；而在浅拷贝中，它们具有相同的引用

js变量在内存中具体存储形式

• 基本数据类型：存在栈内存里
• 引用数据类型：指针存栈内存，指向堆内存中有一块地址，内容存堆内存中

JavaScript的事件流模型有哪些？

• 事件冒泡：由最具体的元素接收，并往上传播
• 事件捕获：由最不具体的元素接收，并往下传播
• DOM事件流：事件捕获 -> 目标阶段 -> 事件冒泡
  存中具体存储形式
• 基本数据类型：存在栈内存里
• 引用数据类型：指针存栈内存，指向堆内存中有一块地址，内容存堆内存中

JavaScript的事件流模型有哪些？

• 事件冒泡：由最具体的元素接收，并往上传播
• 事件捕获：由最不具体的元素接收，并往下传播
• DOM事件流：事件捕获 -> 目标阶段 -> 事件冒泡