Home Web Front-end JS Tutorial How to use arguments object in JavaScript? (Usage introduction)

How to use arguments object in JavaScript? (Usage introduction)

Jan 19, 2019 am 10:44 AM

The content of this article is about how to use the arguments object in JavaScript? (Usage introduction), it has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

arguments is an array-like object that corresponds to the arguments passed to the function.

Syntax

arguments
Copy after login

Description

arguments objects are local variables available in all functions. You can use the arguments object to reference a function's arguments within a function. This object contains an entry for each parameter passed to the function, with the index of the first entry starting at 0. For example, if a function is passed three arguments, you can refer to them as follows:

arguments[0]
arguments[1]
arguments[2]
Copy after login

Parameters can also be set:

arguments[1] = 'new value';
Copy after login

The arguments object is not an Array . It is similar to an array, but does not have any array properties except length. For example, it doesn't have a pop method. But it can be converted to a real array::

let args = Array.prototype.slice.call(arguments); 
let args = [].slice.call(arguments);
Copy after login

You can also use the Array.from() method or spread operator to convert arguments to a real array:

let args = Array.from(arguments);
let args = [...arguments];
Copy after login

Pair parameters Using slices will prevent optimizations in some JavaScript engines (such as the V8 engine).

If you care about them, try constructing a new array by looping over the arguments object.

Another approach is to use the ignored/despised/disdained,/despised Array constructor as a function:

let args = (
arguments.length === 1 ? [arguments[0]] : 
Array.apply(null, arguments)
);
Copy after login

If Array generics are available, the following code can be used as an alternative

var args = Array.slice(arguments);
Copy after login

The arguments object is only valid inside the function. Calling the arguments object outside the function will cause an error.

typeof of arguments returns 'object'.

console.log(typeof arguments); // 'object'

You can use the index to determine the type of each argument.

console.log(typeof arguments[0]); 
//这将返回单个参数的typeof。
Copy after login

If you call a function with more arguments than it explicitly declares, you can use the arguments object. This technique is useful for functions with a variable number of parameters. You can use arguments.length to get the number of arguments, and then use the arguments object to process each argument. (To get the number of parameters for a function signature, use the Function.length property.)

Properties

arguments.callee
// 指向当前执行的函数。
arguments.caller 
// 指向调用当前函数的函数。
arguments.length
// 指向传递给当前函数的参数数量。
Copy after login

Example

Define a function to concatenate several strings

This example defines a function to concatenate strings. The only officially declared argument to this function is a string, which specifies a character as the join point to concatenate the strings. The function is defined as follows:

function myConcat(separator) {
  var args = Array.prototype.slice.call(arguments, 1);  
  return args.join(separator);
}
Copy after login

You can pass any number of arguments to this function, and the function will create a list with each argument as an entry.

myConcat(", ", "red", "orange", "blue");
// returns "red, orange, blue"
myConcat("; ", "elephant", "giraffe", "lion", "cheetah");
// returns "elephant; giraffe; lion; cheetah"
myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley");
// returns "sage. basil. oregano. pepper. parsley"
Copy after login

Define a method to create an HTML list

This example defines a function to create an HTML list from a string. The only officially declared argument to this function is a character. When the argument is "u", an unordered list (a list of items) is created; when the argument is "o", an ordered list (a numbered list) is created. The function is defined as follows:

function list(type) {
  var result = "<" + type + "l><li>";
  var args = Array.prototype.slice.call(arguments, 1);
  result += args.join("</li><li>");
  result += "</li></" + type + "l>"; // end list
  return result;
}
Copy after login

You can pass any number of arguments to this function, and the function will add each argument as an entry to a list of the type specified by the first argument.

var listHTML = list("u", "One", "Two", "Three");
/* listHTML is:
"<ul><li>One</li><li>Two</li><li>Three</li></ul>"
*/
Copy after login

Note

arrow functions in ES6 do not have their own arguments objects, but in most cases, restThe parameter can give a solution:

let a;
const fn = (...rest) => Array.prototype.slice.call(rest, 1);
a = fn(1, 2); // [2]
Copy after login

The above is the detailed content of How to use arguments object in JavaScript? (Usage introduction). For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

Is JavaScript hard to learn? Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to implement panel drag and drop adjustment function similar to VSCode in front-end development? How to implement panel drag and drop adjustment function similar to VSCode in front-end development? Apr 04, 2025 pm 02:06 PM

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...

See all articles