Shulou(Shulou.com)06/03 Report--

Today, I would like to talk to you about the JavaScript self-test list, many people may not know much about it. In order to make you understand better, the editor has summarized the following for you. I hope you can get something according to this article.

Next, start sharing the contents of the self-test list.

One, Hello World!

1. Script introduction mode

There are two ways to introduce JavaScript scripts:

Tag insertion script

The label src sets the script address.

2. Script tag attribute

Tags have the following common attributes:

2.1 src

Src: specify the URI of the external script. If the src attribute is set, the script tag content will be ignored.

2.2 type

Type: specifies the language in which the script is referenced, with attribute values of type MIME, including text/javascript, text/ecmascript, application/javascript, and application/ecmascript. If this attribute is not defined, the script is treated as JavaScript.

ES6 has added the attribute value module, and the code will be treated as a JavaScript module.

2.3 async

Async stipulates that once the script is available, it will be executed asynchronously. Note: the async attribute applies only to external scripts ("only when using the src attribute"). There are several ways to execute external scripts: if async= "async": the script is executed asynchronously relative to the rest of the page (when the page continues to parse, the script will be executed); if async is not used and defer= "defer": the script will be executed when the page finishes parsing; if neither async nor defer is used: read and execute the script immediately before the browser continues to parse the page

2.4 defer

The defer attribute specifies whether the execution of the script is delayed until the page loads.

If your script does not change the content of the document, you can add the defer attribute to the tag to speed up processing the document. Because the browser knows that it will be able to safely read the rest of the document without executing the script, it will defer the interpretation of the script until the document has been displayed to the user.

For more information, you can read the "MDN chapter".

II. Code structure

1. Statement

A statement is the syntax structure and command of an action. For example, alert ('Hello, Worldwide') This can be used to display the message statement.

two。 semicolon

When there is a branch character, the semicolon can be omitted in most cases. But not all of them, such as:

Alert (3 + 1 + 2)

It is recommended that newcomers should not omit the semicolon.

3. Annotation

"single-line comments begin with two forward slash characters / /. "

/ / comment text console.log ("leo")

Multiline comments begin with a forward slash and an asterisk and end with an asterisk and a forward slash. "

/ * this is a multiline comment. Comment on the second line. * / console.log ("leo")

Third, the modern model, "use strict"

1. Action

JavaScript's strict mode is a way to use restricted JavaScript to implicitly exit "hasty mode".

The "use strict" directive converts the browser engine to "modern" mode, changing the behavior of some built-in features.

two。 Use

Strict mode can be enabled by adding "use strict"; declaration at the beginning of the script file / function. Turn on strict mode globally:

/ / index.js "use strict"; const v = "Hi! I'm a strict mode script!"

Strict mode is enabled in the function:

/ / index.js function strict () {'use strict'; function nested () {return "And so am I!";} return "Hi! I'm a strict mode function!" + nested ();}

3. Pay attention

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

"use strict" needs to be defined at the top of the script (except within the function), otherwise strict mode may not be enabled.

Once you enter strict mode, you cannot turn off strict mode.

4. Experience

When "use strict" is enabled, assigning values to undefined elements throws an exception:

"use strict"; leo = 17; / / Uncaught ReferenceError: leo is not defined

When "use strict" is enabled, an exception is thrown when you try to delete an attribute that cannot be deleted:

"use strict"; delete Object.prototype; / / Uncaught TypeError: Cannot delete property 'prototype' of function Object () {[native code]}

For more information, you can read the "MDN strict Mode Chapter".

IV. Variables

1. Introduction

A variable is a "named store" of data.

two。 Use

Currently, three keywords can be used to define variables: var / let / const. The difference between the three can be read "let and const commands".

Let name = "leo"; let name = "leo", age, addr; let name = "leo", age = 27, addr = "fujian"

3. Naming suggestion

There are two restrictions on variable naming:

Variable names must contain only "letters, numbers, symbols" $and _.

The first character must be non-numeric. There are also some suggestions for variable naming:

Constants are generally used in uppercase, such as const PI = 3.141592

Use easy-to-read names such as userName or shoppingCart.

4. Pay attention

JavaScript variable names are case-sensitive, for example, variables leo and Leo are different

JavaScript variable names allow non-English letters, but are not recommended, such as let safe = "leo"

