js常用技巧

通过值找到对应的数组名称

给几个数组, 可以通过数值找到对应的数组名称；

例：给函数输入一个1，要求函数返回 A

const A = [1, 2, 3];
const B = [4, 5, 6];
const C = [7, 8, 9];

// 方法1
function fn1(num) {
  let obj = { A, B, C };
  let str = "";
  Object.keys(obj).map((item) => {
    if (str) return;
    for (let el of obj[item]) {
      if (el === num) return (str = item);
    }
  });
  return str;
}
fn1(1);

// 方法2
function fn2(num) {
  let obj = { A, B, C };
  for (let item in obj) {
    for (let el of obj[item]) {
      if (el === num) return item;
    }
  }
}
fn2(1);

合并数组里面拥有指定相同值的对象

不改变原数组的情况下，合并数组里面存在相同值的对象，并重新计算某项数值

let arr = [
  { name: '苹果', price: 5, num: 10 },
  { name: '香蕉', price: 6, num: 15 },
  { name: '苹果', price: 5, num: 20 },
  { name: '橘子', price: 7, num: 15 }
]
let new_arr = JSON.parse(JSON.stringify(arr))
let data = new_arr.reduce((res, cur, index) => {
  if (index === 0) res.push(cur)
  else {
    let e_index = ''
    res.some((item, i) => {
      if (item.name.trim() == cur.name.trim() && item.price == cur.price) {
        return (e_index = i)
      }
    })
    if (e_index !== '') res[e_index].num += cur.num
    else res.push(cur)
  }
  return res
}, [])
console.log(data) // [{ name: '苹果', price: 5, num: 30 }, { name: '香蕉', price: 6, num: 15 }, { name: '橘子', price: 7, num: 15 }]
console.log(arr)

获取页面同主域名的a标签

// 处理 href
let search = () => {
  let name = location.href;
  let arr = name.match(/\./g);
  let start = name.indexOf('//') + 2;
  let end = name.indexOf('/', start);
  let path = '';
  if (arr.length === 1) path = name.slice(start, end);
  else path = name.slice(name.indexOf('.') + 1, end);
  let new_arr = [];
  Array.from(document.querySelectorAll('a')).forEach((item) => {
    let href = item.href.slice(0, item.href.indexOf('/', item.href.indexOf('.')));
    if (href.indexOf(path) !== -1) new_arr.push(item.href)
  });
  return new_arr
}

// 直接获取 hostname
let search=() => {
  let hostname = window.location.hostname;
  let arr = hostname.match(/\./g);
  if (arr.length > 1) hostname = hostname.slice(hostname.indexOf('.') + 1);
  let new_arr = [];
  Array.from(document.querySelectorAll('a')).forEach((item) => {
    let href = item.href.slice(0, item.href.indexOf('/', item.href.indexOf('.')));
    if (href.indexOf(hostname) !== -1) new_arr.push(item.href);
  });
  return new_arr
}

防抖

连续触发时，只执行一次

// 连续触发，只执行一次
/** 
 * fn 要执行的回调
 * wait 延时的时间
 * promptly 是否立即执行
 */
let times = null
function Debounce(fn, wait = 200, promptly = false) {
  if (times !== null) clearTimeout(times)
  if (promptly) { // 多次触发只执行第一次
    let callNow = !times
    times = setTimeout(() => {
      times = null
    }, wait)
    if (callNow) typeof fn === 'function' && fn()
  } else { // 多次触发只执行最后一次
    times = setTimeout(() => {
      typeof fn === 'function' && fn()
    }, wait)
  }
}
Debounce( () => { console.log('test') }, 1000, true )

节流

连续触发时，在规定时间内只执行一次

// 触发后，需等待 wait 时间冷却
/**
 * fn 要执行的回调
 * wait 冷却时间
 * promptly 是否立即执行
 */
