那些你可能不知道的前端小知识

一、CSS部分

1. css一行文本超出...

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

2.多行文本超出显示...

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

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

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

二、JavaScript

1.？？合并空运算符

假设变量a不存在，我们希望给系统一个默认值，一般我们会使用||运算符。但是在javascript中空字符串，0，false都会执行||运算符，所以ECMAScript2020引入合并空运算符解决该问题，只允许在值为null或未定义时使用默认值。

const name = '';

console.log(name || 'yd'); // yd;
console.log(name ?? 'yd'); // '';

2.?可选链运算符

业务代码中经常会遇到这样的情况，a对象有个属性b, b也是一个对象有个属性c, 我们需要访问c，经常会写成 a.b.c，但是如果f不存在时，就会出错。

const a = {
    b: {
        c: 123,
    }
}
console.log(a.b.c); // 123;
console.log(a.f.c); // f不存在所以会报错

ECMAScript2020定义可选链运算符解决该问题，通过在.之前添加一个?将键名变成可选

let person = {};
console.log(person?.profile?.age ?? 18); // 18

3.Element.scrollInToView()方法

用于让目标元素滑动到屏幕某个位置