Avoid using acronyms such as a, b, c.

5. Data type

JavaScript is a "weakly typed" or "dynamic language". This means that you do not have to declare the type of the variable in advance, the type will be determined automatically while the program is running. This also means that you can use the same variable to hold different types of data:

Var foo = 42; / / foo is a Number now foo = "bar"; / / foo is a String now foo = true; / / foo is a Boolean now

For more information, you can read "MDN JavaScript data types and data structures".

1. Eight data types

The first seven are basic data types, also known as primitive types (the value itself cannot be changed), while object is a complex data type. The eight data types are:

Number is used for any type of number: integer or floating-point number, an integer in the range of ±2.

Bigint is used for integers of any length.

String is used for strings: a string can contain one or more characters, so there is no separate single character type.

Boolean is used for true and false.

Null is used for unknown values-- independent types with only one null value.

Undefined is used for undefined values-- independent types with only one undefined value.

Symbol is used for unique identifiers.

Object is used for more complex data structures. "each type is described in more detail later. "

two。 Detection data type

Check through the typeof operator:

There are two forms: typeof x or typeof (x).

Returns the type name as a string, such as "string".

Typeof null returns "object"-- this is an error in the JavaScript programming language, but it's not really an object.

Typeof "leo" / / "string" typeof undefined / / "undefined" typeof 0 / / "number" typeof NaN / / "number" typeof 10n / / "bigint" typeof true / / "boolean" typeof Symbol ("id") / / "symbol" typeof / / "object" typeof Math / / "object" (1) Math is a built-in object that provides mathematical operations. Typeof null / / "object" (2) an error in the JavaScript language, null is not an object. Null has its own type, which is a special value. Typeof alert / / "function" (3) alert is a function in JavaScript.

VI. Type conversion

JavaScript variables can be converted to new variables or other data types:

By using the JavaScript function

Automatic conversion through JavaScript itself

1. String conversion

Convert "other types of data (any type of numbers, letters, Boolean values, objects) to String type through the global method String ():"

The String (123) / / "123" / / Number method toString () / toExponential () / toFixed () / toPrecision () has the same effect. The String (false); / / "false" / / Boolean method toString () has the same effect. String (new Date ()); / / "Sun Jun 07 2020 21:44:20 GMT+0800 (China Standard time)" / / Date method toString () has the same effect. String (leo)

two。 Numerical conversion

You can convert other types of data to Number types in the following ways:

Unary operator +

Const age = + "22"; / / 22

Number method

Const age = Number ("22"); / 22 Number.parseFloat ("22"); / / 22 Number.parseInt ("22"); / / 22

Convert to Number type in other ways

/ / Boolean value Number (false) / / returns 0 Number (true) / / returns 1 / / date const date = new Date (); Number (date); / / returns 1591537858154 date.getTime (); / / returns 1591537858154 with the same effect. / / automatically convert 5 + null / / return 5null to 0 "5" + null / / return "5null" null to "null"5" + 1 / / return "51" 1 to "1" 5 "- 1 / / return 4" 5 "to 5"

3. Boolean conversion

The conversion rules are as follows:

Values that are intuitively "empty" such as 0, empty string, null, undefined, and NaN become false.

The other values become true.

Boolean (1); / / true Boolean (0); / / false Boolean ("hello"); / / true Boolean (""); / / false Boolean ("0"); / / true Boolean (""); / / blank, also true (any non-empty string is true)

4. Summary

Image2.png

7. Operator

1. Operator concept

Common operators such as addition +, subtraction -, multiplication *, and division /, for example, introduce some concepts:

Let sum = 1 + 2; let age = + 18

Where:

In addition operation 1 + 2, 1 and 2 are two operands, left Operand 1 and right Operand 2, that is, "Operand is the object of the operator." "

The 1 + 2 expression contains two operands, so the plus sign in the expression is also called the "binary operator". "

If the plus sign in + 18 corresponds to only one Operand, it is a unary operator.

2. + sign operator

Let msg = "hello" + "leo"; / / "hello leo" let total = 10 + 20; / / 30 let text1 = "1" + "2"; / / "12" let text2 = "1" + 2; / / "12" let text3 = 1 + "2"; / / "12" let text4 = 1 + 2 + "3"; / / "33" let num = + text1; / / 12 convert to Number type

