JavaScript（JS）随记

已于 2023-05-21 16:38:00 修改
阅读量359 收藏 1
点赞数
分类专栏： Javascript/CSS/HTML 文章标签： 其他
于 2021-08-30 15:46:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/119998528
版权

判断是否为空：

字符串和数字互转

  • 数字转字符串：数字.toString()
  • 字符串转数字：parseInt(字符串) 

生成指定长度随机字符串

    //生成指定长度随机字符串
    generateRandomStr(strLength = 4) {
      let code = '';
      const chars = 'abcdefghijkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789';
      const charsArr = chars.split('');

      for (let i = 0; i < strLength; i++) {
        const num = Math.floor(Math.random() * charsArr.length);
        code += charsArr[num];
      }
      return code;
    },

JavaScript随机获取数组Array中的值：

let colors = ["orange","red","blue","yellow"];
let color = colors[Math.floor(Math.random()*colors.length)];

js 解析出rgba字符串里的各个值

  

  mounted() {
    let color = "rgba(19, 206, 102, 0.8)";

    console.log("R this.rgbaNum(color, 0):", this.rgbaNum(color, 0));
    console.log("G this.rgbaNum(color, 1):", this.rgbaNum(color, 1));
    console.log("B this.rgbaNum(color, 2):", this.rgbaNum(color, 2));
    console.log("A this.rgbaNum(color, 3):", this.rgbaNum(color, 3));
  },
  methods: {
    rgbaNum(rgba, index) {
      return rgba.match(/(\d(\.\d+)?)+/g)[index];
    }
  }

改变鼠标样式

document.getElementById("app").style.cursor = "default";

div跟随鼠标移动

<template>
  <div
    style="width: 50px; height: 50px; background-color: red; position: fixed"
    :style="{ left: left, top: top }"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      left: "",
      top: "",
    };
  },
  computed: {},
  created() {},
  mounted() {
    document.addEventListener("mousemove", (e) => {
      this.left = e.clientX + 40 + "px";
      this.top = e.clientY - 50 + "px";
    });
  },
};
</script>

根据输入的数字，返回比这个数字小1的字符串数组

如：输入15，返回['00','01',...,'14','15']。输入8，返回['00','01',...,'07','08']

    test2(value) {
      let arr = [];
      let a = parseInt(value);
      for (let i = 0; i <= a; i++) {
        arr.push(i);
      }
      let c = arr.map((d) => {
        if (d < 10) return '0' + d;
        else return d.toString();
      });
      console.log(c);
      return c;
    },

parentId形式数据转children形式-toTreeData()

