ES6中新增了俩个声明变量的函数
let与const
相对于前面的var来说 let月const有什么区别呢
1. 他们之中最主要的区别就是作用的不同
* var的作用域是函数作用域与全局作用域
* let/const的作用域是块作用域与函数作用域
2. var会对变量进行提升，只是会对声明的变量进行提升，赋的值不会进行提升
let与const的区别
- let
- 用来声明变量
- 可以不写初始值
- 可以重新修改变量
- const
- 用来声明常量
- 需要初始值
- 无法重新修改声明的值
箭头函数
- 箭头函数是ES6 新增的一个对以前普通函数的一个写法优化
- 箭头函数专属的写法优化
-
- 箭头函数的形参如果只有一个, 并且没有默认值的时候, 可以省略形参的小括号不写 => 如果 函数的形参有多个, 或者说有一个形参并且有默认值, 或者 没有形参, 这些情况都必须书写 形参的小括号
-
- 如果 函数的调用要执行的代码只有 1 行, 那么可以省略 大括号, 并且默认自带 return 效果
-
// 1. 函数只有一个形参
const fn1 = a => { }
// 2. 函数只有一个形参 但是具有默认值
const fn2 = (a = 100) => { }
// 3. 函数没有形参
const fn3 = () => { }
// 4. 函数有多个形参
const fn4 = (a, b, c, d) => { }
// 5. 函数没有返回值, 并且内部代码有多行
const fn5 = () => {
console.log(1)
console.log(1)
console.log(1)
}
// 6. 函数不需要返回值, 但是内部代码有多行
const fn6 = () => console.log(1)
// 7. 当函数只需要返回一个对象的时候
const fn7 = () => {
return { a: 1, b: 2 }
}
const fn7 = () => ({ a: 1, b: 2 })
// console.log(fn7())
// 8. 函数内部只需要返回一个数组
const fn8 = () => [1, 2, 3]
// console.log(fn8())
// 9. 函数内部返回一个新的箭头函数
const fn9 = () => {
return function () {}
return () => {}
}
const fn9 = () => () => {}
console.log(fn9())
解构赋值
-
ES6 数组的结构赋值 (只能用于数组)
-
要求:
- 声明变量的时候 需要使用 [ ] 包裹
- [] 内部的变量名 只要符合命名规范与规则就行了
- = 赋值号右边必须跟一个 数组
-
作用: 会按照数组内部元素的排列顺序, 依次赋值给 = 左边 的变量
var arr = ['元素1', '元素2', '元素3']
let [a, b, c] = arr
-
解构的参数多了，会给多出来的undefined
-
如果是被结构的数组内容多，就只会依次赋值省略多出来的
-
对象的解构赋值
- 对象的解构赋值与数组的很相似，但是对象在解构的时候必须是属性名要对应
展开运算符
- 在 函数的形参 前 书写一个 ...
- 能够将 所有的实参的内容, 存放在这个形参中, 并且是以数组的形式存储的
// 优化实参的传递
var arr = [1, 2, 3]
const fn = (a, b, c) => {
console.log(a, b, c)
}
fn(arr[0], arr[1], arr[2]) // 1 2 3
fn(...arr) // 1 2 3
const fn = (...myEl) => {
console.log(myEl)
}
const fn = (...myEl, myEl2) => { // 语法报错
console.log(myEl)
}
const fn = (fb, ...myEl) => {
/**
* 形参 fb 按照顺序接收 第一个 实参传递的值, 如果没有实参那么他就是一个 undefined
* 从 第一个 实参后续的所有实参, 全都放在了 第二个 形参的数组中
*/
console.log(fb, myEl)
}
fn()
fn(1)
fn(1, 'QF001')
fn(1, 'QF001', true)
fn(1, 'QF001', true, undefined)
函数的 this 指向
-
函数内部的 this 指向和函数的书写没有任何关系
-
而是和函数的调用有关系
-
注意: 箭头函数内部没有 this, 他的 this 是从你使用的哪一行开始
-
向上一直寻找, 直到找到一个 this
const fn = () => {
console.log(this)
}
fn() //window
var obj = {
name: '我是 obj 对象',
objFn: fn
}
obj.objFn() //window
var obj = {
name: '我是 obj 对象',
objFn: () => {
console.log(this)
}
}
obj.objFn() //window
const fn1 = () => {
console.log(this)
}
function fn2() {
fn1()
}
function fn3() {
// console.log(this) // obj
const f = () => {
console.log(this)
}
f()
}
var obj = {
objFn1: fn1,
objFn2: fn2,
objFn3: fn3
}
obj.objFn1() // window
obj.objFn2() // window
obj.objFn3() // obj
修改函数内部this指向
- call
- 函数名.call（需要指向的值，参数一，参数二，参数三，...）
- 可以修改函数的this的指向，并向参数传递进去，并执行函数
- apply
- 函数名.apply（需要指向的值，[参数一，参数二，参数三，...]）
- 可以修改函数的this的指向，并向参数传递进去，并执行函数
- bind
- 函数名.bind（需要指向的值，参数一，参数二，参数三，...）
- 作用: 修改函数内部的this指向, 并将参数传递进去, 然后将处理好的函数 返回
- 注意: 这个方法不会立即执行函数, 而是会将修改好this的一个函数返回出来, 需要使用的话, 可以自己调用
function fn(a, b, c) {
console.log(a, b, c, this)
}
const obj = {
name: '我是 obj'
}
/fn(100, 200, 300) // 100, 200, 300, window
// 需求: 让 fn 函数 内部的 this 指向 obj 对象
// 解决方案1: call
fn.call(obj, 10, 20, 30) // 10, 20, 30, obj
// 解决方案2: apply
fn.apply(obj, [1, 2, 3]) // 1, 2, 3, obj
// 解决方案3: bind
const newFn = fn.bind(obj, 'bind_1', 'bind_2', 'bind_3')
newFn(); // bind_1 bind_2 bind_3 obj
此时打印newFn 得到一个函数，这个函数实际上是一个新函数，他的this指向的是obj
function fn(a, b, c) {
console.log(a, b, c, this)
}
// console.log(newFn) //f