3. Operator precedence

The priority of the operator determines the order in which the operations in the expression are executed, and the operator with high priority is executed first. The following table ranks all operators in order of precedence from high (20) to low (1).

Precedence operation type association operator 20 parentheses nswap a (unrelated) (… ) 19 members visit from left to right. . ... Member access to be calculated from left to right. [... ] new (with parameter list) n/anew … (… ) function calls from left to right. (… ) optional chain (Optional chaining) from left to right? .18new (no parameter list) from right to left new... 17 Post increment (operator at the end) n Universe a … + + post decrement (operator after). 16 Logic is not from right to left! Bit by bit is not ~... Unary addition +... Unary subtraction -... Pre-increment + +... Pre-decreasing--... Typeoftypeof... Voidvoid... Deletedelete... Awaitawait... 15 powers from right to left. * * … 14 multiplication from left to right. * … Division... /... Take the mold... %... 13 addition from left to right. +... Subtraction... -... Move left bit by bit from left to right. >... Move to the right unsigned... > > > 11 is less than from left to right.

< …小于等于… …大于等于… >

=... In... In... Instanceof... Instanceof... The equal sign 10 is from left to right. = =... Non-equal sign... ! =... Full equal sign... = =... Non-equal sign... ! = = 9 bit by bit and from left to right. & … 8 different by position or from left to right. ^... 7 by bit or from left to right. | |... 6 Logic and from left to right. & & … 5 logic or from left to right. |... 4 conditional operators from right to left. ?... :... 3 assignment from right to left. =. + =. -=. * =. / =. % =. =. > > & =. ^ =. | =... 2yield from right to left yield... Yield*yield*... 1 the unfold operator nbank a... ... 0 comma from left to right. ,... 3 > 2 & & 2 > 1 / / return true 3 > 2 > 1 / returns false, because 3 > 2 is true, and true > 1 is false / / with parentheses can make it clearer: (3 > 2) > 1

8. Comparison of values

1. Common comparison

The comparison of values in JS is mathematically very typed:

Greater than / less than / greater than or equal to: a > b / aqb / a 0; / false 1 null > = 0; / / true 2 null = = 0; / / false 3 null

< 1; // true 4 需要注意：null == 0; // false 这里是因为：undefined 和 null 在相等性检查 == 中「不会进行任何的类型转换」，它们有自己独立的比较规则，所以除了它们之间互等外，不会等于任何其他的值。 undefined >

0; / / false 1 undefined > 1; / / false 2 undefined = = 0; / / false 3

Lines 1 and 2 return false because undefined is converted to NaN in the comparison, and NaN is a special numeric value that returns false when compared to any value. Line 3 returns false because this is an equality check, while undefined is only equal to null and not to other values.

9. Alert / prompt / confirm

1. Alert

Displays a warning dialog box with the specified text and an OK button. Note: pop up the modal box and pause the script until the user clicks the OK button. "

/ / Syntax window.alert (message); alert (message); / / sample alert ('hello leaking'); message is the text string to be displayed in the dialog box, which is converted to a string if other types of values are passed in.

2. Prompt

Displays a dialog box that contains a text message that prompts the user for text. Note: pop up the modal box and pause the script until the user clicks the OK button. "when you click OK to return the text, click cancel or press the Esc key to return to null. The syntax is as follows:

Let result = window.prompt (text, value)

Result is a string used to store user input text, or null.

A string used by text to prompt the user for text. If there is no prompt, this parameter can be omitted.

The default value in the value text input box, which can also be omitted. However, in Internet Explorer 7 and 8, omitting this parameter causes the default value of "undefined" to appear in the input box.

3. Confirm

The Window.confirm () method displays a modal dialog box with an optional message and two buttons (OK and cancel). Note: pop up the modal box and pause the script until the user clicks the OK button. "the syntax is as follows:

Let result = window.confirm (message)

Message is an optional string to display in the dialog box.

Result is a Boolean value indicating whether to choose to confirm or cancel (true stands for OK).

Conditional operators: if and'?'

1. If statement

When the if statement is a conditional expression, it converts the expression to a Boolean value and executes the code when it is truthy. Conversion rules such as:

The number 0, the empty string "", null, undefined, and NaN are all converted to false. Because they are called "falsy" values.

Other values are converted to true, so they are called "truthy".

