window对象

BOM

BOM：window对象下面包含5个属性，navigator、location、document、history、screen，而这五个属性组成了BOM，即BOM就是window对象。

定时器-延时器

特点，隔一段时间，代码执行一次，且只执行一次。
语法：

// 创建定时器
setTimeout(回调函数，等待的毫秒数)
// 清除定时器
let timer=setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)

延时器和递归（所谓递归，我的理解就是函数自己调用自己）结合，可以实现一个setInterval

let  clock=document.querySelector('.clock');
function myInterval(){
           let d=new Date();
          clock.innerText=d.toLocaleString();
          setTimeout(myInterval,1000)
}
myInterval()

JS执行机制

JS这门编程语言的特点就是单线程的，但是，如果JS执行时间过长，就会造成页面渲染不连贯，导致页面渲染加载堵塞。JS为了解决这个问题，利用多核CPU的计算能力，HTML5提出了Web Worker标准，允许JS创建多个线程，于是，JS就出现了同步和异步。

JS同步和异步的特点是：同步，前一个任务结束后，再去执行下一个。同步任务，都是在主线程上执行，形成一个执行栈；异步，做一件事情的同时，处理其他事情。异步任务，会被添加到任务队列中，JS的异步是通过回调函数实现的。

异步任务有哪些事件类型？

1. 普通事件，如click，resize等；
2. 资源加载事件，如load，error等；
3. 定时器，setInterval、setTimeout；

但是注意，alert这个事件是最优先执行的，它的优先级最高。

JS机制执行顺序-事件循环
JS的执行顺序：

1. 先执行执行栈中的同步任务；
2. 异步任务放入任务队列中；
3. 一旦执行栈中的所有同步任务执行完毕，系统就会按照次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

事件循环（Event Loop）
由于主线程不断地获取任务、执行任务，然后再获取任务、执行任务……这种机制被称之为事件循环。

事件循环 执行顺序

navigator对象

navigator的数据类型是对象，记录了浏览器自身的相关信息。
通过 userAgent检测浏览器的版本，进行适配：
下面是代码：

• image

history对象

history的数据类型是对象，和浏览器地址栏的操作相关，如前进、后退等等。常见的属性和方法包括：back()——后退、forward()——前进、go（参数）——前进、后退功能，参数如果是1，则前进1个页面；参数如果是-1，后退一个页面。

本地存储

localStorage

特点：

1. 生命周期永久生效，除非手动删除 否则关闭页面也会存在
2. 以键值对的形式存储，类似于对象的存储方式
3. localStorage只能存储字符串

语法：

// 存储数据
localStorage.setItem（key,value）
// 获取数据
localStorage.getItem（key）
// 删除数据，一次只能删除一个
localStorage.removeItem（key）
// 清除数据，危险操作，用的很少
localStorage.clear()

存储复杂数据类型
存储：将复杂类型转换为字符串，存储到本地：JSON.stringify（复杂数据类型）；
取出：将JSON字符串转换成对象，取出使用：JSON.parse（JSON字符串）

JSON

JSON是一种字符串形式的复杂数据类型，将复杂数据类型按照一定的格式变成字符串，这种格式有可以重新变为对象。所有网络间的数据传输、文本的数据存储，格式必须是字符串。

sessionStorage

特点：

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口(页面)下数据有效，价值和变量类似
3. 以键值对的形式存储使用
4. 用法跟localStorage 基本相同

自定义属性

自定义属性，就是程序员自己定义的属性，data-*。
格式：在标签上一律以“data-”开头。在DOM树（JS）上，以dataset对象方式获取。
代码：

<div class="box"  data-id="10"></div>
<script>
           let    box=document.querySelector(".box");
          console.log(box.dataset.id)
</script>

正则表达式

正则表达式用于匹配字符串中字符组合的模式。在JS中，正则表达式也是对象。
正则表达式在线测试的小工具：https://c.runoob.com/front-end/854/
正则表达式的作用：

1. 匹配：表单验证
2. 替换：过滤敏感词
3. 提取：字符串中提取我们想要的字符串

用法

正则表达式的用法分为两步：定义规则和查找相关字符串。

定义规则

