[{"data":1,"prerenderedAt":181},["ShallowReactive",2],{"content:\u002F2021\u002Fjavascript-snippets":3,"surround:\u002F2021\u002Fjavascript-snippets":170},{"id":4,"title":5,"body":6,"categories":143,"date":145,"description":28,"draft":146,"extension":147,"image":148,"meta":149,"navigation":151,"path":152,"permalink":153,"published":153,"readingTime":154,"recommend":153,"references":159,"seo":163,"sitemap":164,"stem":165,"tags":166,"type":168,"updated":153,"__hash__":169},"content\u002Fposts\u002F2021\u002Fjavascript-snippets.md","JavaScript Snippets",{"type":7,"value":8,"toc":128},"minimark",[9,17,21,32,35,41,45,51,54,60,64,70,74,80,83,89,92,98,102,108,112,118,122],[10,11,13],"alert",{"type":12},"info",[14,15,16],"p",{},"收集的一些常用的 JavaScript 代码片段",[18,19,20],"h2",{"id":20},"将给定字符串中每个单词的首字母转为大写",[22,23,29],"pre",{"className":24,"code":26,"language":27,"meta":28},[25],"language-js","const capitalizeWord = (string) =>\n  string.replace(\u002F\\b[a-z]\u002Fg, (char) => char.toUpperCase());\n\nconsole.log(capitalizeWord(\"hello world in javascript\")); \u002F\u002F Hello World In Javascript\n","js","",[30,31,26],"code",{"__ignoreMap":28},[18,33,34],{"id":34},"计算给定字符串的字节长度",[22,36,39],{"className":37,"code":38,"language":27,"meta":28},[25],"const byteSize = (string) => new Blob([string]).size;\n\nconsole.log(byteSize(\"vivy\")); \u002F\u002F 4\nconsole.log(byteSize(\"潮鸣\")); \u002F\u002F 6\n",[30,40,38],{"__ignoreMap":28},[18,42,44],{"id":43},"将数组元素转换为指定的-html-元素主要用于将数据转换为界面-html-格式","将数组元素转换为指定的 HTML 元素，主要用于将数据转换为界面 HTML 格式",[22,46,49],{"className":47,"code":48,"language":27,"meta":28},[25],"const arrayToHtmlList = (array, tag = \"li\") =>\n  array.map((item) => `\u003C${tag}>${item}\u003C\u002F${tag}>`).join(\"\");\n\nconsole.log(arrayToHtmlList([\"第一条\", \"第二条\"])); \u002F\u002F \u003Cli>第一条\u003C\u002Fli>\u003Cli>第二条\u003C\u002Fli>\nconsole.log(arrayToHtmlList([\"第一条\", \"第二条\"], \"p\")); \u002F\u002F \u003Cp>第一条\u003C\u002Fp>\u003Cp>第二条\u003C\u002Fp>\n",[30,50,48],{"__ignoreMap":28},[18,52,53],{"id":53},"多个数值求平均值",[22,55,58],{"className":56,"code":57,"language":27,"meta":28},[25],"const average = (...nums) =>\n  nums.reduce((acc, val) => acc + val, 0) \u002F nums.length;\n\nconst ages = [23, 56, 15, 28];\n\u002F\u002F 此代码也展示了函数如何传递不定参数（使用 ES6 扩展运算符）\nconsole.log(average(...ages)); \u002F\u002F 30.5\nconsole.log(average(23, 56, 15, 28)); \u002F\u002F 30.5\n",[30,59,57],{"__ignoreMap":28},[18,61,63],{"id":62},"计算-map-数组按照指定-key-的平均值也可以给定一个迭代函数","计算 map 数组按照指定 key 的平均值，也可以给定一个迭代函数",[22,65,68],{"className":66,"code":67,"language":27,"meta":28},[25],"const averageBy = (array, fn) =>\n  array.map(typeof fn === \"function\" ? fn : (val) => val[fn]).reduce((acc, val) => acc + val, 0) \u002F array.length;\nconst users = [\n  { name: \"saber\", size: 23 },\n  { name: \"vivy\", size: 56 },\n  { name: \"tico\", size: 15 },\n  { name: \"k423\", size: 28 },\n];\nconst average1 = averageBy(users, (item) => item.size);\nconst average2 = averageBy(users, \"size\");\nconsole.log(average1); \u002F\u002F 30.5\nconsole.log(average2); \u002F\u002F 30.5\n",[30,69,67],{"__ignoreMap":28},[18,71,73],{"id":72},"封装-localstorage","封装 localStorage",[22,75,78],{"className":76,"code":77,"language":27,"meta":28},[25],"const useStorage = (storageKey = \"authorization\") => {\n  const localKey = `devpoint.local.${storageKey}`;\n  const save = (data) => {\n    window.localStorage.setItem(localKey, JSON.stringify(data));\n  };\n  const get = () => {\n    const localData = window.localStorage.getItem(localKey);\n    if (localData && localData !== \"\") {\n      return JSON.parse(localData);\n    } else {\n      return false;\n    }\n  };\n  const clear = () => {\n    window.localStorage.setItem(localKey, \"\");\n  };\n  return { save, get, clear };\n};\nconst storageAuth = useStorage();\nconst loginInfo = {\n  username: \"vivy\",\n  age: 18,\n};\nstorageAuth.save(loginInfo);\nconsole.log(storageAuth.get());\n",[30,79,77],{"__ignoreMap":28},[18,81,82],{"id":82},"计算数组中某个值的重复次数",[22,84,87],{"className":85,"code":86,"language":27,"meta":28},[25],"const countOccurrences = (array, value) =>\n  array.reduce(\n    (accumulator, current) =>\n      current === value ? accumulator + 1 : accumulator,\n    0\n  );\n\nconsole.log(countOccurrences([...\"vivy\"], \"v\")); \u002F\u002F 2\nconsole.log(countOccurrences([1, 3, 3, 4, 3, 3, 2, 3], 3)); \u002F\u002F 5\n",[30,88,86],{"__ignoreMap":28},[18,90,91],{"id":91},"检查值是否属于某个数据类型",[22,93,96],{"className":94,"code":95,"language":27,"meta":28},[25],"const isCheck = (type, val) =>\n  ![undefined, null].includes(val) && val.constructor === type;\n\nconsole.log(isCheck(Array, [\"a\"])); \u002F\u002F true\nconsole.log(isCheck(Object, {})); \u002F\u002F true\nconsole.log(isCheck(ArrayBuffer, new ArrayBuffer())); \u002F\u002F true\nconsole.log(isCheck(Boolean, new Boolean(true))); \u002F\u002F true\nconsole.log(isCheck(RegExp, \u002F.\u002Fg)); \u002F\u002F true\nconsole.log(isCheck(Number, 0)); \u002F\u002F true\n",[30,97,95],{"__ignoreMap":28},[18,99,101],{"id":100},"遍历对象的每个属性并分别为每个属性迭代一个回调","遍历对象的每个属性，并分别为每个属性迭代一个回调",[22,103,106],{"className":104,"code":105,"language":27,"meta":28},[25],"const forObject = (obj, callback) =>\n  Object.keys(obj).forEach((key) => callback(obj[key], key, obj));\n\nconst testObj = {\n  word: \"信じる心があなたの魔法〜\",\n  author: \"篝敦子\",\n};\nforObject(testObj, (val, key) => {\n  console.log(`${key}:${val}`);\n});\n\u002F\u002F word:信じる心があなたの魔法〜\n\u002F\u002F author:篝敦子\n",[30,107,105],{"__ignoreMap":28},[18,109,111],{"id":110},"通过键值查找对象返回满足给定函数的第一个-key","通过键值查找对象，返回满足给定函数的第一个 key",[22,113,116],{"className":114,"code":115,"language":27,"meta":28},[25],"const findKey = (obj, fn) =>\n  Object.keys(obj).find((key) => fn(obj[key], key, obj));\n\nconst testObj = {\n  vivy: { age: 17 },\n  k423: { age: 18 },\n  saber: { age: 19 },\n};\n\nconsole.log(findKey(testObj, (item) => item.age > 18)); \u002F\u002F saber\n",[30,117,115],{"__ignoreMap":28},[18,119,121],{"id":120},"将一组数据按照指定的-key-的进行分组并按照分组进行归类","将一组数据按照指定的 key 的进行分组，并按照分组进行归类",[22,123,126],{"className":124,"code":125,"language":27,"meta":28},[25],"const groupBy = (obj, key) => {\n    const values =\n        obj instanceof Map || obj instanceof Set\n            ? Array.from(obj.values())\n            : Object.values(obj);\n\n    return values.reduce((acc, value) => {\n        const groupKey = value[key];\n        if (!Array.isArray(acc[groupKey])) {\n            acc[groupKey] = [value];\n        } else {\n            acc[groupKey].push(value);\n        }\n        return acc;\n    }, {});\n};\n\nconst arrayRoles = [\n    { title: \"Mieruko-chan\", category: \"xxx\" },\n    { title: \"Vladilena Mirizé\", category: \"xxx\" },\n    { title: \"Nakano Azusa\", category: \"xxx\" },\n    { title: \"Shirahane Suou\", category: \"yyy\" },\n    { title: \"Mio Akiyama\", category: \"yyy\" },\n];\nconsole.log(groupBy(arrayRoles, \"category\"));\n\u002F*\n{\n  'xxx': [\n    { title: 'Mieruko-chan', category: 'xxx' },\n    { title: 'Vladilena Mirizé', category: 'xxx' },\n    { title: 'Nakano Azusa', category: 'xxx' }\n  ],\n  'yyy': [\n    { title: 'Shirahane Suou', category: 'yyy' },\n    { title: 'Mio Akiyama', category: 'yyy' }\n  ]\n}\n*\u002F\n",[30,127,125],{"__ignoreMap":28},{"title":28,"searchDepth":129,"depth":129,"links":130},4,[131,133,134,135,136,137,138,139,140,141,142],{"id":20,"depth":132,"text":20},2,{"id":34,"depth":132,"text":34},{"id":43,"depth":132,"text":44},{"id":53,"depth":132,"text":53},{"id":62,"depth":132,"text":63},{"id":72,"depth":132,"text":73},{"id":82,"depth":132,"text":82},{"id":91,"depth":132,"text":91},{"id":100,"depth":132,"text":101},{"id":110,"depth":132,"text":111},{"id":120,"depth":132,"text":121},[144],"学习笔记","2021-07-23",false,"md","\u002Fimages\u002Fjavascript-snippets\u002Fcover.png",{"comments":146,"slots":150},{},true,"\u002F2021\u002Fjavascript-snippets",null,{"text":155,"minutes":156,"time":157,"words":158},"4 min read",3.925,235500,785,[160],{"title":161,"link":162},"碎片时间学习Javascript代码","https:\u002F\u002Fjuejin.cn\u002Fcolumn\u002F6981851417929580557",{"title":5,"description":28},{"loc":152},"posts\u002F2021\u002Fjavascript-snippets",[5,167],"Tool function","tech","lQKjKF1jP0tGkv0mKcG2vUGue9TzKJfBs46xH0D70-U",[171,176],{"title":172,"path":173,"stem":174,"date":175,"type":168,"children":-1},"第三方应用授权：OAuth 2.0","\u002F2021\u002Foauth2","posts\u002F2021\u002Foauth2","2021-06-21",{"title":177,"path":178,"stem":179,"date":180,"type":168,"children":-1},"浅析 Promise、Async\u002FAwait","\u002F2021\u002Fpromise-async-await","posts\u002F2021\u002Fpromise-async-await","2021-08-17",1793699839855]