前端小栈

# 几个ES6新特性

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]
1
2
3
4
5
6
7

2、使用扩展字符串合并数组

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

3、使用Set实现数组去重

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

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)
1
2
3
4
5
6
7
8
9
10
11

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

let a = 10;
let b = 20;
[a,b] = [b,a];
1
2
3

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

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

7、找到数组中的最大值

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

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

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

9、模板字符串

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

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"}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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>
1
2
3
4

只有当我们光标离开输入框的时候，它才会更新视图，相当于在onchange事件触发更新。

「2、.trim」

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

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

「3、.number」

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

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

「4、.stop」

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

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

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
1
2

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

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

「7、.once」

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

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

「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
3
4
5
6
7
8
9
10
11
12
13

1和2为事件捕获，从外向内，4和3为事件冒泡，从内向外。事件触发从包含这个元素的顶层开始往下触发，也就是事件捕获。

「9、.passive」

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

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

（3）、鼠标按钮修饰符 .left左键点击 .right右键点击 .middle 中键点击

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

「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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

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、查找函数 使用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"}
1
2
3
4
5
6
7

← 浏览器自动识别数字成电话号码 →