Detailed usage and explanation of eval function in Javascript_javascript skills

JavaScript has many little tricks to make programming easier. One of them is the eval() function, which treats a string as a JavaScript expression and executes it. The following is its description
Eval function
Function: first interpret the Javascript code, and then execute it
Usage: Eval(codeString)
codeString is a string containing Javascript statements, used after eval Compiled by Javascript engine.

A small example:

var the_unevaled_answer = "2 3"; var the_evaled_answer = eval("2 3"); alert("the un-evaled answer is " the_unevaled_answer " and the evaled answer is " the_evaled_answer);
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

If you run this eval program, you will see that the string "2 3" is actually executed in JavaScript. So when you set the value of the_evaled_answer to eval("2 3"), JavaScript will understand and return the sum of 2 and 3 to the_evaled_answer.
This may seem a bit silly, but it can actually do very interesting things. For example, using eval you can create functions directly based on user input. This allows the program to change itself based on time or user input, and by applying inferences you can get amazing results.
In practice, eval is rarely used, but maybe you have seen someone using eval to get hard-to-index objects. One of the problems with the Document Object Model (DOM) is that sometimes it's a pain to get the object you ask for. For example, here is a function that asks the user which image to transform: To transform which image you can use the following function:

Copy code The code is as follows:

function swapOne()
{
var the_image = prompt("change parrot or cheese","");
var the_image_object;
if (the_image == "parrot")
{
the_image_object = window.document.parrot;
}
else
{
the_image_object = window.document.cheese;
}
the_image_object.src = "ant.gif";
}

along with these image tags:




Please pay attention to a few lines like this:

the_image_object = window.document.parrot;
It assigns an image object to a variable. Although it looks a bit strange, it is grammatically correct. But what happens when you have 100 images instead of two? You have to write a lot of if-then-else statements, if only it could be like this:

Copy code Code As follows:

function swapTwo()
{
var the_image = prompt("change parrot or cheese","");
window.document.the_image.src = " ant.gif";
}

Unfortunately, JavaScript will look for an image named the_image instead of "cheese" or "parrot" as you expected, so you get Error message: "Never heard of an object named the_image".
Fortunately, eval can help you get the object you want.

Copy code The code is as follows:

function simpleSwap()
{
var the_image = prompt("change parrot or cheese","");
var the_image_name = "window.document." the_image;
var the_image_object = eval(the_image_name);
the_image_object.src = "ant.gif";
}

If the user fills in "parrot" in the prompt box, a string is created in the second line, window.document.parrot. Then the third line containing eval means: "Give me the object window.document .parrot" - that is, the image object you want. Once you obtain the image object, you can set its src attribute to ant.gif. A little scared? No need. It's actually quite useful and people use it a lot.