常用标签2

1. css | 小三角

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

2. css | 文本超出隐藏

一行
div{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

//多行
div{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}

3. css | IOS手机容器滚动条滑动不流畅

div{
overflow: auto;
-webkit-overflow-scrolling: touch;
}

4. css | 修改滚动条样式

滚动条整体部分

::-webkit-scrollbar {
    width: 6px;
}

滚动条的轨道

::-webkit-scrollbar-track { background-color: #aaa; } 

滚动条里面的小方块

::-webkit-scrollbar-thumb { background-color: var(--main-color); } 
::-webkit-scrollbar-thumb:hover { background-color: #5b5b5b; } 
::-webkit-scrollbar-thumb:active { background-color: #0a0d59; }

div::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。

div::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分

div::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

5. 解决ios audio无法自动播放、循环播放的问题

// 解决ios audio无法自动播放、循环播放的问题
var music = document.getElementById('video');
var state = 0;

document.addEventListener('touchstart', function(){
    if(state==0){
        music.play();
        state=1;
    }
}, false);

document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//循环播放
music.onended = function () {
    music.load();
    music.play();
}

6. Date对象

获取当前时间毫秒值

// 方式一
Date.now(); // 1606381881650
// 方式二
new Date() - 0; // 1606381881650
// 方式三
new Date().getTime() // 1606381881650
创建Date对象的兼容性问题。

// window和安卓支持，ios和mac不支持
new Date('2020-11-26'); 
// window和安卓支持，ios和mac支持
new Date('2020/11/26');

7.Proxy和Object.defineProperty区别

Proxy的意思是代理，我一般叫他拦截器，可以拦截对象上的一个操作。用法如下，通过new的方式创建对象，第一个参数是被拦截的对象，第二个参数是对象操作的描述。实例化后返回一个新的对象，当我们对这个新的对象进行操作时就会调用我们描述中对应的方法。

new Proxy(target, {
    get(target, property) {

    },
    set(target, property) {

    },
    deleteProperty(target, property) {

    }
})
Proxy区别于Object.definedProperty。

Object.defineProperty只能监听到属性的读写，而Proxy除读写外还可以监听属性的删除，方法的调用等。

通常情况下我们想要监视数组的变化，基本要依靠重写数组方法的方式实现，这也是Vue的实现方式，而Proxy可以直接监视数组的变化。

const list = [1, 2, 3];
const listproxy = new Proxy(list, {
    set(target, property, value) {
        target[property] = value;
        return true; // 标识设置成功
    }
});

list.push(4);
Proxy是以非入侵的方式监管了对象的读写，而defineProperty需要按特定的方式定义对象的属性。

8. Reflect

他是ES2015新增的对象，纯静态对象也就是不能被实例化，只能通过静态方法的方式调用，和Math对象类似，只能类似Math.random()的方式调用。

Reflect内部封装了一系列对对象的底层操作，一共14个，其中1个被废弃，还剩下13个。

Reflect的静态方法和Proxy描述中的方法完全一致。也就是说Reflect成员方法就是Proxy处理对象的默认实现。

Proxy对象默认的方法就是调用了Reflect内部的处理逻辑，也就是如果我们调用get方法，那么在内部，Reflect就是将get原封不动的交给了Reflect，如下。

const proxy = new Proxy(obj, {
    get(target, property) {
        return Reflect.get(target, property);
    }
})

Reflect和Proxy没有绝对的关系，我们一般将他们两个放在一起讲是为了方便对二者的理解。

那为什么会有Reflect对象呢，其实他最大的用处就是提供了一套统一操作Object的API。

判断对象是否存在某一个属性，可以使用in操作符，但是不够优雅，还可以使用Reflect.has(obj, name); 删除一个属性可以使用delete，也可以使用Reflect.deleteProperty(obj, name); 获取所有属性名可以使用Object.keys, 也可以使用Reflect.ownKeys(obj); 我们更推荐使用Reflect的API来操作对象，因为他才是未来。

9. 解析get参数

通过replace方法获取url中的参数键值对，可以快速解析get参数。

const q = {};
location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
console.log(q);

10. 解析链接url

可以通过创建a标签，给a标签赋值href属性的方式，获取到协议，pathname，origin等location对象上的属性。

// 创建a标签
const aEle = document.createElement('a');
// 给a标签赋值href路径
aEle.href = '/test.html';
// 访问aEle中的属性
aEle.protocol; // 获取协议
aEle.pathname; // 获取path
aEle.origin;
aEle.host;
aEle.search;
...

11. localStorage

localStorage是H5提供的永久存储空间，一般最大可存储5M数据，并且支持跨域隔离，他的出现极大提高了前端开发的可能性。localStorage的使用很多人都知道setItem，getItem,removeItem, 但他也可以直接以成员的方式操作。

// 存储
localStorage.name = 'yd';
// 获取
localStorage.name; // yd
// 删除
delete localStorage.name;
// 清除全部
localStorage.clear();

// 遍历
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i); // 获取本地存储的Key
    localStorage[key]; // 获取本地存储的value
}
localStorage满了的情况下仍继续存储并不会覆盖其他的值，而是直接报错(QuotaExceededError)，并且当前存储的值也会被清空。浏览器支持每个域名下存储5M数据。

12. sessionStorage

sessionStorage和localStorage的区别是，存在当前会话，很多人理解的是浏览器关闭，这是不对的，假设你在A页面存储了sessionStorage，新开选项卡将A页面的链接粘贴进去打开页面，sessionStorage也是不存在的。

所以sessionStorage存在的条件是页面间的跳转，A页面存储了sessionStorage，他要通过超链接或者location.href或者window.open来打开另一个同域页面才能访问sessionStorage。

这一点在混合开发嵌套H5的开发模式中尤为重要，如果以新开webview的方式打开页面，很可能sessionStorage就没有了。

13. 数组快速去重

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

const arr = [1, 2, 3, 4, 5, 6];
const arr2 = new Set(arr);
const arr3 = [...arr2];