JS-16（ES6、let，const、箭头函数、解构赋值、展开运算符、函数的this的指向及修改）

节奏布鲁斯
79 阅读4分钟

JS-16（ES6、let，const、箭头函数、解构赋值、展开运算符、函数的this的指向及修改）

let与const

ES6新增的声明变量的关键字

  • let

    • 声明一个变量，变量遵循块级作用域
    • 变量没有变量提升
    • 声明的变量是可以被更改
    • 声明的时候可以不给初始值

  • const

    • 声明一个常量，常量遵循块级作用域
    • 变量没有变量提升
    • 声明的常量是不可以被更改的
    • 声明的时候必须给初始值

let/const 与 var 的区别

  • var ：

    • 1.定义的变量遵循全局作用域/函数作用域
    • 2.声明的变量可以变量提升（但实际执行定义提升了，值没有提升，所以是undefined）
    • 3.变量可以重复声明

  • let/const：

    • 1.定义的变量/常量遵循块级作用域/函数作用域
    • 2.声明的变量/常量不能变量提升
    • 3.变量不可以重复声明

let 与const 的区别

  • let：

    • 1.声明的是变量
    • 2.声明的是变量可以修改
    • 3.声明的时候可以没有初始值

  • const

    • 1.声明的是常量
    • 2.声明的变量不可以被修改
    • 3.声明的时候必须有初始值

箭头函数

ES6新增的一个对以前普通函数的一个写法优化

  • 箭头函数专属的写法优化

    • 1.箭头函数的形参如果只有一个，并且没有默认值的时候，可以省略形参的小括号不写。 => 如果函数的形参有多个，或者说有一个形参并且有默认值，或者没有形参，这些情况都必须书写形参的小括号。
      1. 如果函数的调用要执行的代码只有一行，那么可以省略大括号，并且默认自带return效果，例如：const fn6 = () => console.log(1)

箭头函数和普通函数的差别

  • 1.写法不同
  • 2.函数内部的this不同

解构赋值

快速的从数组或对象中拿到数据

ES6数组的解构赋值（只能用于数组）

  • 要求：声明变量的时候需要使用[]包裹，[]内部的变量名只要符合命名规范与规则就行了=赋值号右边必须跟一个数组
  • 作用：会按照数组内部元素的排列顺序，依次赋值给 = 左边的变量

image.png

对象的解构赋值

  • 要求：声明变量的时候需要使用{}包裹变量的名字必须和对象内部的某一个属性完全相同 ，= 号右边必须书写一个对象
  • 作用：将对象内部属性对应的值给到左边的变量中

image.png

展开运算符

基本演示

image.png

合并数组

image.png

伪数组转真数组

image.png

函数的this指向

函数的this指向：函数内部的this指向和函数的书写没有任何关系而是和函数的调用有关系。注意：箭头函数内部没有this，他的this是从你使用的哪一行开始向上一直寻找，直到找到一个this

  • 在代码中直接调用函数this === window

image.png

  • 将上述的函数，放在一个对象中调用 this===当前对象（当前调用者）

image.png

  • 将上述的函数放在定时器或者倒计时器内部 this === window

image.png

  • 将上述函数放在事件处理中 this === 事件源

image.png

  • 将函数放在自执行函数中 this === window

image.png

修改函数内部this指向

因为箭头函数内部没有this，所以我们的这些修改方法只适用于普通函数

1.call

  • 语法：函数名.call（将函数内部的this指向谁，实参1， 实参2， 实参2...）

2.apply

  • 语法：函数名.appil（将函数内部的this指向谁，[实参1， 实参2， 实参3， 实参4])

3.bind

  • 语法：函数名.bind（将函数内部的this指向谁，实参1，实参2，实参3...）

image.png

作用：修改函数内部的this指向，并将函数传递进去，然后将处理好的函数 返回。 注意：这个方法不会立即执行函数而是会将修改好this的一个函数返回出来，需要使用的话，自己可以调用。

avatar
文章
阅读
粉丝