JavaScript 相关

1. call 和 apply 方法

this永远指向最后调用函数的对象，call 方法用于改变函数的 this 指向；

let objD = { name: '小李' }
let obj = {
  age: 7,
  showDetail: function () {
    console.log('my name:' + this.name)
  }
}
obj.showDetail()

使用 call 方法以后，改变 this 的指向， 后面的参数为正常函数参数；

let objD = { name: '小李' }
let obj = {
  age: 7,
  showDetail: function (age) {
    console.log('my name:' + this.name + ',my age:' + age)
  }
}
obj.showDetail.call(objD, 17)

用 apply 可以实现相同的效果，只是参数要改成数组的形式；

let objD = { name: '小李' }
let obj = {
  age: 7,
  showDetail: function (age) {
    console.log('my name:' + this.name + ',my age:' + age)
  }
}
obj.showDetail.apply(objD, [16])

this指向

// 1. o.s() 方法执行， 拿到 _ 和 test() 方法
// 2.执行 test() 方法，现在是在函数的最外层执行，this 指向 window，发送了变化，但是 _ 是不会变的
// 3.输出 5 10
var a = 5;
function s() {
  var _ = this;
  function test() {
    console.log("a:", this.a);
    console.log("o.a:", _.a);
  }
  test();
}
let o = {
  a: 10,
  s: s,
};
o.s();

2. 原型和原型链

对象的 __proto__ 和 构造函数的 prototype (原型) 都指向构造函数的原型对象，当对象本身找不到某属性的时候，就会沿着原型查找属性，形成原型链:

function Person(name,age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayName  = function() {
    return this.name;
}
let p = new Person('小马哥',18);
p.__proto__ === Person.prototype
// outPut: true

原型对象通过 constructor 指向构造函数；

Person.prototype.constructor === Person
// outPut: true

3.手写防抖

防抖是闭包的一个应用，timer 可以被外界修改，又不会污染全局；

function debounce(fn, delay) {
  let timer
  return function (...args) {
    // 后面再点击就会销毁第一次的初始化， 再delay 之内就会一直循环这个过程而方法不执行
    if (timer) {
      clearTimeout(timer)
    }
    // 第一次点击初始化
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

4. reduce + hash 去重排序

const initData = (ydrz) => {
  let hash = {};
  ydrz = ydrz.reduce((pre, cur) => {
    hash[cur.czdz] ? '' : (hash[cur.czdz] = true && pre.push(cur));
    return pre;
  }, []);
  let result = ydrz.sort((a, b) => a.czdz - b.czdz);
  return result;
};

5. 正则表达式

创建正则表达式的两种方法：

// 1.字面量创建
var re = /ab+c/;
// 2.RegExp构造函数创建
var re = new RegExp("ab+c");

5.1 横向模糊匹配

正则表达式只有精准匹配时没有太大意义的，其强大之处在于模糊匹配

横向模糊匹配指长度不固定，ab{2,5}c 表示第一个字母时 a，最后一个字母是 c，中间有 2-5 个 c

var regex = /ab{2,5}c/g
var string = 'abc abbc abbbc abbbbc adddc'
console.log(string.match(regex)) // outPut: ['abbc', 'abbbc', 'abbbbc']

5.2 纵向模糊匹配

纵向模糊匹配指在具体某一位字符时，它可以有多种可能 /a[123]b/g 表示第二位可以说 1 2 3 中的某一个

var regexp = /a[123]b/g
var string = 'a0b a1b a2b a3b a4b'
console.log(string.match(regexp)) // outPut: ['a1b', 'a2b', 'a3b']