ES6箭头函数和模板字符串

心已赠人 2022-11-06 12:53 166阅读 0赞

Es6  
本章内容：  
箭头函数  
箭头函数中this的指向  
数组的新方法  
模板字符串  
三点运算符  
结构赋值  
具体内容：  
箭头函数的声明：  
Es6允许使用箭头函数（=>）定义

箭头函数 上面是箭头函数的语法和例子 箭头函数的作用：简化断码，使用方便 关于箭头函数中this的指向： 普通函数中的this： This总是表示他的直接调用者（js的this是执行上下文）例如:obj.func，那么func中的this值得就是obj 在默认情况下（非严格模式下，未使用‘user starict’），没找到直接调用者，则this指的是window（约定俗成） 在严格模式下，没有直接调用者的函数中的this，是undefined 使用call，apply，bind（es5新增）绑定的，this指的是绑定的对象 //如果说使用箭头函数传入对象的话，也就是json的格式 var p =name =>(\{name:"杨过a",age:18\}) console.log(p("a"))

//声明一个对象
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    let v = new Person("wyh",30);
    p.say = function () {
        console.log(this.name+"==="+this.age);
    }
    
    p.say();
    console.log(v)

我们在来写个例子看一下我们所说的哪两种情况

this 我们使用绑定的形式可以解决这个问题

这样我们在控制台就可以看到不在是undefined的找不到了  
箭头函数中的this：  
在箭头函数中，没有自己的this，他的this是继承而来的；默认的指向在定义他时的对象（宿主对象），而不是执行时的对象，定义他的时候，可能环境时window；箭头函数可以方便的让我们在setTimeout，setInterval中方便的使用this  
箭头函数中this指向的固定化，并不是因为箭头函数的内部有this绑定机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this  
那我们可以改变一下我们的代码看看

数组的新方法：  
Map 映射  
Reduce 汇总  
Filter 过滤器  
forEach 循环（迭代）  
Some() 一个为true就会返回true  
every() 必须所有都为true才会返回true

array 模板字符串和字符串中新增的方法： StartsWith 以什么什么开始 endsWith 以什么什么结束 string 函数的参数三点运算符号： dot 解构赋值： jgfz 注意： 1. 左右两边结构必须一样 2. 右边必须有值 3. 声明和赋值不能分开