two。 Ternary operator

The conditional (ternary) operator is the only operator that JavaScript has that uses three operands. A condition is followed by a question mark (?). If the condition is truthy, the expression An after the question mark will be executed; expression A will be followed by a colon (:), and if the condition is falsy, the expression B after the colon will be executed. This operator is often used as a short form of [if], a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement. Syntax:

Condition? ExprIfTrue: exprIfFalse

The result of the condition calculation is used as an expression for the condition.

ExprIfTrue if the expression condition evaluates to truthy (which is equal to true or can be converted to true), then the expression exprIfTrue will be evaluated.

ExprIfFalse if the expression condition evaluates to falsy (which can be converted to false), then the expression exprIfFalse will be executed. Example:

Let getUser = function (name) {return name = = 'leo'? 'hello levies': 'unknow user';} / / can be abbreviated as follows: let getUser = name = > name = =' leo'? 'hello levies': 'unknow user'; getUser (' leo'); / / "hello leo!" GetUser ('pingan'); / / "unknow user"

Logical operators

You can read "MDN logical operators" for details.

1. Operator introduction

The logical operator is shown in the following table (where _ expr_ can be of any type, not necessarily a Boolean):

Operator syntax states logic and AND (& &) _ expr1_ & & _ expr2_ returns expr**2**; if expr**1** is convertible to true otherwise expr**1** is returned. Logical or, OR (| |) _ expr1_ | | _ expr2_ returns expr**1**; if expr**1** can be converted to true, otherwise, expr**2**. Logical no, NOT (!)! _ expr_ returns false; if expr can be converted to true, otherwise, true.

If a value can be converted to true, then this value is called truthy, and if it can be converted to false, then this value is called falsy. The expressions that will be converted to false are:

Null

NaN

0

Empty string ("" or''or '````)

Undefined . Although the & & and | | operators can use operands that are not Boolean, they can still be considered Boolean operators because their return values can always be converted to Boolean values. If you want to explicitly convert their return values (or expressions) to Boolean values, use the double non-operator (that is,!) or the Boolean constructor. There are three logical operators in JavaScript: | | (or), & & (and),! (not).

two。 Operator example

Logic and (& &) return true only if all conditions are true, otherwise false.

A1 = true & & true / / t & & t returns true a2 = true & & false / / t & & f returns false a3 = false & & true / / f & & t returns false a4 = false & (3 = = 4) / f & & f returns false a5 = "Cat" & & "Dog" / / t & t returns "Dog" a6 = false & Cat / / f & f & t & t returns false a7 = "Cat" & & false / / t & & f returns false A8 =''& false / / f & & f returns "" A9 = false & &'/ / f & & f returns false

Logical or (| |) return true if one of all conditions is true, otherwise it is false.

O1 = true | | true / / t | t returns true o2 = false | | true / / f | t returns true o3 = true | | false / / t | f returns true o4 = false | | (3 = = 4) / / f | f returns false o5 = "Cat" | | "Dog" / / t | t returns "Cat" o6 = false | "Cat" / / f | t returns "Cat" o7 = "Cat" | | false | / / t | | f returns "Cat" o8 =''| | false / / f | | f returns false o9 = false | |'/ / f | | f returns ""

Logic is not (!)

N1 =! true /! t returns false N2 =! false /! F returns true n3 =!'/ /! f returns true N4 =! 'Cat' /! t returns false

Double unlucky (!)

N1 =! true / /!! truthy returns true N2 =!! {} /!! truthy returns true: any object belongs to truthy. N3 =! (new Boolean (false)) / /... Even Boolean objects that. Valueof () returns false! N4 =! false / /!! falsy returns false N5 =! "/ /!! falsy returns false N6 =!! Boolean (false) / /!! falsy returns false

3. Boolean conversion rules

Convert & & to | |

Condi1 & & confi2 / / convert to! (! condi1 | |! condi2)

Convert | to & &

Condi1 | | condi2 / / convert to! (! condi1 & &! condi2)

4. Short circuit value

Because logical expressions operate from left to right, you can also use the following rules for "short circuit" calculations:

The result of (some falsy expression) & (_ expr) _ short circuit calculation is false.

(some truthy expression) | | _ (expr) _ the result of short circuit calculation is true. A short circuit means that the expr part of the above expression "will not be executed", so any side effects of expr will not take effect (for example, if expr were a function call, this call would not occur). The reason for this is that the value of the entire expression has been determined after the first Operand has been calculated. Look at an example:

Function A () {console.log ('called A'); return false;} function B () {console.log (' called B'); return true;} console.log (A () & & B ()); / / logs "called A" due to the function call, / / then logs false (which is the resulting value of the operator) console.log (B () | | A ()) / / logs "called B" due to the function call, / / then logs true (which is the resulting value of the operator)

5. Be careful

Compared with the priority of operation & & or operation | | is higher. So the code a & b | | c & d is exactly the same as the expression with parentheses: (a & b) | | (c & d).

Cycle: while and for

1. While cycle

You can read "MDN while" for details. The while statement can loop through a specified piece of code if a conditional expression is true until the loop ends when that expression is not true. Such as:

Var n = 0; var x = 0; while (n

< 3) { n++; x += n; } 当循环体为单行时，可以不写大括号： let i = 3; while(i) console.log(i --); 2. do...while 循环 详细可以阅读《MDN do...while》 。do...while 语句创建一个执行指定语句的循环，直到condition值为 false。在执行statement 后检测condition，所以指定的statement至少执行一次。如： var result = ''; var i = 0; do { i += 1; result += i + ' '; } while (i < 5); 3. for 循环 详细可以阅读《MDN for》 。for 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个块语句）。语法如： for (begin; condition; step) { // ……循环体…… } 示例： for (let i = 0; i < 3; i++) { console.log(i); } 描述： begini = 0进入循环时执行一次。conditioni < 3在每次循环迭代之前检查，如果为 false，停止循环。body（循环体）alert(i)条件为真时，重复运行。stepi++在每次循环体迭代后执行。 4. 可选的 for 表达式 for 语句头部圆括号中的所有三个表达式都是可选的。 不指定表达式中初始化块 var i = 0; for (; i < 3; i++) { console.log(i); } 不指定表达式中条件块，这就必须要求在循环体中结束循环，否则会出现死循环 for (var i = 0;; i++) { console.log(i); if (i >

3) break;}

