ES6函数参数

作者: 技术小王 | 来源:发表于2021-06-10 14:06 被阅读0次

在一些开发语言中,都把函数作为语言的一等公民。对于编写代码来说,函数可以很容易的把类似的代码放在一起,使用的时候统一调用,下面我就简单介绍一下ES6中,对函数参数的处理和新增内容。
一、参数默认值
1、es5中处理

function foo(x,y){
    console.log(x,y)
}
foo("hello") // hello undefind
function foo(x,y){
    y = y || "world" // 可以在es5中实现默认参数功能,但是对于空字符串或者0等,在js判断中判断为false的时候,还需单独判断
    console.log(x,y) // hello world
}
foo("hello")

2、es6中处理:同样遵守惰性赋值原则

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

3、默认值要放在参数最后

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

二、与解构赋值结合(形式要完全一样)

function foo({x,y=5}){
    console.log(x,y)
}
foo({}) // undefind 5
foo({x:1}) // 1 5
foo({x:1,y:2}) // 1 2
foo() // Uncaught TypeError: Cannot destructure property 'x' of 'undefined' as it is undefined.

实例:封装ajax

function ajax(url,{
    body="",
    method="GET",
    headers={}
}={}){
    console.log(method)
}
ajax("https://www.baidu.com") // GET
ajax("https://www.baidu.com",{
    method:"POST"
}) // POST

三、length属性

function foo(x,y,z,v=5){
    console.log(x,y)
}
console.log(foo.length) // 3 返回没有指定默认值参数个数

四、作用域:形成参数的固定作用域,如果定义域内没有,会沿着作用域链向上找

let x = 2
function foo(x,y=x){
    console.log(y)
}
foo(2) // 2
let x = 1
function foo(y=x){
    let x=2
    console.log(y)
}
foo() // 1
function foo(y=x){
    let x=2
    console.log(y)
}
foo() // Uncaught ReferenceError: x is not defined

五、函数name属性

function foo(){}
console.log(foo.name) // foo
console.log((new Function).name) // anonymous
function foo(){
    console.log(this)
}
foo.bind({name:"lilei"})() // {name:"lilei"} bind用于重指向函数this
function foo(x,y){
    console.log(this,x,y)
}
foo.bind({name:"lilei"})(1,2) // {name:"lilei"} 1 2 

console.log(foo.bind({}).name) // bound foo
console.log((function(){}).bind({}).name) // bound

相关文章

  • 【学习笔记】ES6 标准 - 函数默认参数、箭头函数、剩余参数

    ES6 标准 - 函数默认参数、箭头函数、剩余参数

  • ES6函数的扩展(一)

    参考:ES6入门(阮一峰) 一、ES6为函数设置默认参数 ES6之前不能为函数设置默认参数,ES6新增可以为函数设...

  • ES6 解构赋值 & 模板字符串

    一、函数的默认参数 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 ES6 允许为函数的参数设...

  • 8.函数的扩展

    1.函数参数的默认值 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法。 ES6 允许为函数的参数...

  • ES6 写法示例

    匿名函数调用 ES5 ES6 箭头函数 将数组的内容 * 2 ES5 ES6 默认参数 ES5 ES6 不定参数 ...

  • 第七章 函数的扩展

    函数参数的默认值   在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法。ES6允许为函数的参数设置...

  • ES6 函数的扩展

    函数参数的默认值 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法 ES6 允许为函数的参数设置默...

  • es6全家桶(二)—— 箭头函数

    es6全家桶(二)—— rest参数、箭头函数 箭头函数 ES6 允许使用“箭头”(=>)定义函数。 var f ...

  • ES6语法——Function的扩展

    一、函数默认参数ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。 ES6中函数默认值需要注意的点有:...

  • 007_ES6知识点总结(04)函数的拓展

    ES6知识点整理 [toc] 04 函数的拓展 04.1 函数参数的默认值 ES6支持函数定义时,直接在参数定义后...

网友评论

    本文标题:ES6函数参数

    本文链接:https://www.haomeiwen.com/subject/mpseeltx.html