随着 Javascript 越来越流行，使其应用的场景越来越多，不仅限于前端，可以是后端、混合应用程序、嵌入式设备等等，于是就有了大前端的叫法。现代前端开发有大量的框架和代码库来帮助实现各种复杂的需求，导致让很多人认为前端开发很简单，如切页面、组框架、网页制作等等。一个前端工程师如果需要提升技能，必然要经历原生代码的编写，代码片段可以加深对 Javascript 基础语法的理解，同时还能增加编码水平。
1. localStorage
localStorage 是HTML5中的本地持久化存储方法之一，也是前端项目常用的本地存储方案之一。localStorage 存储的数据只要用户不去主动清除是永久存储的，存储的值只能是 string 类型，不能跨浏览器，不能跨域名访问，存储大小一般是 5M 左右。下面的代码片段是 localStorage 数据的存储、获取、清除。
const useStorage = (storageKey = "authorization") => { const localKey = `devpoint.local.${storageKey}`; const save = (data) => { window.localStorage.setItem(localKey, JSON.stringify(data)); }; const get = () => { const localData = window.localStorage.getItem(localKey); if (localData && localData !== "") { return JSON.parse(localData); } else { return false; } }; /** * 清除localStorage */ const clear = () => { window.localStorage.setItem(localKey, ""); }; return { save, get, clear, }; }; const storageAuth = useStorage(); const loginInfo = { username: "hballard", age: 30, }; storageAuth.save(loginInfo); console.log(storageAuth.get());
在浏览器中执行后，结果如下：
2. average
此代码片段返回两个或多个数值的平均值，此代码也展示了如何定义可变参数。
const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length; const ages = [30, 24, 28, 32]; console.log(average(...ages)); // 28.5 console.log(average(30, 24, 28, 32)); // 28.5
3. averageBy
此代码片段计算map数组按照指定 key 值的平均值，也可以给定一个迭代函数。
const averageBy = (array, fn) => array .map(typeof fn === "function" ? fn : (val) => val[fn]) .reduce((acc, val) => acc + val, 0) / array.length; const users = [ { name: "hballard", age: 30 }, { name: "sguzman", age: 24 }, { name: "jrowe", age: 28 }, { name: "plowe", age: 32 }, ]; const average1 = averageBy(users, (item) => item.age); const average2 = averageBy(users, "age"); console.log(average1); // 28.5 console.log(average2); // 28.5
4. all
此代码片段是对集合元素进行验证，如果所有元素通过验证返回 true ，否则返回 false。
const all = (array, fn) => array.every(fn); const ages = [30, 24, 28, 32]; const result1 = all(ages, (item) => item < 40); const result2 = all(ages, (item) => item > 30); console.log(result1); // true console.log(result2); // false
5. arrayToCSV
此代码片段将没有逗号或双引号的元素转换为具有逗号分隔符的字符串，即 csv 文件格式。
const arrayToCSV = (array, delimiter = ",") => array .map((item) => item.map((value) => `"${value}"`).join(delimiter)) .join("\n"); const users = [ { name: "hballard", age: 30 }, { name: "sguzman", age: 24 }, { name: "jrowe", age: 28 }, { name: "plowe", age: 32 }, ]; const arrayUsers = users.map((item) => Object.values(item)); console.log(arrayUsers); // [ // [ 'hballard', 30 ], // [ 'sguzman', 24 ], // [ 'jrowe', 28 ], // [ 'plowe', 32 ] // ] const strCsv1 = arrayToCSV(arrayUsers); const strCsv2 = arrayToCSV(arrayUsers, ";"); console.log(strCsv1); // "hballard","30" // "sguzman","24" // "jrowe","28" // "plowe","32" console.log(strCsv2); // "hballard";"30" // "sguzman";"24" // "jrowe";"28" // "plowe";"32"
6. arrayToHtmlList
此代码片段将数组元素转换为 <li> 标记 或者指定html标记，主要用于将数据转换为界面HTML格式。
const arrayToHtmlList = (array, tag = "li") => array.map((item) => `<${tag}>${item}</${tag}>`).join(""); console.log(arrayToHtmlList(["第一条", "第二条"])); // <li>第一条</li><li>第二条</li> console.log(arrayToHtmlList(["第一条", "第二条"], "p")); // <p>第一条</p><p>第二条</p>
7. allEqual
此代码片段判断一维数组的所有元素是否全相等。
const allEqual = (array) => array.every((val) => val === array[0]); console.log(allEqual([1, 1, 1, "1"])); // false console.log(allEqual([1, 1, 1, 2])); // false console.log(allEqual([1, 1, 1, 1])); // true console.log(allEqual(["a", "a", "a"])); // true
8. countOccurrences
此代码片段计算数组中某个值的重复次数。
const countOccurrences = (array, value) => array.reduce( (accumulator, current) => current === value ? accumulator + 1 : accumulator, 0 ); console.log(countOccurrences([..."chinese"], "e")); // 2 console.log(countOccurrences([1, 3, 3, 4, 3, 3, 2, 3], 3)); // 5
9. capitalizeWord
此代码片段将给定字符串中每个单词的首字母转为大写。
const capitalizeWord = (string) => string.replace(/\b[a-z]/g, (char) => char.toUpperCase()); console.log(capitalizeWord("hello world in javascript")); // Hello World In Javascript
10. byteSize
此代码片段计算给定字符串的字节长度，此代码片段仅限高级浏览器中有效。
const byteSize = (string) => new Blob([string]).size; console.log(byteSize("hello")); // 5 console.log(byteSize("中国")); // 6
