JavaScript 学习-22.函数参数(arguments)

2022-05-24 16:35:27 阅读：173 来源： 互联网

标签：func2 func1 console 函数 JavaScript 函数参数参数 arguments

前言

JavaScript 函数对参数的值(arguments)没有进行任何的检查。
JavaScript 函数参数与大多数其他语言的函数参数的区别在于：它不会关注有多少个参数被传递，不关注传递的参数的数据类型。

函数未定义参数

如果一个函数为定义参数，但是函数内部却用到了2个参数a和b，那么在调用函数的时候，可以给a和b传参。

function func() {
    console.log(a);
    console.log(b);
    var y = 'hello' + a;
    console.log(y)
}

func(a='world', b='x');

虽然上面这种写法不会报错，但是我们一般不这样写，这样的代码很难维护。

函数显式参数与隐藏参数(arguments)

显示参数就是在定义函数的时候，在括号里面传的参数，如functionName(parameter1, parameter2, parameter3),这里的parameter1，parameter2，parameter3就是3个显示参数

function func1(x, y ,z) {
    console.log(x, y, z);
    // do something ....
}

函数隐藏参数(arguments)在函数调用时传递给函数真正的值。

func1('a', 'b', 'c');

默认参数 undefined

参数规则:

JavaScript 函数定义时参数没有指定数据类型。
JavaScript 函数对隐藏参数(arguments)没有进行检测。
JavaScript 函数对隐藏参数(arguments)的个数没有进行检测。

如果函数在调用时未提供隐式参数，参数会默认设置为： undefined

function func1(x, y ,z) {
    console.log(x, y, z);
    // do something ....
}
func1();  // undefined undefined undefined
func1('a');  // a undefined undefined
func1('a', 'b');  // a b undefined
func1('a', 'b', 'c');  // a b c
func1('a', 'b', 'c', 'd');  // a b c

在调用函数，实际传参时不会对参数个数检测，如果传参个数少于函数定义的参数，那么其它的参数默认值是undefined。

设置参数默认值

(ES5)定义函数参数的时候，可以给参数设置一个默认值

function func1(x, y, z) {
    y = y || 0;
    z = z || 0;
    console.log(x, y, z);
    // do something ....
}

func1();      // undefined 0 0
func1('a');   // a 0 0
func1('a', 'b');  // a b 0
func1('a', 'b', 'c'); // a b c

ES6 支持函数可以自带默认参数

function func1(x, y=0, z=0) {
    console.log(x, y, z);
    // do something ....
}

func1();      // undefined 0 0
func1('a');   // a 0 0
func1('a', 'b');  // a b 0
func1('a', 'b', 'c'); // a b c

很显然ES6 这种给函数参数设置默认值的语法，更符合我们的习惯。

arguments 对象

关键字arguments ，它只在函数内部起作用，利用arguments ，你可以获得调用者传入的所有参数。

也就是说，即使函数不定义任何参数，还是可以拿到参数的值

// 函数不定义任何参数
function func2() {
    console.log(arguments);
    // Array.from 转 数组
    console.log(Array.from(arguments));
    // do something ....
}

func2();      // []
func2('a');   // ['a']
func2('a', 'b');  // ['a', 'b']
func2('a', 'b', 'c'); // ['a', 'b', 'c']

arguments 是在函数内部获取传入的所有参数，有个length属性，获取参数的个数，它可以看成一个数组，如果想转真正的数组，可以用Array.from()

// 函数不定义任何参数
function func2() {
    console.log(arguments.length);
    // do something ....
}

func2();      // 0
func2('a');   // 1
func2('a', 'b');  // 2
func2('a', 'b', 'c'); // 3

当我们在函数里面定义了3个参数：x, y, z。调用函数的时候只能按顺序传参

function func2(x, y, z) {
    console.log(x, y, z);
    // do something ....
}

// 如果只传2个参数，只想给到x和z
func2(x='a', z='c');  // a c undefined

虽然在调用的时候指定了z='c',最终会发现还是按顺序给到了参数y的值。
为了解决这种情况，可以通过 arguments 判断传入参数的个数,于是会看到这种写法

function func2(x, y, z) {
    if (arguments.length === 2) {
		// 实际拿到的参数是x和y，z为undefined
		z = y; // 把y赋给z
		y = null; // y变为默认值
	}
    console.log(x, y, z);
    // do something ....
}

// 如果只传2个参数，只想给到x和z
func2('a', 'c');  // a null c
func2('a', 'b', 'c');  // a b c

还有一种场景，当我们函数定义了2个参数，但是传参给了5个，此时arguments可以拿到多余的参数

function fun3(x, y) {
    var i, rest = [];
    if (arguments.length > 2) {
        for (i = 2; i<arguments.length; i++) {
            rest.push(arguments[i]);
        }
    }
    console.log(x, y, rest);

}

fun3('a', 'b'); // a b []
fun3('a', 'b', 'c', 'd', 'e'); //a b ['c', 'd', 'e']

在这里可以通过arguments 拿到多余的参数，很显然这种方式并不优雅，于是ES6标准引入了rest参数。

rest 参数

ES6标准引入了rest参数，就是为了解决函数定义的时候传不定长参数，接收剩余参数的问题.
这里rest参数是一个真正的数组，...可以将一个数组转为用逗号分隔的参数序列，于是在定义函数的时候可以接收不定长传参。

function fun3(x, y, ...rest) {
    console.log(x, y, rest);
}

fun3('a', 'b'); // a b []
fun3('a', 'b', 'c', 'd', 'e'); //a b ['c', 'd', 'e']

需注意: rest参数只能写在最后，前面用... 标识，从运行结果可知，传入的参数先绑定x 、y ，多余的参数以数组传给变量rest ，所以，不再需要arguments 我们就获取了全部参数。

标签：func2,func1,console,函数,JavaScript,函数参数,参数,arguments
来源： https://www.cnblogs.com/yoyoketang/p/16305982.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9