js函数总结

1. arrayToKeyValue

export function convertToObj(list: RoleItem[]): Record<string, string | number> {
  return Object.fromEntries(list.map(item => [item.RoleID, item.RoleName]));
}

2. 转化为selectList

import { DictType } from 'src/models/dict';
import { includes, filter } from 'lodash-es';
import { SelectProps } from 'antd';
import { RoleDetailItem } from 'src/models/user/role';
import { CheckboxGroupProps } from 'antd/lib/checkbox';

export interface SelectOptionProps {
  value: string;
  label: string;
}
export function convertToData(
  list: DictType[] | SelectProps['options'] | string[],
): SelectProps['options'] | string[] {
  return list.map(item => ({
    label: item.desc,
    value: item.code,
  }));
}

export function filterToApplyType(
  list: DictType[] | SelectProps['options'] | string[],
  filterMap: number[],
): SelectProps['options'] | string[] {
  return filter(
    list.map(
      item =>
        !includes(filterMap, item.code) && {
          label: item.desc,
          value: item.code,
        },
    ),
    item => !!item,
  );
}

export function covertCheckBox(list: RoleDetailItem[]): CheckboxGroupProps['options'] | string[] {
  return list.map(item => ({
    label: item.Title,
    value: item.PermID,
  }));
}

export function filterCheckboxValue(list: RoleDetailItem[]): string[] | number[] {
  const arr = [];
  list.map(item => arr.push(item.PermID));
  return arr;
}

3. 转化为对象

import { get, map } from 'lodash-es';
import { RoleCheckboxGroupItem, RoleDetailItem, RoleSubmitItem } from 'src/models/user/role';

export function addAll(list: RoleDetailItem): RoleCheckboxGroupItem {
  const arr = [];
  map(list.Children, item => {
    if (item.Checked) {
      arr.push(item.PermID);
    }
  });
  return {
    All: get(list, 'Children') && arr.length === get(list, 'Children').length,
    Children: arr,
  };
}
export function covertToArr(list: RoleDetailItem[]): RoleCheckboxGroupItem[] {
  return map(list, item => ({
    ...addAll(item),
    PermID: item.PermID,
  }));
}

export function convertToRole(list: RoleDetailItem[]): RoleSubmitItem[] {
  return list.map((item: RoleDetailItem) => ({
    Children: covertToArr(item.Children),
    PermID: item.PermID,
    Checked: item.Checked,
  }));
}

4. 下载文件

/**
 * 下载文件
 * @param data
 * @param fileName
 */
export const downloadFile = (data: BlobPart, fileName?: string): void => {
  const href = window.URL.createObjectURL(new Blob([data]));
  const link = document.createElement('a');
  link.href = href;
  if (fileName) {
    link.setAttribute('download', fileName);
  }
  document.body.appendChild(link);
  link.click();
};

/**
 * 获取文件名称
 * @param contentDisposition - res.headers["content-disposition"]
 */
export const getFileName = (contentDisposition: string): string => {
  const result = new RegExp('filename=([^;]+\\.[^\\.;]+);*').exec(contentDisposition);
  return result && result[1] ? result[1] : '';
};

export const judgeFileType = (type: string): boolean => {
  if (!type) return false;
  return !type.includes('json');
};

5. 判断请求类型

import { AxiosRequestConfig } from 'axios';
import mToken from 'src/lib/mToken/mToken';
import { DigestMethod, KeySpec } from '@didi/m-token-sdk';
import config from 'src/config';
import CryptoJS from 'crypto-js';
import { USB_KEYS } from 'src/constants';
import { forIn } from 'lodash-es';
import queryString from 'query-string';

export function jsonToString(
  data: AxiosRequestConfig['data'],
  Url: string,
  UsbKey: string,
): string {
  const obj = {
    UsbKey,
  };
  // eslint-disable-next-line no-restricted-syntax
  for (const [key, value] of data.entries()) {
    obj[key] = value;
  }
  return `${Url}?${queryString.stringify(obj)}`;
}
export function fetchSignByCert(data: string, length: number): string {
  const deviceCurrentSn = localStorage.getItem(USB_KEYS.USB_DEVICESN);
  mToken.setCurrentDevice(deviceCurrentSn);
  const cert = mToken.signData(
    KeySpec.SIGNING,
    DigestMethod.SGD_SM3,
    data,
    length,
    config.UkeyContainerName,
  );
  return cert;
}
export function joinToGetString(config: AxiosRequestConfig): string {
  const { params } = config;
  if (!params) return '';
  let strTail = '';
  forIn(params, (value, key) => {
    if (key) {
      strTail += `${strTail}&${key}=${value}`;
    }
  });
  return `${config.url}?${strTail}`;
}
export function judegReqTypeToKey(config: AxiosRequestConfig): string {
  let str = '';
  if (config.method === 'get') {
    str = joinToGetString(config);
  } else if (config.data instanceof FormData) {
    const deviceCurrentSn = localStorage.getItem(USB_KEYS.USB_DEVICESN);
    str = jsonToString(config.data, config.url, deviceCurrentSn);
  } else {
    str = JSON.stringify(config.data || {});
  }

  const wordArray = CryptoJS.enc.Utf8.parse(str);
  const baseStr = CryptoJS.enc.Base64.stringify(wordArray);
  const signdata = fetchSignByCert(baseStr, str.length);
  return signdata;
}

