函数变量传值 · 前端知识 -- 学习整理

[TOc] >[success] # es5 常见的几种函数值传递 >[info] ## 使用 '||' 和 '&&' 符号 ~~~ 1.首先 '||' 是一个短路操作符，也就是说只要有1个符合条件后面就不执行，也就是说符合条件是'true'即可,举例说明: 1 || 0 或者 0 || 1 两个返回的都是1，但如果多个都是'false' 则返回最后一个值，例如 ""||0 返回的是0。有点类似 if(true){}else{} 2.'&&' 也是一个短路操作符，也就是说只要有1个符合条件后面就不执行，符合条件的条件是'false',举例说明: 1 && 0 或者 0 && 1 两个返回的都是0，但如果多个都是'true' 则返回最后一个值，例如 2&&1 返回的是1。有点类似 if(执行前置条件()){ '执行后置条件' } ~~~ >[danger] ##### 利用'||'特性传值 ~~~ getParam(0) // default 注意:0转成布尔类型为false 有漏洞 ~~~ ~~~ function getParam(param){ let a = param || 'default'; return a; } // 返回默认值 setParam1 = getParam(); // 返回指定值 setParam2 = getParam('指定内容'); console.log(setParam1) console.log(setParam2) ~~~ * 打印结果 ~~~ default 指定内容 ~~~ >[danger] ##### 解决'||' 这种形式漏洞 ~~~ //解决漏洞 function show(a,b){ var a=typeof a === 'undefined'?20:a; var b=typeof b === 'undefined'?30:b; console.log(a,b) } show(0,0) //0 0 ~~~ >[danger] ##### 利用'&&' 特性定义回调函数参数 ~~~ function getCallBack(param,callback){ try{ console.log('param',param) // 传参只能是当期函数中的例如param console.log(callback && callback()) }catch(err){ console.log('回调函数') } } // 这个会打印 param 1 然后执行到callback就会抓住异常执行打印出'回调函数胡' // getCallBack(11,11); // 下面这种是正常操作，使用'&&' 的原因，如果过没有并且那每次都会执行这个callbak() // 因此没有传值回调函数则会出现错误，所以使用并且特性有的时候才执行回调 getCallBack(11,() => { return '我是测试的回调函数' }); ~~~ * 打印结果 ~~~ param 11 我是测试的回调函数 ~~~ >[danger] ##### 利用循环华而不实写法 ~~~ function getCallBack(params){ let defaultConfig = { age:17, name:'wang', sex:'男' } for(let i in params){ defaultConfig[i] = params[i] || defaultConfig[i] } return defaultConfig } console.log(getCallBack()) console.log(getCallBack({name:'ss'})) ~~~ * 打印结果 ~~~ {age: 17, name: "wang", sex: "男"} {age: 17, name: "ss", sex: "男"} ~~~ >[danger] ##### 利用对象和'||' 和'&&' 进行配合操作(重点) ~~~ CT.loginAjax = function (params,callback) { /*params====> {} */ $.ajax({ type: params.type || 'get', url: params.url || '#', data: params.data || '', dataType: params.dataType || 'json', success:function (data) { /*未登录的处理 {error: 400, message: "未登录！"} 所有的需要登录的接口没有登录返回这个数据*/ if(data.error == 400){ /*跳到登录页把当前地址传递给登录页面当登录成功按照这个地址跳回来*/ callback && callback() return false; }else{ params.success && params.success(data); } }, error:function () { mui.toast('服务器繁忙'); } }); }; ~~~ >[danger] ##### arguments 不确定实参 ~~~ function add(){ return arguments } console.log(add(10,20,30,{'name':'wang'})) ~~~ * 打印结果 ~~~ [10, 20, 30, {'name':'wang'}] ~~~ >[success] # es6常见的几种函数传值 ~~~ 1.参数中使用下面的方法注意的顺序，(a, b=20, ...val) 2.没有类似python中对对象的解包 ~~~ >[danger] ##### 设置默认参数 ~~~ 1.es6 设置默认参数案例 ~~~ ~~~ function getParams(b, a = 10) { console.log(a, b) } getParams(5); getParams(6,7); ~~~ * 打印结果 ~~~ 10 5 7 6 ~~~ >[danger] ##### 设置默认(参数为函数) ~~~ function getVal(n){ return n+10; } function add(a,b = getVal(a)){ return a+b } console.log(add(10));//30 ~~~ >[danger] ##### ... 三个点的解包 ~~~ 1.等同于python 中*args，在函数中当参数使用的时候，接受多个数值可以变成数组，当普通使用的时候可以给数组解包 ~~~ ~~~ function add(a, b=20, ...val){ console.log(a, b, val) } add(10,21,30,{'name':'wang'},1) console.log(...[1,2,3]) ~~~ * 打印结果 ~~~ 10 21 (3) [30, {'name':'wang'}, 1] 1 2 3 ~~~ >[danger] ##### 解构赋值对象拆包 ~~~ 1.场景具体限制，或者只使用传入的对象参数特定的key ~~~ * 定义一个方法对立面对象结构赋值 ~~~ function info1({name, age, height}){ console.log(name, age, height) } ~~~ * 使用 ~~~ info1({name:'1', age:"1",height:'2', other:'999'}); ~~~ * 打印结果 ~~~ 1 1 2 ~~~ >[danger] ##### 解构赋值设置默认值 ~~~ 1.给拆包后的key设置默认值，也是给对象设置默认值得一种方式 2.但这种方式，如果使用时不传值，整体会报错例如： info2({}) -- 这样可以不报错 info2() -- 什么都不传这样报错 ~~~ * 定义一个有默认值得结构赋值 ~~~ function info2({ name = 'anonymous', age = 0, height = 160 }){ console.log(name, age, height) } ~~~ * 使用 ~~~ info2({name:'2'}) ~~~ * 打印结果 ~~~ 2 0 160 ~~~ >[danger] ##### 解构赋值设置默认值(解决什么都不传递报错问题) ~~~ 1.给拆包后的key设置默认值，也是给对象设置默认值得一种方式 2.解决上面案例中什么值都不传递报错问题 ~~~ * 定义一个有默认值得结构赋值 ~~~ function info3 ({ name = 'anonymous', age = 0, height = 160 } = {}) { console.log(name, age, height) } ~~~ * 使用起来和上面案例基本一致但解决了可以没有参数问题 ~~~ info3() ~~~ * 打印结果 ~~~ anonymous 0 160 ~~~ >[danger] ##### 利用默认值做强制传参 ~~~ // 帮助函数 const err = ( message ) => { throw new Error( message ); } // 函数 const sum = function ( num = err('first param is not defined'), otherNum = err('second param is not defined') ) { return num + otherNum; } ~~~ * 使用 ~~~ // 测试函数 // 输出: 3 console.log(sum(1, 2)); // 测试第一个参数不传递 // Uncaught Error: first param is not defined sum( undefined, 10 ); // 测试第二个参数不传递 // Uncaught Error: second param is not defined sum( 10 ); ~~~