16 个实用 JavaScript 代码片段：DOM、Cookie、数组、对象

devpoint

关注

发布于: 刚刚

在 JavaScript 的世界里，简洁的代码 == 更好，本文将通过项目开发设计的知识点整理一些可能涉及的 16 个 JavaScript 代码片段。

DOM

DOM，即文档对象模型，是前端开发必须要掌握的基础之一，将 web 页面与到脚本或编程语言连接起来，通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。

元素是否被聚焦

const hasFocus = (ele) => ele === document.activeElement;

复制代码

获取元素所有兄弟

const elemSiblings = (ele) =>  [].slice.call(ele.parentNode.children).filter((child) => child !== ele);

复制代码

获取选定文本

const getSelectedText = () => window.getSelection().toString();

复制代码

返回上一页

history.back();// 或者history.go(-1);

复制代码

如果页面存在数据刷新，如新增完数据返回上一页并需要更新数据就不可以使用上述代码。

cookie

HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。是 WEB 项目开发需要涉及的内容。

设置 cookie

const setCookie = (name, value, options = { days: 30, path: "/" }) => {    const exp = new Date();    const strExpires = exp        .setTime(exp.getTime() + options.days * 24 * 60 * 60 * 1000)        .toGMTString();    const cValue = escape(value);    document.cookie = `${name}=${cValue};expires=${strExpires};path=${options.path}}`;};

复制代码

获取 cookie

const getCookie = (name) => {    let arr;    const reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");    if ((arr = document.cookie.match(reg))) {        return unescape(arr[2]);    } else {        return null;    }};

复制代码

清除所有 cookie

const clearCookies = () =>    document.cookie        .split(";")        .forEach(            (cookie) =>                (document.cookie = cookie                    .replace(/^ +/, "")                    .replace(                        /=.*/,                        `=;expires=${new Date().toUTCString()};path=/`                    ))        );

复制代码

将 cookie 值转为对象

const getCookiesToObject = () => document.cookie    .split(";")    .map((item) => item.split("="))    .reduce((acc, [k, v]) => (acc[k.trim().replace('"', "")] = v) && acc, {});

复制代码

执行上述方法获取的 cookie 值如下：

{    "_ga": "GA1.2.819625059.1595074",    "UM_distinctid": "17ad89255d847c-0555b2aae93c4-35637203-4b9600-17ad892",    "NTES_P_UTID": "V49vEqFIeNsfT42uWYetvS3MW|1627641003",    "CNZZDATA5664324": "cnzz_eid%3D298304137-1627126536-https%253A%252F%25",    "CNZZDATA1257114097": "1974355"}

复制代码

数组

JavaScript 中常用的数组方法大概是 10 个左右，方法的使用可以参阅《JavaScript 数组操作必须熟练运用的 10 个方法》。

数组比较

const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);// 或者const isEqual = (a, b) =>    a.length === b.length && a.every((v, i) => v === b[i]);// 实例console.log(isEqual([5, 3], [5, 3])); // trueconsole.log(isEqual([5, 3], [5, "3"])); // falseconsole.log(isEqual([5, 3], [3, 5])); // false

复制代码

对象数组转对象

const toObject = (arr, key) =>    arr.reduce((acc, current) => ({ ...acc, [current[key]]: current }), {});或者;const toObject = (arr, key) =>    Object.fromEntries(arr.map((it) => [it[key], it]));const arrayTest = [    {        id: 1,        title: "数组方法for",    },    {        id: 2,        title: "数组方法forEach",    },];console.log(toObject(arrayTest, "id"));
/*{  '1': { id: 1, title: '数组方法for' },  '2': { id: 2, title: '数组方法forEach' }}*/

复制代码

对象数组按照属性值计数

const countBy = (arr, prop) =>    arr.reduce(        (prev, curr) => ((prev[curr[prop]] = ++prev[curr[prop]] || 1), prev),        {}    );// 实例
const arrayTest = [    { branch: "huawei", model: "p30" },    { branch: "huawei", model: "nova 8" },    { branch: "xiaomi", model: "Redmi 9A" },    { branch: "xiaomi", model: "Redmi Note 9" },    { branch: "oppo", model: "Reno6" },];console.log(countBy(arrayTest, "branch"));// { huawei: 2, xiaomi: 2, oppo: 1 }

复制代码

检查数组是否为空

const isNotEmpty = (arr) => Array.isArray(arr) && Object.keys(arr).length > 0;// 实例console.log(isNotEmpty([])); // falseconsole.log(isNotEmpty([1, 3])); // true

复制代码

对象

对象在 JavaScript 中是一种非常重要的数据类型，它们有很多有用的方法，在平常项目开发中可以使用这些方法容易地处理对象。关于对象推荐阅读《JavaScript 中优雅处理对象的6个方法》。

对象是否相等

const isEqual = (...objects) =>    objects.every((obj) => JSON.stringify(obj) === JSON.stringify(objects[0]));// 实例console.log(isEqual({ title: "js", desc: "js" }, { desc: "js", title: "js" })); // falseconsole.log(isEqual({ title: "js", desc: "js" }, { title: "js", desc: "js" })); // true

复制代码

从对象数组中提取属性值

const pluck = (objs, property) => objs.map((obj) => obj[property]);// 实例const arrayTest = [    {        title: "for",    },    {        title: "forEach",    },    {        title: "for...of",    },];console.log(pluck(arrayTest, "title")); // [ 'for', 'forEach', 'for...of' ]

复制代码

从对象中删除所有空和未定义的属性

const removeNullUndefined = (obj) =>    Object.entries(obj).reduce(        (acc, [k, v]) => (v == null ? acc : ((acc[k] = v), acc)),        {}    );// 或者const removeNullUndefined = (obj) =>    Object.entries(obj)        .filter(([_, v]) => v != null)        .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});const testObj = {    title: "js",    desc: null,    view: undefined,};
console.log(removeNullUndefined(testObj)); // {title:'js'}

复制代码

对象是否为空

const isEmpty = (obj) => Object.keys(obj).length === 0;console.log(isEmpty({})); // trueconsole.log(isEmpty({ title: "js" })); // false

复制代码

完

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/d0a4d5f11e29715e8c6c16ce8】。

devpoint

关注

细节的追求者 2011.11.12 加入

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

发布

暂无评论

创作场景

16 个实用 JavaScript 代码片段：DOM、Cookie、数组、对象

DOM

元素是否被聚焦

获取元素所有兄弟

获取选定文本

返回上一页

cookie

设置 cookie

获取 cookie

清除所有 cookie

将 cookie 值转为对象

数组

数组比较

对象数组转对象

对象数组按照属性值计数

检查数组是否为空

对象

对象是否相等

从对象数组中提取属性值

从对象中删除所有空和未定义的属性

对象是否为空

完

devpoint

评论