小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
js篇
Proxy和Object.defineProperty
关于Object.defineProperty
关于Object.defineProperty的一些特点就不细说了，随便搜索一下实在是太多了，这里说说者的一些缺陷吧！
Object.defineProperty的第一个缺陷,无法监听数组变化。 但是作为Object.defineProperty的课代表的Vue的文档提到了Vue是可以检测到数组变化的，但是只有以下八种方法
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
复制代码- Object.defineProperty的第二个缺陷,只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历，如果属性值也是对象那么需要深度遍历,显然能劫持一个完整的对象是更好的选择。
Proxy
严格来讲Proxy应该被称为代理而非劫持, Proxy可以直接监听对象而非属性,可以直接监听数组的变化
Proxy在ES2015规范中被正式发布,它在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写,我们可以这样认为Proxy是Object.defineProperty的全方位加强版
Proxy的其他优势
Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的。
Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改。
localStorage、sessionStorage、会话cookie
localStorage、sessionStorage、会话cookie区别
SessionStorage 和 LocalStorage 使用方法基本一致，唯一不同的是，一旦关闭页面，SessionStorage 将会删除数据；因此这里主要以 LocalStorage 为例
LocalStorage的特点是：- 使用 Key-Value 形式储存
- 使用很方便
- 大小有 10MB
- Key 和 Value 以字符串形式储存
LocalStorage和Cookie的主要区别是：- 储存空间更大，使用更方便
- Cookie 可以被服务器设置，而 LocalStorage 只能前端手动操作
- Cookie 的数据会由浏览器自动发给服务器，LocalStorage 需要手动取出来放到请求里面才会发给服务器，因此可以避免 CSRF 攻击
LocalStorage缺点：- 无法像 Cookie 一样设置过期时间
- 只能存入字符串，无法直接存对象
关于会话cookie
在多数情况下windows系统或者安卓系统确实是这样的。但是在macOS系统或者ios系统中，关闭浏览器并不会清除掉会话cookie，结束浏览器进程才行。
字符串常用的几个方法
1. includes()
字符串中是否包含某个字符串，这个不说了，其实就是indexOf的替代方案，用起来更优雅，
2. startsWith()
字符串是否为某个字符串开始，我一般用它判断url是否有http
3. endsWith()
字符串是否为某个字符串结尾。判断后缀名的时候尤其有效。
4. repeat(number)
得到一个重复number次的字符串。额...我也不知道什么时候有用，一般我用它造测试数据。
5. 'abc'.padEnd(5, '1') // abc11;
用给定的字符串在尾部拼接到指定长度，第一个参数为长度，第二个参数为用于拼接的值。
6. 'abc'.padStart(5, '1') // 11abc;
用给定的字符串在首部拼接到指定长度第一个参数为长度，第二个参数为用于拼接的值。
数组快速去重
const arr = [1, 2, 3, 4, 5, 6];
const arr2 = new Set(arr);
const arr3 = [...arr2];
复制代码css篇
使用css写出一个三角形角标
元素宽高设置为0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色。
代码
div {
width: 0;
height: 0;
border: 5px solid #transparent;
border-top-color: red;
}
复制代码水平垂直居中
个人比较喜欢：定位或者flex
定位
div {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
复制代码flex
.parent {
display: flex;
justify-content: center;
align-items: center;
}
复制代码css一行文本超出显示省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
复制代码多行文本超出显示省略号
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
复制代码隐藏页面元素
display: none:元素不会占用空间，在页面中不显示，子元素也不会显示。opacity: 0:元素透明度将为0，但元素仍然存在，绑定的事件仍旧有效仍可触发执行。visibility: hidden：元素隐藏，但元素仍旧存在，占用空间，页面中无法触发该元素的事件。
ps: Vue中 v-if和v-show的区别如何呢？什么情况下用哪一个好呢？
calc
我喜欢称它为css中的计算属性，非常强大的功能，可以计算不同单位的差值！强的！
div {
width: calc(25% - 20px);
}
复制代码