项目遇到的一些问题【持续更新中......】

一、数组

1. 去除数组对象中某一个属性

const arr = [
  { name: '张三', age: 20 },
  { name: '李四', age: 22 },
  { name: '王五', age: 25 }
];

const newArr = arr.map(({age, ...item}) => item);

console.log(newArr); // [{ name: '张三' }, { name: '李四' }, { name: '王五' }]

以上代码中，我们使用了ES6的解构语法，将对象中的age属性解构出来，并使用展开运算符将除了age属性之外的所有属性打包给item变量。接着，我们返回了一个仅包含item变量的新对象，这样就实现了去除原数组中每个对象的age属性的目的。

需要注意的是，以上代码使用了箭头函数和ES6语法，如果您的项目中不能使用这些特性，那么可以考虑使用普通函数和常规的循环语句来实现该功能。

2. 数组中按照某一个属性排序根据您提供的示例数组 body，根据 takeDate 字段降序排列的代码如下：

const body = [  {      "id": "1",      "takeDate": 1647273600000,      "takeUserNo": "132",      "takeUserName": "王尔豪22",      "editFlag": 1  },  {      "id": "2",      "takeDate": 1695225600000,      "takeUserNo": "325",      "takeUserName": "张永敢22",      "editFlag": 1  }] 

const sortedBody = body.sort((a, b) => b.takeDate - a.takeDate);

在这个示例代码中，我们使用 Array.prototype.sort() 方法对 body 数组进行排序。比较函数 (a, b) => b.takeDate - a.takeDate 表示按照 takeDate 字段的降序排列。通过比较 b.takeDate - a.takeDate 的结果，可以得到降序排列的排序顺序。

排序后的结果将存储在 sortedBody 变量中。请注意，这并不会改变原始的 body 数组，而是返回一个新的已排序数组。您可以根据需要使用 sortedBody 进行后续的操作。

3. 类型判断函数---Object.prototype.toString.call

var type = function (o){
  var s = Object.prototype.toString.call(o);
  return s.match(/[object (.*?)]/)[1].toLowerCase();
};
Object.prototype.toString.call(2) // "[object Number]"
type({}); // "object"
type([]); // "array"
type(5); // "number"
type(null); // "null"
type(); // "undefined"
type(/abcd/); // "regex"
type(new Date()); // "date"

4. js arr2的数组按照arr1里面的数组排序

可以使用 Array.prototype.sort() 方法排序，传入一个比较函数，将 arr2 按照 arr1 中元素的顺序排序。具体实现如下：

const arr1 = [33, 11, 55, 22, 66]; 
const arr2 = [{age: 55}, {age: 22}, {age: 11}, {age: 66}, {age: 33}];

// 比较函数，返回根据 arr1 排序后，a 和 b 的顺序
function compare(a, b) {
  return arr1.indexOf(a.age) - arr1.indexOf(b.age);
}

// 排序
arr2.sort(compare);

console.log(arr2); // [{age: 33}, {age: 11}, {age: 55}, {age: 22}, {age: 66}]

使用 indexOf() 方法可以获得元素在数组中的索引，将两个元素根据它们出现在 arr1 中的位置进行比较，从而得到排序后的结果。

4.1. 公共函数

  const ageArr = [33, 11, 55, 22, 66]; 
  const moneyArr = [5000, 3000, 6000, 2000, 9000]
  const objArr = [
      {age: 55, money: 6000},
      {age: 22, money: 3000},
      {age: 11, money: 2000},
      {age: 66, money: 9000},
      {age: 33, money: 5000}
  ]
  
// 1. 将sort排序函数抽离出来
   /**
    * @description 数组sort方法的 sortby（规定排序顺序）
    * @param {String} propName 属性名（数组排序基于的属性）
    * @param {Array} referArr 参照数组（objArr数组排序的参照数组）
    */
   const sortFunc = (propName, referArr) => {
     return (prev, next) => {
       return referArr.indexOf(prev[propName]) - referArr.indexOf(next[propName])
     }
   }
   
// 2. 排序objArr
   objArr.sort(sortFunc('age', ageArr))
   console.log('按age属性排序后的objArr\n', objArr)
   
   objArr.sort(sortFunc('money', moneyArr))
   console.log('按money属性排序后的objArr\n', objArr)

5. 刷新表单数据

// 将这个值赋给 this.form，实现了将 this.form 重置为初始值的效果。
this.form = this.$options.data().form; // 获取组件的初始数据对象

6. el-form表单校验（正则）

formRules: {
  reimbursementLimit: [
    { required: true, message: '请输入报销比例', trigger: ['blur', 'change'] },
    // 正则校验输入小数
    { pattern: /^[0-9.]+$/, message: '请输入数字' },
  ],
  'secondMerchant.telephone': [
    { pattern: /^[0,1,2,3,4,5,6,7,8,9,-]{7,}$/, message: '电话格式错误', trigger: 'blur' },
  ],
  'secondMerchant.fax': [
    { pattern: /^[0,1,2,3,4,5,6,7,8,9,-]{7,}$/, message: '传真格式错误', trigger: 'blur' },
  ],
  email: [
    { pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/, message: '邮箱格式不正确', trigger: 'blur' },
  ],
},

7. Git遇到的问题

7.1. git 本地设置全局名字

git config --global user.name "Your Name"

7.2. git设置本地的用户名和密码

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
请注意，--global 参数用于全局配置。这意味着这些设置将适用于你系统上的所有 Git 仓库。如果你只想在当前仓库中配置用户名和邮箱，可以不使用 --global 参数，而是进入该仓库的目录，然后在步骤2和步骤3中去掉 --global 参数即可。

8. vxe-table

8.1. 动态渲染表格可编辑

{
  label: '业绩归属部门',
  align: 'center',
  headerAlign: 'center',
  children: [
    {
      tooltip: true,
      title: '部门名称',
      minWidth: '100px',
      field: 'unitName',
      slots: {
        default: ({ row }, h) => (
          <div class="product_list_cell">
            {(row.itemList || []).map(i => (
              <div>
                <span class={row.editFlag === 1 ? 'color-red' : ''}>
                  {i.unitName}
                </span>
              </div>
            ))}
          </div>
        ),
      },
    },
    {
      tooltip: true,
      title: '起始日期',
      minWidth: '100px',
      field: 'effectiveDate',
      slots: {
        default: ({ row }, h) => (
          // 把这里面的数据动态加载到dom
          <div class="product_list_cell">
            {(row.itemList || []).map(i => (
              <div>
                <span>
                  {this.$options.filters['date-format'](i.effectiveDate, 'YYYY-MM-DD') || '--'}
                </span>
              </div>
            ))}
          </div>
        ),
      },
    },
  ],
},

9. npm

配置镜像：npm config set registry https://registry.npmmirror.com
查看是否更换成功：npm config get registry

执行安装命令：npm install