什么是arguments?
arguments是一个类数组对象(长的像一个数组,本质上是一个对象)
function foo(a, b, c) {
console.log(a, b, c);
console.log(arguments);
}
foo(1, 2, 3, 4, 5)
我们定义了一个函数,该函数有三个形参,而我们调用该函数时却给它传入了五个实参,这些参数都会被保存在arguments中
arguments中常用的方法
function foo(a, b, c) {
console.log(a, b, c);
console.log(arguments);
//1-可以像拿数组元素那样拿到对应的参数
console.log(arguments[2]);
//2-可以查看实参的长度
console.log(arguments.length);
//3-可以查看当前的arguments属于哪个函数
console.log(arguments.callee);
}
foo(1, 2, 3, 4, 5)
为什么说它是一个类数组呢?
array-like说明它不是一个数组类型,而是一个对象类型
但是它却有数组的一些特性,比如length,比如可以通过index索引来访问
但是它却没有数组的一些方法,如forEach,map等
把arguments转为数组
function foo(a, b, c) {
console.log(a, b, c);
console.log(arguments);
//1-可以像拿数组元素那样拿到对应的参数
console.log(arguments[2]);
//2-可以查看实参的长度
console.log(arguments.length);
//3-可以查看当前的arguments属于哪个函数
console.log(arguments.callee);
var newArg = Array.prototype.slice.call(arguments)
console.log(newArg);
var newArg2 = [].slice.call(arguments);
console.log(newArg2);
var newArg3 = [...arguments];
console.log(newArg3);
var newArg4 = Array.from(arguments);
console.log(newArg4);
}
foo(1, 2, 3, 4, 5)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function foo(a, b, c) {
console.log(a, b, c);
console.log(arguments);
//1-可以像拿数组元素那样拿到对应的参数
console.log(arguments[2]);
//2-可以查看实参的长度
console.log(arguments.length);
//3-可以查看当前的arguments属于哪个函数
console.log(arguments.callee);
var newArg = Array.prototype.slice.call(arguments)
console.log(newArg);
var newArg2 = [].slice.call(arguments);
console.log(newArg2);
var newArg3 = [...arguments];
console.log(newArg3);
var newArg4 = Array.from(arguments);
console.log(newArg4);
}
foo(1, 2, 3, 4, 5)
//模拟array中的slice实现
Array.prototype.hyslice = function (start, end) {
console.log(this);
var arr = this;
var newArry = [];
var start = start || 0
var end = arr.length || end
for(var i = start; i < end; i++){
newArry.push(arr[i]);
}
return newArry;
}
var newArry2 = Array.prototype.hyslice.call(['a', 'b', 'c']);
console.log(newArry2);
</script>
</body>
</html>
箭头函数与arguments
箭头函数中是没有arguments的,如果非要在箭头函数中打印argumenets则会去上一次作用域找。
在node中全局存在arguments,而浏览器全局中不存在arguments
下列代码中箭头函数会去上一层作用域即foo中查找arguments;
function foo(){
bar = () => {
console.log(arguments);
}
return bar;
}
var fn = foo(1, 2, 3);
fn()
而在浏览器中
function foo(){
bar = () => {
console.log(arguments);
}
return bar;
}
var fn = foo(1, 2, 3);
fn()
bar2 = () => {
console.log(arguments);
}
bar2()
如果箭头函数想要拿到多余的参数可以通过剩余参数拿到
foo = (a, b, ...args) => {
console.log(args);
}
foo(1, 2, 3, 4, 5)