工作中常用到的前端小知识

1.使用css写出一个三角形角标

元素宽高设置为0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色。

div {
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top-color: red;
}

2.水平垂直居中

一般只使用两种方式定位或者flex就够用了

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

3.css一行文本超出…

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

4.多行文本超出显示…

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

5.修改滚动条样式

隐藏div元素的滚动条

div::-webkit-scrollbar {
    display: none;
    
}

div::-webkit-scrollbar 滚动条整体部分
div::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
div::-webkit-scrollbar-track 滚动条的轨道
div::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
div::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分
div::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

6.includes();

字符串中是否包含某个字符串，这个不说了，其实就是indexOf的替代方案，用起来更优雅

7.startsWith();

字符串是否为某个字符串开始，我一般用它判断url是否有http

8.endsWith();

字符串是否为某个字符串结尾。判断后缀名的时候尤其有效

9.repeat(number);

得到一个重复number次的字符串。额…我也不知道什么时候有用，一般我用它造测试数据。

10.数组快速去重

应该很多人都知道这个，数组转换成Set, 再转换为数组，不过这种去重方式只能去除基本数据类型组成的数组。

const arr = [1, 2, 3, 4, 5, 6];

const arr2 = new Set(arr);

const arr3 = [...arr2];

11.Object.keys, values, entries

一般我们常用Object.keys，返回一个对象的键组成的数组，其实还有Object.values，返回对象值组成的数组，Object.entries将对象转成数组，每个元素是键值对组成的数组，可以使用此功能快速将对象转为Map。

const obj = {name: 'yd', age: 18};

Object.keys(obj); // ['name', 'age'];

Object.values(obj); // ['yd', 18];

const l = Object.entries(obj); // [['name', 'yd'], ['age': 18]];

const m = new Map(l);

12.Object.getOwnPropertyDescriptors

获取对象的描述信息。
Object.assign复制时，将对象的属性和方法当做普通属性来复制，并不会复制完整的描述信息，比如this。

const p1 = {
    a: 'y',
    b: 'd',
    get name() {
        return `${this.a} ${this.b}`;
    }
}
const p2 = Object.assign({}, p1);

p2.a = 'z';

p2.name; // y d; 发现并没有修改p2.a的值，是因为this仍旧指向p1