JavaScript高级(10)

解构赋值

ES6中允许从数组中提取值,按照对应位置,对应量赋值.对象也可以实现解构

解构代表分解数据结构,赋值指的是为变量赋值,ES6中,允许我们按照一一对应的位置,从数组或者对象当中提取值,再将提取出来的值赋值给变量,解构变量可以让我们更加简便的从数组或者对象当中提取值.

我们来看一个数组解构↓

现在我们要做的是将数组中的值提取出来,赋值给变量.

在等号的右边是数组,左边的中括号不是数组,代表解构.中括号中实际上是变量的名字变量的名字和右边数组中的只是一一对应的关系。比如a变量的值是1，b变量的值是2，c变量的值是3。

如果解构不成功,变量的值为undefined

对象解构也是差不多的,一开始有点懵,现在大概知道有什么优点了.

过去我们要打印出一个对象的属性,需要重复声明,然后才能打印↓

如果我们使用对象结构↓

就会节省很多时间

另外,如果我们不喜欢对象原来的属性名,我们也可以使用别名,用法就是在解构中的原属性名后面加上冒号: 再跟上我们想要的别名↓

此时就不能再使用原来的属性名了.

箭头函数

ES6中新增的定义函数的方式

( 形参 ) => { 函数体 }

一般我们会将这个函数赋值给一个常量

函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号;如果形参只有一个,可以省略小括号.

箭头函数中的this指向问题

箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文的this.箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

在这里我突然发现了一个自己不懂的地方,但是搜了一下大概是会了:

答案是window而不是obj, 这是由于this指向函数运行(调用)时所在的执行环境的对象.

过程可以写为:

因此调用函数时(b()),其所在的执行环境是全局环境,所以this指向全局变量window.

下面我们再来学习箭头函数中this的指向

这个很好理解,谁调用了这个函数this就指向谁

下面看箭头函数的this:

为什么打印的是window而不是A呢?我们看看箭头函数this的定义:

箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

这里的箭头函数，也就是sayHello，所在的作用域其实是最外层的js环境，因为没有其他函数包裹；然后最外层的js环境指向的对象是window对象，所以这里的this指向的是window对象。

也许很难理解,我们看看别的例子,当箭头函数的外层有函数包裹的情况:

此时fn箭头函数被定义在say函数中, say函数就是这个箭头函数的父级作用域, 父级作用域say函数的this指向的对象就是obj_A. 如果外层没有函数了,那么this指向的就是顶级对象window.

(查了很多资料,有错请指出!!!)

再来分析下老师的例子:

来看一道经典面试题:

补充:此时的箭头函数被定义在全局作用域下

ES6剩余参数