WEB前端2020年更新實用代碼段

1、使用解構(gòu)獲取json數(shù)據(jù)

let jsonData = {
id: 1,
status: "OK",
data: ['a', 'b']
};
let { id, status, data: number } = jsonData;
console.log(id, status, number ); // 1,“OK”,[a, b]

 

2、使用擴展字符串合并數(shù)組

let a1 = [1,2];
let a2 = [3,4];
console.log([...a1,...a2]) // [1,2,3,4]

 

3、使用Set實現(xiàn)數(shù)組去重

let arr = [1,2,2,3];
console.log([... new Set(arr)]) // [1,2,3]

 

4、使用apply改變this指向

let name = "maomin";
let obj = {
  name:'xqm',
  say:function(year,place){
      console.log(this.name+' is '+year+' born from '+place);
  }
};
let say = obj.say;
setTimeout(function(){
    say.apply(obj,['1996','China']);
},0)

 

5、使用解構(gòu)快速交換變量值

let a = 10;
let b = 20;
[a,b] = [b,a];

 

6、使用解構(gòu)實現(xiàn)多變量賦值

let [a,b,c]=[1,2,3];

 

7、找到數(shù)組中的最大值

 console.log(Math.max(...[14, 3, 77, 30])); //77

 

8、實現(xiàn)數(shù)組內(nèi)值遍歷計算

  const list = [1,2,3,4,5];
  const newList = list.map(item=>console.log(item*item)) // 1 4 9 16 25

 

9、模板字符串

let x = '我是x';
let y = '我是y';
console.log(`${x} + ${y}`) // 我是x + 我是y

 

10、實現(xiàn)防抖函數(shù)

原理： 在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時。
適用場景：

    按鈕提交場景：防止多次提交按鈕，只執(zhí)行最后提交的一次；
    服務端驗證場景：表單驗證需要服務端配合，只執(zhí)行一段連續(xù)的輸入事件的最后一次；
    搜索聯(lián)想詞場景；

代碼：

// 防抖
const debounce = (fn,delay)=>{
let timer = null;
return (...args)=>{
    clearTimeout(timer);
    timer = setTimeout(()=>{
    fn.apply(this,args)
},delay)
}
}

 

實例：

<body>
    <input type="text" class="int" οnkeydοwn="down()">
</body>
<script>
    function down() {
        debounce(() => {
            console.log('1')
        }, 2000)()
    }
    const debounce = (fn, delay) => {
        let timer = null;
        return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => {
                fn.apply(this, args)
            }, delay)
        }
    }
</script>

 

11、實現(xiàn)節(jié)流函數(shù)

原理： 規(guī)定在一單位時間內(nèi)。只能觸發(fā)一次函數(shù)。如果這個單位時間內(nèi)觸發(fā)多次函數(shù)，只有一次生效。
適用場景：

    拖拽場景：固定時間只執(zhí)行一次，防止超高頻次觸發(fā)位置變動;
    縮放場景：監(jiān)控瀏覽器resize;
    動畫場景：避免短時間內(nèi)多次觸發(fā)動畫引起的性能問題。

代碼：

    // 節(jié)流函數(shù)
    const throttle = (fn, delay = 500) => {
        let flag = true;
        return (...args) => {
            if (!flag) return;
            flag = false;
            setTimeout(() => {
                fn.apply(this, args)
            }, delay);

        }
    }

 

實例：

    // 節(jié)流函數(shù)
    const throttle = (fn, delay = 500) => {
        let flag = true;
        return (...args) => {
            if (!flag) return;
            flag = false;
            setTimeout(() => {
                fn.apply(this, args)
            }, delay);

        }
    }
    // 瀏覽器窗口縮放
    window.οnresize=function(){
        throttle(()=>{
            console.log(1)
        })()
    }

 

12、解析URL params為對象

// let url = document.location.toString();
let url = 'https://www.maomin.club/?user=maomin&nn=1111';

function GetUrlParam(url){
let arrObj = url.split("?");
let params = Object.create(null)
if (arrObj.length > 1){
arrObj = arrObj[1].split("&");
arrObj.forEach(item=>{
item = item.split("=");
params[item[0]] = item[1]
})
}
return params;
}

console.log(GetUrlParam(url)) // {user: "maomin", nn: "1111"}

 

13、Vue常用修飾符

修飾符可以同時使用多個,但是可能會因為順序而有所不同。
用v-on:click.prevent.self會阻止所有的點擊，而 v-on:click.self.prevent只會阻止對元素自身的點擊。也就是從左往右判斷。
（1）、表單修飾符

1、.lazy

<div>
   <input type="text" v-model.lazy="value">
   <p>{{value}}</p>
</div>

 

只有當我們光標離開輸入框的時候，它才會更新視圖，相當于在onchange事件觸發(fā)更新。

2、.trim

<input type="text" v-model.trim="value">

 

過濾一下一些輸入完密碼不小心多敲了一下空格的兄弟輸入的內(nèi)容。需要注意的是，它只能過濾首尾的空格！首尾，中間的是不會過濾的。

3、.number

<input type="text" v-model.number="value">

 

如果你先輸入數(shù)字，那它就會限制你輸入的只能是數(shù)字。
如果你先輸入字符串，那它就相當于沒有加.number。
（2）、事件修飾符:

4、.stop

<!-- 只打印1 -->
<div @click="shout(2)">
  <button @click.stop="shout(1)">ok</button>
</div>

 

由于事件冒泡的機制，我們給元素綁定點擊事件的時候，也會觸發(fā)父級的點擊事件。
一鍵阻止事件冒泡，簡直方便得不行。相當于調(diào)用了event.stopPropagation()方法。
5、.prevent

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

 