You do not specify all expressions, and you also need to specify conditions in the body of the loop to end the loop.

Var I = 0; for (;;) {if (I > 3) break; console.log (I); iTunes;}

5. Break statement

You can read "MDN break" for details. The break statement aborts the current loop, switch statement, or label statement, and transfers the program control flow to the statement immediately following the aborted statement. In the while statement:

Function testBreak (x) {var I = 0; while (I)

< 6) { if (i == 3) { break; } i += 1; } return i * x; } 另外，也可以为代码块做标记，并在 break 中指定要跳过的代码块语句的 label： outer_block:{ inner_block:{ console.log ('1'); break outer_block; // breaks out of both inner_block and outer_block console.log (':-('); // skipped } console.log ('2'); // skipped } 需要注意的是：break 语句需要内嵌在它所应用的标签或代码块中，否则报错： block_1:{ console.log ('1'); break block_2; // SyntaxError: label not found } block_2:{ console.log ('2'); } 6. continue 语句 continue 声明终止当前循环或标记循环的当前迭代中的语句执行，并在下一次迭代时继续执行循环。与 break 语句的区别在于， continue 并不会终止循环的迭代，而是： 在 while 循环中，控制流跳转回条件判断； 在 for 循环中，控制流跳转到更新语句。注意：continue 也必须在对应循环内部，否则报错。 i = 0; n = 0; while (i < 5) { i++; if (i === 3) { continue; } n += i; } 带 label： var i = 0, j = 8; checkiandj: while (i < 4) { console.log("i: " + i); i += 1; checkj: while (j >

4) {console.log ("j:" + j); j-= 1; if ((j% 2) = = 0) continue checkj; console.log (j + "is odd.");} console.log ("I =" + I); console.log ("j =" + j);}

7. Be careful

"prohibit" break/continue "in'?' To the right of: "

(I > 5)? Console.log (I): continue; / / continue is not allowed in this location

This will prompt for syntax errors. Please note that the grammatical structure of a non-expression cannot match the ternary operator. Use it together. In particular, instructions such as break/continue are not allowed to be used in this way.

8. Summary

Three cycles:

While-check the conditions before each iteration.