推荐：Vue将将后端返回的list数据转化为树结构【array-to-tree】_~疆的博客-CSDN博客下载cnpm i -S array-to-tree引入import arrayToTree from "array-to-tree";使用 const pidData = [ { name: "aa", id: "1", pid: null }, { name: "bb", id: 2, pid: 1 }, { name: "cc", id: 3, pid: "" }, { name: "dd", id: 4, pid: 3https://blog.csdn.net/qq_40323256/article/details/124730895 


/**
 * parentId形式数据转children形式
 * @param option
 * @returns {[]} 转换后的数据
 */
export function toTreeData(option) {
  // 兼容旧版
  if (Array.isArray(option)) {
    option = {
      data: arguments[0],
      idField: arguments[1],
      parentIdField: arguments[2],
      childrenField: arguments[3],
      parentId: arguments[4],
      addParentIds: arguments[5],
      parentIdsField: arguments[6],
      parentIds: arguments[7]
    };
  }
  const data = option.data;
  const idField = option.idField || option.idKey || 'id';
  const parentIdField = option.parentIdField || option.pidKey || 'parentId';
  const childrenField = option.childrenField || option.childKey || 'children';
  const parentIdIsNull =
    typeof option.parentId === 'undefined' && typeof option.pid === 'undefined';
  const parentId = parentIdIsNull ? [] : option.parentId ?? option.pid;
  const addParentIds = option.addParentIds ?? option.addPIds;
  const parentIdsField =
    option.parentIdsField || option.parentsKey || 'parentIds';
  const parentIds = option.parentIds;
  if (parentIdIsNull) {
    data.forEach((d) => {
      let flag = true;
      for (let i = 0; i < data.length; i++) {
        if (d[parentIdField] == data[i][idField]) {
          flag = false;
          break;
        }
      }
      if (flag) {
        parentId.push(d[parentIdField]);
      }
    });
  }

  const result = [];
  data.forEach((d) => {
    if (d[idField] == d[parentIdField]) {
      throw new Error(
        [
          'data error: {',
          idField + ': ',
          JSON.stringify(d[idField]),
          parentIdField + ': ',
          JSON.stringify(d[parentIdField]),
          '}'
        ].join('')
      );
    }
    const isArr = Array.isArray(parentId);
    const isParent = isArr
      ? parentId.includes(d[parentIdField])
      : d[parentIdField] == parentId;
    if (isParent) {
      const r = Object.assign({}, d);
      const children = toTreeData({
        data,
        idField,
        parentIdField,
        childrenField,
        parentId: d[idField],
        addParentIds,
        parentIdsField,
        parentIds: (parentIds ?? []).concat([d[idField]])
      });
      if (children.length > 0) {
        r[childrenField] = children;
      }
      if (addParentIds) {
        r[parentIdsField] = parentIds ?? [];
      }
      result.push(r);
    }
  });
  return result;
}

数组对象中过滤掉空数组和空字符串 

 

    let arr = [
      { location: 'a' },
      { location: [] },
      { location: 'b' },
      { location: '' }
    ];
    console.log('过滤前：', arr);
    console.log(
      '过滤后:',
      arr.filter((item) => Object.keys(item.location).length !== 0)
    );

js获取数组维数【1,2,3,4维】

    //获取数组维数。最长支持到四维数组判断。
    // -1：非数组；0：空数组；1:一维数组；2：二维数组；3：三维数组；4：四维数组
    getArrayDimension(arr) {
      if (!Array.isArray(arr)) {
        console.log(`参数不是数组`);
        return -1;
      } else if (arr.length == 0) {
        console.log(`参数为空数组`);
        return 0;
      } else if (
        Array.isArray(arr[0]) &&
        Array.isArray(arr[0][0]) &&
        Array.isArray(arr[0][0][0]) &&
        !Array.isArray(arr[0][0][0][0])
      ) {
        console.log(`参数是四维数组`);
        return 4;
      } else if (
        Array.isArray(arr[0]) &&
        Array.isArray(arr[0][0]) &&
        !Array.isArray(arr[0][0][0])
      ) {
        console.log(`参数是三维数组`);
        return 3;
      } else if (Array.isArray(arr[0]) && !Array.isArray(arr[0][0])) {
        console.log(`参数是二维数组`);
        return 2;
      } else if (!Array.isArray(arr[0])) {
        console.log(`参数是一维数组`);
        return 1;
      }
    }

测试：

    // 二维数组
    let arr2 = [
      [103, 30],
      [104, 31],
      [105, 32]
    ];

    // 三维数组
    let arr3 = [
      [
        [90, 20],
        [100, 40]
      ],
      [
        [103, 30],
        [104, 31],
        [105, 32]
      ]
    ];

    // 四维数组
    let arr4 = [
      [
        [
          [40, 30],
          [100, 40]
        ]
      ],
      [
        [
          [90, 20],
          [100, 45]
        ],
        [
          [103, 30],
          [104, 31],
          [105, 32]
        ]
      ]
    ];
    this.getArrayDimension(arr2);
    this.getArrayDimension(arr3);
    this.getArrayDimension(arr4);

 获取数组最大值最小值

  • 获取数组最大值：Math.max(...arr)
  • 获取数组最小值：Math.min(...arr)

二维数组，获取最大最小经纬度

经纬度二维数组格式如：[[104,30],...,[105,33]]

    // 根据经纬度二维数组获取最大最小经纬度。
    // 经纬度二维数组格式如：[[104,30],...,[105,33]]
    getMaxMinByLongitudeAndLatitudeArray(arr) {
      let arr_longitude = []; //经度
      let arr_latitude = []; //纬度
      for (const item of arr) {
        arr_longitude = [...arr_longitude, item[0]];
        arr_latitude = [...arr_latitude, item[1]];
      }
      const region = {
        longitude_max: Math.max(...arr_longitude),
        longitude_min: Math.min(...arr_longitude),
        latitude_max: Math.max(...arr_latitude),
        latitude_min: Math.min(...arr_latitude)
      };
      return region;
    },

使用：

    let arr = [
      [103.743896484375, 21.48374090716327],
      [101.05224609374999, 20.550508894195637],
      [103.60107421874999, 17.518344187852218]
    ];
    console.log('原数组：', arr);
    let region = this.getMaxMinByLongitudeAndLatitudeArray(arr);
    console.log('获取二维数组最大值最小值:', region);

三维、四维数组，获取最大最小经纬度

getArrayDimension（）和getMaxMinByLongitudeAndLatitudeArray（）见上面的示例 

    test(arr) {
      //获取数组维数
      let arrDimension = this.getArrayDimension(arr);
      if (arrDimension == 2) {
        return this.getMaxMinByLongitudeAndLatitudeArray(arr);
      }
      if (arrDimension == 3) {
        let newarr = [];
        for (const item of arr) {
          newarr = [...newarr, ...item];
        }
        return this.getMaxMinByLongitudeAndLatitudeArray(newarr);
      }
      if (arrDimension == 4) {
        let newarr = [];
        for (const item of arr) {
          for (const data of item) {
            newarr = [...newarr, ...data];
          }
        }
        return this.getMaxMinByLongitudeAndLatitudeArray(newarr);
      }
    },

字符串数组转带引号字符串

  • 传入：["a"] ,返回 'a'  
  • 传入：["a", "b", "c", "d"]，返回 'a','b','c','d'
// 传入：["a"] ,返回 'a'  
// 传入：["a", "b", "c", "d"]，返回 'a','b','c','d'
function format_arr_to_str(arr = ["a", "b", "c", "d"]) {
  if (arr.length == 1) {
    return `'${arr[0]}'`;
  }
  if (arr.length > 1) {
    let str = `'${arr[0]}'`;
    for (let i = 1; i < arr.length; i++) {
      str += `,'${arr[i]}'`;
    }
    return str;
  }
}

数组中给缺失的字段添加默认值

在做图表可视化的时候，通常会有这样一种场景，就是字段缺失。此时我们需要给缺失的字段添加默认值

  

    let allUsers = [
      { id: 3, name: "张三" },
      { id: 4, name: "李四" },
      { id: 5, name: "王五" },
      { id: 6, name: "赵六" },
    ];
    let arr2 = [
      { id: 3, name: "张三", value: 33 },
      { id: 4, name: "李四", value: 44 },
      { id: 6, name: "赵六", value: 66 },
    ];

    /**
    * 希望构造出以下形式：
    * [
      { id: 3, name: "张三", value: 33},
      { id: 4, name: "李四", value: 44},
      { id: 5, name: "王五", value: 0},
      { id: 6, name: "赵六", value: 66},
    ]
    */
    function test(allUsers, arr2) {
      let arr = allUsers.map((item) => {
        return {
          id: item.id,
          name: item.name,
          value: 0,
        };
      });
      arr.forEach((item) => {
        for (const d of arr2) {
          if (d.name == item.name) {
            item.value = d.value;
          }
        }
      });
      console.log("arr:", arr);
    }
    test(allUsers, arr2);

获取前7天的日期并输出为数组

如当前日期是'2023-02-10',则输出以下内容

['2023-02-04', '2023-02-05', '2023-02-06', '2023-02-07', '2023-02-08', '2023-02-09', '2023-02-10']

    // 获取前7天的日期并输出为数组
    /**
     * 如当前日期是'2023-02-10',则输出以下内容
     * ['2023-02-04', '2023-02-05', '2023-02-06', '2023-02-07', '2023-02-08', '2023-02-09', '2023-02-10']
     */
    getDateArr(dayCount = 7) {
      let arr = [];
      for (let i = 0; i < dayCount; i++) {
        let dd = new Date();
        dd.setDate(dd.getDate() - i); //获取dayCount天前的日期
        let year = dd.getFullYear();
        let mon = dd.getMonth() + 1; //获取当前月份的日期
        let day = dd.getDate();
        let a =
          year +
          "-" +
          (mon < 10 ? "0" + mon : mon) +
          "-" +
          (day < 10 ? "0" + day : day);
        arr.push(a);
      }
      return arr.reverse();
    }

根据数组对象中的某个属性进行排序

也可使用lodash，见：Vue中使用Lodash_vue使用lodash_疆~的博客-CSDN博客安装cnpm i -S lodash全局引入import _ from 'lodash'Vue.prototype._ = _使用对象数组排序 let users = [ { user: 'a', age: 48 }, { user: 'b', age: 34 }, { user: 'a', age: 42 }, { user: 'b', age: 55 } ]; let c = this._.ordhttps://blog.csdn.net/qq_40323256/article/details/123353633 

// 根据数组对象中的某个属性进行排序
const sortBy = (property, asc = true) => {
    return function (value1, value2) {
        let a = value1[property]
        let b = value2[property]
        return asc ? a - b : b - a
    }
}

测试：

let newArray = [{
        name: "aaa",
        value: 2
    },
    {
        name: "ddd",
        value: 0
    },
    {
        name: "bbb",
        value: 1
    },
    {
        name: "eee",
        value: 4
    },
    {
        name: "ccc",
        value: 3
    }];
    console.log("升序：", newArray.sort(sortBy('value')))
    console.log("降序：", newArray.sort(sortBy('value', false)))

疆~
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js使用多种方法取出嵌套对象数组中的所有 children 的值
南北极之间
04-24 4658
这些方法都会遍历整个嵌套对象数组，并返回包含所有 children 的数组。请注意，使用递归方法时要小心，确保没有无限循环。2.使用 reduce 递归方法进行深度优先遍历。3.使用 flatMap 方法进行深度优先遍历。
JavaScript之获取父级元素和子集元素
fsLees的博客
03-27 8505
获取父级元素和子集元素
JS children函数用法
qq_54684701的博客
07-12 1万+
在这次的项目里，我在用JS做轮播图时出现了一个问题，控制台一直报错说children未定义，但我的程序里children是一个方法，在检查了其他部分无果后，我以为是html结构的问题导致程序没有有效找到子元素，于是用二分法进行注释，也没有找到问题的所在。最终，仔细研究了JS里children这个方法，我找到了问题的所在。 首先，children这个方法是获取一个DOM所有子元素的集合，在轮播图中，我们可以对整体部分用一个盒子包住，利用children这个方法获取这个盒子所有的子元素（即每一张图片），然后用
js递归遍历树形json数据（找到children数据）
Ginger博客
09-30 3106
var returnedItem; //定义一个不不赋值的变量 var find = function(arr, id){ arr.forEach((item) => { //利用foreach循环遍历 if(item.id==id)//判断递归结束条件 { returnedItem = item; .
js中的children实时获取子元素
冰雪为融的博客
06-07 3万+
先看下面一个小例子的结果&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; ul,li{list-sty
js javascript笔记
PrimaryColor
07-30 295
JavaScript JavaScript是什么 Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。 JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。 JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果. JavaScript与Java没有任何关系 JavaScript是一种
JavaScript笔记（一）
将心_的博客
06-15 233
JavaScript-从入门到入土JavaScript简介前端开发者的核心工作JavaScript基本介绍JavaScript应该有三个组成部分JavaScript的使用JavaScript里的变量变量命名规则 JavaScript简介 JavaScript 是属于 HTML 和 Web 的编程语言。 JavaScript 是 web 开发者必学的三种语言之一： HTML 定义网页的内容 CSS 规定网页的布局 JavaScript 对网页行为进行编程 前端开发者的核心工作 页面渲染 用户体验 性能优
NativeJS随记 - 浅析JavaScript Events
08-12
标题中的“NativeJS随记 - 浅析JavaScript Events”表明这篇博客主要讨论的是JavaScript中的事件处理机制。JavaScript事件是Web开发中的重要组成部分，它允许我们响应用户的交互或浏览器的内部变化。在这里，我们将...
javascript-whatever:无论我想到什么JavaScript
05-17
描述中的“无论我想到什么JavaScript”则表明这个项目可能是作者随想随记的JavaScript知识点汇集，可能包含各种各样的主题，如DOM操作、事件处理、异步编程、ES6及更高版本的新特性、性能优化、错误处理等。...
AJAX 随记
10-29
<script type="text/javascript" src="ajax.js"> Welcome. ('ajax/get1.jsp', 'd1');">d1 ('ajax/get2.jsp', 'd2');">d2 <div id="a">d2 ``` 在这个例子中，当用户点击`d1`或`d2`时，对应的JSP页面（如`ajax/get1....
c++随记.docx
09-11
### C++ 随记知识点总结 #### 一、内存管理与 new/delete 操作符 在 C++ 中，`new` 和 `delete` 是用于动态内存分配的关键字。`new` 用于在堆区分配内存，`delete` 用于释放之前通过 `new` 分配的内存。使用 `new`...
随记统一响应结果和全局异常类
最新发布
01-30
个人练习使用idea编写的项目后，总结的东西
学习DOM
m0_74217314的博客
10-11 326
DOM的学习
JavaScript将一层级对象数组转为children嵌套的三层级树状对象数组（多级树状分类）
coderYYY的博客
07-31 1506
有时候后端返回的数据不适合前端，我们就需要进行转换，比如我想用elementUI的级联选择器，而这个组件对数据格式有要求，本篇文章将介绍如何将一层级对象数组数据格式转为三层级嵌套children数组，JavaScript、Vue、小程序等都适用，使用情景为多级分类，嵌套数据。
rgba(255,0,0,1)颜色，提取数字成数组
七月❤的博客
10-21 689
【代码】rgba(255,0,0,1)颜色，提取数字成数组。
字符串转数组、数组转字符串、给第一个单词色值
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-18 146
<html> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <head> <style> </style> <link rel=stylesheet href="style.css" type="text/css"> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"
字符串rgba转数组
qq_21476953的博客
07-30 877
一个小工具: 字符串rgba转数组。 /** * 字符串rgba转数组 * @param {*} color "rgba(1,2,3,4)" * @param {*} normalized 是否被255归一化 * @return [1,2,3,4] */ export function rgba2arr(color, normalized = true) { let ret = []; let colorStr = new RegExp(/(?<=\()\S+(?=\))/).exec(
js 判断数组中是否包含某个元素
我总是词不达意的博客
12-11 522
js 判断数组中是否包含某个元素
SCSS基本使用
热门推荐
10-17 4万+
Sass官网：https://www.sass.hk/docs/ Sass就是css的预处理器，它是Sass3版本中引入的新语法特性 vue中使用scss，安装： cnpm i -S node-sass sass-loader 使用： <style lang="scss" scoped> </style> 一、变量 使用$符号去声明一个变量 给同一个变量再次赋值时，后赋值的会替换先赋值的 可以在变量的结尾添加!default给一个未通过!defa...
随记洗牌发牌的C语言程序
06-06
以下是一个简单的随机洗牌发牌程序的C语言代码： ```c #include #include #include #define DECK_SIZE 52 #define SUIT_SIZE 13 int main() { int deck[DECK_SIZE]; int i, j, temp; // 初始化牌堆 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值