用于阻止事件的默認行為，例如，當點擊提交按鈕時阻止對表單的提交。相當于調(diào)用了event.preventDefault()方法。

6、.self

<div class="blue" @click.self="shout(2)">
  <button @click="shout(1)">ok</button>
</div>

 

只當事件是從事件綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。

7、.once

<!-- 只能shout一次 -->
<button @click.once="shout(1)">ok</button>

 

綁定了事件以后只能觸發(fā)一次，第二次就不會觸發(fā)。

8、.capture

<!-- 打印順序 1 2 4 3 -->
<div @click.capture="shout(1)">
      obj1
      <div @click.capture="shout(2)">
        obj2
        <div @click="shout(3)">
          obj3
          <div @click="shout(4)">
            obj4
          </div>
        </div>
      </div>
    </div>

 

1和2為事件捕獲，從外向內(nèi)，4和3為事件冒泡，從內(nèi)向外。
事件觸發(fā)從包含這個元素的頂層開始往下觸發(fā)，也就是事件捕獲。

9、.passive

<div v-on:scroll.passive="onScroll">...</div>

 

監(jiān)聽元素滾動事件的時候，會一直觸發(fā)onscroll事件，會讓我們的網(wǎng)頁變卡，因此我們使用這個修飾符的時候，相當于給onscroll事件整了一個.lazy修飾符。

10、.native

<My-component @click.native="shout(3)"></My-component>

 

自定義組件必須使用.native來修飾這個click事件（即），可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標簽
注意：使用.native修飾符來操作普通HTML標簽是會令事件失效的。
（3）、鼠標按鈕修飾符

    .left左鍵點擊
    .right右鍵點擊
    .middle 中鍵點擊

<button @click.right="shout(1)">ok</button>

 

（4）、鍵值修飾符

11、.keyCode

注意：這里的.keyCode代表鍵值

<input type="text" @keyup.keyCode="shout(4)">

 

指定按下某一個鍵才觸發(fā)這個shout的時候，這個修飾符就有用了。keyCode碼如下：
 

vue給一些常用的鍵提供了別名：

//普通鍵
.enter
.tab
.delete //(捕獲“刪除”和“退格”鍵)
.space
.esc
.up
.down
.left
.right


//系統(tǒng)修飾鍵
.ctrl
.alt
.meta
.shift

 

全局 config.keyCodes 對象自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

 

<input type="text" @keyup.ctrl.67="shout(4)">

 

將系統(tǒng)修飾鍵和其他鍵碼鏈接起來使用，這樣當我們同時按下ctrl+c時，就會觸發(fā)keyup事件。

12、.exact

有些場景我們只需要或者只能按一個系統(tǒng)修飾鍵來觸發(fā)。
注意：這個只是限制系統(tǒng)修飾鍵的。

<button type="text" @click.ctrl.exact="shout(4)">ok</button>

 

可以按下ctrl+普通鍵 來觸發(fā)，但是不能按下ctrl + 系統(tǒng)修飾鍵 +普通鍵來觸發(fā)。

13、.sync

更方便的使用prop進行“雙向綁定”。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app {
            margin: 10px auto;
            width: 200px;
            height: 200px;
        }

        input {
            width: 200px;
            height: 30px;
            border: 1px solid red;
            outline: none;
        }

        .show {
            width: 200px;
            height: 200px;
            background: orange;
            border: 1px solid red;
            border-top: none;
        }
    </style>
    <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <costum-show :is-show1.sync="isShow"></costum-show>
        <div class="show" v-show="isShow"></div>
    </div>
    <script>
        Vue.component('costum-show', {
            props: ['isShow'],
            template: `
             <div>
                  <input type="text" val="" @click="showHandle">
             </div>
        `,
            methods: {
                showHandle() {
                    this.$emit("update:is-show1", !this.isShow);
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                isShow: false
            }

        })
    </script>
</body>

</html>

 

1、使用.sync的時候，子組件傳遞的事件名必須為update:value，其中value與父組件綁定屬性的值必須一致(如上例中的is-show1)
2、注意帶有.sync修飾符的 v-bind不能和表達式一起使用 (例如v-bind:title.sync='yy=0?1:0' 是無效的)。取而代之的是，你只能提供你想要綁定的屬性名，類似v-model。
3、將 v-bind.sync用在一個字面量的對象上，例如v-bind.sync=”{ title: doc.title }”，是無法正常工作的，因為在解析一個像這樣的復雜表達式的時候，有很多邊緣情況需要考慮。

14、.prop

    通過自定義屬性存儲變量，避免暴露數(shù)據(jù)
    防止污染 HTML 結(jié)構(gòu)

<input id="uid" title="title1" value="1" :index.prop="index">

 

15、.camel

<svg :viewBox="viewBox"></svg>

 

實際上會渲染為

<svg :viewbox="viewBox"></svg>

 

SVG標簽只認 viewBox，卻不知道 viewbox 是什么?
.camel修飾符，那它就會被渲染為駝峰名。
使用字符串模版，則沒有這些限制。
14、查找函數(shù)

使用Array的find()可以實現(xiàn)快速查找。

    const pets=[
        {type:'Dog',name:'Max'},
        {type:'Cat',name:'Karl'},
        {type:'Dog',name:'Tommy'}
    ]
let pet= pets.find(pet=>pet.type==='Dog'&&pet.name==='Tommy');
console.log(pet);// {type: "Dog", name: "Tommy"}

 

15、逐位運算符

console.log(Math.floor(4.9)) //4
console.log(~~4.9);// 4

 

16、遞歸函數(shù)

    const {log}=console;
    function jc(number) {
        if(number<=1){
            return 1
        }
        return number*jc(number-1)
    }
    log(jc(2));// 2
 




作者：Vam的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路