es6基础0x003：默认参数

james 发布于2019-08-23 12:57 / 2935人阅读

摘要：语法使用使用翻译一下传值检测从翻译的结果可以看出，默认参数只检查两种情况不传参数传入前参后用前面的参数可以作为后面参数的默认值，甚至可以对前面的参数做一些特别的操作，比如简单的加减乘除默认参数调用函数赋值默认参数甚至可以调用函数，可以调用函

0x000 语法

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) { 
    statements 
}

0x001 使用

function sum(a=0, b=0){
    return a+b
}

sum() // 0
sum(1) // 1
sum(1, 2) // 3

使用babel翻译一下

function sum() {
    var a = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
    var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

    return a + b;
}

0x002 传值检测

从babel翻译的结果可以看出，默认参数只检查两种情况

不传参数

传入undefined

function sum(a=0){
    return typeof a
}
sum() // "number"
sum(undefined)// "number"

sum(1) // "number"
sum("1") // "string"
sum(null) // "object"
sum(false)// "boolean"

0x003 前参后用

前面的参数可以作为后面参数的默认值，甚至可以对前面的参数做一些特别的操作，比如简单的加减乘除

function sum(a=1, b=a, c=a+b){
    return [a, b, c]
}
sum() // [1, 2, 3]
sum(2)  // [2, 2, 4]
sum(2,2) // [2, 2, 4]
sum(2,2,2) // [2, 2, 2]

0x004 默认参数调用函数

赋值默认参数甚至可以调用函数，可以调用函数，就已经说明无所不能了~

function sum(a=1, b=(()=>4)()){
    return [a, b]
}
sum() // [1, 4]
sum(2) // [2, 4]
sum(2,2) // [2, 2]

注意: 无法调用函数内部声明的函数作为默认值

function sum(a=1, b=num2()){
    function num2(){
        return 4
    }
    return [a, b]
}
sum() // Uncaught ReferenceError: num2 is not defined

0x005 按序覆盖

参数还是按调用的时候传输的顺序一一覆盖的，不会因为它有默认值就跳过该形参的赋值

function sum(a=1, b ){
    return [a, b]        
}
sum() // [1, undefined]
sum(2)// [2, undefined]
sum(1,2) //[1, 2]

0x006 解构赋值默认参数

结构中也可以使用默认参数，虽然结构还没在这系列出现过

function sum([x, y] = [1, 2], {z: z} = {z: 3}) { 
  return [x, y, z]; 
}

sum() // [1, 2, 3]
sum([2,4],{z: 6}) // [2, 4, 6]

云服务器 GPU云服务器函数默认参数方法实例参数默认 js默认参数 js函数默认参数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99115.html

es6基础0x008：解构赋值

摘要：概述实不相瞒，解构赋值非常叼，特别是和其他一起使用的时候，那如何简单的说解构赋值呢，打个比方解构赋值就是一个硬币拆分机，将所有的一毛五毛一块硬币投入硬币拆分机，他就自动将所有的硬币分好了，拿出你要的就行了解构数组可以从一个数组从取出你想要的 0x000 概述实不相瞒，解构赋值非常叼，特别是和其他es6一起使用的时候，那如何简单的说解构赋值呢，打个比方：解构赋值就是一个硬币拆分机，将所...

xiaoxiaozi 2019-08-23 13:07 评论0 收藏0
es6基础0x019：模块化

0x000 概述模块化是一个大型项目的必然趋势。 0x001 命名导出可以使用export关键字，导出你要导出的东西，可以导出常量、变量、函数、类, // export.js export var var0 = var0 // 直接导出 var 声明 export let let0 = let0 // 直接导出 let 声明 export const const0 = const // 直...

khlbat 2019-08-26 12:24 评论0 收藏0
es6基础0x004：剩余参数

摘要：概述剩余参数将没有对应形参的参数聚合成一个数组语法只聚合未对应形参参数剩余参数只会将没有对应形参的参数聚合成一个数组而则是包含了所有的参数。剩余参数是数组剩余参数始终是一个数组，而不像是一个伪数组转化成数组解构剩余参数使用翻译翻译后 0x000 概述剩余参数将没有对应形参的参数聚合成一个数组 0x001 语法 function(a, b, ...theArgs) { } 0x002 ...

waltr 2019-08-23 13:00 评论0 收藏0
es6基础0x007：展开

摘要：概述展开符号真的是一个非常好用的东西，我常用于字符串分割数组合并数组拷贝对象合并对象拷贝。 0x000 概述展开符号真的是一个非常好用的东西，我常用于字符串分割、数组合并、数组拷贝、对象合并、对象拷贝。 0x001 语法 ...iterableObj 0x002 函数调用的时候参数展开这是在函数调用的时候，将参数展开，和剩余参数有区别，剩余参数是在函数声明中使用 myFunctio...

RyanQ 2019-08-23 13:02 评论0 收藏0
es6基础0x001：箭头函数

摘要：这就是所谓的箭头函数不绑定，而在我看来，回调函数就是箭头函数最好的归宿。 0x000 概述箭头函数有两个作用：更简短的写法不绑定this 0x001 语法一表览 ()=>{} ()=>{console.log(arrow);return null} ()=>hello (num1, num2)=>num1+num2 num=>++num ()=>({name:arrow})...

stonezhu 2019-08-23 12:51 评论0 收藏0