前端工作经验总结.

对数组元素进行连续排名算法

 // 原始数组
var arr = [20, 10, 15, 25, 30, 30, 5];

const getRankFunc = (arr) => {
    let rankArr = [];

    // 将数组按从大到小的顺序进行排序
    arr.sort(function (a, b) { return b - a; });

    // 初始化排名变量
    var rank = 1;

    // 遍历数组并为每个元素赋予排名值
    for (var i = 0; i < arr.length; i++) {
        if (i > 0 && arr[i] !== arr[i - 1]) { // 判断当前元素与上一个元素是否不同
            rank++; // 若不同则更新排名值
        }

        // 将数组元素和相应排名值整理成一个对象.
        rankArr.push({ value: arr[i], rank });

    }
    return rankArr;
};

console.log(getRankFunc(arr));

原生JS 与 CSS 之间变量通信

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #outer {
            width: 100%;
            height: 100px;
            background-color: bisque;
        }

        #circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: red;
            animation-name: rolling_cricle;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: linear;
        }

        @keyframes rolling_cricle {
            from {}

            to {
                /* 使用var()函数 来获取JS 传递的变量值 */
                margin-left: var(--outer_width);
            }

        }
    </style>
</head>

<body>
    <div id="outer">
        <div id="circle"></div>
    </div>

    <script>
        let outer_width = document.getElementById('outer').offsetWidth;
        // 获取要传递变量值目标元素
        let circle_el = document.getElementById('circle');
        // 给元素添加一个 --outer_width 的属性, <div id="circle" style="--outer_width:100px"></div>. 注意: 传递变量的变量名一定要 -- 开头.
        circle_el.setAttribute('style', `--outer_width:${outer_width - 100}px`)
    </script>
</body>

</html>

Vscode React 代码片段

"generateAntdFunctionComponent": {
	 	//"scope": "javascript,typescript,jsx,tsx",
	 	"prefix": "rfc",
	 	"body": [
			"import React from \"react\";",
			"",
			"const ${TM_FILENAME_BASE}$1: React.FC = () => {",
			"  return <>${TM_FILENAME_BASE}$1</>;",
			"};",
			"",
			"export default ${TM_FILENAME_BASE}$1;",
	 	],
	 	"description": "生成函数式组件片段"
	 }

在nextjs中使用antd组件库,需要在next.config.ts中添加如下转译配置项.

transpilePackages: [
    "antd",
    "@ant-design",
    "rc-util",
    "rc-pagination",
    "rc-picker",
    "rc-notification",
    "rc-tooltip",
    "rc-tree",
    "rc-table",
  ],

Git 删除分支命令

# Git 命令删除 conflict 开头的所有分支.
 git branch | grep "conflict" | xargs git branch -D  

# 列出所有分支并删除除了master以外的分支
git branch | grep -v "master" | xargs git branch -D
posted @ 2024-01-19 17:26  HonkSun  阅读(13)  评论(0)    收藏  举报