1、防抖和节流函数

防抖的主要思想是，当事件被触发后，延迟一定时间再执行相关操作。如果在这个延迟期内再次触发了同样的事件，就会重新计时。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const debounce = function(fn, delay) {
  let timer = null;
  return function() {
    const that = this;
    if(timer){
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(function(){
      // 防止this为window
      fn.apply(that, arguments);
    }, delay)
   }
}

window.addEventListener('resize', debounce(()=>{
  console.log('防抖执行');
}, 300));

节流的主要思想是，在一定时间内只允许函数执行一次，无论事件触发了多少次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const throttle = function(fn, delay){
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if(now - lastTime > delay){
      fn.apply(this, arguments);
      lastTime = now;
    }
  }
}

window.addEventListener('scroll', throttle(()=>{
  console.log('节流执行');
}, 300));

2、实现bind方法

bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 1、原生bind
const obj = {
  name: 'zc',
  age: 12
}
function say(sex){
  console.log(`name: ${this.name}, age: ${this.age}, sex: ${sex}, 参数: ${[...arguments]}`);
}
const mySay = say.bind(obj, 'female');
mySay(111); // name: zc, age: 12, sex: female, 参数: female,111

// 2、实现myBind
Function.prototype.myBind = function(context) {
  const that = this;
  const args = Array.prototype.slice.call(arguments, 1);  // 获取额外参数

  return function() {
    const newArgs = Array.prototype.slice.call(arguments);  // 获取调用时出入的参数
    return that.apply(context, [...args, ...newArgs]); // 执行原始函数并传递参数
  }
}

const mySay1 = say.myBind(obj, 'female');
mySay1(222); // name: zc, age: 12, sex: female, 参数: female,222

3、统计字符串出现最多的字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let str = 'afjghdfraaaasdenas';

function findMaxDuplicateChar(str) {
  if (str.length === 1) return str;

  let charObj = {};
  for (let i=0; i<str.length; i++) {
    if (!charObj[str.charAt(i)]){
      charObj[str.charAt(i)] = 1;
    } else {
      charObj[str.charAt(i)] += 1;
    }
  }

  let maxChar = '', maxValue = 1;
  for (let key in charObj) {
    if(charObj[key] >= maxChar) {
        maxChar = key;
        maxValue = charObj[key];
    }
  }
  return {
    maxChar,
    maxValue
  }
}

4、统计字符串中第一个唯一字符

1
2
3
4
5
6
7
8
9
10
11
12
let str = 'leetcode';  // 返回0
// let str = 'loveleetcode'; // 返回2

function findFirstUniqChar(str) {
  for (let i=0; i<str.length(); i++) {
    let curChar = str[i];
    if (str.lastIndexOf(curChar) === str.indexOf(curChar)) {
       return i;
    }
  }
  return -1;
}

5、找出数组中出现次数最多的元素，并给出其出现过的位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let arr = [1, 2, 1, 1, 4, 5, 6];

function findMostItemByArr(arr) {
  let mostItem, indexs = [], obj = {};
  for (let i=0; i<arr.length; i++) {
    let item = arr[i].toString();
    obj[item] ? obj[item].push(i) : obj[item] = [].concat(i);
  }

  let tempArr = Object.entries(obj);
  mostItem = parseInt(tempArr[0][0]);
  indexs = tempArr[0][1];

  for (const [key, value] of tempArr) {
    if (indexs.length < value.length) {
       mostItem = parseInt(key);
       indexs = value;
    }
  }

  return {
     mostItem,
     indexs,
  }
}

6、数组扁平化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function flatten(arr) {
  const result = [];
  for (let i = 0; i < arr.length; i++) {
    if (Array.isArray(arr[i])) {
      result = result.concat(flatten(arr[i]));
    } else {
      result = result.concat(arr[i]);
    }
  }
  return result;
}

// or

if (!Array.prototype.flat) {
  Array.prototype.flat = function() {
    return [].concat(...this.map(item => Array.isArray(item) ? item.flat() : [item]));
  }
}

7、讲数组扁平化并去除其中重复数据， 最终得到一个升序且不重复的数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];

// es6 扁平化
Array.prototype.flat = function() {
  return [].concat(...this.map(item => Array.isArray(item) ? item.flat() : [item]));
}

// 数组去重
Array.prototype.unique = function() {
  return [...new Set(this)];
}

// 综合
arr.flat().unique().sort((a, b) => a -b);

8、旋转数组

给定一个数组，将数组中的元素向右移动 k 个位置，其中 k 是非负数。

输入: [1,2,3,4,5,6,7] 和 k = 3 输出: [5,6,7,1,2,3,4]

解释:

向右旋转 1 步: [7,1,2,3,4,5,6]

向右旋转 2 步: [6,7,1,2,3,4,5]

向右旋转 3 步: [5,6,7,1,2,3,4]

1
2
3
4
5
6
7
8
9
let arr = [1, 2, 3, 4, 5, 6, 7];

function rotate(arr, k) {
  for (let i=0; i<k; i++) {
    let temp = arr.pop(); // 删除尾部
    arr.unshift(); // 往头部新增元素
  }
  return arr;
}