谈谈那些十分好用却经常被忽略的属性与方法

一、CSS3的计算属性：calc—可用于流式布局，能动态计算宽度或是高度

1. calc() = calc(四则运算) ，calc()函数支持 “+”, “-“, “*”, “/” 四则运算
2. calc可以作用于任何具有大小的属性，比如border、margin、pading、font-size和width等属性设置动态值，支持的运算单位： rem , em , percentage , px
3. calc()函数遵循标准的数学运算优先级规则；
4. 需要注意的是 + - 两边必须必留有空格;
5. calc属性在less会不生效，是因为less的运算方式与calc发生了冲突，在less中科院这样写：

.test{
	width:calc(~"100% - 50px")
}

6. 如果是进行数值和变量之间的运算：

@widthTest=50px；
.test{
	width:calc(~"100% - @{widthTest}")
}

tips:

**** less中 “~” 符号后面双引号里面的内容会被less编译忽略，而直接输出为css代码;
less中@和{}配合可以在字符串里面使用变量，很像es6里面的模板字符串 ${}**

二、window.history是用来保存用户在一个会话期间的网站访问记录，并提供相应的方法进行追溯

1. window.history 对象在编写时可不使用 window 这个前缀。
2. history.back() - 与在浏览器点击后退按钮相同
3. history.forward() - 与在浏览器中点击按钮向前相同
4. go(num)：跳转到相应的访问记录；其中num大于0，则前进；小于0，则后退；
   对history的一些理解：https://www.cnblogs.com/hity-tt/p/7059192.html

三、dangerouslySetInnerHTMl可以在元素中插入dom或是样式

1. dangerouslySetInnerHTMl 是React标签的一个属性，类似于angular的ng-bind；

2. 有2个{{}}，第一{}代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

3. 既可以插入DOM，又可以插入字符串；

4. 使用方法：
   4.1 如果是直接调用接口中的值：

<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />

4.2 如果是单纯的显示固定的内容

<div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />

原文链接：https://blog.csdn.net/exploringfly/article/details/80582859

四、Lodash:一个一致性、模块化、高性能的 JavaScript 实用工具库。

• chunk:分割数组
• compact:合并数组
• difference:过滤数组1中与数组2共有的值
• drop：返回截取后的数据
• fill：设置数组项的填充值
• findIndex：返回符合条件的数据项的索引
• flatten：将二维数组转化为扁平数组
• fromPairs：数组转换为键值对（数组转换为对象）
• head：返回数组中的第一个元素
• indexOf：返回符合条件的元素的索引
• initial：获取除了最后一个元素的所有元素array
• intersection：返回两个数组的交集
• join：默认以“，”连接数组
• last：返回数组的最后一个元素
• lastIndexOf：返回最后一个符合条件的元素的索引
• nth：返回指定位置的元素
• pull：从array中删除所有给定值
• remove：移除数组中符合条件的数值，返回移除的值组成的数组，会改变原来的数组
• reverse：翻转数组
  tips：loadsh里面集成了很多的方法用来处理数组，对象。
  官方文档 https://www.lodashjs.com/docs/4.17.5.html