数组去重

const array = [5,4,7,8,9,2,7,5];

方法1
array.filter((item,idx,arr) => arr.indexOf(item) === idx);

方法2
const nonUnique = [...new Set(array)];

查看分支

git branch -a # a for all

查看当前分支下工作区的状态

git status

放弃当前变更

git restore

添加变更到暂存区

git add .
git add filename

提交暂存区的数据

git commit -m "Add: modulename or filename: modification"

本地的master分支推送到origin主机

git push -u origin master 指定origin为默认主机，后面就可以不加任何参数使用git push了

消除同一个分支中的合并记录

git pull --rebase

列出本地的所以分支

git branch <branch_name>

创建分支并切换到当前创建的分支

git checkout -b <branch_name>

删除本地分支

git branch -d <branch_name>

强制删除本地分支

git branch -D <branch_name>

删除远程分支

git push origin --delete <branch_name>

添加远程地址

git remote add origin <source_url> 当推送到服务器时,首先要添加远程地址

修改本地代码关联的远程地址

git remote set-url origin <new_source_url> 当代码库远程迁移后，修改本地代码关联的远程地址

请找出字符串中连续出现最多的字符和个数

const str1 = 'abcaakjbb' 
const str2 = 'abbkejsbcccwqaa'
function getMax(str) {
  // \1指的是括号中匹配的内容, .匹配除换行符（\n、\r）之外的任何单个字符
  const match = str.match(/(.)\1+/g);
  match.sort((x,y) => y.length - x.length);
  const len = match[0].length;
  const obj = {};
  for(let item of match) {
    if(item.length <len) {
      break
    }else{
      obj[item[0]] = len
    }
  }
  return obj
}
// 输出 {a: 2, d: 2}
console.log(getMax(str1))
// 输出 {c:3}
console.log(getMax(str2))

去重思维

let str = "zhufengpeixunzhoulaoshi";
let obj = {};
[].forEach.call(str, char => {
	if (typeof obj[char] !== "undefined") {
		obj[char]++;
		return;
	}
	obj[char] = 1;
});
let max = 1,
	res = [];
for (let key in obj) {
	let item = obj[key];
	item > max ? max = item : null;
}
for (let key in obj) {
	let item = obj[key];
	if (item === max) {
		res.push(key);
	}
}
console.log(`出现次数最多的字符：${res}，出现了${max}次`);

排序

let str = "zhufengpeixunzhoulaoshi";
str = str.split('').sort((a, b) => a.localeCompare(b)).join('');
// console.log(str);//=>"aeefghhhiilnnoopsuuuxzz"
let ary = str.match(/([a-zA-Z])\1+/g).sort((a, b) => b.length - a.length);
// console.log(ary); //=>["hhh", "uuu", "ee", "ii", "nn", "oo", "zz"]
let max = ary[0].length,
	res = [ary[0].substr(0, 1)];
for (let i = 1; i < ary.length; i++) {
	let item = ary[i];
	if (item.length < max) {
		break;
	}
	res.push(item.substr(0, 1));
}
console.log(`出现次数最多的字符：${res}，出现了${max}次`);

从最大到最小去试找

let str = "zhufengpeixunzhoulaoshi",
	max = 0,
	res = [],
	flag = false;
str = str.split('').sort((a, b) => a.localeCompare(b)).join('');
for (let i = str.length; i > 0; i--) {
	let reg = new RegExp("([a-zA-Z])\\1{" + (i - 1) + "}", "g");
	str.replace(reg, (content, $1) => {
		res.push($1);
		max = i;
		flag = true;
	});
	if (flag) break;
}
console.log(`出现次数最多的字符：${res}，出现了${max}次`);

手写call

Function.prototype.myCall = function(context) {
    if(typeof this !== 'function') {
        throw new TypeError('not function')
    }
    context = context || window
    context.fn = this;
    let arg = [...arguments].slice(1);   
    let result = context.fn(...arg);    
   delete context.fn
   return result
}

分类

原始值类型「值类型/基本数据类型」

• number 数字
• string 字符串
• boolean 布尔
• null 空对象指针
• undefined 未定义
• symbol 唯一值
• bigInt 大数

对象类型「引用数据类型」

• 标准普通对象 object
• 标准特殊对象 Array、RegExp、Date、Math、Error……
• 非标准特殊对象 Number、String、Boolean……
• 调用/执行对象「函数」function

