你不知道的console

• 打印调试信息

console.debug('debug');

• 打印警告

console.warn('This is a warn');

• 打印错误

console.error('This is a error');

• 清空消息

console.log(1);
console.clear();
console.log(2);

• 给消息添加样式

const style = `
  color:red;
  background:black
`
console.log('%c你好',style)

• 打印消息

// 1.普通消息
console.log('console');

// 2.信息
console.info('info');

// 3.表格
const table = [
  { name: '张三', age: 20},
  { name: '李四', age: 23}
]
console.table(table);

// 4.分组
const label = 'This is label'
console.group(label)           // 分组展开
console.groupCollapsed(label)  // 分组关闭
console.log('first log');
console.log('second log');
console.groupEnd(label)

// 5.对象结构
function fn(){}
console.dir(fn);
console.dir(document.body);

// 6.计时 测量一个javascript脚本程序执行消耗的时间
// 启动计时器
console.time('loop')
// 测试用代码
// 停止计时，输出时间
console.timeEnd('loop')

// 7.计数
function fn(){
    // 输出一个计数器，标识了代码块被执行的次数
    console.count('loop')
}
fn();
fn();
// 重置指定标签的计数器
console.countReset('loop')

// 8.堆栈
function a(){
    b();
}
function b(){
    console.trace();
}
a();

// 9.断言
function sum(a,b){
    return a + b;
}
// 当为false的时候报错
console.assert(sum(1,2) === 4);

判断终端设备

function getClient() {
  if (navigator.userAgent) {
      let u = window.navigator.userAgent
      return {
          trident: u.indexOf('Trident') > -1, // IE内核
          presto: u.indexOf('Presto') > -1, // opera内核
          webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐内核
          mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
          android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
          iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
          iPad: u.indexOf('iPad') > -1, // 是否iPad
          webApp: u.indexOf('Safari') === -1, // 是否web应该程序，没有头部与底部
          weixin: u.indexOf('MicroMessenger') > -1, // 是否微信
          qq: u.match(/\sQQ/i) === 'qq' // 是否QQ
      }
  } else {
    console.log('环境异常')
  }
}

var、let、const的区别

• 变量提升

  var具有变量提升的机制，let、const没有变量提升的机制。

• 重复声明

  var可以多次声明同一个变量，let、const不可以多次声明同一个变量。

• 指针指向

  • var、let用来声明变量, const表示常量
  • let和var创建的变量是可以更改指针指向（可以重新赋值）。
  • 但const声明的变量是不允许改变指针的指向。
    • 重新为常量对象赋值，可以更改常量对象的属性。
    • 无法重新为常量数组赋值，可以更改常量数组的元素。

• 块级作用域

  块作用域由 { } 包括

  • var 声明的变量没有自身作用域，let和const声明的变量有自身的作用域。

• 全局添加属性

  浏览器的全局对象是window，Node的全局对象是global。

  • var声明的变量为全局变量，并且会将该变量添加为全局对象的属性，但是let和const不会。

• 初始值设置

  • 在变量声明时，var 和 let 可以不用设置初始值。而const声明变量必须设置初始值。

• 暂时性死区

  • 在使用let、const命令声明变量之前，该变量都是不可用的，称为暂时性死区。使用var声明的变量不存在暂时性死区。

对象合并

var obj1 = {a:12,b:20}
var obj2 = {d:30,b:89}
// 1.使用扩展运算符
var obj = {...obj1,...obj2}
// 2.使用Object.assign
var obj = Object.assign(obj1,obj2)
// 3.循环添加
extend(obj1,obj2)
function extend(target,source){
    for(var key in source){
        target[key] = source[key]
    }
    return target;
}

箭头函数和普通函数区别

箭头函数语法

()中定义参数，如果只有一个参数，可以不写()  如:x =>{}
{}中定义函数体，如果函数体中只有一个返回值,可以不写return

普通函数

// 具名函数
function func(){}
// 匿名函数
let fun = function(){}

• 箭头函数都是匿名函数，普通函数可以有匿名函数，也可以有具名函数
• this指向不同
  • 普通函数的this指向调用它的那个对象
  • 箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向，如 call() , bind() , apply()
• 箭头函数不具有 arguments 对象
  • 每一个普通函数调用后都具有一个arguments 对象，用来存储实际传递的参数。但是箭头函数并没有此对象。
• 箭头函数不能用于构造函数，不能使用new
  • 原因:
    • 箭头函数没有prototype。因此不能使用箭头作为构造函数，也就不能通过new操作符来调用箭头函数。

export暴露的三种方式

• 分别暴露

// 可暴露字符串，对象，函数...
export let obj = { city : "北京" }
export const fuc = (value)=>{}

• 统一暴露

let obj = { city : "北京" }
const fuc =(value)=>{}
export {obj,fuc}

• 默认暴露

export default {
    obj:{
        student:''
    },
    son(value){},
}

• 引用

// 1.结构赋值引用
import {obj,fuc} from '@/utils/config'
// 2.通用引用
import * as ex from '@/utils/config'
// 3.只针对默认暴露
import config from './js/export.js'  

搞懂client、offset、page、screen区别

• client
  • 鼠标指针在视口（viewport）中的水平坐标位置。视口通常是指浏览器窗口的可视区域，不包括浏览器的边框、菜单栏、滚动条等
• offset
  • 鼠标指针相对于事件源元素（触发事件的元素）的左上角的水平偏移量
• page
  • 鼠标指针在整个文档中的水平坐标位置，包括滚动的部分
  • pageY = clientY + 纵向滚动距离
  • pageX = clientX + 横行滚动距离
• screen
  • 鼠标指针在用户屏幕上的水平坐标位置

闭包