函数的传参、扩展运算符、rest参数、...、箭头函数

195 阅读2分钟

参数默认值、解构赋值结合、length属性、作用域、函数的name属性

一、   参数默认值

参数默认值一定要放在最后面,参数不能重复,参数不要和内部变量同名

function foo (x, y = 'world') {
    console.log(x, y)
}
foo('hello', 0)

function foo (x, y = 'world', z) { // 报错
    console.log(x, y)
}
foo('hello', , 0)

function foo (x, x, y) { // 报错
    console.log(x, y)
}
foo('hello', 0)

function foo ({}) { // 解构赋值形式要一样:报错
    console.log(x, y)
}
foo()

解构赋值常用场景

function ajax (url, {data = '', method = 'GET', header = {} } = {}) { //封装ajax请求
    console.log(method)
}
ajax('http://www.xxx.com', {
    method: 'POST'
})

length属性: 返回函数参数:没有默认赋值参数的个数

function foo (x , y =1, z=2) {
    console.log(x, y)
}
console.log(foo.length) // 返回函数参数、没有默认参数的个数

*作用域: 函数参数形成一个作用域,如果没有值会沿着作用域链逐级向上查找

let x = 1
function foo (x , y = x) {
    console.log(y) // 2
} 
foo(2)
// 函数参数形成一个作用域,此时传入参数x为2, 同时形成一个作用域, 此时y为2

let x = 1
function foo (y = x) {
    let x = 2
    console.log(y) //1
}
foo()
// 函数参数形成一个作用域,函数调用x没有赋值,此时x会沿着作用域链向上查找,得到x为1

function foo (y = x) { // 报错, 找不到x : is not defined
    console.log(y)
}
foo()

(二)扩展运算符(...):把数组或者类数组展开成用逗号的值

function foo (a,b,c) {
    console.log(a,b,c)
}
foo(...[1,2,3]) // 把数组打散

let arr1 =  [1,2,3]
let arr2 = [4,5,6]
Array.prototype.push.apply(arr1, arr2) // es5
arr1.push(...arr2) // es6

let str = '12345'
let arr = [...str] // [1,2,3,4,5]

(三)rest参数(...):把逗号隔开的值组合成一个数组即: 剩余参数

使用场景: 不定参数求和

function foo (x,y,z) {
    let sum = 0
    Array.prototype.forEach.call(arguments, function(item) { // es5
        sum += item
    })
    Array.from(arguments).forEach(item => {
        sum += item
    })
    return sum
}
console.log(foo(1,2))
console.log(foo(1,2,3))

function foo (...args) { //剩余运算符:合成一个数组
    let sum = 0
   args.forEach(item => {
        sum += item
    })
    return sum
}
console.log(foo(1,2))
console.log(foo(1,2,3))

let [x, ...y] = [1,2,3] // 剩余就是把确定的定好,剩余的全部留下

四、箭头函数(箭头左边是参数,右边是函数体)

this指向定义是所在的对象,而不是调用时的对象、不可以当做构造函数、不可以使用arguments对象

具名函数(命名函数)、匿名函数(没有函数名)

function () {
    console.log('匿名函数无法直接调用')
}

命名函数两种方式
console.log(fn())
function fn () { //1
    console.log('命名函数:函数有名字') 
}
console.log(fn())
**********************************************
console.log(fn())
var fn = function () { //2
    console.log('函数表达式:匿名函数赋给一个变量')
}
conosle.log(fn)_)
// 两种函数的区别是什么
//1: 存在函数预定义,所以可以直接在函数之前或者之后调用fn() 返回结果一样
// 2: 函数之前调用返回undefined、 之后调用返回函数: 这是变量提升而导致。