javascript-es6 （二）

函数进阶

函数提升

函数提升与变量提升比较类似，是指函数在声明之前即可被调用

好处：能够使函数的声明调用更灵活

函数提升出现在 相同作用域 当中

//可调用函数
fn()//后声明函数
function fn() {console.log('可先调用再声明')
}

注意：函数表达式不存在提升的现象

//调用表达式，不存在提升现象
bar()  //错误var bar = function() {console.log('函数表达式不存在提升哦')
}

函数参数

动态参数

arguments 是函数内部内置的伪数组变量，它包含了调用函数时传入的所有实参

function sum() {// console.log(arguments) arguments是伪数组let s = 0for (let i = 0; i < arguments.length; i++) {s += arguments[i]}console.log(s)}sum(3, 3)  //6

总结：

1. arguments 是一个伪数组， 只存在于函数中

2. arguments 的作用是动态获取函数的实参

3. 可以通过for循环依次得到传递过来的实参

剩余参数   (提倡使用)

剩余参数允许我们将一个不定数量的参数表示为一个数组

function getSum(...other) {console.log(other)  //使用的时候不需要写...//other 得到 [1,2,3]
}
getSum(1,2,3)

• ... 是语法符号，置于最末函数形参之前，用于获取多余的实参
•  借助 ... 获取的剩余实参，是个真数组,只存在于函数中

function getSum(a,b,...other) {console.log(a,b,other)  //里面的 other 也可以换成其他字母哦
}
getSum(1,2,3,4) //1 2 [3,4]

展开运算符(…)

数组中使用, 将一个数组进行展开，不会修改原数组

典型运用场景：

求数组最大值(最小值)

const arr = [1,2,3,4]
console.log(...arr)  //1 2 3 4//...arr === 1,2,3,4
console.log(Math.max(...arr))  //4
console.log(Math.min(..arr))   //1

合并数组

const arr1 = [1,2]
const arr2 = [3,4]
const arr3 = [...arr1,...arr2] 
console.log(arr3)  //[1,2,3,4]

箭头函数（重要）

引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁

更适用于那些本来 需要匿名函数的地方

基本写法

//普通写法
const fn = function () {console.log('我是普通函数哦') 
}
fn()

//箭头函数
const fn = () => {console.log('俺是箭头函数')
}
fn()

只有一个参数可以省略小括号

//普通函数
const fn = function (x) {return x + x
}
consle.log(fn(1))  //2//箭头函数
const fn = x => {return x + x
}
console.log(fn(1))  //2

如果函数体只有一行代码，可以写到一行上，并且无需写 return 直接返回值

//普通函数
const fn = function(x,y){return x+y
}
fn(1,2)  //3
//箭头函数   一行代码的时候可以省略大括号，也可以省略return
const fn = (x,y) => x+y
console.log(fn(1,2))  //3//更简洁的语法
const form = document.querySelecor('form')
form.addEventListener('click', ev => ev.preventDefault())

加括号的函数体返回对象字面量表达式

const fn1 = uname => ({name : uname})
console.log(fn1('俸涛'))

 箭头函数属于表达式函数，因此不存在函数提升

箭头函数参数

箭头函数没有 普通函数的arguments 动态参数，但是有 剩余参数 ..args(args可以用任意字母替代)

const getSum = (...args) => {let sum = 0for(let i = 0; i < args.length; i++){sum += args[i]
}
return sum  //注意函数体有多行代码时，要用return 
}
console.log(getSum(1,2,3))  //6

箭头函数 this

箭头函数更适用于那些本来 需要匿名函数的地方

箭头函数不会创建自己的this ,它只会从自己的作用域链的 上一层 沿用this

console.log(this)  //此处为 windowconst sayHi = function(){console.log(this)  //普通函数指向调用者 此处为window
}
sayHi()const sayHi = () => {console.log(this)  //箭头函数此处this为 window，并不是window调用了此函数，而是上一层作用域的this
}
sayHi()btn.addEventListener('click',function(){console.log(this)   //当前this 指向 btn 
})btn.addEventListener('click',() => {console.log(this)   //当前this 指向 window
})

//对象方法箭头函数 this
const user = {name:'小明'，//该箭头函数中的 this 为函数声明环境中 this 一致walk: () => {console.log(this)  //指向 window 不是 user
}
}
user.walk()

const user = {name:'小明',sleep: function () {console.log(this)  //指向 userconst fn = () => {console.log(this)  //指向 user  //普通函数的this 指向的是它的调用者，箭头函数的this指向的是其上一层的调用者
}
//调用箭头函数
fn()}
}
user.sleep()

在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window，因此

DOM事件回调函数为了简便，还是不太推荐使用箭头函数

//获取DOM 节点
const btn = document.querySelector('.btn')//箭头函数 此时 this 指向了 window
btn.addEventListener('click', () => {console.log(this)
})//箭头函数 此时 this 指向了 DOM对象   
//所以推荐使用这种情况
btn.addEventListener('click',function() {console.log(this)
})

路漫漫其修远兮，吾将上下而求索