Cao Note

外观

常用函数 ​

自定义一个缓存函数 ​
javascript
const memoize = (fn) => {
  let cache = {};
  return function () {
    let key = JSON.stringify(arguments);
    cache[key] = cache[key] || fn(...arguments);
    return cache[key];
  };
};

接收一个函数作为参数：
	function szie(r) {
  	return r * r;
	}
	let getRes = memoize(szie);
调用：
	console.log(getRes(2));
const memoize = (fn) => {
  let cache = {};
  return function () {
    let key = JSON.stringify(arguments);
    cache[key] = cache[key] || fn(...arguments);
    return cache[key];
  };
};

接收一个函数作为参数：
	function szie(r) {
  	return r * r;
	}
	let getRes = memoize(szie);
调用：
	console.log(getRes(2));
检查对象是否为空 ​
javascript
即使对象为空，每次检查对象是否等于 {} 也会返回 false。
const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object
即使对象为空，每次检查对象是否等于 {} 也会返回 false。
const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object
检查设备上的触摸支持 ​
javascript
const touchSupported = () =>
  'ontouchstart' in window || (DocumentTouch && document instanceof DocumentTouch)
const touchSupported = () =>
  'ontouchstart' in window || (DocumentTouch && document instanceof DocumentTouch)
重定向到另一个 URL ​
javascript
const redirect = (url) => (location.href = url)
const redirect = (url) => (location.href = url)
检测某个元素是否聚焦 ​
javascript
const hasFocus = (el) => el === document.activeElement
const hasFocus = (el) => el === document.activeElement
javascript
const getCookies = () =>
  document.cookie
    .split(';')
    .map((item) => item.split('='))
    .reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {})
const getCookies = () =>
  document.cookie
    .split(';')
    .map((item) => item.split('='))
    .reduce((acc, [k, v]) => (acc[k.trim().replace('"', '')] = v) && acc, {})
javascript
const clearCookies = () => document.cookie
  .split(';')
  .forEach(c => document.cookie = c.splace(/^+/, '')
          .replace(/=.*/,`=;expires=${new Date().toUTCString()};path=/`))
  )
const clearCookies = () => document.cookie
  .split(';')
  .forEach(c => document.cookie = c.splace(/^+/, '')
          .replace(/=.*/,`=;expires=${new Date().toUTCString()};path=/`))
  )
从对象中删除值为 null 和 undefined 的属性 ​
javascript
const removeNullAndUndefined = (obj) =>
  Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {})
const removeNullAndUndefined = (obj) =>
  Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : ((a[k] = v), a)), {})
js 下载图片 ​
javascript
const imgUrl = '' // 图片链接
const a = document.createElement('a')
// 这里是将url转成blob地址，
fetch(imgUrl) // 跨域时会报错
  .then((res) => res.blob())
  .then((blob) => {
    // 将链接地址字符内容转变成blob地址
    a.href = URL.createObjectURL(blob)
    a.download = '追溯二维码.jpg' // 下载文件的名字
    document.body.appendChild(a)
    a.click()
    //在资源下载完成后 清除 占用的缓存资源
    window.URL.revokeObjectURL(a.href)
    document.body.removeChild(a)
  })
const imgUrl = '' // 图片链接
const a = document.createElement('a')
// 这里是将url转成blob地址，
fetch(imgUrl) // 跨域时会报错
  .then((res) => res.blob())
  .then((blob) => {
    // 将链接地址字符内容转变成blob地址
    a.href = URL.createObjectURL(blob)
    a.download = '追溯二维码.jpg' // 下载文件的名字
    document.body.appendChild(a)
    a.click()
    //在资源下载完成后 清除 占用的缓存资源
    window.URL.revokeObjectURL(a.href)
    document.body.removeChild(a)
  })
