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，如下。

constproxy=newProxy(obj,{
get(target,property){
returnReflect.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];