Web前端开发笔记之JS提升02——预解析，参数默认及多参，箭头函数

目录

预解析：

 参数：

箭头函数：

预解析：

1.变量的预解析

代码在运行之前，变量声明会优先运行到变量预解析中，赋值会被中断，等所有作用域块中的所有变量全部预解析完毕，才会执行赋值。

2.函数的预解析

需要注意的是：函数优先预解析，当遇到变量和函数同名，我们会优先使用函数的预解析。

3.let预解析

上面我们说到var变量会被预解析，但是我们在使用let时在相同状态下会出现另一种情况：

<script>
	function fn() {
        console.log(n)
		var n=1
    }
	fn()
	function fn2(){
		console.log(l)
		let l=1
	}
	fn2()
</script>

let会被预解析，只是如果先调用后定义，会报错。

 参数：

当我们调用函数是，参数有几种情况：

未传入，传入适当，传入过多。

这些情况并不会让我们的代码出现异常，我们来看一看：

<script>
	//1.参数未传入
	//当我们不传入任何值时，默认undefined
	function test1(name) {
        console.log(name)
    }
	test1()

	//2.参数传入
    function test2(name) {
        console.log(name)
    }
	test2('polaris')

	//3.参数过多
	//参数过多时，会将多余参数传入伪数组arguments（函数构建自带）
    function test3(name) {
        console.log(name)
        console.log(arguments)
    }
    test3('polaris',3)

	//4.多参数传入
	//我们可以使用...+自定义名，以收集多参数
	function test4(name,...arg) {
        console.log(name)
        console.log(arg)
    }
	test4('Polaris',1,2,3,4,5,6)
</script>

代码运行情况：

 函数传参时，参数是可以使用默认值的。即在函数定义时，给参数赋值。

箭头函数：

在我们使用表达式函数时，可以简写成为箭头函数，具体写法如下：

<script>
    // 表达式函数
    let test1 = function () {
        console.log(1)
    }
    test1()

    // 箭头函数
    let test2 = (name, ...a) => {
        console.log(name)
        console.log(a)
    }
    test2('polaris', 1, 2, 3)

    // 当我们只有一个参数时，可以省略圆括号
    let test3 = name => {
        console.log(name)
    }
    test3('polaris')

    //当然大括号也可以省略，不过代码主体只能有一行
    let test4 = name => console.log(name)
    test4('polaris')
</script>

 运行结果：

 箭头函数的作用处，一般在回调函数的地方。

下面我们来看看示例：

    document.querySelector('.btn').addEventListener('click',()=>console.log('polaris'))

    let array=[1,2,3,4]
    array.forEach(e=>console.log(e))

 上面两段代码：分别展示了数组和dom操作的回调函数转换箭头函数的操作。

箭头函数中没有arguements，但是我们可以使用...+变量名来接受多参数。

箭头函数的this用法：指向其上级作用域。

 所以在我们使用this时，不要使用箭头函数。