Do..while-check the condition after each iteration.

For (;;)-- check the condition before each iteration, and you can use other settings. While (true) is usually used to construct an "infinite" loop. Such loops, like other loops, can be terminated by the break instruction. If we don't want to do anything in the current iteration and want to move on to the next iteration, we can use the continue directive. Break/continue supports pre-loop tags. Tags are the only way for break/continue to jump out of a nested loop to go outside.

XIII. "switch" sentence

The switch statement is used to match the value of the expression to the case statement and to execute the statement corresponding to the situation. The switch statement can replace multiple if judgments, providing a more descriptive way for multiple branch selections.

1. Grammar

The switch statement contains at least one case code block and an optional default code block:

Switch (expression) {case 'value1': / / do something... [break] default: / /... [break]}

When the value of the expression expression matches the value1, the code block is executed. If there is no case clause match, the default clause is selected for execution, and if there is no default clause, it is executed directly to the end of the switch.

two。 Grouping using case

Case grouping means sharing the same code with multiple case branches, such as case 1 and case 2 in the following example:

The two case under let a = 2; switch (a) {case 1: / / (*) are divided into a group of case 2: console.log ('case is 1 or 2'); break; case 3: console.log ('case is 3'); break; default: console.log ('The result is default.');} / /' case is 1 or 2 rooms'

3. Pay attention

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

"the comparison between the value of the expression expression and the case value is exactly equal:"