作用域就是一个变量可以使用的范围，主要分为全局作用域和函数作用域
全局作用域就是Js中最外层的作用域
函数作用域是js通过函数创建的一个独立作用域，函数可以嵌套，所以作用域也可以嵌套
Es6中新增了块级作用域（由大括号包裹，比如：if(){},for(){}等）

定义：Event Loop即事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理

• 宏任务：script、setTimeout、setInterval、I/O。
• 微任务：Process.nextTick、Promise、MutationObserve。

宏任务和微任务都属于异步任务，一个宏任务执行结束后会查看微任务队列是否为空而去决定执行微任务还是执行下一个宏任务。

事件循环存在许多细节需要明确，如下：

1. 宏任务队列和微任务队列都是独立于事件循环的，这也就意味着任务队列的添加行为也发生在事件循环之外， （为什么任务队列的添加行为要独立于事件循环之外？主要是因为防止阻塞事件循环导致浏览器响应用户交互缓慢） 因此检查和添加任务的行为，是独立于事件循环完成的。
2. 因为JS基于单线程执行模型，所以宏任务和微任务都是逐个执行的，当一个任务开始执行后，在完成之前，中间不会被任何任务中断，除非浏览器决定终止执行该任务，比如某个任务执行时间过长或者内存占用过大。
3. 所有微任务会在下一次渲染之前执行完成， 因为他们要在渲染UI之前完成更新应用程序的状态。
4. 浏览器通常会尝试每秒渲染60次页面，已到达每秒60帧的速度，这意味着浏览器会尝试在16ms内渲染一帧，在理想情况下，单个任务和该任务附属的所有微任务都应在16ms内完成。
5. 现在然我们思考一下，在浏览器完成页面渲染，进入下一轮事件循环迭代后，可能发生的三种情况。
6. 在另一个16ms结束前，事件循环执行到”是否需要进行渲染“的决策环节，因为更新UI是一个复杂的操作，所以如果没有显式的指定需要页面渲染，浏览器可能不会选择在当前的循环中执行UI渲染操作。
7. 在最后一次渲染完成大约16ms，事件循环执行到”是否需要进行渲染“的决策环节，在这种情况下，浏览器会进行UI更新，以便用户能够感受到顺畅的应用体验。
8. 执行下一个任务（和相关的所有微任务）耗时超过16ms，在这种情况下，浏览器将无法以目测帧率重新渲染页面，且UI无法更新。

定义

红宝书：闭包是指有权访问另外一个函数作用域中的变量的函数

MDN：闭包是指那些能够访问自由变量的函数--现在MDN已经修改闭包的定义

• 其中自由变量，指在函数中使用的，但既不是函数参数arguments也不是函数的局部变量的变量，其实就是另外一个函数作用域中的变量。
• 闭包让你可以在一个内层函数中访问到其外层函数的作用域

偏移尺寸

• offsetHeight：，元素在垂直方向上占用的像素尺寸，包括它的高度、水平滚动条高度（如果可
  见）和上、下边框的高度。
• offsetLeft：元素左边框外侧距离包含元素左边框内侧的像素数。
• offsetTop：元素上边框外侧距离包含元素上边框内侧的像素数。
• offsetWidth：元素在水平方向上占用的像素尺寸，包括它的宽度、垂直滚动条宽度（如果可
  见）和左、右边框的宽度。

offsetLeft 和 offsetTop 是相对于包含元素的，包含元素保存在 offsetParent 属性中。offsetParent 不一定是 parentNode。比如，td元素的 offsetParent 是作为其祖先的table元素，因为table是节点层级中第一个提供尺寸的元素

匹配小括号内容

var str = "123{xxxx}(123)456[我的]789123[你的]456(1389090)789";
var regex1 = /((.+?))/g;
//正则表达式里边(.+?)表示匹配：“(”开始，其后至少含有1个除了“)”的任意字符，且再遇到“)”，就结束匹配
console.log(str.match(regex1)); //["(123)", "(1389090)"]

单个组件生命周期钩子执行顺序

页面加载：beforeCreate -> created -> beforeMount -> mounted
页面关闭：beforeDestroy -> destroyed
页面数据改变：beforeUpdate -> updated

BFC-块级格式化上下文

