「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」
前言
整理一些前端开发过程中经常用到的代码，巩固一下记忆，以便以后再用到可以直接使用，不用再在网上找，提升开发效率。其中包含一部分css代码和一部分js的骚操作。
1.通过css写一个三角形
.trignle{
width: 0;
height: 0;
border: 5px solid red; //transparent
border-left-color: #ccc;
}
写三角形只需要设置盒子的宽高为0，然后设置border的宽度，让其中三个边的border颜色相同（设置成透明色就只有一个三角形了），剩余一个border设置为想要的颜色即可，上、下、左、右三角都可以通过border-*-color来调整（*的值可以设置为top、bottom、left、right）。
2.设置水平垂直居中
//通过决定定位来实现
.location{
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
//通过给父元素设置flex来实现
.location{
display: flex;
justify-content: center;
align-items: center;
}
3.字符串中的常用方法
- startWith()
用于判断字符串是否是依某个字符串开始，可以用来判断url是否含有http或www
- endsWith()
用于判断字符串是否是以某个字符串结束，可以用来判断后缀
4.数组快速去重 通过Set来数组去重，但是只支持基本数据类型组成的数组
let arr = [1,2,2,3,3,4]
let arr1 = new Set(arr)
let arr2 = [...arr1]
5.??（空值合并运算符） 在项目开发中常常用到如果一个变量不存在就显示为'-'，这时会用'||'运算符，但有时候想变量是null这一种情况才显示'-'，这时候就可以用'??'了，如下
a = ''
console.log(a||'-')//-
console.log(a??'-')//''
只有为null或者undefined的时候才会打印？？后边的内容
6.?.(可选链操作符) 当vue中渲染某些内容时，如果在data中没有把对象链深处的属性值声明，那么有可能会报错（因为渲染的时候找不到值），这时就可以使用可选链操作符，当目标属性是null或者undefinde时也不会报错，只是会打印undefined。这个在项目中共还是编辑常用到的，很有用的。
总结
前端开发的东西其实挺杂的，有好多东西可能之前都没接触过，就像空值合并运算符，我在今天之前就没听说过，更别说用了，所以没事还是要多看点前端的知识，gogogo
