项目随机问题笔记

一、前端项目启动的命令

启动项目依赖：npm install

安装cross-env模块：npm i cross-env --save-dev

启动报错时试试这个 npm install node-sass (安装sass)

启动项目命令1 npm run dev

启动项目命令2 npm run start

启动项目命令3 npm start

二、前端中的几个空格符

HTML提供了5种空格实体

1、    它叫不换行空格，常规空格的宽度，可运行于所有主流浏览器，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

2、    它叫“半角空格”，等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

3、    它叫“全角空格”，其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

4、    它叫窄空格，占据的宽度比较小。中文宽度的六分之一。

5、‌   它叫零宽不连字，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。

6、‍   它叫零宽连字，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。

同时，浏览器还会把以下字符当作空白进行解析：

空格( )、制表位(	)、换行(
)、回车(
)、全角字符(　)

三、css图片自适应方法

使用css属性：object-fit

1、object-fit: fill;   默认值。内容拉伸填满整个content box, 不保证保持原有的比例。

2、object-fit: contain;  保持原有尺寸比例。长度和高度中长的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。

3、object-fit: cover;   保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。

4、object-fit: none;   保持原有尺寸比例。同时保持替换内容原始尺寸大小。

5、object-fit: scale-down;   保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。

四、form表单的初始值和赋值问题

1、initialValue：初始状态就存在的值，默认值，但是改变后就会消失。

2、setFieldsValue:可以多次改变的值，利用form的useForm()来改变，进行赋值运算。

const [form] = Form.useForm();

form.setFieldsValue({ file_title: '身份证件复印件',file_name:‘文件名字’,});

五、CSS样式修改

css修改样式的时候，/deep/ 或者 >>>,都不能控制到，这个时候可以用两个方法：

1、样式写在全局样式中，global.less.里面所有属性后面都加上!important,就可以改变原来的样式。更改默认的CSS样式的优先级规则，使该条样式属性声明具有最高优先级，(IE6以下认为这个优先级低，包含IE6)

2、用:global{ .name{ fontSize:16 } },推荐这个！

六、JS中的'&&'、'&'、'|'、'||' 的区别

在JavaScript中'&&'和'||'是逻辑运算符，'&'和'|'是位运算符。

1、'|'，位运算符，或：只要有一个为1，那么结果就为1，否则就为0。

2、'&'，位运算符，与：两个都为1才得到1，只要一个为0就为0。

3、'&&'，逻辑运算符，谁是false就选谁：只要前面是false，无论后面是什么都返回前面的值，只要前面是true，无论后面是什么，都返回后面的值。

4、'||'，逻辑运算符，谁是true就选谁：只要前面为false，无论后面是什么都返回后面的值，只要前面是true，无论后面是什么都返回前面的值。

七、Lodash去重

_.uniqWith(array,[comparator]):(要检查的数组，比较函数调用每个元素可以用function)

例： 

const obj = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];

_.uniqWith(obj, _.isEqual); //_.isEqual:比较两个树是否相同

// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]

八、JavaScript中的FormData( )对象(一般用于上传文件，Upload组件)

创建FormData( )对象：const newFormData = new FormData();  // 空的实例对象

FormData 的主要方法:

1、has：返回一个布尔值表示是否包含某些键key，判断 FormData() 对象是否含有该 key。

const newHasValue = newFormData.has("name"); // 判断的是key值,返回的是一个布尔值

2、get：返回在 FormData 对象中与给定键关联的第一个value值。

const getValue = newFormData.get("name")  // 拿到的值为 name 的第一个value值

3、getAll：返回一个包含 FormData 对象中与给定键关联的所有值的数组，包含所有key值的一个数组。

const getAllValue = newFormData.getAll("name")  // 拿到的所有值为 name 的全部value值，返回一个数组。

4、append：向FormData 中添加新的属性值key，如果FormData 对应的属性值存在，则添加到已有的数据后面，新增一项属性值。

const addappend = newFormData.append("newName",'sudaqiang'); // 需要添加的数据已存在，则添加到后面

5、set ：和append( )的方法相似，不同点是：如果指定的键已经存在，set( ) 会使用新值覆盖已有的值，而 append( ) 会把新值添加到已有值集合的后面。

const addset = newFormData.set("newNameTwo","suxiaoqiang") // 如果数据存在，则覆盖原有的值

6、delete：从FormData对象里面删除一个键值对。

const newDeleteValue = newFormData.delete("name"); // 接收一个要删除的key值参数，如果有多个相同 key 值，会一并删除。

7、keys：从FormData对象中返回一个包含所有键key的iterator对象。可以通过for...of 循环来遍历 FormData 对象中所有的key值。

 for(let key of newFormData.keys()){
    console.log(key); // 循环返回所有key值
 }

8、values：从FormData对象中返回一个包含所有值value的iterator对象。可以通过for...of循环来遍历 FormData 对象中所有的 value值。