export function judgeFormDataSign(config: AxiosRequestConfig): string {
  let str = '';
  if (config.method === 'get') {
    str = joinToGetString(config);
  }
  if (config.data instanceof FormData) {
    const deviceCurrentSn = localStorage.getItem(USB_KEYS.USB_DEVICESN);
    str = jsonToString(config.data, config.url, deviceCurrentSn);
  }
  const wordArray = CryptoJS.enc.Utf8.parse(str);
  const baseStr = CryptoJS.enc.Base64.stringify(wordArray);
  return baseStr;
}

6. 对象转数组

import { StandardExten } from 'src/models/cert/cert';
import {
  ExtElementItem,
  ExtendsProps,
} from 'src/pages/cert-tem/components/extends-fields/extends-filelds';

export function covertToArr(list: StandardExten[]): ExtendsProps[] | ExtElementItem[] {
  const list2 = [];
  const list1 = Object.entries(list);
  list1.map(item => list2.push({ UniqueKey: item[0], ...item[1] }));
  return list2;
}

7. 字符串转数组，且去空

import { isArray } from "lodash-es";

export function replaceAll(str: string, from: string, to: string): string {
  const reg = new RegExp(from, "g");
  return str.replace(reg, to);
}

export function stringToArray(str: string): string[] {
  if (!str) return [];
  const str1 = replaceAll(str.trim(), "，", ",");
  return str1
    .split(",")
    .filter(item => item && item.trim())
    .map(item => item.trim());
}

export function signleInputToMuitiple(data: string[] | string) {
  if (isArray(data)) {
    return data;
  }
  return stringToArray(data);
}

8. 转化为对象参数

export function covertToParams(params) {
  if (!params) return {};
  return params.map(item => ({
    name: item.name,
    description: item.description,
    type: item.type,
    required: item.required === "true",
  }));
}

export function covertToForm(params) {
  if (!params) return {};
  return params.map(item => ({
    name: item.name,
    description: item.description,
    type: item.type,
    required: `${item.required}`,
  }));
}

9. 从对象中取参数组成数组

import { AppUserItem } from "../models";

export function getAdminList(data: AppUserItem[]) {
  return data.map(item => item.id);
}

10. 递归转化为树形结构数据

interface MarketItem {
  key: string;
  value: string;
  title: string;
}
export interface MarketList {
  key: string;
  value: string;
  title: string;
  children: MarketItem[];
}

export function convertToFatherTreeData(list: any[]): MarketList[] {
  list.forEach(item => {
    item.deviceName = item.group.groupName;
    item.deviceId = item.group.rootId;
    item.id = item.group.id;
    item.children = item.devices;
    delete item.devices;
    delete item.group;
  });

  return list;
}

export function convertToTreeData(list: any[]): MarketList[] {
  list.forEach(item => {
    item.title = item.deviceName;
    item.value = item.deviceId;
    item.key = item.id;
    delete item.deviceName;
    delete item.deviceId;
    delete item.id;
    if (item.children && item.children.length) {
      convertToTreeData(item.children);
    }
  });
  return list;
}

11. Echart相关

import echarts, { EChartOption } from 'echarts';
// import { LinearGradient } from 'echarts/options';
import { X, Y, X2, Y2, ColorStops, GlobalCoords } from 'zrender';
interface ColorProps {
  type: 'linear';
  x: X;
  y: Y;
  x2: X2;
  y2: Y2;
  colorStops: ColorStops;
  globalCoord: GlobalCoords;
  // global: boolean;

  addColorStop(offset: number, color: string): void;
}

export const getLinearColor = (color1: string, color2: string): ColorProps => {
  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    {
      offset: 0,
      color: color1,
    },
    {
      offset: 1,
      color: color2,
    },
  ]);
};

12. reg

