普通的程序调试一般采用输出的方法，直观。

需求

- web应用中需要以打印的方式调试JS代码，需要一个方法：

- 传入以至多个变量。

- 依次输出每个变量的类型和值。

- 已知弹出框和控制台记录日志语句如下：

alert("str1"[, "str2", ... , "strn"]);
console.log("str1"[, "str2", ... , "strn"]);

封装

• 输入：变量+
• 输出：变量列表的类型和值信息

function logger(arr) {
	if ("[object Array]" === Object.prototype.toString.call(arr)) {
		// arr是数组。遍历每个元素，打印信息。
		var str = "";
		var len = arr.length - 1;
		for (var i = 0; i < len; i++) {
			var element = arr[i];
			str = str + typeof(element) + " " + element + ", ";
		}
		var element = arr[len];
		str = str + typeof(element) + " " + element + ";";
		console.log(str);
	} else {
		// 不是数组，直接打印信息。
		console.log(typeof(arr) + " " + arr + ";")
	}
}

测试和输出如下：

logger(123);
logger([213, 34]);
number 123;
number 213, number 34;

优化

调用方式不够方便，引入`arguments`，进行优化。

[JS中的arguments](https://blog.csdn.net/u012860063/article/details/53871351)

function testArgs() {
	console.log(arguments);
	for (let i = 0; i < arguments.length; i++) {
		let arg = arguments[i];
		console.log(i, Object.prototype.toString.call(arg), arg);
	}
}
// test
testArgs(1, "asd", false, [1,2,3,4,5], {name:"wyj", age:22});

结果如图：

tips

• arguments.length实参个数
• 方法名.length方法形参个数

学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！