1-5 函数的参数

在ES6 里面不需要专门去判断是否传参，代码上更简洁了 当我们去封装一个函数的时候，当别人看到有默认参数的时候， 就能很清晰的看到哪些参数是必传的哪些参数是非必传的 以后在做代码优化的时候，也可以把非必传的参数给优化掉

function foo(x, y){
  console.log(x, y)  // hi  undefined
// 如果需要默认值需要判断一下是否传参
  y = y || 'xiaobai'
  console.log(x, y)  // hi  xiaobai
}
foo('hi')
// 下面我们看一下在ES6 里的写法有哪些
function foo(x, y = 'xiaobai'){
  console.log(x, y)
}

下面我们来看一下有哪些需要注意的点：

// 参数的名称有冲突
function foo(x, x, y = 5){
}
foo()
// ----------------------------------
function foo(x, y = 5, z){
  console.log(x, y, z) // 1 3 undefined
}
foo(1, 3)

• 参数的名称不能一样，否则会显示报错
• 如果参数有默认值，一定要放在最后面
• 实参跟形参是根据顺序一 一对应的

解构赋值

function({x, y = 5}){
  console.log(x, y)
}
foo({}) // undefined 5

foo({
  x: 1,
  y: 2
})   // 1, 2
foo()   // 报错

function ajax(url, {
  body = ''
  method = 'GET',
  headers = {}
} = {}){
  console.log(method)  // GET
}
ajax('https://juejin.cn/column/7235027795394215997',{
  method: 'POST'  // POST
})

• 当解构赋值的时候两边的解构的形式要完全的匹配上

length属性

function foo(x, y, z = 3){
  console.log(x, y)
}
console.log(foo.length)  // 2

• length 只能获取到没有指定默认值的参数的个数

作用域

let x = 1
function(x, y = x){
  console.log(y)  // 2
}
foo(2)

• 函数会在当前作用域内取值

let x = 1
function(y = x){
  let x = 2
  console.log(y)  // 1
}
foo(2)

function foo(y = x){
  let x = 2
  console.log(y)  // 报错  i is not defined
}
foo()

• 当函数被调用的时候会形成一个作用域，会沿着当前作用域链往外面找，函数内部的 x 不会影响到参数的默认值

函数的name属性

function foo(){}
console.log(foo.name)  // foo
// ------------------
console.log((new Function).name)  // anonymous  // 匿名
// ------------------
function foo(x, y){
  console.log(this, x, y) // {name: 'xioabao'}  1  2
}
foo.bind({name: 'xioabao'})(1, 2)
console.log(foo.bind({}).name)  // found  foo

以上就是我总结的函数参数的使用，大家喜欢的话欢迎点赞收藏支持，感谢！