const Ipv4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
const Ipv6 = /^(([\da-fA-F]{1,4}):){8}$/;
// 经度
const longitude = /^(-|\+)?(((\d|[1-9]\d|1[0-7]\d|0{1,3})\.\d{0,6})|(\d|[1-9]\d|1[0-7]\d|0{1,3})|180\.0{0,6}|180)$/;
// 纬度
const latitude = /^(-|\+)?([0-8]?\d{1}\.\d{0,6}|90\.0{0,6}|[0-8]?\d{1}|90)$/;
const isIpv4 = (val: string): boolean => {
  return Ipv4.test(val);
};
const isIpv6 = (val: string): boolean => {
  return Ipv4.test(val);
};
const isIp = (val: string): boolean => {
  return isIpv4(val) || isIpv6(val);
};
// 判断是经度
const isLongitude = (val: string): boolean => {
  return longitude.test(val);
};
const isLatitude = (val: string): boolean => {
  return latitude.test(val);
};
export { Ipv4, Ipv6, longitude, latitude, isIpv4, isIpv6, isLongitude, isLatitude, isIp };

13. time

import moment from 'moment';

export const timeJudge = (value: string): any => {
  if (value && value.length > 0) {
    return moment(value);
  } else {
    return undefined;
  }
};

export const timeTransform = (value: string): string => {
  if (value && value.length > 0) {
    return moment(value).format('YYYY-MM-DD HH:mm:ss');
  } else {
    return '';
  }
};

14. 图片压缩

export function compress(
  base64, // 源图片
  rate // 缩放比例
) {
  return new Promise((resolve) => {
    //处理缩放，转格式
    var _img = new Image();
    _img.src = base64;
    _img.onload = function () {
      var _canvas = document.createElement('canvas');
      var w = this.width / rate;
      var h = this.height / rate;
      _canvas.setAttribute('width', w);
      _canvas.setAttribute('height', h);
      _canvas.getContext('2d').drawImage(this, 0, 0, w, h);
      var base64 = _canvas.toDataURL('image/jpeg');
      if (!_canvas.toBlob) {
        return resolve(base64);
      }
      _canvas.toBlob(function (blob) {
        if (blob.size > 750 * 1334) {
          //如果还大，继续压缩
          compress(base64, rate);
        } else {
          resolve(base64);
        }
      }, 'image/jpeg');
    };
  });
}

15. 判断浏览器

export const handleBroswerJudge = () => {
  var ua = window.navigator.userAgent.toLowerCase();
  if (ua.indexOf('micromessenger') > 0) {
    return true; // 是微信端
  } else if (ua.indexOf('alipayclient') > 0) {
    return true;
  } else if (ua.indexOf('qq') > 0) {
    return true;
  } else {
    return false;
  }
};

16. getJumpToUrl

import queryString from 'query-string';
export const jumpToUrl = () => {
  const url = window.location.href.split('?')[0];
  const parsed = queryString.parse(window.location.search);
  const { sso_ticket, ...rest } = parsed;
  const rest_url = queryString.stringify(rest);
  const jump_url = url + (rest_url ? '?' + rest_url : '');
  return encodeURIComponent(jump_url);
};

17. 配置文件

 "build": "npm-run-all --parallel build:*",
    "build:prime-base": "cd packages/prime-base && pnpm build",
    "build:prime-asset-center": "cd packages/prime-asset-center && pnpm build",
    "build:prime-task-center": "cd packages/prime-task-center && pnpm build",
    "build:prime-policy-center": "cd packages/prime-asset-center && pnpm build",
    "build:prime-risk-center": "cd packages/prime-risk-center && pnpm build",
    "start": "npm-run-all --parallel start:*",
    "start:prime-base": "cd packages/prime-base && pnpm start",
    "start:prime-asset-center": "cd packages/prime-asset-center && pnpm start",
    "start:prime-task-center": "cd packages/prime-task-center && pnpm start",
    "start:prime-policy-center": "cd packages/prime-policy-center && pnpm start",
    "start:prime-risk-center": "cd packages/prime-risk-center && pnpm start",
    "proxy": "cd packages/prime-base && chaos proxy",
    "cr:master": "git push origin HEAD:refs/for/master",
    "cr:predev": "git push origin HEAD:refs/for/predev"

18. nginx.conf

upstream api_upstream {
  server 100.69.239.97:30871;
}

server {
    listen 8080;
    root /home/xiaoju/qiankunbag-ra-ui/dist;

    location / {
        index index.htm index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
      proxy_set_header Host $http_host;
      proxy_set_header   X-Real-IP        $remote_addr;
      proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
      proxy_set_header Cookie $http_cookie;
      rewrite ^/api/(.*)$ /$1 break;
      proxy_pass http://api_upstream;
    }
}

worker_processes 4;
error_log /home/xiaoju/logs/error.log notice;
pid       run/nginx.pid;
worker_rlimit_nofile 51200;

