WEB前端2020年更新实用代码段（持续更新）

àì夳堔傛蜴生んèń 2021-08-13 18:27 454阅读 0赞

##### 1、使用解构获取json数据 #####

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、使用扩展字符串合并数组 #####

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

##### 3、使用Set实现数组去重 #####

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

##### 4、使用apply改变this指向 #####

##### 5、使用解构快速交换变量值 #####

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

##### 6、使用解构实现多变量赋值 #####

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

##### 7、找到数组中的最大值 #####

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

##### 8、实现数组内值遍历计算 #####

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、实现防抖函数 #####

**原理：** 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。  
**适用场景：**

1.  按钮提交场景：防止多次提交按钮，只执行最后提交的一次；
2.  服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次；
3.  搜索联想词场景；

**代码：**

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

**实例：**

<body>
        <input type="text" class="int" onkeydown="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、实现节流函数 #####

**原理：** 规定在一单位时间内。只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。  
**适用场景：**

1.  拖拽场景：固定时间只执行一次，防止超高频次触发位置变动;
2.  缩放场景：监控浏览器resize;
3.  动画场景：避免短时间内多次触发动画引起的性能问题。

**代码：**

// 节流函数
        const throttle = (fn, delay = 500) => { 
            let flag = true;
            return (...args) => { 
                if (!flag) return;
                flag = false;
                setTimeout(() => { 
                    fn.apply(this, args)
                }, delay);
    
            }
        }

**实例：**

// 节流函数
        const throttle = (fn, delay = 500) => { 
            let flag = true;
            return (...args) => { 
                if (!flag) return;
                flag = false;
                setTimeout(() => { 
                    fn.apply(this, args)
                }, delay);
    
            }
        }
        // 浏览器窗口缩放
        window.onresize=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事件触发更新。

**2、.trim**

过滤一下一些输入完密码不小心多敲了一下空格的兄弟输入的内容。需要注意的是，它只能过滤首尾的空格！首尾，中间的是不会过滤的。

**3、.number**

如果你先输入数字，那它就会限制你输入的只能是数字。  
如果你先输入字符串，那它就相当于没有加.number。

###### （2）、事件修饰符: ######

**4、.stop**

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

由于事件冒泡的机制，我们给元素绑定点击事件的时候，也会触发父级的点击事件。  
一键阻止事件冒泡，简直方便得不行。相当于调用了event.stopPropagation()方法。  
**5、.prevent**

<form v-on:submit.prevent="onSubmit"></form>

用于阻止事件的默认行为，例如，当点击提交按钮时阻止对表单的提交。相当于调用了event.preventDefault()方法。

**6、.self**

只当事件是从事件绑定的元素本身触发时才触发回调。

**7、.once**

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

绑定了事件以后只能触发一次，第二次就不会触发。

**8、.capture**

<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为事件捕获，从外向内，4和3为事件冒泡，从内向外。  
事件触发从包含这个元素的顶层开始往下触发，也就是事件捕获。

**9、.passive**

监听元素滚动事件的时候，会一直触发onscroll事件，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个`.lazy`修饰符。

**10、.native**

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

自定义组件必须使用`.native`来修饰这个click事件（即），可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签  
注意：使用`.native`修饰符来操作普通HTML标签是会令事件失效的。

###### （3）、鼠标按钮修饰符 ######

*  `.left`左键点击
 *  `.right`右键点击
 *  `.middle` 中键点击

###### （4）、键值修饰符 ######

**11、.keyCode**

注意：这里的`.keyCode`代表键值

指定按下某一个键才触发这个shout的时候，这个修饰符就有用了。keyCode码如下：

<table> 
 <thead> 
  <tr> 
   <th>keyCode</th> 
   <th>按键</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>48-57</td> 
   <td>0-9</td> 
  </tr> 
  <tr> 
   <td>65-90</td> 
   <td>a-z/A-Z</td> 
  </tr> 
  <tr> 
   <td>112-135</td> 
   <td>F1-F24</td> 
  </tr> 
  <tr> 
   <td>8</td> 
   <td>BackSpace（退格）</td> 
  </tr> 
  <tr> 
   <td>9</td> 
   <td>Tab</td> 
  </tr> 
  <tr> 
   <td>13</td> 
   <td>Enter（回车）</td> 
  </tr> 
  <tr> 
   <td>20</td> 
   <td>Caps_Lock（大写锁定）</td> 
  </tr> 
  <tr> 
   <td>32</td> 
   <td>Space（空格键）</td> 
  </tr> 
  <tr> 
   <td>37</td> 
   <td>Left（左箭头）</td> 
  </tr> 
  <tr> 
   <td>38</td> 
   <td>Up（上箭头）</td> 
  </tr> 
  <tr> 
   <td>39</td> 
   <td>Right（右箭头）</td> 
  </tr> 
  <tr> 
   <td>40</td> 
   <td>Down（下箭头）</td> 
  </tr> 
 </tbody> 
</table>

vue给一些常用的键提供了别名：

//普通键
    .enter
    .tab
    .delete //(捕获“删除”和“退格”键)
    .space
    .esc
    .up
    .down
    .left
    .right
    
    
    //系统修饰键
    .ctrl
    .alt
    .meta
    .shift

全局 config.keyCodes 对象自定义按键修饰符别名：

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

--------------------

将系统修饰键和其他键码链接起来使用，这样当我们同时按下ctrl+c时，就会触发keyup事件。

**12、.exact**

有些场景我们只需要或者只能按一个系统修饰键来触发。  
注意：**这个只是限制系统修饰键的。**

可以按下**ctrl+普通键** 来触发，但是不能按下**ctrl + 系统修饰键 +普通键**来触发。

**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**

*  通过自定义属性存储变量，避免暴露数据
 *  防止污染 HTML 结构

**15、.camel**

实际上会渲染为

`SVG`标签只认 `viewBox`，却不知道 `viewbox` 是什么?  
`.camel`修饰符，那它就会被渲染为驼峰名。  
使用字符串模版，则没有这些限制。

##### 14、查找函数 #####

使用Array的`find()`可以实现快速查找。

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、递归函数 #####

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