JS 开发实战方法

1.获取多个数的平均值

使用reduce我们可以非常方便的得到一组数组的平均值。

const average = (…args) => args.reduce((a, b) => a + b, 0) / args.length
average(0, 1, 2, -1, 9, 10) // 3.5

2.检查数字是偶数还是奇数

如何判断一个数是奇数还是偶数？

const isEven = num => num % 2 === 0
isEven(2) // true ：可以被二整除的  
isEven(1) // false：不能被二整除的  

3.删除数组中的重复元素

要删除数组中的重复元素，使用 Set 将变得非常容易。

const uniqueArray = (arr) => […new Set(arr)]
uniqueArray([ 1, 1, 2, 3, 4, 5, -1, 0 ]) // [1, 2, 3, 4, 5, -1, 0]

4.数组复杂去重

需要使用对象的唯一标识

 let art = this.formLabelAlign.YouCeShuZhuangTuShuJu.filter((item, index) => {
        return this.formLabelAlign.YouCeShuZhuangTuShuJu.findIndex(obj => obj === item) === index;
      });

5.检查一个对象是否为空对象

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object
isEmpty({}) // true
isEmpty({ name: ‘小明’ }) // false

6.反转字符串

const reverseStr = str => str.split(‘’).reverse().join(”)
reverseStr(‘qwerty’) //ytrewq

7.计算两个日期之间的间隔

const dayDiff = (d1, d2) => Math.ceil(Math.abs(d1.getTime() – d2.getTime()) / 86400000)
dayDiff(new Date(“2023-06-23”), new Date(“1997-05-31”)) // 9519

8.查找该日期是一年中的第几天

const dayInYear = (d) => Math.floor((d – new Date(d.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24)
dayInYear(new Date(‘2023/06/23’)) // 174

9..将字符串的第一个字母大写

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize(“hello fatfish”) // Hello fatfish

10.生成指定长度的随机字符串

const gRtring = length => […Array(length)].map(() => Math.random().toString(36)[2]).join(”)
gRtring (12) // cysw0ertyoqx
gRtring (12) // uoqauger8qws

11.获取两个整数之间的随机整数

const random = (min, max) => Math.floor(Math.random() * (max – min + 1) + min)
random(1, 100) // 27
random(1, 100) // 84
random(1, 100) // 55

12.指定数字四舍五入

const round = (n, d) => Number(Math.round(n + “e” + d) + “e-” + d)
round(3.1415926, 3) //3.142
round(3.1415926, 1) //3.1

13.清除所有cookie

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

14.检测是否为深色模式

const isDarkMode = window.matchMedia && window.matchMedia(‘(prefers-color-scheme: dark)’).matches
console.log(isDarkMode)

15.滚动到页面顶部

const goToTop = () => window.scrollTo(0, 0)
goToTop()

16.判断是否是苹果设备

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform)
isAppleDevice()

17.随机布尔值

const randomBoolean = () => Math.random() >= 0.5
randomBoolean()

18.获取变量的类型

const typeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
typeOf(”) // string
typeOf(0) // number
typeOf() // undefined
typeOf(null) // null
typeOf({}) // object
typeOf([]) // array
typeOf(0) // number
typeOf(() => {}) // function

19.判断当前选项卡是否处于活动状态

const checkTabInView = () => !document.hidden

20.检查某个元素是否获得焦点

const isFocus = (ele) => ele === document.activeElement

21.随机IP

const gRIP = () => {
return Array.from({length: 4}, () => Math.floor(Math.random() * 256)).join(‘.’);
}
gRIP () // 210.178.178.123
gRIP () // 240.21.189.141

22.数据补位

// 实例 
let date = new Date()
let at = String(date .getMonth()).padStart(2,'0') 
console.log(at) // 09

23.两个数组之间的穿插

let A1 = [3,3,3]
let A2 = [2,2,]

var rectifyIndex = Math.max(A1.length, A2.length)
			for (var i = 0; i < A1; i++) {
				if (i < A1.length) {
					mergedArray.push(A1[i]);
				}
				if (i <  A2.length) {
					mergedArray.push( A2[i]);
				}
			}
console.log(rectifyIndex ) // [3,2,3,2,3]

24.冒泡排序 

let arrray = [12, 30, 58, 365, 157, 9];
				let len = arrray.length
				for (var i = 0; i < len - 1; i++) {
					for (var j = 0; j < len - 1 - i; j++) {
						if (arrray[j] > arrray[j -1]) {
							var temp = arrray[j];
							arrray[j] = arrray[j - 1];
							arrray[j - 1] = temp;
						}
					}
				}
console.log(arrray)

25.下载http链接到本地

downloadImage(url, filename) {
  fetch(url)
    .then(response => response.blob())
    .then(blob => {
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = filename;
      link.style.display = 'none';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
}

26. 一维数组转为树状结构

// 测试数据
const RECORDS =[
        {
            "menu_id": 1,
            "menu_name": "系统管理",
            "parent_id": 0
        },
        {
            "menu_id": 2,
            "menu_name": "系统监控",
            "parent_id": 0,
            "order_num": 10
        },
        {
            "menu_id": 101,
            "menu_name": "角色管理",
            "parent_id": 1,
            "order_num": 2
        }, {
            "menu_id": 102,
            "menu_name": "菜单管理",
            "parent_id": 1,
            "order_num": 3
        },
        {
            "menu_id": 103,
            "menu_name": "部门管理",
            "parent_id": 1,
            "order_num": 4
        }

    ]


function unidimensionalTree(data) {
    const map = {}; // 初始话一个空对象，用来存所有数据并且以 menu_id 为 key
    const tree = []; // 初始话一个空数组，用来存树结构数据 最后将其放回
    // 先将所有的节点放入 map 中
    data.forEach((item) => {
        // 这里的 key 值是 menu_id，value 值是节点对象
        map[item.menu_id] = { ...item, children: [] };
    });
    // 构建树结构
    data.forEach((item) => {
        //  判断 当前数据是不是根目录 ，如果是 ，添加到tree 数组中
        if (item.parent_id === 0) {
            // 如果是根节点，直接添加到 tree 中
            tree.push(map[item.menu_id]);
        } else {
            // 如果不是根节点，找到其父节点，将当前数据添加到 children 的数组当中
            // 否则，将它添加到其父节点的 children 中
            if (map[item.parent_id]) {
                
                map[item.parent_id].children.push(map[item.menu_id]);
            }
        }
    });
    return tree;
}

27.树状图转为一维数组

function threeTurnDimension(tree) {
    let result = [];// 初始话一个空数组，用来存结果数据
    // 遍历树结构数据
    tree.forEach((node) => {
        // 将当前节点推入结果数组
        result.push(node);
        // 如果当前节点有子节点，递归处理子节点
        if (node.children && node.children.length > 0) {
            // 递归调用，将子节点的结果数据推入结果数组
            result = result.concat(threeTurnDimension(node.children));
        }
    });

    return result;
}