Function f (n) {let a; switch (n) {case 1: a = 'number'; break; case' 1: a = 'string'; break; default: a =' default'; break;} console.log (a)} f (1) / / number f ('1'); / / string

2. * * if there is no break, the program will proceed to the next * case** without any check:

Let a = 2 + 2; switch (a) {case 3: console.log ('Too small'); case 4: console.log (' Exactlyzed'); case 5: console.log ('Too big'); default: console.log ("I don't know such values");} / Exactly! / / Too big / / I don't know such values

3. * * default** above * case** "does not affect the match:"

Function f (n) {switch (n) {case 2: console.log (2); break; default: console.log ('default') break; case 1: console.log (' 1'); break;}} f (1); / / 1 f (2); / / 2 f (3); / / default

"there is a let / const double declaration problem in the switch statement:"

/ / the following definition will error function f (n) {switch (n) {case 1: let msg = 'hello'; console.log (1); break; case 2: let msg =' leo'; break; default: console.log ('default') Break;}} / / Error: Uncaught SyntaxError: Identifier 'msg' has already been declared

This is because two let are in the same block-level scope, so they are considered duplicate declarations of the same variable name. The solution is simply wrapping the case statement in parentheses:

Function f (n) {switch (n) {case 1: {/ / added brackets let msg = 'hello'; console.log (msg); break;} case 2: {let msg =' leo'; console.log (msg); break } default: console.log ('default'); break;}}

XIV. Function

Function allows a piece of code to be called multiple times to avoid duplicating code. Such as some of the built-in functions you learned earlier: alert (msg) / prompt (msg, default) / confirm (quesyion), and so on.

1. Function definition

There are two ways to define a function: function declaration and function expression.

1.1 function declaration

For example, define a simple getUser function:

Function getUser (name) {return 'hello' + name;} getUser ('leo "); / / function call

When defining a function through a function declaration, it consists of the following parts:

Function name-getUser

Function argument list-name

The JS execution statement of the function-return 'hello' + name.

1.2 function expression

Similar to declaring variables, take getUser as an example:

Let getUser = function (name) {return 'hello' + name;}

In addition, a function expression can also provide a function name and be used inside the function to refer to the function itself:

Let fun = function f (n) {return n

< 3 ? 1 : n * f(n - 1); } fun(3); // 3 fun(5); // 60 2. 函数调用 当定义一个函数后，它并不会自动执行，而是需要使用函数名称进行调用，如上面例子： fun(3); // 3 「只要注意：」使用 「函数表达式」 定义函数时，调用函数的方法必须写在定义之后，否则报错： console.log(fun()); // Uncaught ReferenceError: fun is not defined let fun = function(){return 1}; 而使用 「函数声明」 则不会出现该问题： console.log(fun()); // 1 function fun(){return 1}; 原因就是：函数提升仅适用于函数声明，而不适用于函数表达式。 3. 函数中的变量 在函数中，可以使用局部变量和外部变量。 3.1 局部变量 函数中声明的变量只能在该函数内可见。 let fun = function(){ let name = 'leo'; } fun(); console.log(name); // Uncaught ReferenceError: name is not defined 3.2 全局变量 函数内可以使用外部变量，并且可以修改外部变量的值。 let name = 'leo'; let fun = function(){ let text = 'Hello, ' + name; console.log(text); } fun(); // Hello, leo 当函数内也有与外部变量名称相同的变量，会忽略外部变量： let name = 'leo'; let fun = function(){ let name = 'pingan8787'; let text = 'Hello, ' + name; console.log(text); } fun(); // Hello, pingan8787 4. 函数参数 从ECMAScript 6开始，有两个新的类型的参数：默认参数，剩余参数。 4.1 默认参数 若函数没有传入参数，则参数默认值为undefined，通常设置参数默认值是这样做的： // ES6 之前，没有设置默认值 function f(a, b){ bb = b ? b : 1; return a * b; } f(2,3); // 6 f(2); // 2 // ES6，设置默认值 function f(a, b = 1){ return a * b; } f(2,3); // 6 f(2); // 2 4.2 剩余参数 可以将参数中不确定数量的参数表示成数组，如下： function f (a, ...b){ console.log(a, b); } f(1,2,3,4); // a =>

1 b = > [2, 3, 4]

Now that you're talking about parameters, you can't lose the arguments object.

4.3 arguments object

The actual parameters of the function are saved in an "array-like arguments object". Within the function, we can use the arguments object to get all the parameters of the function:

Let fun = function () {console.log (arguments); console.log (arguments.length);} fun ('leo'); / / Arguments ["leo", callee: floor, Symbol (Symbol.iterator): "] / / 1

With a practical example, implement a function that concatenates any number of parameters into a string and outputs it:

Let argumentConcat = function (separator) {let result ='', I; for (I = 1; I

< arguments.length; i ++){ result += arguments[i] + separator; } return result; } argumentConcat(',', 'leo', 'pingan'); //"leo,pingan," 5. 函数返回值 在函数任意位置，指定 return 指令来停止函数的执行，并返回函数指定的返回值。 let sum = function(a, b){ return a + b; }; let res = sum(1, 2); console.log(res); // 3 默认空值的 return 或没有 return 的函数返回值为 undefined 。 十五、函数表达式 函数表达式是一种函数定义方式，在前面章节中已经介绍到了，这个部分将着重介绍 「函数表达式」 和 「函数声明」 的区别： 1. 语法差异 // 函数表达式 let fun = function(){}; // 函数声明 function fun(){} 2. 创建时机差异 函数表达式会在代码执行到达时被创建，并且仅从那一刻可用。而函数声明被定义之前，它就可以被调用。 // 函数表达式 fun(); // Uncaught ReferenceError: fun is not defined let fun = function(){console.log('leo')}; // 函数声明 fun(); // "leo" function fun(){console.log('leo')}; 3. 使用建议 建议优先考虑函数声明语法，它能够为组织代码提供更多灵活性，因为我们可以在声明函数前调用该函数。 十六、箭头函数 「本章节简单介绍箭头函数基础知识，后面章节会完整介绍。」「函数箭头表达式」是ES6新增的函数表达式的语法，也叫「胖箭头函数」，变化：更简洁的函数和this。 1. 代码更简洁 // 有1个参数 let f = v =>

V; / is equivalent to let f = function (v) {return v}; / / has multiple parameters let f = (v, I) = > {return v + I}; / / equivalent to let f = function (v, I) {return v + I}; / / No parameter let f = () > 1; / / equivalent to let f = function () {return 1}; let arr = [1, ele = > ele + 1]; / / [2, 3, 4, 5]

two。 Pay attention

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

This does not exist in Arrow function

Arrow functions cannot be treated as "constructors", that is, they cannot be instantiated with new

The arrow function does not have an arguments object, that is, it cannot be used. You can use the rest parameter instead of

The arrow function cannot use the yield command, that is, it cannot be used as a Generator function. A simple example:

Function Person () {this.age = 0; setInterval (() = > {this.age++;}, 1000);} var p = new Person (); / / the value of p is always changing

After reading the above, do you have any further understanding of the JavaScript self-test list? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.