JavaScript脚本语⾔&基础语法&笔记总结

妖狐艹你老母 2022-12-20 11:21 182阅读 0赞

### JavaScript脚本语⾔&基础语法&笔记总结 ###

*  0.学前准备：
 *   *  JavaScript简介使⽤⽅法
 *  1. JavaScript简介
 *   *  什么是JavaScript？
     *  前端Web技术的组成：HTML、CSS、JavaScript
 *  2. JavaScript使⽤⽅法
 *   *  在HTML中如何使⽤JavaScript(三种)
     *   *  1. 内部JavaScript: 使⽤\`\`\`\`\`\`标签
         *  2. 外部 JavaScript:
         *  3. 内联JavaScript处理器:
 *  3.JavaScript基础语法
 *   *  3.1.JavaScript的输出：
     *  3.2变量
     *  3.3变量的命名规则和规范
     *  3.4 语句与注释
 *  4.JavaScript中数据类型：
 *   *  4.1JavaScript中数据类型：
     *  4.2类型转换：
 *  5. JavaScript运算符
 *   *  5.1按照操作元数的个数不同分为：⼀元运算符、⼆元运算符和三元运算符：
     *  5.2按照种类划分⼜分为如下运算符：
     *   *  ① 算数运算符：
         *  ② 赋值运算符
         *  ③ ⽐较运算符
         *  ④ 逻辑运算符
         *  ⑤ 位运算符
         *  ⑥ 条件运算符（三元运算符）:
         *  ⑦ 逗号运算符
         *  ⑧ 类型运算符
     *  5.3 运算符的优先级
 *  6. JavaScript流程控制
 *   *  6.1.分⽀结构（条件语句）：
     *  6.2.循环结构：
     *   *  for 循环：
         *  for\\...in 循环遍历对象：
         *  while 循环
         *  do/while 循环
     *  6.3. 循环中的 break 和 continue 语句
 *  7. JavaScript函数
 *   *  7.1JavaScript的函数：
     *  7.2系统中常⽤的内置函数：

# 0.学前准备： #

> JavaScript 编程语⾔允许你在 Web ⻚⾯上实现复杂的功能。如果你看到⼀个⽹⻚不仅仅显示静态的信息，⽽是显示依时间更新的内容，或者交互式地图，或者 2D/3D 动画图像，或者滚动的视频播放器，等等------你基本可以确定，这需要 JavaScript 的参与。  
> JavaScript是嵌⼊到HTML中执⾏的脚本语⾔，所以我们建议学习 JavaScript 之前，应当对 HTML和 CSS 有所熟悉。故在学习之前要如下准备：

*  对Web开发有⼀定了解（包括 JavaScript 基础简介）。
 *  掌握HTML中的常⽤标签。
 *  CSS常⽤选择器和属性。
 *  JavaScript语⾔的学习路线：

## JavaScript简介使⽤⽅法 ##

*  基础语法
 *  数据类型
 *  运算 符
 *  流程控制
 *  函数
 *  对象
 *  内置对象
 *  事件
 *  BOM
 *  HTML DOM
 *  XML DOM
 *  Ajax

# 1. JavaScript简介 #

## 什么是JavaScript？ ##

*  JavaScript 是⼀种客户端脚本语⾔（脚本语⾔是⼀种轻量级的编程语⾔）。
 *  JavaScript 通常被直接嵌⼊ HTML ⻚⾯，由浏览器解释执⾏
 *  JavaScript 是⼀种解释性语⾔（就是说，代码执⾏不进⾏预编译）。
 *  特点：弱类型和基于对象。(因为⾯向对象需要具有封装、继承、多态的特征)
 *  JavaScript语⾔中包含三个核⼼：ECMAScript基本语法、DOM、BOM

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XLp8MUI7-1605111366874)(media/image1.png)\]\{width="5.776388888888889in" height="2.2715277777777776in"\}][img-XLp8MUI7-1605111366874_media_image1.png_width_5.776388888888889in_ height_2.2715277777777776in]

## 前端Web技术的组成：HTML、CSS、JavaScript ##

*  HTML是⼀种标记语⾔，⽤来结构化我们的⽹⻚内容并赋予内容含义，例如定义段落、标题和数据 表，或在⻚⾯中嵌⼊图⽚和视频。
 *  CSS 是⼀种样式规则语⾔，可将样式应⽤于 HTML 内容， 例如设置背景颜⾊和字体，在多个列中布局内容。
 *  JavaScript 是⼀种脚本语⾔，可以⽤来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

# 2. JavaScript使⽤⽅法 #

> 可以像添加CSS那样将 JavaScript 添加到 HTML ⻚⾯中。CSS 使⽤元素链接外部样式表，使⽤

## 在HTML中如何使⽤JavaScript(三种) ##

### 1. 内部JavaScript: 使⽤`<script> ... </script>`标签 ###

*  属性：
    
     *  charset（可选）字符集设置、
     *  defer（可选执⾏顺序）值：defer、
     *  language(已废除)、
     *  src（可选）使⽤外部的js脚本⽂件type(必选)类型：值：text/javascript

### 2. 外部 JavaScript: ###

*  使⽤外部导⼊js会使代码更加有序，更易于复⽤，且没有了脚本的混合，HTML也会更加易 读。

### 3. 内联JavaScript处理器: ###

*  就是将js代码写⼊html代码中，如在html标签的事件中或超级链接⾥。

# 3.JavaScript基础语法 #

## 3.1.JavaScript的输出： ##

*  JavaScript 没有任何直接打印或者输出的函数。
 *  若有显示数据可以通过下⾯不同的⽅式来输出：
    
     *  window.alert() 弹 出 警 告 框
     *  document.write() ⽅法将内容写到 HTML ⽂档中
     *  innerHTML 写⼊到 HTML 元素
     *  console.log() 写⼊到浏览器的控制台
 *  参考示例：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>JavaScript实例</title>
    </head>
    <body>
    <h3>测试JavaScript的输出</h3>
    <div id="did">div层</div>
    </body>
    <script>
    //弹出⼀个信息提示框
    window.alert("Hello JavaScript!");
    //输出到浏览器⻚⾯中
    document.write("这个是⻚⾯中的输出");
    //通过写⼊HTML标签中，完成⻚⾯中的输出
    document.getElementById('did').innerHTML="div层中的输出";
    //控制台上的输出
    console.log("控制台上的输出");
    </script>
    </html>

## 3.2变量 ##

*  什么是变量  
    变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
 *  为什么要使⽤变量  
    使⽤变量可以⽅便的获取或者修改内存中的数据
 *  如何使⽤变量 使⽤var声明变量

var name;

*  变量的赋值

var name;
    name = "zhangsan";

*  同时声明多个变量

var name,age,sex;
    name = 'lisi';
    age = 20;
    sex = "man"

同时声明多个变量并赋值

var name = 'wangwu', age = 25;

## 3.3变量的命名规则和规范 ##

*  规则 - 必须遵守的，不遵守会报错
    
     *  由字⺟、数字、下划线、$符号组成，不能以数字开头
     *  不能是关键字和保留字，例如：for、 if、while。
     *  区分⼤⼩写
 *  规范 - 建议遵守的，不遵守不会报错
    
     *  变量名必须有意义
     *  遵守驼峰命名法。⾸字⺟⼩写，后⾯单词的⾸字⺟需要⼤写。例如：userName、userPassword
 *  下⾯哪些变量名不合法

a
    1
    age18
    18age
    name
    $name
    _sex
    &sex
    theworld theWorld

## 3.4 语句与注释 ##

*  语句：
 *  ⼀般程序中的语句是由表达式加分号构成; 组成。(js中的每条语句之间的分割符可以是回⻋换⾏也可以是";"分号(推荐))
 *  ⽽表达式的种类很多：
    
     *  如：算术表达式、赋值表达式、关系表达式、逻辑表达式等等…
     *  也可以是⼀个函数、⽅法的调⽤
 *  脚本注释：

// 单⾏注释 和 /* 多⾏注释 */

*  单⾏注释

单⾏注释以 // 开头。
    任何位于 // 与⾏末之间的⽂本都会被 JavaScript 忽略（不会执⾏）。

*  多⾏注释

多⾏注释以 /* 开头，以 */ 结尾。
    任何位于 /* 和 */ 之间的⽂本都会被 JavaScript 忽略。

*  注释的⽬的：
    
     *  为程序添加辅助说明，便于阅读理解。
     *  注释掉临时不需要执⾏的代码、便于调试、排错。

**4. JavaScript数据类型**

# 4.JavaScript中数据类型： #

## 4.1JavaScript中数据类型： ##

*  值类型(基本类型)：  
    字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undeﬁned）、 Symbol。  
    注意：Symbol 是 ES6 引⼊了⼀种新的原始数据类型，表示独⼀⽆⼆的值。
 *  引⽤数据类型： 对象(Object)、数组(Array)、函数(Function)。

//我们使⽤typeof操作符获取基本数据类型
    //Undefined 这个值表示变量不含有值
    console.log(typeof a); //undefined 未定义的
    var a = 10;
    console.log(typeof a); //number
    a = 3.14
    console.log(typeof a); //number
    a = 'zhangsan'
    console.log(typeof a); //string
    a = true
    console.log(typeof a); //boolean
    //可以通过将变量的值设置为 null 来清空变量
    a = null
    console.log(typeof a); //object
    console.log(a); //null
    a = [10,20,30];
    //或 a = new Array(10,20,30);
    console.log(typeof a); //object
    console.log(a instanceof Array); //true
    a = function(){} //定义空⽩函数
    console.log(typeof a); //function
    console.log(a instanceof Function); //true
    /*
    //整数的进制的输出
    console.log(10); //输出⼗进制数的值
    console.log(0b10); //输出⼆进制数10的值
    typeof 操作符获取⼀个变量的类型,返回结果如下：
    undefined - 如果变量是 Undefined 类型的
    boolean - 如果变量是 Boolean 类型的
    number - 如果变量是 Number 类型的 (整数、浮点数)
    string - 如果变量是 String 类型的 （采⽤""、 ''）
    object - 如果变量是⼀种引⽤类型或 Null 类型的 如： new Array()/ new String()...
    function -- 函数类型
    undefined 和 null 的区别
    null 和 undefined 的值相等，但类型不等：
    console.log(0o10); //输出⼋进制数10的值
    console.log(0x10); //输出⼗六进制数10的值
    //⼗进制转换其他进制
    var x = 110;
    x.toString(2)//转为2进制
    x.toString(8)//转为8进制
    x.toString(16)//转为16进制
    //其他进制转⼗进制
    var x = "110"//这是⼀个⼆进制的字符串表示
    parseInt(x, 2)//把这个字符串当做⼆进制， 转为⼗进制
    var x = "70"//这是⼀个⼋进制的字符串表示
    parseInt(x, 8)//把这个字符串当做⼋进制， 转为⼗进制
    var x = "ff"//这是⼀个⼗六进制的字符串表示
    parseInt(x, 16)//把这个字符串当做⼗六进制， 转为⼗进制
    */

*  typeof 操作符获取⼀个变量的类型,返回结果如下：
    
     *  undefined - 如果变量是 Undefined 类型的
     *  boolean - 如果变量是 Boolean 类型的
     *  number - 如果变量是 Number 类型的 (整数、浮点数)
     *  string - 如果变量是 String 类型的 （采⽤""、 ‘’）
     *  object - 如果变量是⼀种引⽤类型或 Null 类型的 如： new Array()/ new String()…
     *  function – 函数类型

typeof "zhangsan" // 返回 string
    typeof 3.14 // 返回 number
    typeof NaN // 返回 number
    typeof true // 返回 boolean
    typeof [10,20,30,40] // 返回 object
    typeof {name:'lisi', age:20} // 返回 object
    typeof new Date() // 返回 object
    typeof function(){} // 返回 function
    typeof myCar // 返回 undefined (如果 myCar 没有声明)
    typeof null // 返回 object

*  undefined 和 null 的区别
    
     *  null 和 undefined 的值相等，但类型不等：

typeof undefined // undefined
    typeof null // object
    null === undefined // false
    null == undefined // true

*  object引⽤类型 引⽤类型通常叫做类（class），也就是说，遇到引⽤值，所处理的就是对象。Object 对象⾃身⽤处不⼤，不过在了解其他类之前，还是应该了解它。 因为 ECMAScript 中的Object 对象与 Java 中的 java.lang.Object 相似， ECMAScript 中的所有对象都由这个对象继承⽽来，Object 对象中的所有属性 和⽅法都会出现在其他对象中，所以理解了 Object 对象，就可以更好地理解其他对象。
 *  值类型理解：变量之间的互相赋值，是指开辟⼀块新的内存空间，将变量值赋给新变量保存到新开辟的内存⾥⾯；之后两个变量的值变动互不影响，例如：

var a = 10; //开辟⼀块内存空间保存变量a的值“10”；
    var b = a; //给变量 b 开辟⼀块新的内存空间，将 a 的值 “10” 赋值⼀份保存到新的内存⾥；
    //a 和 b 的值以后⽆论如何变化，都不会影响到对⽅的值；

*  引⽤类型理解：变量之间的互相赋值，只是指针的交换，⽽并⾮将对象（普通对象，函数对象，数组对象）复制⼀份给新的变量，对象依然还是只有⼀个，只是多了⼀个指引。

//需要开辟内存空间保存对象，变量 a 的值是⼀个地址，这个地址指向保存对象的空间；
    var a = { x: 1, y: 2 };
    var b = a; // 将a 的指引地址赋值给 b，⽽并⾮复制⼀给对象且新开⼀块内存空间来保存；
    // 这个时候通过 a 来修改对象的属性，则通过 b 来查看属性时对象属性已经发⽣改变；

## 4.2类型转换： ##

*  JavaScript 变量可以转换为新变量或其他数据类型：
    
     *  通过使⽤ JavaScript 函数
     *  通过 JavaScript ⾃身⾃动转换

ECMAScript 中可⽤的 3 种强制类型转换如下：
    Boolean(value) - 把给定的值转换成 Boolean 型；
    Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；
    String(value) - 把给定的值转换成字符串；
    使⽤：Number（）、parseInt() 和parseFloat（） 做类型转换
    Number()强转⼀个数值(包含整数和浮点数)。
    *parseInt()强转整数，
    *parseFloat（）强转浮点数
    函数isNaN()检测参数是否不是⼀个数字。 is not a number

*  参考示例：

//转换字串类型
    String(100 + 23) // 返回 "123"
    String(true) // 返回 "true"
    String(new Date())// 返回 "Tue May 14 2019 11:06:28 GMT+0800 (中国标准时间)"
    String([10,20]) // 返回 "10,20"
    String(null) // 返回 "null"
    //转换数值类型
    Number("3.14") // 返回 3.14
    Number("3.14abc") // 返回 NaN
    parseFloat("3.14")//返回 3.14
    parseFloat("3.14abc")//返回 3.14
    parseFloat("b3.14abc")//返回 NaN
    parseInt("3.14") //返回 3
    parseInt("3.14abc")//返回 3
    parseInt("b3.14abc")//返回 NaN

# 5. JavaScript运算符 #

## 5.1按照操作元数的个数不同分为：⼀元运算符、⼆元运算符和三元运算符： ##

*  如下⼀元运算符

delete：⽤于删除对象中属性的 如：delete o.name; //删除o对象中的name属性
    ++ -- : ⼀元加法和⼀元减法

## 5.2按照种类划分⼜分为如下运算符： ##

### ① 算数运算符： ###

### ② 赋值运算符 ###

\-赋值运算符向 JavaScript 变量赋值。

### ③ ⽐较运算符 ###

### ④ 逻辑运算符 ###

### ⑤ 位运算符 ###

*  位运算符处理 32 位数。
 *  该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

### ⑥ 条件运算符（三元运算符）: ###

*  JavaScript 也包含了可基于某些条件向变量赋值的条件运算符。

语法
    variablename = (condition) ? value1:value2
    实例
    var voteable = (age < 18) ? "太年轻":"⾜够成熟";

### ⑦ 逗号运算符 ###

⽤逗号运算符可以在⼀条语句中执⾏多个运算。
    var iNum1=1, iNum2=2, iNum3=3;

### ⑧ 类型运算符 ###

<table> 
 <thead> 
  <tr> 
   <th>运算符</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>typeof</td> 
   <td>返回变量的类型。</td> 
  </tr> 
  <tr> 
   <td>instanceof</td> 
   <td>返回 true，如果对象是对象类型的实例。</td> 
  </tr> 
 </tbody> 
</table>

*  instanceof 运算符与 typeof 运算符相似，⽤于识别正在处理的对象的类型。
 *  与 typeof ⽅法不同的是，instanceof ⽅法要求开发者明确地确认对象为某特定类型。

## 5.3 运算符的优先级 ##

优先级从⾼到底
    1. () 优先级最⾼
    2. ⼀元运算符 ++ -- !
    3. 算数运算符 先 * / % 后 + -
    4. 关系运算符 > >= < <=
    5. 相等运算符 == != === !==
    6. 逻辑运算符 先 && 后||
    7. 赋值运算符 = += -= *= /= %=

# 6. JavaScript流程控制 #

*  任何编程语⾔都是由⼀系列语句构成的。
 *  ⼀条语句可以是⼀个赋值语句，⼀个函数调⽤，⼀个循环，甚⾄⼀个什么也不做的（空语句）条件 语句。
 *  在任何⼀⻔程序设计语⾔中，都需要⽀持满⾜程序结构化所需要的三种基本结构:
    
     *  顺序结构
     *  分⽀结构（选择结构）
     *  循环结构
 *  顺序结构：在程序结构中，最基本的就是顺序结构。程序会按照⾃上⽽下的顺序执⾏。由于结构简 单所以这⾥我就不多介绍

## 6.1.分⽀结构（条件语句）： ##

*  在 JavaScript 中，我们可使⽤以下分⽀语句：
    
     *  if 语句 - 只有当指定条件为 true 时，使⽤该语句来执⾏代码
     *  if…else 语句 - 当条件为 true 时执⾏代码，当条件为false时执⾏其他代码
     *  if…else if…else 语句 - 使⽤该语句来选择多个代码块之⼀来执⾏
     *  switch…case 语句 - 使⽤该语句来选择多个代码块之⼀来执⾏

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center]

*  if … else 分⽀判断示例:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 1]

*  switch 分⽀判断示例:

//switch实现多分枝判断
    //获取今天星期⼏的数字
    var day=new Date().getDay(); switch (day)
    { 
    case 0:
    x="星期⽇"; break;
    case 1:
    x="星期⼀"; break;
    case 2:
    x="星期⼆"; break;
    case 3:
    x="星期三"; break;
    case   4: x="星期四"; break;
    case 5:
    x="星期五";
    break; case 6:
    x="星期六";
    break; default:
    x="⽆效的星期信息！";
    }
    console.log(x);

## 6.2.循环结构： ##

*  JavaScript ⽀持不同类型的循环：
    
     *  for - 循环代码块⼀定的次数
     *  for/in - 循环遍历对象的属性
     *  while - 当指定的条件为 true 时循环指定的代码块
     *  do/while - 同样当指定的条件为 true 时循环指定的代码块  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 2]

### for 循环： ###

for(语句1; 语句2; 语句3){ 
    被执⾏的代码块
    }
    语句1： 在循环（代码块）开始前执⾏，常⽤于初始化循环条件
    语句2： 定义运⾏循环（代码块）的条件，⽤于判断何时结束循环
    语句3： 在循环（代码块）已被执⾏之后执⾏，常⽤于递增或递减来影响语句2的判断，直⾄结束循环

示例代码：

//循环输出1～10的值
    for(var i=1;i<=10;i++){ 
    console.log(i);
    }
    //计算1～100的累加值
    var sum = 0;
    for(var i=1;i<=100;i++){ 
    sum += i;
    }
    console.log(sum); //5050

### for…in 循环遍历对象： ###

for(属性变量 in 被遍历对象){ 
    被执⾏的代码块
    }

参考示例

var ob = { "name":"张三","age":22,"sex":"男"};
    //遍历对象ob中的每个属性
    for(key in ob){ 
    //输出属性和对应的属性值
    console.log(key+":"+ob[key]);
    }
    /* //输出结果： name:张三 age:22 sex:男 */

### while 循环 ###

While 循环会在指定条件为真时循环执⾏代码块。

while (条件){ 
    需要执⾏的代码
    }

注意：如果您忘记增加条件中所⽤变量的值，该循环永远不会结束。该可能导致浏览器崩溃。  
参考代码：

//循环输出10～1的值
    var i = 10;
    while(i>=1){ 
    console.log(i);
    i--;
    }
    //计算1～100的累加值
    var sum = 0;
    var i = 0;
    while(i<=100){ 
    sum += i;
    i++;
    }
    console.log(sum); //5050

### do/while 循环 ###

*  do/while 循环是while 循环的变体。
 *  该循环会执⾏⼀次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。
 *  该循环⾄少会执⾏⼀次，即使条件是 false，隐藏代码块会在条件被测试前执⾏。

do{ 
    需要执⾏的代码;
    }while(条件);

参考示例：

//循环输出1～10的值
    var i = 1;
    do{ 
    console.log(i);
    i++;
    }while(i<=10);
    //计算1～100的累加值
    var sum = 0;
    var i = 0;
    do{ 
    sum += i;
    i++;
    }while(i<=100);
    console.log(sum); //5050

## 6.3. 循环中的 break 和 continue 语句 ##

*  break 语句⽤于跳出循环。
 *  continue ⽤于跳过循环中的⼀个迭代。
 *  break语句
    
     *  我们已经在本教程稍早的章节中⻅到过 break 语句。它⽤于跳出 switch() 语句。
     *  break 语句可⽤于跳出循环。
     *  break 语句跳出循环后，会继续执⾏该循环之后的代码（如果有的话）
 *  continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下⼀个迭代。

# 7. JavaScript函数 #

## 7.1JavaScript的函数： ##

*  函数是什么:
    
     *  函数（function）是⼀段完成指定任务的已命名代码块。函数可以遵照给它的⼀组值或参数完成特定的任务，并且可能返回⼀个值。
 *  在JavaScript中有两种函数：⾃定义函数与系统函数。
 *  函数的优越性：
    
     *  控制程序设计的复杂性
     *  提⾼软件的可靠性
     *  提⾼软件的开发效率
     *  提⾼软件的可维护性
     *  提⾼程序的重⽤性
 *  标准格式：

function 函数名（[参数列表..]）{ 
    函数体。。。
    [return 返回值;]
    }

*  JavaScript三种定义函数⽅法：
    
     *  第⼀种是使⽤function语句定义函数 如上⾯格式
     *  第⼆种是使⽤Function()构造函数来定义函数（不常⽤）
        
         *  var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);
         *  如： var 函数名 = new Function(”x”,”y”,”var z=x+y;return z;”);
     *  第三种是在表达式中定义函数
        
         *  var 函数名 = function(参数1，参数2，…)\{函数体\};
         *  例如：

//定义
    var add = function(a,b){ 
    return a+b;
    }
    //调⽤函数
    document.write(add(50,20));

*  函数的使⽤

//通过函数名直接调⽤函数
    //函数名(参数1，参数2，…)
    myadd(10,20);
    //函数⾃调⽤
    (function () { 
    console.log("Hello Function！");
    })();

*  arguments 对象
    
     *  在函数代码中，使⽤特殊对象 arguments，开发者⽆需明确指出参数名，就能访问它们。
     *  arguments是⼀个对象,是⼀个伪数组，arguments\[索引\]---->实参的值也可以访问这个值，即第⼀个参数的值（第⼀个参数位于位置 0，第⼆个参数位于位置 1，依此类推）arguments.length—>是实参的个数
 *  关于变量作⽤域：
    
     *  由于函数的出现导致了变量的定义分为函数内定义和函数外定义，即全局和局部变量
     *  全局变量:在函数外使⽤var声明的变量就是全局变量,全局变量可以在⻚⾯的任何位置使⽤
     *  全局变量,如果⻚⾯不关闭,那么就不会释放,就会占空间,消耗内存。
        
         *  局部变量:在函数内使⽤var关键字定义的变量是局部变量，即出了函数外边⽆法获取。
     *  隐式全局变量:没有使⽤var声明的变量,就叫隐式全局变量，在函数外可以获取到。
        
         *  全局变量是不能被删除的,隐式全局变量是可以被删除的（使⽤delete）
         *  定义变量使⽤var是不会被删除的,没有var是可以删除的
     *  函数外⾯定义的变量是全局变量，函数内可以直接使⽤。
     *  在函数内部没有使⽤var定义的=变量则为全局变量。
 *  函数中的返回值：
    
     *  如果⼀个函数中有return ,那么这个函数就有返回值
     *  如果⼀个函数中没有return,那么这个函数就没有返回值
     *  如果⼀个函数中没有明确的返回值,那么调⽤的时候接收了,结果就是undefined
     *  (没有明确返回值:函数中没有return或函数中有return,但是return后⾯没有任何内容)
     *  函数内容执⾏遇到return，则⽴刻执⾏返回，且下⾯的代码是不会被执⾏的  
        **这里感谢@六卿 指出错误，如果⼀个函数中没有return,那么调⽤的时候接收了,结果就是undefined。验证见下面的代码**

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script> //函数中的返回值： //统计指定参数的累加值函数 function mysum(m){ total = 0; for(var i=0; i<=m; i++){ total += i; } return total; //返回结果 } //使用 var a = mysum(10); console.log("10的累加值："+a); console.log("50的累加值："+mysum(50)); console.log("100的累加值："+mysum(100)); console.log("========================="); function fun(m){ console.log("111111"); console.log("222222"); if(m>=10){ return; //执行return后，就会终止当前函数的执行 } console.log("333333"); } console.log(fun(18)); //undefined console.log("========================="); function demo(){ console.log("aa"); return "cc"; } console.log("bb"+demo()); //aa bbcc console.log("========================="); function fun1(){ console.log("111111"); return; //如果一个函数中没有明确的返回值,那么调用的时候接收了,结果就是undefined } console.log(fun1()); //undefined console.log("========================="); function fun2(){ console.log("222"); //如果一个函数中没有return,那么调用的时候接收了,结果就是undefined } console.log(fun2()); //undefined </script>
    </head>
    <body>
        <h1>JavaScript语言的函数</h1>
    </body>
    </html>

运行结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 3]

## 7.2系统中常⽤的内置函数： ##

escape() //字串编码
    unescape() //字串反编码
    *eval() //将参数字符串作为脚本代码来执⾏。
    *isNaN() // is not a number (不是⼀个数值)
    *parseInt()
    *parseFloat()

[img-XLp8MUI7-1605111366874_media_image1.png_width_5.776388888888889in_ height_2.2715277777777776in]: /images/20221120/3531eeed0b23405cacd3ada6ed089760.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/332a048caafb42278fb864abd4d70380.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/622fa2851495468dac6273d5dd23225e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/c96e08cd298f4b2dbff11c323ce91214.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0pvbnR5TGk_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/269fd5d9ef744297bd09e83ceb34ee3d.png