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指向
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、使用解构快速交换变量值
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秒内又被触发，则重新计时。

​适用场景：​


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

​代码：​

// 防抖
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、实现节流函数

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

​适用场景：​


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

​代码：​

// 节流函数
    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​

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

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

​3、.number​

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

如果你先输入数字，那它就会限制你输入的只能是数字。

如果你先输入字符串，那它就相当于没有加.number。

（2）、事件修饰符:

​4、.stop​

<!-- 只打印1 -->
<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​

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

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

​7、.once​

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

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

​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为事件捕获，从外向内，4和3为事件冒泡，从内向外。

事件触发从包含这个元素的顶层开始往下触发，也就是事件捕获。

​9、.passive​

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

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

​10、.native​

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

自定义组件必须使用​​.native​​来修饰这个click事件（即），可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的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)">

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

keyCode

按键

48-57

0-9

65-90

a-z/A-Z

112-135

F1-F24

8

BackSpace（退格）

9

Tab

13

Enter（回车）

20

Caps_Lock（大写锁定）

32

Space（空格键）

37

Left（左箭头）

38

Up（上箭头）

39

Right（右箭头）

40

Down（下箭头）

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
<input type="text" @keyup.ctrl.67="shout(4)">

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

​12、.exact​

有些场景我们只需要或者只能按一个系统修饰键来触发。

注意：​这个只是限制系统修饰键的。​

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

可以按下​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 结构

<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、查找函数

使用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