for(let value of newFormData.values()){
   console.log(value);  // 返回所有value值
 }

9、forEach：遍历FormData 对象，类似map，for...of,等等。

10、entries：从FormData对象中返回一个包含所有键值对的iterator对象，key和value。

for(let pair of newFormData.entries()){
   console.log(pair[0] +"," + pair[1]);//拿到所有的key和value
 }

FormData 存储数据方式：

一对key / value 组成一条数据，key 是唯一的，一个 key 可以对应多个value，如果是使用表单初始化，那每一个表单字段对应一条数据，它们的HTML name 属性即为 key 值，它们的value属性即为对应的value值。

// 一般用于上传文件的时候 Upload组件
const handleUpload = (file) => {
    if (isUpload && !oaId) {  //进行一些非空的判断
      setUploading(false);
      message.error('某些字段不能为空');
      return;
    }
    setUploading(true);//开启加载状态展示
    const formData = new FormData();  //创建新的FormData空对象
    formData.append('file', file);  //添加新的上传文件
}

<Upload accept={'.xls,.xlsx'} action={handleUpload}>  //上传组件
   <Button icon={<UploadOutlined />} type={'primary'} loading={uploading} size={'large'}>
      {uploading ? '上传中' : '提交检查'}
   </Button>
</Upload>

九、JavaScript随机数的生成

1、Math.random();0到1之前取随机数(包含0不包含1)。

2、Math.ceil();向上取整。

3、Math.floor();向下取整。

4、Math.round();四舍五入。

5、Math.ceil(Math.random()*10);获取0到10的随机数(取0的概率非常低，包含10)。

6、Math.round(Math.random());随机获取0或1。

7、Math.floor(Math.random()*10);随机获取0到9的整数(包含0和9)。

8、Math.round(Math.random()*10);随机获取0到10的整数，获取0和10的概率少一半。

9、parseInt(Math.random()*(m-n)+n);随机获取[n,m)，包含n但不包含m的正整数。

10、parseInt(Math.random()*(m-n)+n)+1；随机获取(n,m]，不包含n但包含m的正整数。

//另一种方法也可以实现
  const newRandomNumber = (n, m) => {
    let result = Math.random() * (m - n + 1) + n - 1;
    while (result < n) {
      result = Math.random() * (m - n + 1) + n - 1;
    }
    return result;
  };

11、parseInt(Math.random()*(m-n+1)+n)；随机获取[n,m]，包含n和m的正整数。

//另一种方法也可以实现
  const newRandomNumber = (n, m) => {
    let result = Math.random() * (m + 1 - n) + n;
    // 符合条件的进行里面的操作，大于m的重新进行随机数运算
    while (result > m) {
      result = Math.random() * (m + 1 - n) + n;
    }
    return result;
  };

12、parseInt(Math.random()*(m-n-1)+n+1)；随机获取(n,m)，不包含n和m的正整数。

//另一种方法也可以实现
  const newRandomNumber = (n, m) => {
    let result = Math.random() * (m - n) + n;
    while (result == n) {
      result = Math.random() * (m - n) + n;
    }
    return result;
  };

13、parseInt(10*Math.random())；随机获取0到10之间的正整数(包含0，不包含10)。

14、Math.floor(Math.random()*10+1)；随机获取1到10之间的正整数(包含1和10)。

15、生成N位随机数字符串

  // 生成n位数字字符串
  const newRandomNumber = (n) => {
    let res = '';
    for (let i = 0; i < n; i++) {
      res += Math.floor(Math.random() * 10);
    }
    return res;
  };
  console.log('🚀randomNum:',newRandomNumber(3),newRandomNumber(5),newRandomNumber(7),newRandomNumber(9));
//🚀randomNum: 077 41076 7956210 498133134

16、生成指定N位数的数字字母混合的字符串

  // 生成n位数字字母混合字符串
  const newRandomNumber = (n) => {
    const chars = [
      '0',
      '1',
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      'A',
      'B',
      'C',
      'D',
      'E',
      'F',
      'G',
      'H',
      'I',
      'J',
      'K',
      'L',
      'M',
      'N',
      'O',
      'P',
      'Q',
      'R',
      'S',
      'T',
      'U',
      'V',
      'W',
      'X',
      'Y',
      'Z',
    ];
    let res = '';
    for (let i = 0; i < n; i++) {
      const id = Math.floor(Math.random() * 36);
      res += chars[id];
    }
    return res;
  };

  console.log('🚀randomNum:', newRandomNumber(3), newRandomNumber(5), newRandomNumber(7));
//🚀randomNum: BBW VJHDW NEIIJ9U

十、JavaScript中parseInt() 函数

parseInt() 函数可解析一个字符串，并返回一个整数。当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。

①如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。

②如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。(旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制的基数)。

③如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

④只有字符串中的第一个数字会被返回。开头和结尾的空格是允许的。如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。