16个实用JavaScript代码片段：DOM、Cookie、数组、对象-阿里云开发者社区

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

2022-06-29 134

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

在 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])); // true
console.log(isEqual([5, 3], [5, "3"])); // false
console.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([])); // false
console.log(isNotEmpty([1, 3])); // true

对象

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

对象是否相等

const isEqual = (...objects) =>
    objects.every((obj) => JSON.stringify(obj) === JSON.stringify(objects[0]));
// 实例
console.log(isEqual({ title: "js", desc: "js" }, { desc: "js", title: "js" })); // false
console.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({})); // true
console.log(isEmpty({ title: "js" })); // false