前端总结

• js的基本数据类型
  undefined、null、string、boolean、number、symbol
• this
  this表示当前对象，如果在全局作用范围内使用this，则指代当前页面对象window； 如果在函数中使用this，则this指代什么是根据运行时此函数在什么对象上被调用。 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向
  apply和call两个函数的作用相同，唯一的区别是两个函数的参数定义不同
  call是一串参数列表
  Function.call(obj[, param1[, param2[, [,…paramN]]]]);
  apply是参数数组
  Function.apply(obj, [argArray]);
• var/let/const
  JS中作用域有：全局作用域、函数作用域。没有块作用域的概念。ECMAScript 6(简称ES6)中新增了块级作用域。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。
  es5：var 　　 es6：let 、const
  1.var定义变量，没有块的概念，可以跨块访问，不能跨函数访问，不初始化出现undefined，不会报错。
  2.let定义变量，只能在块作用域里访问，也不能跨函数访问，对函数外部无影响。
  3.const定义常量，只能在块作用域里访问，也不能跨函数访问，使用时必须初始化(即必须赋值)，而且不能修改
• js闭包
  Js闭包就是能读取其他函数内部变量的函数。
  function f1(){
  　　　　n=999;
  　　　　function f2(){
  　　　　　　alert(n); // 999
  　　　　}
  　　}
  F2就是闭包。闭包简单理解为定义在一个函数内部的函数
  在循环中使用闭包：
  编写一个函数，该函数将遍历整数列表，并在延迟3秒后打印每个元素的索引。
  错误写法

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
  }

正确写法：

// 立即执行函数(重新生成一个私有变量)
for (var i = 0; i< 5; i++){
   setTimeout( (function(i_local){
      console.log(i_local)
   })(i), 3000)
}

//es6 let 块级变量

for(let i =0; i< 5 ; i ++){
    setTimeout(function(){
        console.log(i)
     }, 3000)
}

• 事件节流与防抖
  节流函数：无论用户触发多少次scroll事件，在一段时间内只执行一次回调

function throttle(fn, interval) {
  // last为上一次触发回调的时间
  let last = 0
  
  // 将throttle处理结果当作函数返回
  return function () {
      // 保留调用时的this上下文
      let context = this
      // 保留调用时传入的参数
      let args = arguments
      // 记录本次触发回调的时间
      let now = +new Date()
      
      // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
      if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
          last = now;
          fn.apply(context, args);
      }
    }
}

// 用throttle来包装scroll的回调
const better_scroll = throttle(() => console.log('触发了滚动事件'), 1000)

document.addEventListener('scroll', better_scroll)

防抖函数：我会等你到底。在某段时间内，不管你触发了多少次回调，我都只认最后一次。

function debounce(fn, delay) {
  // 定时器
  let timer = null
  
  // 将debounce处理结果当作函数返回
  return function () {
    // 保留调用时的this上下文
    let context = this
    // 保留调用时传入的参数
    let args = arguments

    // 每次事件被触发时，都去清除之前的旧定时器
    if(timer) {
        clearTimeout(timer)
    }
    // 设立新定时器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

// 用debounce来包装scroll的回调
const better_scroll = debounce(() => console.log('触发了滚动事件'), 1000)

document.addEventListener('scroll', better_scroll)

• 收藏连接
  https://www.cnblogs.com/laixiangran/p/5225689.html
• 微信小程序
  1）wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别
  wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
  wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
  wx.switchTab()：跳转到 abBar 页面，并关闭其他所有非 tabBar 页面
  wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
  wx.reLaunch()：关闭所有页面，打开到应用内的某个页面
  2）bindtap和catchtap的区别是什么
  相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分
  不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的
  3）微信小程序有哪些传值(传递数据)方法？
  1、给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的 param参数获取。
  注：data-名称不能有大写字母、不可以存放对象
  2、设置id的方法标识来传值，通过e.currentTarget.id获取设置的id的值，然后通过设置全局对象的方式来传递数值
  3、在navigator中添加参数数值
  或
  1、使用全局变量实现数据传递
  2、页面跳转或重定向时，使用url带参数传递数据
  3、使用组件模板template传递参数
  4、使用缓存传递参数
  5、使用数据库传递参数
• 小程序的生命周期函数
  onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
  onShow() 页面显示/切入前台时触发
  onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
  onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
  onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时
• == 和 === 的区别
  ==比较过程
  如果两个值的数据类型相同，再比较其值，相同返回true，不同返回false
  如果两个值的数据类型不同，进行数据类型转换，转换规则如下：
  (1). 如果一个是null，一个是undefined，二者相等
  (2). 如果一个是字符串一个是数值，把字符串转换为数值再比较
  === 比较过程
  如果二者数据类型不同直接返回false
  使用 === 返回true时，说明比较的两个数据不仅类型相同，而且值也相等
  使用 == 返回true时，二者数据类型不一定相同，但是转换为相同类型后的值一定相等
  ⚠️ NaN不等于任何值，包括本身
• 写一下不知道宽高元素垂直水平居中方法

1. display:table-cell
   组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display:inline-block即可）。
2. transform:translate(-50%,-50%)
3. 弹性布局
   display:flex;
   justify-content:center;
   align-items:center;

• 行内元素，块级元素区别
  块级元素会独占一行，其宽度自动填满其父元素宽度。
  行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
  一般情况下，块级元素可以设置width,height属性，行内元素设置width, height无效(⚠️：块级元素即使设置了宽度，仍然是独占一行的)
  块级元素可以设置margin和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
  简述div元素和span元素的区别
  DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。
  SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。块元素相当于内嵌元素在前后各加一个换行。其实，块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素就成了内嵌元素，同样地，给内嵌元素定义了display:block就成了块元素了。
• css选择器的优先级
  !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
• margin坍塌问题：
  在文档流中，父元素的高度默认是被子元素撑开的
  也就是说子元素多高，父元素就多高
  但是当子元素设置浮动之后，子元素会完全脱离文档流
  此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