开发者社区> 天行无忌> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 在 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


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

相关文章
每天学习10个实用Javascript代码片段(一)
随着 Javascript 越来越流行,使其应用的场景越来越多,不仅限于前端,可以是后端、混合应用程序、嵌入式设备等等,于是就有了大前端的叫法。现代前端开发有大量的框架和代码库来帮助实现各种复杂的需求,导致让很多人认为前端开发很简单,如切页面、组框架、网页制作等等。一个前端工程师如果需要提升技能,必然要经历原生代码的编写,代码片段可以加深对 Javascript 基础语法的理解,同时还能增加编码水平。
22 0
web前端学习(四十五)——JavaScript BOM-Location对象、BOM-Cookie实例
web前端学习(四十五)——JavaScript BOM-Location对象、BOM-Cookie实例
19 0
JavaScript中实用的8个代码片段
JavaScript中实用的8个代码片段
28 0
JavaScript console 四个实用功能
相信每个 JavaScript 开发者 都使用过 console.log("msg")。
30 0
必备的JavaScript代码片段
必备的JavaScript代码片段
4388 0
javascript中的 cookie对象
Cookie 对象 是一种以文件(Cookie文件)的形式保存在客户端硬盘的Cookies文件夹中的数据信息(Cookie数据)。Cookie文件夹中的用户数据信息(Cookie数据)。Cookie文件由所访问的Web站点建立,以长久的保存客户端与Web站点间的会话数据,并且该Cookie数据只允许被所访问的Web站点进行读取。
673 0
JavaScript中的try...catch和异常处理(转)
在JavaScript可以使用try...catch来进行异常处理。例如:   1 try 2 { 3 foo.bar(); 4 } catch (e) 5 { 6 alert(e.
533 0
分享5个有趣的 JavaScript 代码片段
  很多人认为编程语言只是用于工作,没有什么乐趣,其实,只要我们发挥奇思妙想,再死板的东西也有有趣的一面。这篇文章告诉大家:使用JavaScript,可以做很多很多有趣的事情。以下代码拷贝到地址栏回车即可运行,赶紧试试吧。
967 0
+关注
天行无忌
技术改变生活、研发构建未来、细节铸造品质!
255
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载