笔记3 es6,7,正则

朱雀 2022-01-19 01:59 192阅读 0赞

本来是不想写的,但是感觉这一块写的时候就是不够熟练,尤其是写正则的时候,感觉贼难受,所以做个简单的总结吧。

# es6 #

### 一.解构赋值 ###

解构赋值应该是es6用得比较多的情况了,就连引入方式`import`实际上也是解构的过程。

//不完全数组解构
    let [a,b,c,d] = [1,2,3];
    //a = 1 b = 2 c = 3 d = undefined
    let [a,[b],c] = [1,[2,3],4]
    //a = 1 b =2 c = 4
    复制代码

以上都是正常的解构方式,如果左右不匹配会不完全数组解构。

//对象解构
    let {a,b} = {a:1,b:2}
    //a = 1;b = 2;
    复制代码

其实上述写法是简写,完全写法如下:

let {a:a,b:b} ={a:1,b:2};
    复制代码

如上可以看出来,`{a:a,b:b}`中第一个a只是个key,真正被赋值的是后面那个a。所以我们可以写成下面这样

let {a:c,b:d} ={a:1,b:2};
    // c = 1 ; d = 2
    复制代码

可以看出,被赋值的是c和d。复杂的解构:

const demo = {
        yfch:{
            name:'aaa',
            age:17,
            work:{
                name:'it',
                old:3
            }
        }
    }
    //比方这是接口返回的数据,我们想得到'yfch'的内容,应该这样写
    let { yfch:data } = demo;
    //如果向得work下的name属性可以这样写:
    let {
      yfch: { name,age,work:{name:name1}},
    } = demo
    //因为demo有两个name属性,所以不能简写
    复制代码

### 二.字符串扩展实例方法 ###

##### a.includes() #####

const demo = 'abch';
    demo.includes('a') // true 判断是否含有该字符与es5 indexOf相似
    复制代码

##### b.repeat() #####

const str = 'a';
    str.repeat(3) //'aaa'
    复制代码

##### c.padStart()，padEnd() #####

这两个方法会接受两个参数,第一个参数表示字符串补全长度,第二个参数代表补全的字符串。

'a'.padStart(3,b) // bba
    'abc'.padStart(3,d) //abc 小于长度返回原字符串
    'ab'.padStart(4,'1234') //ab12 会截取到该位数补全
    复制代码

#### d.trimStart()，trimEnd() ####

返回的字符串头部和尾部会去掉空格。

### 三.函数扩展方法 ###

#### a.name ####

function demo(){}
    demo.name // "demo"
    复制代码

返回函数本身的名字。

#### b.箭头函数 ####

箭头函数顾名思义,就是一个函数。就是说在`es6`中可以使用`=>`作为函数

var f = v => v+2
    等同于
    var f = function(v){ return v+2 }
    复制代码

箭头函数需要注意的点有

*  箭头函数内的`this`不是根据谁调用就指向谁,而是指向定义时的对象。

function foo() {
      setTimeout(() => {
        console.log('id:', this.id)
      }, 100)
      setTimeout(function () {
        console.log('id:', this.id)
      },100)
      console.log('id:', this.id)
    }
    
    var id = 21
    
    foo.call({ id: 42 }) // 42 42 21
    复制代码

foo函数执行call方法,实际上就是将foo函数的`this`变成了对象`{id:42}`,所以直接打印`this.id`的结果就是42。然而加了`setTimeOut`方法之后,箭头函数则是指向定义时的this,所以输出42,而普通函数是在foo.call执行完之后的100ms后才输出`this.id`,所以输出的是21。

转载于:https://juejin.im/post/5cee26c76fb9a07ebd48b878