let times, flag;
function Throttle(fn, wait = 200, promptly = false) {
  if (promptly) { // 立即执行
    if (!flag) {
      flag = true
      typeof fn === 'function' && fn()
      times = setTimeout(() => {
        flag = false
      }, wait)
    }
  } else {  // 延迟执行
    if (!flag) {
      flag = true
      times = setTimeout(() => {
        flag = false
        typeof fn === 'function' && fn()
      }, wait)
    }
  }
}
Throttle( () => { console.log('test') }, 1000, true )

递归查询树形数据所有id

function extractId(arr) {
  if (!Array.isArray(arr) || !arr.length) return arr
  let ids = []
  arr.forEach((item) => {
    ids.push(item.id + '')
    if (item.children && item.children.length) ids = ids.concat(extractId(item.children))
  })
  return ids
}

数组分页

function arrSlice(arr, num) {
  const new_arr = []
  for (let i = 0, len = arr.length; i < len; i += num) {
    new_arr.push(arr.slice(i, Math.min(i + num, len)))
  }
  return new_arr.length ? new_arr : [arr]
}
const data = [11, 22, 33, 44, 55, 66, 77, 88, 99]
arrSlice(data, 3) // [[11, 22, 33],[44, 55, 66],[77, 88, 99]]

js控制浏览器全屏

// 实现全屏
// 判断浏览器是否支持Fullscreen API
if (element.requestFullscreen) {
  // 使用Fullscreen API进入全屏模式
  element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
  // 兼容Webkit浏览器
  element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
  // 兼容Firefox浏览器
  element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
  // 兼容IE浏览器
  element.msRequestFullscreen();
}

// 退出全屏
// 判断浏览器是否处于全屏模式
if (document.fullscreenElement) {
  // 使用Fullscreen API退出全屏模式
  document.exitFullscreen();
} else if (document.webkitFullscreenElement) {
  // 兼容Webkit浏览器
  document.webkitExitFullscreen();
} else if (document.mozFullScreenElement) {
  // 兼容Firefox浏览器
  document.mozCancelFullScreen();
} else if (document.msFullscreenElement) {
  // 兼容IE浏览器
  document.msExitFullscreen();
}

js获取按键

// 获取按键
window.onkeyup = function (event) {
  console.log(event)
}

// 模拟按键
// 创建一个KeyboardEvent对象
var event = new KeyboardEvent('keydown', {
  key: 'a', // 模拟按下的键
  code: 'KeyA', // 模拟按下的键的代码
  keyCode: 65, // 模拟按下的键的ASCII码
  which: 65 // 模拟按下的键的ASCII码
});

// 触发按键事件
document.dispatchEvent(event);

js模糊过滤

function keySearch(list, keyWord, column = 'title') {
  const reg = new RegExp(keyWord, 'i')
  return list.filter((item) => reg.test(item[column]))
}

js数组去重

// 数组去重
let arr = [11, 22, 22, 33, 11]

// 利用 Set 的去重复性
let new_arr = [...new Set(arr)]

// 使用 indexOf 与 filter 方法
let new_arr1 = arr.filter((item, index) => {
  return arr.indexOf(item) === index
})

// 使用 includes 与 forEach 方法
let new_arr2 = []
arr.forEach((item, index) => {
  if (!new_arr2.includes(item)) new_arr2.push(item)
})


//数组对象去重
let arr = [
  { name: 'name1', age: 22 },
  { name: 'name2', age: 33 },
  { name: 'name1', age: 11 }
]
let new_arr = []
arr.forEach((item) => {
  let exist = false
  for (let el of new_arr) {
    if (item.name === el.name) return (exist = true)
  }
  if (!exist) new_arr.push(item)
})
console.log(new_arr)

js随机生成四位数

console.log(Math.floor(Math.random() * 9000) + 1000)

js拦截XMLHTTPRequest

const xhrOpen = XMLHttpRequest.prototype.open
XMLHttpRequest.prototype.open = function () {
  this.addEventListener('loadend', printEvent)
  xhrOpen.apply(this, arguments)
}
const printEvent = function () {
  console.log(this.responseURL)
  console.log(this.responseText)
  this.removeEventListener('loadend', printEvent)
}

参考：https://www.5axxw.com/questions/simple/5y63h0