JS

防抖节流

节流

节流的意思是，规定时间内，只触发一次。比如我们设定500ms，在这个时间内，无论点击按钮多少次，它都只会触发一次。具体场景可以是抢购时候，由于有无数人 快速点击按钮，如果每次点击都发送请求，就会给服务器造成巨大的压力，但是我们进行节流后，就会大大减少请求的次数。

//节流throttle代码：
function throttle(fn,delay) {
    let canRun = true; // 通过闭包保存一个标记
    return function () {
         // 在函数开头判断标记是否为true，不为true则return
        if (!canRun) return;
         // 立即设置为false
        canRun = false;
        // 将外部传入的函数的执行放在setTimeout中
        setTimeout(() => { 
        // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。
        // 当定时器没有执行的时候标记永远是false，在开头被return掉
            fn.apply(this, arguments);
            canRun = true;
        }, delay);
    };
}
 
function sayHi(e) {
    console.log('节流：', e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi,500));

防抖

防抖的意思是，在连续的操作中，无论进行了多长时间，只有某一次的操作后在指定的时间内没有再操作，这一次才被判定有效。具体场景可以搜索框输入关键字过程中实时 请求服务器匹配搜索结果，如果不进行处理，那么就是输入框内容一直变化，导致一直发送请求。如果进行防抖处理，结果就是当我们输入内容完成后，一定时间(比如500ms)没有再 输入内容，这时再触发请求。

//防抖debounce代码：
function debounce(fn,delay) {
    var timeout = null; // 创建一个标记用来存放定时器的返回值
    return function (e) {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        clearTimeout(timeout); 
        // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    };
}
// 处理函数
function handle() {
    console.log('防抖：', Math.random());
}
        
//滚动事件
window.addEventListener('scroll', debounce(handle,500));

litFun

判断两个输入框---同时有值或者同时无值

// 判断两个输入框---同时有值或者同时无值
// 1^0 = 1 , 1^1 = 0 , 0^1 = 1 , 0^0 = 0

function haveValToge(flag1, flag2) {
    return !(flag1 ^ flag2);
}
console.log(haveValToge("", ""));

数据去重，按升序排列

Set

function unique(arr) {
  return Array.from(new Set(arr));
}
console.log(unique(arr));

数据排序

arr.sort((a, b) => a - b);

数组>取用个别对象属性

//数组>取用个别对象属性
let arr = [
  { a: "a", b: "b", c: "c" },
  { a: "a", b: "b", c: "c" },
];
let arr2 = [];
arr.forEach(function (item) {
  arr2.push({
    a: item.a,
    b: item.b,
  });
});
console.log(arr2);
//arr2 = [
//   {a: "a", b: "b"},
//   {a: "a", b: "b"},
//]

给数组中的对象添加新属性

//给数组中的对象添加新属性
let arr = [
  { a: "a", b: "b" },
  { a: "a", b: "b" },
];
arr2 = arr.map((item) =>
  item.c
    ? item
    : Object.assign(item, {
        c: "c",
      })
);
console.log(arr2);
// let arr = [
//     { a: "a", b: "b", c: "c" },
//     { a: "a", b: "b", c: "c" },
// ];

合并数组对象

let arr = [
  { a: "a", age: 15 },
  { b: "b", age: 15 },
];
let arr1 = [
  { key: "1", val: "sss" },
  { key: "2", val: "fsd" },
];
let arr2 = arr.map((item, index) => {
  return { ...arr1[index], ...item };
});
console.log(arr2);
// arr2 = [
//   { key: "1", val: "sss", a: "a", age: 15 },
//   { key: "2", val: "fsd", b: "b", age: 15 },
// ];

循环向数组内添加对象

let arr = [
  { a: "a", b: "b" },
  { c: "c", d: "d" },
];
for (let i = 0; i < 5; i++) {
  let obj = {};
  obj.id = i;
  obj.score = i * 10;
  arr.push(obj);
}
console.log(arr);
// arr = [
//   { a: "a", b: "b" },
//   { c: "c", d: "d" },
//   { id: 0, score: 0 },
//   { id: 1, score: 10 },
//   { id: 2, score: 20 },
//   { id: 3, score: 30 },
//   { id: 4, score: 40 },
// ];

保留一位小数

let num = Math.round(1.57 * 10) / 10;
console.log(num);
// num = 1.6

数组对象的某个属性也是另一个数组对象的属性

arr = [
  { id: "1", value: "一" },
  { id: "2", value: "二" },
  { id: "3", value: "三" },
];
arr2 = [
  { name: "aaa", arrId: "1" },
  { name: "bbb", arrId: "2" },
  { name: "ccc", arrId: "3" },
  { name: "ddd", arrId: "2" },
  { name: "eee", arrId: "1" },
];
arr.forEach(function (item) {
  arr2.forEach(function (element) {
    if (item.id === element.arrId) {
      Object.assign(element, {
       arrValue: item.value,
      });
    }
  });
});
console.log(arr2);
//   arr2 = [
//     { name: "aaa", arrId: "1", arrValue: "一" },
//     { name: "bbb", arrId: "2", arrValue: "二" },
//     { name: "ccc", arrId: "3", arrValue: "三" },
//     { name: "ddd", arrId: "2", arrValue: "二" },
//     { name: "eee", arrId: "1", arrValue: "一" },
//   ];

判断数字是否为质数

function isPrime(num) {
  if (num == 0) return false;
  if (num == 1) return false;
  if (num == 2 || num == 3) return true;
  if (num % 6 != 1 && num % 6 != 5) return false;
  var temp = Math.sqrt(num);
  for (var i = 5; i <= temp; i += 6) {
    if (num % i == 0 || num % (i + 2) == 0) return false;
  }
  return true;
}

按数据-分类

var arr = [
  { deviceType: 1, id: 22 },
  { deviceType: 1, id: 33 },
  { deviceType: 2, id: 44 },
  { deviceType: 2, id: 55 },
  { deviceType: 3, id: 999 },
];
var getArr = [];
var tempArr = [];
for (let i = 0; i < this.arr.length; i++) {
  if (tempArr.indexOf(this.arr[i].deviceType) === -1) {
    this.getArr.push({
      subTitle: this.arr[i].deviceType,
      subItem: [this.arr[i].id],
    });
    tempArr.push(this.arr[i].deviceType);
  } else {
    for (let j = 0; j < this.getArr.length; j++) {
      if (this.getArr[j].subTitle == this.arr[i].deviceType) {
        this.getArr[j].subItem.push(this.arr[i].id);
        break;
      }
    }
  }
}
console.log(getArr);
// [
//   {subTitle:1,subItem:[22,33]},
//   {subTitle:1,subItem:[44,55]},
//   {subTitle:1,subItem:[999]},
// ]

获取 A 数组中 B 数组不存在的元素

let A = [1, 2, 3, 7, 8, 9];
let B = [7, 8, 9];
let newArr = A.filter(function (item) {
  return B.every(function (item1) {
    return item != item1;
  });
});
console.log(newArr); //[1,2,3]

一维数组转二维数组

// n 个数
function cf(arr, n) {
  if (!Array.isArray(arr) || arr.length == 0) {
    return [];
  }
  var tem = [],
    size = arr.length,
    count = Math.floor((size - 1) / n) + 1;
  while (count--) {
    tem.unshift(arr.slice(count * n, (count + 1) * n));
  }
  return tem;
}
var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
cf(arr1, 4);
//[1, 2, 3, 4]
//[5, 6, 7, 8]
//[9, 10, 11, 12]
//[13, 14]