深入JavaScript高级函数柯里化认识arguments

最新推荐文章于 2024-08-14 15:45:18 发布

做李的英雄

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量266

点赞数

分类专栏：深入JavaScript高级文章标签： javascript

本文链接：https://blog.csdn.net/m0_52336986/article/details/121734219

版权

深入JavaScript高级专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文探讨JavaScript中的arguments对象，它是函数实参超过形参时的存储容器，具有数组特性但缺少内置方法。通过实例和Array.prototype.slice等方法展示如何操作和转换arguments。同时介绍了箭头函数与arguments的交互规则。

摘要由CSDN通过智能技术生成

什么是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)

在这里插入图片描述

做李的英雄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深入JavaScript高级函数柯里化认识arguments

什么是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) {
复制链接

扫一扫