let 变量名=/ 表达式 /，中间是字面量。比如说，let reg=/ 前端 /。
但是，像let reg=/ 前端 /，只是简单写法。标准写法是，let reg2=new RegExp(/前端/)。

查找

第一种，test方法。用来查看正则表达式与指定的字符串是否匹配
语法：regObj.test(被检测的字符串)。如果正则表达式与指定的字符串匹配，返回true，否则返回false。
代码：

let str='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
let reg=/前端/；
let re=reg.test(str)；
console.log(re)

第二种，exec（）方法——查找方法。在一个指定的字符串中执行一个搜索匹配。
语法：regObj.exec（被检测的字符串），如果匹配成功，返回的是一个伪数组，记录的是第一个匹配成功的位置，否则返回null。
代码：

let str='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
let reg=/前端/；
let re=reg.exec（str）;
console.log（re）

元字符

普通字符只能描述它们本身，这些字符被称作普通字符。而元字符是一些有特殊含义的字符，可以极大地提高灵活性和匹配功能。元字符分为边界符、量词、字符类三种。

边界符

^——表示匹配行首的文本，或者说以谁开始
$——表示匹配行尾的文本，或者说以谁结束
代码：

console.log(/^二哈$/.test('二哈很傻'))//只匹配“二哈”两个字

量词：设定某个模式出现的次数

*——重复零次或者更多次
+——重复一次或者更多次
？——重复零次或者一次
{n}——重复n次
{n,}——重复n次或者更多次
{n,m}——重复n次到m次
注意，逗号的两边不要出现空格
代码：

console.log(/^二哈*$/.test('二哈很傻'))

image.png

字符类

[]——匹配字符集合

[]里面加上一个”-“，表示一个范围

1. [a-z]——表示a到z26个字符都可以
2. [a-zA-Z]——表示大小写都可以
3. [0-9]——表示0到9的数字都可以

[]里面加上^取反符号
比如，[^a-z]匹配除了小写字母以外的字符，注意，放到外面是边界的开始
.（点）
匹配除了换行符之外的任何单个字符

预定义:指某些常见模式的简写方式

• \d——匹配0到9之间的任一个数字，相当于[0-9]
• \D——匹配0到9以外的字符，相当于[^0-9]
• \w——匹配任意的字母、数字和下划线，相当于[a-zA-Z0-9_]
• \W——除了字母、数字、下划线以外的字符，相当于[^a-zA-Z0-9_]
• \s——匹配空格（制表符），包括换行符、制表符、空格等，相当于[\t\r\n\v\f]
• \S——匹配非空格的字符，相当于[^\t\r\n\v\f]
  • \r表示换行、\n表示新行，都表示换行
  • \f表示换页

修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等，修正细节。
语法结构：/表达式/修饰符
语法：

1. i，是ignore的缩写，正则匹配时字母不区分大小写，非严格模式
2. g，是global的缩写，匹配所有满足正则表达式的结果
   • g结合exec的效果，和不加是一样的
   • g结合replace结合有奇效
3. replace——替换，语法：string.replace(/正则表达式/，'希望替换的文本')， 字符串具有恒定性，不能单独修改，必须赋值进行覆盖。

遇到的问题

为什么.gitignore规则有时候会不生效？

原因
在项目开发过程中个，一般都会添加.gitignore 文件，规则很简单，但有时会发现，规则不生效。 原因是.gitignore 只能忽略那些原来没有被track的文件，如果某些文件已经被纳入了版本管理中，则修改.gitignore是无效的。

解决方法
git rm -r --cached . ——将本地缓存删除，然后再添加到暂存区，提交

将数组中出现最多的元素找出来？

上代码：

function findMost (arr) {
  if (!arr.length) return;
  if (arr.length === 1) return 1;
  let maxName, maxNum = 0
  let res = arr.reduce((res, currentNum) => {
    res[currentNum] ? res[currentNum] += 1 : res[currentNum] = 1
    if (res[currentNum] > maxNum) {
      maxNum = res[currentNum]
      maxName = currentNum
    }
    return res
  }, {})
  return '出现次数最多的元素为:' + maxName + ', 出现次数为:' + maxNum;
}
console.log(findMost([1,5,5,6]))