瀑布流布局 ​
javascript
const waterFall = () => {
  //瀑布流核心代码
  let img = $('.img-item') //获取图片集合
  let imgWidth = $('.img-item').width() //当前图片宽度
  let boxWidth = $('.img-box').width() //瀑布流布局框宽度
  let cols = parseInt(boxWidth / imgWidth) //求出列数
  let heightArr = [] //创建高度数组，用于存储各行当前高度
  // 遍历图片集合
  $.each(img, function (index, item) {
    let imgHeight = $(item).height() //取出对应图片的高度
    if (index < cols) {
      //判断是不是第一行,第一行索引0~cols-1,
      //第一行直接存入高度数组
      heightArr[index] = imgHeight
    } else {
      //非第一行操作，将此次图片定位到高度最低的一列
      //获取高度数组中的最小值,即所有列中最小的一列，是此次图片定位的起始高度，即top
      let minBoxHeight = Math.min(...heightArr)
      //获取最小高度对应的列索引,$.inArray()用于查找对应数组中指定值的索引。(未匹配成功的话，返回-1)
      //从而可以判断出此次图片定位的起始left
      let minBoxIndex = $.inArray(minBoxHeight, heightArr)
      //图片定位插入对应位置
      $(item).css({
        position: 'absolute',
        //加10是因为css设置了右外边距
        left: minBoxIndex * (imgWidth + 10) + 'px',
        //加6是为了让间距相同，视觉舒适
        top: minBoxHeight + 6 + 'px',
      })
      //高度追加，存入高度数组
      heightArr[minBoxIndex] += imgHeight + 6
    }
  })
  //获取每次执行完的最大高度，用于设置瀑布流盒子高度
  //因为瀑布流图片设置绝对定位而使，盒子高度塌陷
  //最后执行完就是整个瀑布流盒子的高度
  let maxBoxHeight = Math.max(...heightArr)
  $('.img-box').css('height', maxBoxHeight)
}
const waterFall = () => {
  //瀑布流核心代码
  let img = $('.img-item') //获取图片集合
  let imgWidth = $('.img-item').width() //当前图片宽度
  let boxWidth = $('.img-box').width() //瀑布流布局框宽度
  let cols = parseInt(boxWidth / imgWidth) //求出列数
  let heightArr = [] //创建高度数组，用于存储各行当前高度
  // 遍历图片集合
  $.each(img, function (index, item) {
    let imgHeight = $(item).height() //取出对应图片的高度
    if (index < cols) {
      //判断是不是第一行,第一行索引0~cols-1,
      //第一行直接存入高度数组
      heightArr[index] = imgHeight
    } else {
      //非第一行操作，将此次图片定位到高度最低的一列
      //获取高度数组中的最小值,即所有列中最小的一列，是此次图片定位的起始高度，即top
      let minBoxHeight = Math.min(...heightArr)
      //获取最小高度对应的列索引,$.inArray()用于查找对应数组中指定值的索引。(未匹配成功的话，返回-1)
      //从而可以判断出此次图片定位的起始left
      let minBoxIndex = $.inArray(minBoxHeight, heightArr)
      //图片定位插入对应位置
      $(item).css({
        position: 'absolute',
        //加10是因为css设置了右外边距
        left: minBoxIndex * (imgWidth + 10) + 'px',
        //加6是为了让间距相同，视觉舒适
        top: minBoxHeight + 6 + 'px',
      })
      //高度追加，存入高度数组
      heightArr[minBoxIndex] += imgHeight + 6
    }
  })
  //获取每次执行完的最大高度，用于设置瀑布流盒子高度
  //因为瀑布流图片设置绝对定位而使，盒子高度塌陷
  //最后执行完就是整个瀑布流盒子的高度
  let maxBoxHeight = Math.max(...heightArr)
  $('.img-box').css('height', maxBoxHeight)
}
分散节点转树 ​
javascript
// 子节点遍历成树
export function formatToTree(array: Array<any>, pid?: any) {
  return array
    .filter((item) =>
      // 如果没有父id（第一次递归的时候）将所有父级查询出来
      // 这里认为 item.parentId === 0 顶层 id
      pid === undefined ? item.parentId === 0 : item.parentId === pid,
    )
    .map((item) => {
      // 通过父节点ID查询所有子节点
      item.children = formatToTree(array, item.id)
      return item
    })
}
// 子节点遍历成树
export function formatToTree(array: Array<any>, pid?: any) {
  return array
    .filter((item) =>
      // 如果没有父id（第一次递归的时候）将所有父级查询出来
      // 这里认为 item.parentId === 0 顶层 id
      pid === undefined ? item.parentId === 0 : item.parentId === pid,
    )
    .map((item) => {
      // 通过父节点ID查询所有子节点
      item.children = formatToTree(array, item.id)
      return item
    })
}
统计一个对象中所有的数据类型 ​
javascript
function countDataTypes(obj) {
  const types = {};

  function getType(value) {
    if (Array.isArray(value)) {
      return "array";
    } else if (value instanceof Date) {
      return "date";
    } else if (value === null) {
      return "null";
    } else {
      return typeof value;
    }
  }

  function countTypes(obj) {
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        const type = getType(obj[key]);
        if (types[type]) {
          types[type]++;
        } else {
          types[type] = 1;
        }
        if (type === "object") {
          countTypes(obj[key]);
        }
      }
    }
  }

  countTypes(obj);
  return types;
}

// 测试用例：
const obj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "coding"],
  address: {
    street: "123 Main St.",
    city: "Anytown",
    state: "CA"
  },
  favoriteColor: null,
  birthDate: new Date()
};

// 结果
{
  string: 1,
  number: 1,
  array: 1,
  object: 2,
  boolean: 0,
  undefined: 0,
  function: 0,
  symbol: 0,
  bigint: 0,
  null: 1,
  date: 1
}
function countDataTypes(obj) {
  const types = {};

  function getType(value) {
    if (Array.isArray(value)) {
      return "array";
    } else if (value instanceof Date) {
      return "date";
    } else if (value === null) {
      return "null";
    } else {
      return typeof value;
    }
  }

  function countTypes(obj) {
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        const type = getType(obj[key]);
        if (types[type]) {
          types[type]++;
        } else {
          types[type] = 1;
        }
        if (type === "object") {
          countTypes(obj[key]);
        }
      }
    }
  }

  countTypes(obj);
  return types;
}

// 测试用例：
const obj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "coding"],
  address: {
    street: "123 Main St.",
    city: "Anytown",
    state: "CA"
  },
  favoriteColor: null,
  birthDate: new Date()
};

// 结果
{
  string: 1,
  number: 1,
  array: 1,
  object: 2,
  boolean: 0,
  undefined: 0,
  function: 0,
  symbol: 0,
  bigint: 0,
  null: 1,
  date: 1
}

Copyright © 2024-present xiaocao