每天学习 10 个实用 Javascript 代码片段（一）

关注

发布于: 3 小时前

随着 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.5console.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.5console.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); // trueconsole.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"])); // falseconsole.log(allEqual([1, 1, 1, 2])); // falseconsole.log(allEqual([1, 1, 1, 1])); // trueconsole.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")); // 2console.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")); // 5console.log(byteSize("中国")); // 6

复制代码

发布于: 3 小时前阅读数: 10

原文链接:【http://xie.infoq.cn/article/b69f8c8050bfafa57923a0cd3】。文章转载请联系作者。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

每天学习 10 个实用 Javascript 代码片段（一）

1. localStorage

2. average

3. averageBy

4. all

5. arrayToCSV

6. arrayToHtmlList

7. allEqual

8. countOccurrences

9. capitalizeWord

10. byteSize

devpoint

评论