下划线学习频道

Appearance

快速预览

函数参数

✍️ cyyspring 🕒 2023-08-11 01:54:57(9 months ago) 🔗 A.前端知识整理

在使用函数时候，函数传参分为两种，基本类型和引用类型

基本类型时候，函数体复制了一份参数值，任何操作都不会影响原参数的实际值

js
const a = 1

function t(a){
    a =2
}
// 下面打印结果 为1，当基本类型时候，函数体复制了一份参数值
// 任何操作都不会影响原参数的实际值
console.log(a);

当函数参数是引用类型的时候，函数体内修改这个参数值的某个值时候，将会对原来的参数进行修改，如果直接修改这个参数的引用地址，相当于在函数内创建了一个新的引用任何操作都不会影响原来值

js
let a = {
  name: 'Julia',
  age: 20
}
function change(o) {
  o.age = 24;
  o = {
    name: 'Kath',
    age: 30
  }
  return o;
}
let b = change(a);     
console.log(b.age);    // 30
console.log(a.age); // 24

es6常见的几种函数传值 ​

  1. 参数中使用下面的方法注意的顺序，(a, b=20, ...val)
  2. 没有类似python中对对象的解包

设置默认参数 ​

js
function getParams(b, a = 10)
    {
       console.log(a, b)
    }
    getParams(5);
    getParams(6,7);
  • 打印结果
10 5
7 6

设置默认(参数为函数) ​

js
function getVal(n){
	return n+10;
}
function add(a,b = getVal(a)){
	return a+b
} 
console.log(add(10));//30

... 三个点的解包 ​

等同于python 中*args，在函数中当参数使用的时候，接受多个数值可以变成数组，当普通使用的时候可以给数组解包

js
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

解构赋值对象拆包 ​

js
function info1({name, age, height}){
    console.log(name, age, height)
}
  • 使用
info1({name:'1', age:"1",height:'2', other:'999'});
  • 打印结果
1 1 2

解构赋值设置默认值 ​

  1. 给拆包后的key设置默认值，也是给对象设置默认值得一种方式
  2. 但这种方式，如果使用时不传值，整体会报错例如：
    • info2({}) -- 这样可以不报错
    • info2() -- 什么都不传这样报错
function info2({ name = 'anonymous', age = 0, height = 160 }){
    console.log(name, age, height)
}
  • 使用
info2({name:'2'})
  • 打印结果
2 0 160

解构赋值设置默认值(解决什么都不传递报错问题) ​

  1. 给拆包后的key设置默认值，也是给对象设置默认值得一种方式
  2. 解决上面案例中什么值都不传递报错问题
js
function info3 ({ name = 'anonymous', age = 0, height = 160 } = {}) {
    console.log(name, age, height)
}
  • 使用起来和上面案例基本一致但解决了可以没有参数问题
info3()
  • 打印结果
anonymous 0 160

利用默认值做强制传参 ​

js
// 帮助函数
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;
}
  • 使用
js
// 测试函数
// 输出: 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 );

es5 常见的几种函数值传递 ​

es5 没有 es6 提供的那写api 在过去来说使用上更多需要 配合各种其他来达到效果使用 '||' 和 '&&' 符号

'||' 是一个短路操作符，也就是说只要有1个符合条件后面就不执行，也就是说符合条件是'true'即可

举例说明: 1 || 0 或者 0 || 1 两个返回的都是1，但如果多个都是'false' 则返回最后一个值，例如 ""||0 返回的是0。有点类似 if(true){}else{}

'&&' 也是一个短路操作符，只要有1个符合条件后面就不执行，符合条件的条件是'false',

举例说明: 1 && 0 或者 0 && 1 两个返回的都是0，但如果多个都是'true' 则返回最后一个值，例如 2&&1 返回的是1。有点类似 if(执行前置条件()){ '执行后置条件' }

利用'||'特性传值 ​

getParam(0) // default 注意:0转成布尔类型为false 有漏洞

js
function getParam(param){
        let a = param || 'default';
        return a;
    }

    // 返回默认值
    setParam1 = getParam();
    // 返回指定值
    setParam2 = getParam('指定内容');
    console.log(setParam1)
    console.log(setParam2)
  • 打印结果
default
指定内容

解决'||' 这种形式漏洞 ​

js
//解决漏洞
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

利用'&&' 特性定义回调函数参数 ​

js
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
我是测试的回调函数

利用循环华而不实写法 ​

js
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: "男"}

利用对象和'||' 和'&&' 进行配合操作(重点) ​

js
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('服务器繁忙');
        }
    });
};

arguments ​

js
function add(){
        return arguments
    }
console.log(add(10,20,30,{'name':'wang'}))
  • 打印结果
[10, 20, 30, {'name':'wang'}]

Released under the MIT License.

Copyright © 2023-present wcy