BFC是页面上一个独立且隔离的渲染区域，容器里的子节点不会在布局上影响到外面的节点，反之亦然。

JS底层存储机制:堆(Heap)、栈(Stack)内存

堆（Heap）、栈（Stack）
ECStack（Execution [ˌeksɪˈkjuːʃn] Context Stack）和 EC（Execution Context ）
GO（Global Object）和 VO（Varibale Object）

this：函数执行的主体（谁执行的函数）

• 事件绑定
• 函数执行（普通函数执行、成员访问、匿名函数、回调函数）
• 构造函数
• 箭头函数（生成器函数generator）
• 基于call/apply/bind强制修改this指向

全局上下文中的this：window
块级上下文中没有自己的this，所有的this都是继承上级上下文中的this（箭头函数也是）

事件绑定

• DOM0：xxx.onxxx=function(){}
• DOM2：
  xxx.addEventListener('xxx',function(){})
  xxx.attachEvent('onxxx',function(){})
  给当前元素的某个事件行为绑定方法（此时是创建方法，方法没执行），当事件行为触发，浏览器会把绑定的函数执行，此时函数中的this->当前元素对象本身
  特殊：基于attachEvent实现事件绑定，方法执行，方法中的this是window
  document.body.addEventListener('click',function(){console.log(this);})//->body

函数执行

正常的普通函数执行：看函数执行前是否有“点”，如果有“点”，“点”前面是谁this就是谁，没有this是window（严格模式下是undefined）

function fn() {
  console.log(this);
}
let obj = {
  name:'asever6',
  fn
}
fn();//this->window
obj.fn();//this-obj

匿名函数：
　函数表达式：等同于普通函数或者事件绑定等机制
　自执行函数：this一般都是window/undefined
　(function(x){console.log(this)})(10);//window/undefined
　回调函数：一般都是window/undefined，但是如果在函数执行中，对回调函数的执行做了特殊处理，以自己的处理为主
括号表达式：小括号中包含“多项”，这样也只取最后一项，但是this受到影响（一般是window/undefined）
　(obj.fn)();//this->obj
　(10,obj.fn)();//this->window（严格模式下是undefined）

实例.proto === 其构造函数.prototype，构造函数.prototype.constructor === 构造函数，一路向上找
原型: 在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象。
原型链: 当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会沿着__proto__向上去原型对象中查找, 如果还没有找到, 就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

定义
箭头函数表达式是传统函数表达式的一种替代方式，但受到限制，不能在所有情况下使用。因为它们有词法作用域(父作用域)，并且没有自己的this和argument

标题

Markdown支持6种级别的标题，对应html标签 h1 ~ h6

h1

h2

h3

h4

h5

h6

防抖

定义: 是指触发事件后在n秒内函数只能执行1次, 如果在n秒内又触发了事件, 则会重新计算函数执行时间

<div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;
background-color:#ccc;font-size:80px;"></div>

方案1--包含立即执行

   let num = 1;
    let content = document.getElementById('content');

    function count() {
      content.innerHTML = num++;
    }
    content.onmousemove =debounce(count,300,false);

    function debounce(func, wait = 300, immediate = false) {
      let timer = null;
     
      return function anonymous(...params) {
        let now = immediate && !timer;
        //每次点击都把之前设置的定时器清除掉
        clearInterval(timer)
        //重新设置一个新的定时器监听wait事件内是否触发第二次
        timer = setTimeout(() => {
          timer = null; //垃圾回收机制
          //wait这么久的等待中，没有触发第二次
          !immediate ? func.call(this, ...params) : null;
        }, wait);

        //如果是立即执行
        now ? func.call(this, ...params) : null;
      }
    }

jsconfig.json

src文件夹的别名的设置 因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些
创建jsconfig.json文件(与src同级)

{ 
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

格式化时间

/*
* formatTime：时间字符串的格式化处理
*   @params
*   templete:[string] 我们最后期望获取日期格式的模板
*   模板规则:{0}->年  {1~5}->月日时分秒
*   @return
*   [string]格式化后的时间字符串
*/
function formatTime(templete = "{0}年{1}月{2}日 {3}时{4}分{5}秒") {
	let timeAry = this.match(/\d+/g);
	return templete.replace(/\{(\d+)\}/g, (...[, $1]) => {
		let time = timeAry[$1] || "00";
		return time.length < 2 ? "0" + time : time;
	});
}