events {
    accept_mutex on;
    multi_accept on;
    worker_connections 51200;
}
http {
    include mime.types;
    default_type application/octet-stream;
    charset utf-8;

    client_header_buffer_size 4k;
    large_client_header_buffers 4 32k;
    client_max_body_size 2m;
    client_body_buffer_size 1024k;
    log_format main '$remote_addr [$time_local] "$request" $status '
    '$request_length $request_time $body_bytes_sent "$http_referer" '
    '"$http_user_agent" $server_addr $upstream_addr $host '
    '$upstream_cache_status $http_x_forwarded_for $http_didi_header_rid '
    '$http_x_forwarded_proto $pid $server_port $server_name';
    gzip on;
    gzip_comp_level 5;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_proxied any;
    gzip_vary on;
    gzip_types
      application/javascript
      application/x-javascript
      text/javascript
      text/css
      text/xml
      application/xhtml+xml
      application/xml
      application/atom+xml
      application/rdf+xml
      application/rss+xml
      application/geo+json
      application/json
      application/ld+json
      application/manifest+json
      application/x-web-app-manifest+json
      image/svg+xml
      text/x-cross-domain-policy;
    gzip_static on;
    gzip_disable "MSIE [1-6]\.";
    access_log /home/xiaoju/logs/access.log main;
    sendfile on;
    tcp_nopush on;

    keepalive_timeout  120;
    reset_timedout_connection on;

    fastcgi_connect_timeout 100ms;
    fastcgi_send_timeout 1s;
    fastcgi_read_timeout 4s;
    fastcgi_buffer_size 128k;
    fastcgi_buffers 8 128k;
    fastcgi_busy_buffers_size 256k;
    fastcgi_temp_file_write_size 256k;
    fastcgi_intercept_errors on;
    fastcgi_hide_header Pragma;

    set_real_ip_from 10.0.0.0/8;
    set_real_ip_from 100.0.0.0/8;
    real_ip_header X-Real-IP;

    include conf.d/*.conf;
}

20. proxy

module.exports = {
  publicUrl:
    process.env.NODE_ENV === 'production' ? '//s3-gz01.didistatic.com/kmc-static-v3/ra' : '/',
  proxy: [
    {
      key: 'test',
      label: '测试环境',
      options: [
        [
          '/api',
          {
            changeOrigin: true,
            target: 'http://ra-server-sim-gz.intra.xiaojukeji.com',
            pathRewrite: {
              '^/api': '',
            },
          },
        ],
      ],
    },
    {
      key: 'mock',
      label: 'Mock 环境',
      options: [
        [
          '/api',
          {
            changeOrigin: true,
            target: 'https://mock.xiaojukeji.com/mock/11207',
            pathRewrite: {
              '^/api': '',
            },
          },
        ],
      ],
    },
  ],
};

21. gitignore

# Created by .ignore support plugin (hsz.mobi)
### Node template
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

### JetBrains template
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839

# User-specific stuff
.idea/**/workspace.xml
.idea/**/tasks.xml
.idea/**/usage.statistics.xml
.idea/**/dictionaries
.idea/**/shelf

# Generated files
.idea/**/contentModel.xml

# Sensitive or high-churn files
.idea/**/dataSources/
.idea/**/dataSources.ids
.idea/**/dataSources.local.xml
.idea/**/sqlDataSources.xml
.idea/**/dynamic.xml
.idea/**/uiDesigner.xml
.idea/**/dbnavigator.xml

# Gradle
.idea/**/gradle.xml
.idea/**/libraries

# Gradle and Maven with auto-import
# When using Gradle or Maven with auto-import, you should exclude module files,
# since they will be recreated, and may cause churn.  Uncomment if using
# auto-import.
# .idea/artifacts
# .idea/compiler.xml
# .idea/jarRepositories.xml
# .idea/modules.xml
# .idea/*.iml
# .idea/modules
# *.iml
# *.ipr

# CMake
cmake-build-*/

# Mongo Explorer plugin
.idea/**/mongoSettings.xml

# File-based project format
*.iws

# IntelliJ
out/

# mpeltonen/sbt-idea plugin
.idea_modules/

# JIRA plugin
atlassian-ide-plugin.xml

# Cursive Clojure plugin
.idea/replstate.xml

# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties

# Editor-based Rest Client
.idea/httpRequests

# Android studio 3.1+ serialized cache file
.idea/caches/build_file_checksums.ser

lerna-debug.log

packages/**/lib/**/*
.vscode/
.history/
build/
oe-user/output
oe-initialize/output

22. 判断两个数组是否一样

export function judgeArrayIsEqual(arr1: number[], arr2: number[]): boolean {
  if (arr1.length !== arr2.length) return false;
  return every(arr2, item => arr1.includes(item));
}