总结ES6的一些简写

可能严格意义上来说不能叫简写,反正我想表达的意思是比起原来的方法写起来更简单的东西。希望你们能懂。 ( ᖛ ̫ ᖛ )ʃ)


模板字符串:简化字符串的拼接

模板字符串必须用``包含,变化的部分使用${xxx}定义, 下边例子可以看出比用+拼串短很多嗷。

var name = "sian";
var age = 18;
var gender = "女";
function print() {
	console.log(`姓名${this.name},年龄${this.age},性别${this.gender}`)
	console.log("姓名" + this.name + ",年龄" + this.age + ",性别" + this.gender);
}
print();

在这里插入图片描述

简化对象写法

省略同名的属性值,省略方法的function,如下图,写法不一样,但是结果都是一样的。
在这里插入图片描述

…rest

点点点其实就是完成了一个遍历而已。
如下输出arr1就是输出一个数组,但是输出…arr1就只输出其中的值,也就是把值遍历输出而已。
在这里插入图片描述
可以借助arr进行任意位置的数组拼接嗷
在这里插入图片描述
rest参数和argument
如下图可以看出,采用传统的传参方式,可以使用argument使传入的参数变为一个伪数组。但是使用rest传参的话,可以直接将参数变为一个数组,当然rest参数也可以用argument来形成伪数组。
在这里插入图片描述
为什么说是伪数组和真数组呢,可以看一下这两个都显示了length为3,既然是数组我们就对其进行遍历。
在这里插入图片描述

变量的解构赋值:赋值简化

赋值必须对应数组或者对象使用相应的括号, [] = 数组,{} = 对象。
给对象赋值的时候必须和对象中的名称一样,比如红框框中,{age,name} = obj那么obj中一定得有name和age属性。有就可以,顺序可以颠倒。但是如果实{a,n} = obj,那么只会输出undefined。
这个可以用于给形参赋值。
在这里插入图片描述

形参默认值

形参的默认值:当不传入参数的时候默认使用形参里的默认值。可以理解为其他一些语言的构造函数。如果传了参数就使用传入的参数,如果没传参数就会使用自己的默认值。
在这里插入图片描述

箭头函数

函数名 = () => {函数体}

  • 没有参数时或者参数大于一个的时候一定要写(),只有一个参数可以不写
    在这里插入图片描述
  • 函数体只有一条语句,可以不用大括号,默认返回结果;函数体有多个语句, 需要用{},若需要返回值,则自己手动写return。
    在这里插入图片描述

使用场景:多用来定义回调函数
划重点:箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的this
普通函数,被谁调用this就指向谁。
在这里插入图片描述
箭头函数的this看外层的是否有函数,

  • 如果有,外层函数的this就是内部箭头函数的this,
  • 如果没有,则this是window。

下边列举三个例子:
图1中

  • 直接定义了箭头函数fun函数,fun的this指向window,
  • 将fun作为对象obj的方法,fun的this依旧指向window,
  • 在fun中定义一个兼有函数get,get外部没有函数,所以依旧指向window
    在这里插入图片描述

在图2中

  • 在外部定义了箭头函数fun,fun的指针指向window
  • 在函数demo中将fun作为方法调用,由于fun是定义在外部的,因此fun依旧指向window
  • 在函数demo内部定义箭头函数get,get的外层函数是fun,因此get的指针就与demo相同,demo被对象obj调用,demo的指针指向obj,因此fun的指针也指向obj。
    在这里插入图片描述

图3中

  • 普通函数demo1和箭头函数demo2均为obj的方法
  • 箭头函数get1的外层函数是普通函数demo1,demo1的this指针由调用它的对象决定,因此demo1指向obj,而get1的this指针与外层函数相同,所以get1的this指针也指向obj
  • 箭头函数get2的外层函数是箭头函数demo2,demo2的this指针由它的外层函数决定,但是demo2没有外层函数,因此指向window,而get2的this指针与外层函数相同,所以get2的this指向window
    在这里插入图片描述
发布了131 篇原创文章 · 获赞 451 · 访问量 54万+

猜你喜欢

转载自blog.csdn.net/qq_36667170/article/details/105033708
今日推荐