箭头函数
ES5函数的写法:
function fn(){
}
箭头函数的语法
ES6新增箭头函数:可以简化函数的写法
()=>{}
1、箭头前面是函数的参数,只有一个参数时可以省去()
2、当函数只有一条return时{}可以省略
3、当只有一条语句时且返回的是一个对象要用()包起来
箭头函数this问题
箭头函数本身没有this,它的this是看它处在什么函数的定义域内就是这个函数的定义域
展开运输符
语法
...
作用
可以合并数组、对象 、接收剩余参数
案例:
// ...展开运算符 可以合并数组 对象
let arr = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = arr.concat(arr2)
console.log(arr3);
let arr4 = [...arr, ...arr2]
console.log(arr4);
let obj = { a: 1, b: 2 }
let o = { ...obj }
// let o =obj//true
console.log(o);
console.log(o === obj);//false
// 求数组最大值
console.log(Math.max(...arr2));
console.log(Math.max.apply(null, arr));
// 函数名.apply()调运函数 并且接受数组作为参数
function fn() {
//伪数组
console.log(arguments);
console.log([...arguments].pop());
// 可以把 arguments 转成真正的数组
}
fn(1)
fn(2)
fn(3)
// 剩余参数 写在最后
function f(a, ...b) {
// b是一个数组
console.log(a,b);
}
f(1,2,3)
// ...出现在函数参数或者赋值号左边时一般是剩余参数
this
this指向问题
1.this在构造函数中指向new出来的对象
2.普通函数直接调用this指向window, 全局环境下this指向window,定时器中this指向window
3.普通函数中谁调用函数 this就指向谁
4.箭头函数本身没有this,它的this是看它处在什么函数的定义域内就是这个函数的定义域
this改变问题
call apply bind可以改变this指向 箭头函数不能使用
call
call(this指向,参数1,参数2)
this指向 函数立即调用 this改变
apply
apply(this指向,[参数1,参数2])
this指向 函数立即调用 this改变
bind
不会立即调用函数 返回一个改变this改变之后的函数,需要再次调用
bind(this指向,参数1,参数2)
案例
let o = { a: 1 }
function fn() {
console.log(this);
}
fn()//this指向window
fn.call(o)
//this指向o 函数立即调用 this改变
fn.apply(o)
//this指向o 函数立即调用 this改变
let fn1 = fn.bind(o, 1, 2)
//不会立即调用函数 返回一个改变this改变之后的函数
fn1()