前端开发----JavaScript基础

前端开发之JavaScript基础

JavaScript基础

1、前言

1、网页、网站和应用程序

• 网页：单独的一个页面
• 网站：一系列相关的页面组合到一起
• 应用程序：可以和用户产生交互，并实现某种功能

2、前端三层

• HTML：结构层，从语义的角度描述页面结构
• CSS：样式层，从美观的角度描述页面样式
• JavaScript：行为层，从交互的角度描述页面行为

3、JavaScript应用场景

• 网页特效
• 服务端开发（node.js）
• 命令行工具（node.js）
• 桌面程序（Electron）
• App（cordova）
• 控制硬件-物联网（ruff）
• 游戏开发（cocos2d-js）
• …

2、JavaScript介绍

• JavaScript是一种运行在客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML页面增加动态功能
• 浏览器就是一种运行JavaScript脚本语言的客户端，JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分
• JavaScript组成：ECMAScript、DOM和BOM三部分组成

3、计算机组成

1、软件

• 应用软件：浏览器（Chrome/IE/Firefox）、QQ、sublime、word等等
• 系统软件：windows、linux、mac OS

2、硬件

• 三大件：CPU、内存、硬盘 – 主板
• 输入设备：鼠标、键盘、手写板、摄像头等
• 输出设备：显示器、打印机、投影仪等

4、JavaScript书写语法

1、书写位置

• 书写在行内
• 书写在html中的< script >标签中
• 书写在外部js文件中，在页面引入

注意：引用外部js文件的< script>标签中不可以书写JavaScript的代码，自定义的JavaScript代码需要书写在另一个新的script标签中

2、注释

• 单行注释 //：作用方位只有符号后面的一行，快捷键为ctrl+/

• 多行/块级注释 /* … */：作用范围有多行，快捷键使用ctrl+shift+/

3、alert语句

1、alert()语句

• alert：警示、警告
• 作用：在浏览器中弹出一个警示框，警示框的警示内容可以认为自定义
• alert语句是一个js内置好的功能（函数、方法），要想实现功能必须在alert关键字后面加小括号执行，自定义的内容需要传递给小括号内的参数，输出时参数位置的内容会出现在弹框位置

2、语法

• 语法1：alert语句作为一个函数，如果要执行，必须在后面紧跟着添加小括号
• 语法2：alert语句作为一个函数，小括号内部可传递参数，根据数据类型不同，有不同的语法要求，例如文字内容是字符串，必须写在一对引号内部，引号可以是单引号也可以是双引号
• 语法3：如果需要添加一对引号，要么是单引号，要么是双引号，不能一单一双
• 语法4：所有的特殊功能的符号必须是英文字符
• 语法5：语句后面的分号必要性
• 语法6：js对换行、缩进、空格不敏感
• 语法7：如果js中没有特殊控制结构，代码都是从上往下、从左往右进行加载

4、prompt语句

• prompt：提示
• 作用：弹出一个对话框，内部有一个提示语句以及一个输入框，可以在输入框中根据提示任意输入内容
• prompt语句也是js内置的一个功能，必须加小括号执行，有两个参数可以进行传递，每个参数一般都是字符串类型，必须加引号，两个参数中间用逗号分隔，引号和逗号都必须是英文输入法状态
• 第二个参数位置的值，可删除并重新输入新的内容，甚至代码中可以不写第二个参数

5、console控制台

• 大部分浏览器中，都有一个控制台，内部可查看HTML、CSS代码，甚至调试错误代码
• 浏览器中右键审查元素，都可以打开控制台
• 快捷键：F12
• 控制台中有一个console的选项面板，在js中有着非常重要的作用

控制台功能：
作用1：帮助程序员调试程序中出现的bug，可提示错误的个数、错误所在行数、错误类型；
作用2：可在控制台中直接书写一些语句，进行执行；
作用3：js有一个内置对象console，内部封装了大量的属性和方法（函数），可通过给console对象打点调用方法名()、属性名方式执行，有一个叫log(日志)方法，可实现参数位置自定义内容在控制台输出

5、字面量

1、概念

• 字面量是用于表达一个固定值的表示发，有叫常量
• 字面就是所见即所得，js程序执行到代码中的字面量，会立即知道它是什么类型的数据，值是多少
• 可用于表示固定值，比如：数字、字符串、undefined、布尔类型的字面值等
• 数值字面量：8，9，10
• 字符串字面量：“大前端”
• 布尔字面量：true，false

2、数字字面量

1、数字字面量概念

• 这里的数字就是数学意义上的数字
• 数字字面量区分：整数字面量、浮点数字面量（小数）、特殊值
• 书写时直接书写字面量，不需要添加任何辅助符号
  2、整数
• 整数字面量写法区分进制
• 整数可被表示成十进制（基数为10）、八进制（基数为8）以及十六进制（基数为16）
• 十进制：最基本的数值字面量格式，可直接在代码中输入
• 八进制：字面值必须带前导0、0O、0o，八进制整数智能包括数字0-7
• 十六进制：前缀是0X、0x，后面可包含数字（0-9）和字母a-f或A-F
• 在进行算术计算时或者参与程序，所有八进制和十六进制的数字都会被转换成十进制
  3、整数进制
• 十进制：逢十进一，每个位数只能是0-9之间的数字
• 八进制：逢八进一，每个位数只能是0-7之间的数字，而且必须添加前缀，0、0O、0o
• 十六进制：逢十六进一，每个位数上必须是0-9、a-f之间的符号，必须写前置，0x、0X开头

特殊：八进制中，如果以0开头，每个位数上有超过0-7之间的数字出现，也就是8/9，强制忽视前面的0，直接将后面数字当做十进制

4、浮点数

• 数学概念中的小数
• 包含：整数、小数点、小数部分
• 浮点数不区分进制，所有的浮点数都是十进制下的数字
• 注意：如果浮点数是大宇0小于1的，可省略小数点前面的0不写
• 浮点数精度问题：浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数；例如：0.1 + 0.2; 结果不是 0.3，而是0.30000000000000004

5、Infinity 无穷

• Infinity：无穷
• 由于计算机计算能力有限，如果高于最大计算值直接显示为正无穷infinity，如果低于最小计算值直接显示为-infinity
• infinity本身是一个数字
• 最小值：Number.MIN_VALUE，这个值为：5e-324
• 最大值：Numver.MAX_VALUE，这个值为：1.7976931348623157e+308
• 无穷大：infinity
• 无穷小：-infinity

6、NaN

• NaN：not a number表示不是一个正常的数，但还是一个Number类型的数字，这个数字没办法用前面的表示方法表示
• NaN与任何值都不相等，包含它本身
• isNaN()：判断一个数据是不是一个NaN

3、字符串字面量

1、字符串字面量概念

• 字符串是由任意个数的有序或无需的字符组成的串，类似人类语言，在JS中有自己特殊的写法
• 组成：字母、汉字、特殊符号、空白等
• 字符串字面量写法：用一对单引号或双引号及引号内的字符构成，引号中间的字符可有任意多个，也可是没有字符的空字符串
• 注意：字符串中如果字符包含双引号，则其外部应该由引号标示，反之相同

2、转义符号 \

• 字符串中有一些特殊功能的字符不能直接书写，还有一些特殊效果不能直接书写，这时可使用转义符\对这些字符进行转义
• 在字符串中可使用转义符\加普通字母，替代一些特殊字符
• \n 换行
• \t Tab制表
• 字符串中可使用转义符\将特殊功能字符变为普通字符
• ’ 单引号
• " 双引号
• \ 反斜杠

6、变量

1、什么是变量？

• 变量是计算机内存中存储数据的标识符，根据变量名称可获取到内存中存储的数据
• 变量相当于一个容器，内部可存储任意类型的数据，使用变量时，用的是内部存储的数据

2、为什么要使用变量？

• 使用变量可方便的获取或者修改内存中的数据

3、变量声明

• 变量声明又叫座定义变量、创建变量
• 变量在使用前必须先定义，如果没有定义，会出现引用错误
• 定义方法：使用一个var关键字进行定义，后面必须加一个空格，空格后面自定义变量名

4、变量的命名规则和规范

1）规则：必须遵守的，不遵守会报错

• 由字母、数字下滑线、$符号组成，不能以数字开头
• 字母区分大小写，A和a表示不同
• 不能是关键字和保留字，关键字指的是js中有特殊功能的小词语，如var、for等
• 保留字指的是现在没有特殊功能，但将来新语法中有可能作为关键字使用

2）规范：建议遵守，不遵守不会报错

• 变量名必须有意义
• 遵守驼峰命名法，多个单词组合而成的，第一个单词首字母小写，后面单词的首字母要大写，例如：userName、userPassword

3）变量赋值的几种情况

• 变量赋值时：内部可存储任意类型的数据，甚至是一个变量，赋值过程中，等号右侧的变量使用的是存储的数据
• 注意：变量参与赋值过程中，等号左变右不变，等号左侧会被赋值，将来值发生变化，等号右侧的变量使用内部的值参与运算，自身不会发生变化
• 变量的赋初值过程可与声明过程写在一起
• 变量内部的值，可通过多次赋值方法进行更改
• 变量一次定义可多次等号赋值
• 一个关键字var可同时定义多个变量，并都赋初值，多个变量之间用逗号进行分隔，最后一个变量后面使用分号进行结尾

7、数据类型

1、简单数据类型

• Number 数字类型
• String 字符串类型
• undefined undefined类型
• Boolean 布尔类型
• null null类型
• Object 对象类型（复杂数据类型）

1、Number类型

• 数字类型，不区分整数、浮点数、特殊值（NaN），都是Number类型

2、String类型

• 字符串类型，所有字符串都是String类型

3、Boolean类型

• Boolean字面量：只有true和false两个字面量的值，必须是小写字母
• 计算机内部存储：true为1，false为0

4、Undefined类型

• undefined本身就是一个数据，表示未定义
• 变量只声明未赋值，这个时候默认值就是undefined

5、Null类型

• null本身就是一个数据，从逻辑角度来看，null值表示一个空对象指针
• 如果定义的变量准备在将来用于保存对象，最好将该变量初始化为null

2、检测数据类型

• 使用typeof方法进行数据检测
• 检测方法：在typeof后面加小括号()执行，将要检测的数据放在小括号内部

console.log(typeof(1)); // number
console.log(typeof("内容")); // string
console.log(typeof(undefined)); // undefined
console.log(typeof(true)); // boolean
console.log(typeof(false)); // boolean
console.log(typeof(null)); // nobject

• 也可将typeof作为关键字，后面加空格，空格后面添加数据的方式，检测数据

console.log(typeof 1 ); // number
console.log(typeof "内容" ); // string
console.log(typeof undefined ); // undefined
console.log(typeof true ); // boolean
console.log(typeof false ); // boolean
console.log(typeof null ); // nobject

变量的数据类型

• JavaScript语言是一门动态类型语言，变量并没有一个单独的数据类型，而是会随着内部存储数据的变化，数据类型也会发生变化
• 变量的数据类型与内部存储数据有关
• 将来使用变量时，需要知道内部存储的数据是什么类型，避免程序出错

提示
使用谷歌浏览器控制台，可快速查看数据类型：字符串颜色为黑色，数值类型为蓝色，布尔类型也为蓝色，undefined和null为灰色

3、数据类型转换

1、转换成字符串类型

• 数据.toString()方法
• String(数据)方法，有些值没有toSring()方法，这个时候可以使用String()，比如undefined和null
• +号拼接字符串方式：num+“”，当+号两边一个操作符是字符串类型，一个操作符是其他类型时，会先把其他类型转换为字符串再进行拼接，返回字符串
• +号的特殊性
• 1、两边只要有一个是字符串，那么+号就是字符串拼接功能
• 2、两边如果都是数字，那么就是算术功能

console.log("65" + 1); // 651

2、转换成数值类型
1）Number(数据)方法

• 转型函数Number()可用于任何数据类型，将其他数据类型转换为数字
• 字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN
• 布尔值：true转为1，false转为0
• undefined：转为NaN
• null：转为0

2）parseInt(数据)方法：将字符串转整数方法
作用：第一，对浮点数进行取整操作；第二，将字符串转为整数数字

• 1、对数字取整功能，直接舍弃小数部分，只保留整数
• 2、将字符串转为整数数字，也包含取整功能
  字符串中，必须是存数字字符或者数字字符开头的字符串才能转换为正常数字，且只取整数部分，如果不是数字打头的字符串，会转换为NaN

3）parseFloat()方法：字符串转浮点数方法
作用：将字符串转为浮点数数字
要求：满足浮点数数字字符必须在字符串开始，如果不在开始返回值都是NaN

3、应用
日常开发中，利用变量接收prompt()语句返回的用户输入的数据，检测数据类型后，得到的是字符串类型
如果想到获取的是数字类型的数据，则需要先将得到的字符串转数字，避免出现字符串参与数学加法运算等

var num = parseInt(prompt("请输入您的年龄："));
var age = num + 5;
console.log(age);

4、转换成布尔类型

• Boolean(数据)方法
• 转型函数Boolean()方法用于任何数据类型，将其他数据类型转为布尔类型的值
• 转为false：NaN、0，""空字符串、null、undefined
• 转为true：非0非NaN数字、空字符串

8、操作符

1、操作符

• 操作符，也叫运算符，是js中发起运算最简单的方式
• 表达式的组成包含操作数和操作符，表达式会得到一个结果，然后用结果参与程序

2、算术运算符

• +、-、*、/、%、()
• %为取余，取模，例如：a / b = c 余 d，就是a % b = d
• 运算顺序：先乘除取余、再算加减，有小括号先算小括号

1、正常情况：数字与数字之间的运算
2、非正常情况1

• 1、有特殊值字面量参与运算
• 2、NaN参与运算：得到的结果都是NaN
• 3、Infinity参与的运算，视情况而定

console.log(Infinity + 1); // Infinity
console.log(Infinity - 1); // Infinity
console.log(Infinity * 1); // Infinity
console.log(Infinity / 1); // Infinity
console.log(Infinity % 1); // NaN
console.log("----");
console.log(Infinity + Infinity); // Infinity
console.log(Infinity - Infinity); // NaN
console.log(Infinity * Infinity); // Infinity
console.log(Infinity / Infinity); // NaN
console.log(Infinity % Infinity); // NaN
console.log("----");
console.log( 1 + Infinity); // Infinity
console.log( 1 - Infinity); // -Infinity
console.log( 1 * Infinity); // Infinity
console.log( 1 / Infinity); // 0
console.log( 1 % Infinity); // 1

注意：日常开发中不会使用特殊值运算，因为没有实际应用意义，但需要了解，防止面试遇到

3、非正常情况2

• 其他类型的数据参与数学运算
• 有字符串参与的+运算：+好变为连字符将前后连接成整体字符串
• 隐式转换：除了字符串参与的+运算，其他情况下，所有其他数据类型参与数学运算时，计算机暗中将其他数据类型先自动转换成数字类型，在参与运算，这个过程中不需要使用parseInt()、Number()等方法，过程是暗中进行的，这就是一个隐式转换的过程
• 其他数据类型会隐式转换为数字类型
• 对应数字：纯数字字符串会转为对应的数字。例如"123" -> 123
• 转换为1：true
• 转换为0：false、null、""空字符串、空白字符串
• 转换为NaN：undefined、非空非纯数字字符串

3、比较运算符

1、比较运算符
比较运算符也叫作关系运算符，一般比较运算符比较它的操作数，并返回一个布尔类型值，运算结果要么是true，要么是false

>：大于
><：小于
>=：大于等于
<=：小于等于
==：相等，只判断值大小是否相等，不判断数据类型
! =：不等，与相等完全相反
===：全等，不光判断值相等，还要判断数据类型相等
!==：不全等，与全等完全相反

2、正常情况

console.log( 7 < 8); // true
console.log( 7 > 8); // false
console.log( 7 <= 8); // true
console.log( 7 >= 8); // true
console.log( 7 == 8); // false
console.log( 7 != 8); // true
console.log( 7 === 8); // false
console.log( 7 !== 8); // true

3、非正常情况1----特殊值参与比较运算

• NaN参与：不等于和不全等结果为true，其他的都是得到false

console.log( NaN < 8); // false
console.log( NaN > 8); // false
console.log( NaN <= 8); // false
console.log( NaN >= 8); // false
console.log( NaN == 8); // false
console.log( NaN != 8); // true
console.log( NaN === 8); // false
console.log( NaN !== 8); // true
console.log("--------");
console.log( NaN < NaN); // false
console.log( NaN > NaN); // false
console.log( NaN <= NaN); // false
console.log( NaN >= NaN); // false
console.log( NaN == NaN); // false
console.log( NaN != NaN); // true
console.log( NaN === NaN); // false
console.log( NaN !== NaN); // true

• Infinity参与的运算，视情况而定

console.log(Infinity < 8); // false
console.log( Infinity > 8); // true
console.log( Infinity <= 8); // false
console.log( Infinity >= 8); // true
console.log( Infinity == 8); // false
console.log( Infinity != 8); // true
console.log( Infinity === 8); // false
console.log( Infinity !== 8); // true
console.log("--------");
console.log( Infinity < Infinity); // false
console.log( Infinity > Infinity); // false
console.log( Infinity <= Infinity); // true
console.log( Infinity >= Infinity); // true
console.log( Infinity == Infinity); // true JavaScript内置规定
console.log( Infinity != Infinity); // false
console.log( Infinity === Infinity); // true
console.log( Infinity !== Infinity); // false

4、非正常情况2----其他数据类型参与比较运算（排除字符串与字符串的比较）

• 其他数据类型也会隐式转换为数字参与比较
• “123”->123，true->1，false->0，null->0，undefined->NaN，“”->0，“abc”->NaN
• nill的判断比较特殊：null与0判断时，相等判断为false，>=和<=判断为true
• null == undefined 结果为true

// 非正常情况2 （排除字符串与字符串比较）
console.log(1 == "1"); // true
console.log(1 == true); // true
console.log(0 == false); // true
console.log(0 == ""); // true
console.log(0 == "     "); // true
console.log(0 == undefined); // false
console.log(0 == null); // false
console.log(1 > null); // true
console.log(0 >= null); // true
console.log(0 <= null); // true
console.log(undefined == null); // true 

5、非正常情况3----字符串与字符串比较

• 不会发生隐式转换为数字，而是比较来两个字符串的unicode编码顺序
• 字符编码顺序：从前往后0-9，A-Z，a-z，前面的小于后面的
• 比较时，不关心两个字符串的长度，从第一个字符开始比较，依次往后顺延比较，知道比较出大小，就不再往后比较

// 非正常情况 3 字符串和字符串比较
console.log(6 < "12"); // true
console.log("6" < "12"); // false
console.log("A" < "12"); // false
console.log("A" < "a"); // true
console.log("banner" < "banana"); // false

6、比较运算符运算顺序

• 从前往后比较，前面的结果与后面的进行比较

// 比较顺序，从前往后进行比较，前面得出的结果再与后面比较
console.log(3 > 2 > 1);

4、逻辑运算符

1、逻辑运算符

• 逻辑运算符常用于布尔类型之之间，当操作数都是布尔值时，返回值也是布尔值

&&：逻辑与运算符 且
||：逻辑或运算符
!：逻辑非运算符

2、正常情况

• 布尔类型值参与运算，返回值为布尔值

// 逻辑与：都真才真，有假就假
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
console.log(false && false); // false
// 逻辑或：有真就真，都假才假
console.log(true || true); // true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
// 逻辑非：非真即假，非假即真
console.log( !true ); // false
console.log( !false ); // true

3、非正常情况

• 除了布尔类型的值之外，其他数据类型的值也可以参与逻辑运算，运算过程中需要将操作数隐式转为布尔类型的值，参与判断计算，最终运算结果还是原来的某个位置的数据
• 并不是所有逻辑运算返回结果都是布尔值，其他数据参与得到的就是数据本身

4、隐式转换为布尔值规律

• 转为false：NaN、0、""空字符串、null、undefined
• 转为true：非0非NaN数字、非空字符串
• 当它们用于非布尔值时，返回值就可能是非布尔值，其实这种运算非常简单，就两句话：
• 逻辑与：a&&b，如果a能被转换为false，那么返回a，否则返回b
• 逻辑或：a||b，如果a能被转换为true，那么返回a，否则返回b

// 非正常情况，其他类型数据参与运算 
console.log(null && '123'); // null
console.log(12 && '123'); // 123
console.log(12 || '123'); // 12
console.log(undefined || null); // null

5、逻辑运算符运算顺序

• 同种运算符从前往后运算
• 综合运算顺序：非、与、或

5、赋值运算符

1、赋值运算符
赋值运算符必须有变量参与运算，赋值运算符会做两件事：

• 1、将变量中原始值参与对应数字运算（与右侧的数据）
• 2、将运算结果再重新赋值给变量
• 变量位于操作符左侧

2、赋值运算符号

=：等于
+=：加等于
-=：减等于
*=：乘等于
/=：除等于
%=：取余等于
++：递加
--：递减

6、一元运算符

• ++和–也叫医院运算符，只有一个操作数
• ++或–符号可卸载变量前和变量后面，位置不同可能导致程序运行结果不同
• a++：++符号在变量之后，a++在参与程序过程中使用的原始没有加1的值，使用完后第二次用a变量时，a用的就是加1后的新值，先参与，后自加

var i = 0;
console.log(i++); // 0
console.log(i); // 1
// 等价于
var i = 0;
console.log(i); // 0
i = i + 1; // i = 1
console.log(i); // 1

• ++a：++符号在变量之前，++a在参与过程中整体就使用a加1之后的新值，使用完后第二次用a变量时，a用的也是加1的新值，先自加，后参与

var i = 0;
console.log(++i); // 1
console.log(i); // 1
// 等价于
var i = 0;
i = i + 1; // i = 1
console.log(i); // 1
console.log(i); // 1

7、运算优先级

• 运算优先级也可叫综合运算顺序
• 优先级从高到低

1) ()优先级最高
2）一元运算符：++、--、!
3）算术运算符：先*/%后+-
4）关系运算符：>、>=、<、<=
5）相等运算符：==、!=、===、!==
6）逻辑运算符：先&& 后||
7）赋值运算符 =

// 案例
var a = 4;
var num = 1 * (2 + 3) && ++a || 5 >6 && 7 < 8 || !9;
console.log(num); // 5

9、表达式和语句

1、常见概念

1、表达式

• 一个表达式可产生一个值，有可能是运算、函数调用、也有可能是字面量，表达式可以放在任何需要值的地方
• 特点：表达式会先执行出一个结果，然后在参与其他程序

2、语句

• 语句可以理解为一种行为，循环语句和判断语句就是典型的语句，一个程序有很多个语句组成，一般情况下分号;分隔一个一个语句
• 语句可认为是给计算机的一个指令，执行这段代码
• 一般语句以分号结束，特殊的结构除外

3、流程控制语句

• 流程控制语句，通过一些特殊结构可让js代码加载时，要么可跳过一部分不加载，或者可循环加载一段代码
• 包括：条件分支语句、循环语句

2、条件分支语句

1、if语句

1、if语句

• if语句是最常用的条件分支语句，作用就是通过某个指定的判断条件，决定走哪个分支的代码
• 结构

if (condition expression ) {
	statement1;
} else {
	statement2;
]

• condition expression：条件表达式，可以是任意的代码或表达式，参与程序过程都会强制得到一个布尔值执行结果
• statement：结构体，js中可用{}包括一行到多行语句，这些语句整体组成了一个结构体，结构体重的语句要执行就都执行，要不执行就都不执行

var num = parseFloat(prompt("请输入您的成绩：","大于60分为及格"));
if (num >= 60) {
    alert("恭喜您，及格了");
} else {
    alert("不好意思，您没有及格");
}

• if：如果
• else：否则
• 总结：如果条件表达式为真true，执行结构体1，否则执行结构体2

注意事项
1、if语句可实现选择的功能，两个分支可选择一个执行，不会都执行
2、if语句可不写else分支，表示条件成立就执行后面的结构体，如果条件不成立，直接跳出if语句不执行
3、if语句后面的结构体如果是单行语句组成，可省略{}不写，建议省略大括号，容易出现程序错误
4、if语句能够控制自己内部的流程，但是不论走哪个分支，结束后都要继续执行if语句后面的其他语句，叫做殊途同归

// 注意1
var num = parseFloat(prompt("请输入您的成绩：","大于60分为及格"));
if (num >= 60) {
    alert("恭喜您，及格了");
}

// 注意2
var num = parseFloat(prompt("请输入您的成绩：","大于60分为及格"));
if (num >= 60)
    alert("恭喜您，及格了");
else
    alert("不好意思，您没有及格");
// 不建议这么写，容易出现错误

2、多分支if语句

• 包含多个判断条件，对应多个分支
• 语法：if…else if…else if…else…
• 如果…否则如果…否则如果…否则…
• 结构

if (条件1) {
	满足条件1，执行的结构体
} else if (条件2) {
	不满足条件1，满足条件2，执行的结构体
} else if (条件3) {
	不满足条件1/2，满足条件3，执行的结构体
} else {
	不满足前面所有条件，执行的结构体
}

• 案例
• 利用多分支if语句细分班级成绩区间
• 优秀：85-100
• 良好：75-84
• 及格：60-74
• 不及格：60以下

var num = parseInt(prompt("请输入您的成绩："));
if (num >= 85) {
    alert("您的成绩是优秀！");
} else if (num >= 75) {
    alert("您的成绩是良好！");
} else if (num >= 60) {
    alert("您的成绩是及格！");
} else {
    alert("您的成绩是不及格！");
}

• 注意事项

1、多分支if语句中有多个else if的分支，但else分支只能有一个，必须出现在最后，最为备选的选项，而且else也可以省略不写，表示前面条件都不满足，直接跳出不走任何分支
2、多分支if语句有跳楼现象：条件从上往下一次验证，如果满足了某个条件，会立即执行后面的结构体，执行完之后不会再往后验证其他的条件，而是从这一层直接跳楼跳出if语句，这就是跳楼现象

3、if语句嵌套

• if语句的结构体部分，代码可以是任意代码，甚至是另一组if语句，也就是if语句内部嵌套了if语句

• 如果想执行内部if语句的某个分支，必须满足外部if语句的条件，同时还要满足内部if语句的某个条件

• 优点：可简化多分支if语句

• 案例

• 利用if语句嵌套判断一个人是否退休

• 男性：60岁退休

• 女性：55岁退休

var sex = prompt("请输入您的性别：");
var age = parseInt(prompt("请输入您的年龄："));
if (sex === '男') {
    // 男性
    if (age >= 60) {
	alert("恭喜您，您可以享受人生了！");
	} else {
	alert("不好意思，您还得继续努力");
	}
} else {
    // 女性
        if (age >= 55) {
	alert("恭喜您，您可以享受人生了！");
	} else {
	alert("不好意思，您还得继续努力");
	}
}

2、三元表达式

1、三元表达式

• 又称为三元运算符，必须有三个操作数参与运算
• 操作符号：? :
• 表达式：在参与js程序时，都必须先计算出表达式结果，才能参与后续程序
• 由于三元表达式具备了一些选择的效果，所以也是一种条件分支语句

2、三元表达式语法

• boolean_expression ? true_value : false_value;
• boolean_expression：布尔表达式，表达式在参与三元运算中必须求得一个布尔类型的值，要么是true，要么是false，结果作为判断依据，判断到底去：前面的值还是后面的值
• true_value：布尔表达式的值为真时，三元表达式的结果
• false_value：布尔表达式的值为假时，三元表达式的结果
• 作用：根据布尔表达式的结果，如果为真，三元表达式的结果就是真值，如果为假，三元表达式结果就为假值

3、三元表达式优点

• 虽然if语句可模拟三元表达式，但三元表达式有自己的优点

1、二选一的情况下，三元表达式结构更简单
2、三元表达式作为一个表达式参与程序是必须运算出结果才能参与，可利用这个特点，将二选一结果赋值给一个变量

• 遇到给一个变量根据条件二选一赋值的情况，可使用三元表达式

3、switch语句

1、switch语句

• 开关语句，允许一个程序邱一个表达式的值，并且尝试去匹配表达式的值到一个case标签，如果匹配成功，这个程序执行相关语句
  2、switch语句语法

switch (表达式) {
	case 值1:
		结构体1;
		break;
	case 值2:
		结构体1;
		break;
	case 值3:
		结构体1;
		break;
	......
	default:
	    结构体n;
	    break;
}

3、switch语句结构解析

• switch：关键字，表示开始进入一个开关语句
• 表达式：会求出一个具体的值，将这个值去与{}内部的case后面的值进行对比、匹配，如果值相等表示匹配成功，匹配相等时，方式是进行全等匹配，不止值要相等，数据类型也要相等
• case：示例的意思，作为关键字后面必须跟一个空格，书写匹配的值
• case后面的结构体：每个case匹配成功之后要执行的语句
• break：用于打断结构体，直接跳出程序，模拟跳楼现象
• default：相当于if语句中的else，否则的情况如果前面的case都不匹配，执行default后面的语句

4、switch语句运行机制

• switch语句首先会将小括号内的表达式计算出一个结果，用结果去匹配结构体内部的case
• 从上往下进行匹配，如果匹配成功，会立即执行这个case后面的语句，直到遇到一个break跳出整个switch语句
• 如果前面的case没有匹配成功，会跳过case之间的语句，器匹配下一个case，知道匹配成功，就执行case后面的语句，如果都不成功就执行default后面的语句

5、案例

• 输出星座运势

// 用户输入
var xingzuo = prompt("请输入您的星座：","白羊座");
// 进行匹配
switch (xingzuo) {
	case "白羊座":
		alert("运势持续在线，将会是忙而充实的一天");
		break;
	case "金牛座":
	    alert("你或许需要付出更多的努力，才能实现自己的大志");
	    break;
	case "双子座":
		alert("你的脾气很大，容易把负面情绪波及到最亲近的人");
		break;
	default:
		alert("对不起，数据库不全，不能找到您的星座");
	
}

注意事项
default可以不写，相当于if语句没有else
break关键字：根据结构需要有时必须在每个case后面都要写，为了模拟跳楼现象，如果不写break，对应的case后面的语句执行之后，不会跳出结构体，会继续向下执行其他case后面的语句，知道遇到下一个break
因此，可以利用不写break的情况制作一些特殊的案例

• 用户输入一个月份的数字，请返回给用户对应月份的天数

var month = parseInt(prompt("请输入一个月份的数字","1"));
// 输出对应的天数
switch (month) {
  case 1:
  case 3:
  case 5:
  case 7:
  case 8:
  case 10:
  case 12:
        alert("这个月有31天");
        break;
      case 2:
        alert("这个月有28天或29天");
        break;
      default:
        alert("这个月有30天");
    }

总结：实际工作中使用三种语句的场景
1、if语句：最常用的语句，所有的判断情况都能够书写
2、三元表达式：多用于给变量赋值根据条件二选一的情况
3、switch语句：多用于给一个表达式去匹配多种固定值可能性的情况

3、循环语句

1、for循环

1、for循环

• for循环是一种前测试循环语句，在反复执行一段代码之前，都要先测试入口条件，如果条件为真，可继续循环，如果条件为假，必须跳出循环不再执行
• for循环是一种反复执行一段代码直到测试条件为假时停止
  2、语法

for (;;) {
}
// 中文化
for (定义循环变量;变量的最大值或最小值;步长) {
	循环体;
}
// 这种解释只能涵盖for循环的一部分特殊结构，不能表示所有for循环实现的情况

3、for循环执行过程

4、for循环执行过程

• for循环执行过程：遇到for循环立即执行1位置的语句，执行完毕后立即执行2位置的语句，2位置会强制得到一个true或false的结果，如果true表示入口条件为真，下一步执行3位置的语句，如果false表示入口条件为假，不再往下执行，直接跳出循环执行后面5位置的语句
• 如果能够执行到3位置，3位置是一个结构体必须执行完毕，再执行4位置的语句，执行完毕后再执行2位置的语句，回到了判断真假，如果为true，继续执行3，在执行4…直到2位置得到一个false的结果，循环结束跳出执行5

主要事项
1、小括号内部必须有两个分号
2、for循环{}后面不需要加分号
3、如果2位置语句不写，相当于没有设置入口条件，或者条件永远为真，没法限制什么时候停止循环了，会出现死循环
4、3位置是循环的结构体，每次进入循环都要执行完后，才能执行语句4,3位置的语句是可以人为自定义的，甚至可书写if语句
for循环嵌套if语句：表示既要能够执行循环，还要满足if语句的条件
for循环嵌套for循环：外层循环执行一次，内层循环作为外层3位置的结构体，必须执行完所有的内层循环，才能进入外层循环下一次的4
循环内的变量是全局变量，必须避免循环嵌套时起相同的变量名，内层和外层变量名必须不同，常用的变量名i，j，k

2、do while循环

1、do while循环

• do while循环是一种后测试循环语句，会执行一次结构体，执行完后才会去判断入口条件，如果条件为真能够继续下一次循环，如果条件为假跳出循环
  2、语法

do {
	结构体;
} while (条件表达式);
// do：做什么，后面每次循环的循环体
// while：当......时候
// 先执行一次循环体，然后当条件表达式为真时可继续循环

注意事项
1、如果循环中需要循环变量参与，循环变量必须定义在循环外面，否则会被重置
2、循环变量自加的过程需要写在 {} 循环体内部
3、如果将循环变量写在结构体内，i的初始值每次都会被重置，容易出现死循环
4、变量自加过程写在输出语句前面和后面，结果是不同的
5、do while 循环即便条件第一次测试就为假，也会执行一次结构体
6、至少会执行一次循环体

3、while循环

1、while 循环

• while 循环是一种前测试循环语句，在执行循环体之前都要测试入口条件，条件为真继续执行，条件为假直接跳出循环

2、语法

while(条件表达式){
循环体；
}
// 当条件表达式为真时，执行循环体，如果为假，跳出循环

2、注意事项
1）如果需要循环变量参与，必须定义在循环外部，避免被重置
2）循环变量自加的过程写在循环体内部

总结
1、遇到必须先执行一次结构体的循环，使用 do while 循环
先测试入口条件的循环，可以选择 for 循环或 while 循环

4、break语句

1、break语句

• 解释：我已经找到我要的答案了，不需要进行更多的循环
• break语句的作用可立即停止当前的for、do while、while循环
• 根据一些条件设置break位置，直到循环能够执行到break语句立即停止执行，跳出循环

2、注意事项

• break如果没有特殊指示，只能停止自己所在的那一层循环，并不能终止外部循环
• 如果想停止外层循环，可以给外层循环添加一个标签名 label，在内层循环的 break 关键字后面空格加一个 label 名

5、continue语句

1、continue语句

• 这个答案不是我想要的，赶紧试试下一个吧！
• 遇到 continue 表示当前的一次循环数据不是我们想要的，会立即停止当前次的循环，立即进入下一次循环

2、注意事项

• 要根据特殊条件设置 continue 的位置
• continue 如果没有特殊指示只能进入自己的下一次循环，不能立即停止外层循环的这一次进入下一次
• 控制外层循环的方式与 break 一样，都是添加外层的标签名

总结
break 和 continue 这两个语句的出现可以帮助我们大量的优化代码，减少了计算机的计算次数

6、穷举思想

1、什么是穷举思想？

• 实际案例中，可能需要找到一些有规律的数据，但计算机没办法自动智能筛选所有的数据，只能程序员自己书写一段代码，让计算机根据代码去进行筛选
• 穷举思想：再根据规律的条件对所有这些数据进行筛选，这种方式就是穷举法
• 穷：穷尽，举：列举
  2、穷举思想制作方法
• for循环：外层使用for循环进行一一列举
• if语句：内层用if语句进行判断，酾浚需要的数据，如果满足条件就操作数据，如果不满足条件跳过看下一次循环的数据

3、案例
在控制台上输出6的所有约数
注意：

• a % b = 0，a叫做b的倍数，b叫做a的约数
• 约数也叫做因数
• 从可能性中一一举例，筛选
• 一个数的约数只能是小于等于自己的数

<!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>
        // 输出6的所有约数
        for (var i = 0; i <= 6; i++) {
            if (6 % i == 0) {
                console.log(i);
            }
        }

        // 进阶：输入一个数，输出这个数的所有约数
        var num = parseInt(prompt("请输入一个数："));
        for (var i = 0; i <= num; i++) {
            if (num % i == 0) {
                console.log(i);
            }
        }
    </script>
</body>
</html>

7、累加器

1、什么是累加器？

• 有些时候需要的不是每一个数据是什么，而是需要得到所有数据的加和，必须想办法将所有的数据的和存起来，就用到累加器
• 累加器本质就是变量
• 实现累加的效果就是利用循环，每次循环就将新的数据加到原始的变量中去，赋值过程是一个加等于赋值

2、案例：求1-10之间所有数字之和

<!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>
        // 创建一个累加器
        var sum = 0;
        for (var i = 1; i <= 10; i++) {
            sum += i;
        }
        console.log(sum);
    </script>
</body>
</html>

3、注意事项

• 累加器必须定义在循环外部前面，如果定义在循环内部，每次循环都会将累加器重置，不能实现累加功能
• 累加器的初始值必须设置，而必须设置为0，不能影响累加结果
• 使用最终累加结果式，必须在for循环结束后的外面，如果写在循环内部，循环没结束，并不是最终需要的值

8、累乘器

1、什么是累乘器？

• 累积一些数据的乘积

2、案例：求1-10的累积的乘积

<!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>
        // 创建一个累乘器
        var mul = 1;
        for (var i = 1; i <= 10; i++) {
            mul *= i;
        }
        console.log(mul);
    </script>
</body>
</html>

3、注意事项

• 累乘器必须定义在循环外部前面
• 累乘器的初始值必须是1,1乘以任何数都等于本身
• 累乘器最终结果必须在for循环结束后使用

9、案例

• 水仙花数是一种特殊的三位数，它的特点是每个数位的三次方之和等于它本身

<!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>
        // 判断一个三位数是不是水仙花数

        // 方法一：数学方法
        for (var i = 100; i <= 999; i++) {
            var ge = i % 10;
            var shi = parseInt(i / 10) % 10;
            var bai = parseInt(i / 100);
            var num = ge * ge * ge + shi*shi*shi + bai*bai*bai;
            if (num === i) {
                console.log(i);
            }
        }
    </script>
</body>
</html>

补充说明
1）parseInt()方法
作用：第一，对浮点数进行取整操作，第二，将字符串转为整数数字
特殊：该方法有第二个参数，值为2-36之间的整数，表示的是进制
注意1：如果没有第二个参数
1、如果出现亿0x/0X开头的字符串，会自动按照对应的十六进制转为整数
2、如果出现以0/0o/00开头的字符串，ES3中会按照八进制进行转换，而ES5中默认按照十进制进行转换
3、如果出现以其他字符开头的字符串，都按照十进制进行转换
因此，为了避免解析的不一致问题，要指定第二个参数进制


2）隐式转换
算术运算和比较运算中会出现其他的数据类型会隐式转换为数字类型：
1、对应数字：纯数字字符串会转为对应的数字"123"->123
2、转换为1：true
转换为0：false、null、""空字符串、空白字符串
转换为NaN：undefined、非空非纯数字字符串

3）一元运算符
1、++和--也叫一元运算符，只有一个操作数
2、++或--符号可卸载变量前和变量后，位置不同可能导致程序运行结果不同
3、a++：++符号在变量之后，a++在参与程序过程中使用的原始没有加1的值，使用完后第二次哟a变量时，a用的就是加1后的新值，先参与，后自加
4、++a：++符号在变量之前，++a在参与过程中整体就使用a加1之后的新值，使用完后第二次用a变量时，a用的也是加1的信值，先自加，后参与

10、数组

1、概念

1、为什么要学习数组？

• 前面学习的数据类型，只能存储一个值，如果我们想要存储多个值，该如何存储呢？数组

2、数组概念

• 数组：就是将多个元素（通常是同一数据类型）按照一定顺序排列放到一个集合中，那么这个集合就称为数组

3、定义数组

• 数组是一组有序的数据集合，数组内部可存放多个数据，不限制数据类型，并且数组的长度可动态调整
• 创建数组最简单的方式就是数组字面量方式
• 数组的字面量：[]
• 一般将数组字面量复制给一个变量，方便后期对数组进行操作
• 如果存放多个数据，每个数据之间用逗号分隔，最后一个后面不需要加逗号

2、获取数组元素

• 数组可以通过一个index（索引值、下标）去获取对应的某一项的数据，进行下一步操作
• index：从0开始，按照证书排序往后顺序排序，例如0,1,2，3…
• 可以通过index获取某一项值之后，使用或者更改数组项的值
• 调用数据：利用数组变量名后面直接加[index]方式
• 注意：如果索引值超过了数组最大项，相当于这一项没有赋值，内存存储的就是undefined
• 更改数据：arr[index]调用这一项数据，后面等号赋值更改数据

3、数组长度

• 数组由一个length属性，记录的是数组的数据总长度
• 使用方法：变量名.length（console.log(arr.length);）
• 数组的长度与数组最后一项的下标存在关系，最后一项的下标等于数组的length-1
• 获取最后一项的数据时，可写成 console.log(arr[arr.length-1]);
• 数组的长度不是固定不变的，可发生更改
• 增加数组长度：直接给数组length属性赋一个大于原来长度的值，赋值方式使用等号赋值
• 可以给一个大于最大下表的项直接赋值，也可强制拉长数组
• 缩短数组长度：强制给length属性赋值，后面数据会被直接删掉，删除是不可逆的

4、数组遍历

• 遍历：遍历所有，对数组的每一个元素都访问一次就叫遍历，利用for循环将数组中的每一项单独拿出来，进行一些操作
• 根据下标在0到arr.length-1之间，进行for循环遍历
• 案例：求一组数中的所有数的和以及平均数

<!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>
        // 求一组数中的所有数的和以及平均数
        var arr1 = [5,9,6,5,1,2,3,7];
        var sum = 0;
        for(var i = 0; i <= arr1.length - 1; i++) {
            sum += i;
        }
        var avg = sum / arr1.length;
        console.log(sum,avg);
    </script>
</body>
</html>

11、函数

1、为什么要有函数？

如果要在多个地方邱某个数的约数个数，应该怎么做呢？这个时候就要用到函数

2、函数概念

• 函数，也叫做功能、方法，函数可将一段代码仪器封装起来，被封装起来的函数具备一项特殊的功能，内部封装的一段代码作为一个完整的结构体，要执行就都执行，要不执行就都不执行
• 函数的作用就是封装一段代码，将来客重复使用

3、函数声明

• 函数声明又叫函数定义，函数必须先定义然后才能使用
• 如果没有定义函数就直接使用，会出现一个引用错误

函数声明语法

function 函数名 (参数) {
    封装的结构体;
}
// 特点：函数声明时，函数体并不会执行，只有当函数被调用时才会执行
// 函数命名规则：可使用字母、数字、下划线、$，数字不能作为开头，区分大小写，不能使用关键字和保留字

4、函数调用

• 函数方法：函数名();
• 函数调用也叫作函数执行，调用时会将函数内部封装的所有结构体的代码立即执行
• 函数内部语句执行的位置，与函数定义的位置无关，与函数调用位置有关
• 函数可一次定义，多次执行

<script>
	function fun() {
		console.log(1);
		console.log(2);
		console.log(3);
		console.log(4);
	}
	console.log(5);
	fun();
	// 结果为：5,1,2,3,4
</script>

5、函数参数

• 我们希望函数执行结果不是一成不变的，可根据自定义的内容发生一些变化
• 函数预留了一个接口，专门用于让用户自定义内容，使函数发生一些执行效果变化
• 接口：就是函数的参数，函数参数的本质就是变量，可接收任意类型的数据，导致函数执行结果根据参数不同，结果也不同
• 一个函数可设置0个或多个参数，参数之间用逗号分隔
• 函数的参数根据书写位置不同，名称也不同
• 形式参数：定义在()内部的参数，叫做形式参数，本质是变量，可接收实际参数传递过来的数据，简称形参
• 实际参数：调用()内部的参数，叫做实际参数，本质就是传递的各种类型的数据，传递给每一个形参，简称实参
• 函数执行过程，伴随着传参的过程

函数参数优点

• 不论使用自己封装的函数，还是其他人封装的函数，只需要知道传递什么参数，执行什么功能，没必要知道内部的结构是什么
• 一般自己封装的函数或者其他人封装的函数需要有一个API接口说明，告诉用户参数需要传递什么类型的数据，实现什么功能

6、函数返回值

• 函数能够通过参数接收数据，也能够将函数执行结果返回一个值
• 利用函数内部的一个return的关键字设置函数的返回值
• 作用1：函数内部如果结构体执行到一个return的关键字，或立即停止后面代码的执行
• 作用2：函数在执行完自身功能之后，整体会被return矮化成一个表达式，表达式必须求出一个值继续可参与程序，表达式的值就是return后面的数据

函数返回值应用

• 函数如果有返回值，执行结果可当成普通数据参与程序
• 函数如果有返回值，可作为一个普通数据赋值给一个变量，甚至赋值给其他函数的实际参数
• 注意：如果函数没有设置return语句，那么函数有默认的返回值undefined，如果函数使用return语句，但return后面没有任何值，那么函数的返回值也是undefined

7、函数表达式

• 函数表达式是函数定义的另一种方式
• 定义方法：就是将函数的定义、匿名函数赋值给一个变量
• 函数定义赋值给一个变量，相当于将函数整体矮化成了一个表达式
• 匿名函数：函数没有函数名
• 调用函数表达式，方法给变量名加()执行，不能使用函数名加()执行

var fool = function() {
	console.log(2);
}

8、函数数据类型

• 函数是一种单独的函数类型Function
• 由于函数是一种数据类型，可参与其他程序
• 例如，可以把函数作为另一个函数的参数，在另一个函数中调用
• 或者，可以把函数可以作为函数值从函数内部返回

9、arguments对象

• JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性，也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参，arguments是一个伪数组，因此及可以进行遍历
• 函数的实参个数和形参个数可以不一致，所有的实参都会存储在函数内部的arguments类数组对象中

案例
= 定义一个求和函数，如果传入1个参数，返回它自己，如果传入两个参数，返回它们的和，如果传入三个参数，先比较前两个的大小，大的与第三个参数求和返回，如果传入4个及以上，输出错误提示

10、函数递归

• 函数内部可通过函数名调用函数自身的方式，就是函数递归现象
• 递归的次数大多容易出现错误：超出计算机的计算最大能力
• 更多时候，使用递归去解决一些数学中的现象
• 例如可以输出斐波那契数列的某一项的值

案例

• 输出斐波那契数列的某一项的值
• 斐波那契数列：后面的一项数据是前两项数据之和：1,1,2,3,5,8,13,21,34,55…

11、作用域

1、作用域概念

• 作用域：变量可以起作用的范围
• 如果变量定义在一个函数内部，智能在函数内部被访问到，在函数外部不能使用这个变量，函数就是变量定义的作用域
• 任何一对花括号{}中的结构体都属于一个块，在这之中定义的所有变量在代码块外都是不可见的，我们称之为块级作用域
• 在ES6之前没有块级作用域的概念，只有函数作用域，现阶段可认为JavaScript没有块级作用域

2、全局变量和局部变量

• 局部变量：定义在函数内部的变量，只能在函数作用域内部被访问到，在外面没有定义的
• 全局变量：从广义上来书，也是一种局部变阿玲，定义在全局的变量，作用域范围是全局，在整个js程序任意位置都能被访问到
• 变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁

3、作用域链

• 只有函数可以制作作用域结构，那么只要是代码，就至少有一个作用域，即全局作用域，凡是代码中有函数，那么这个函数就构成另一个作用域，如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
• 将这样的所有的作用域列出来，可有一个结构：函数内指向函数外的链式结构，就成为作用域链

4、遮蔽效应

• 程序在遇到一个变量时，使用时作用域查找顺序，不同层次的函数内都有可能定义相同名字的变量，一个变量在使用时，会有限从自己所在层作用域查找变量，如果当前层没有变量定义会按照顺序从本层往外依次查找，知道找到第一个变量定义，整个过程中会发生内层变量遮蔽外层变量的效果，叫做遮蔽效应

5、参数也是局部变量

• 函数的参数本质是一个变量，也有自己的作用域，函数的参数也是属于函数自己内部的局部变量，智能在函数内部被使用，在函数外面没有定义

6、不写var关键字的影响

• 在函数内部想要定义新的变量，如果不加关键字var，相当于定义全局变量，如果全局也有相同的标识符，会被函数内部的变量影响，局部变量污染全局变量
• 注意：每次定义变量时都必须写var关键字，否则就会定义在全局，可能污染全局

7、函数作用域

• 函数也有自己的作用域，定义在哪个作用域内部，智能在这个作用域范围内被访问，除了作用域不能被访问
• 函数定义在另一个函数内部，如果外部函数没有执行时，相当于内部代码没写

8、预解析

• JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的额，JavaScript解析器执行JavaScript代码时，分为两个过程：预解析和代码执行过程
• 预解析过程：
• 1、把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值
• 2、把函数的声明提升到当前作用域的最签名，只会提升声明，不会提升调用
• 3、先提升var，再提升function
• JavaScript执行过程：在预解析之后，根据新的代码顺序，从上往下按照既定规律执行js代码

9、变量声明提升

• 在预解析过程中，所有定义的变量都会将声明的过程提升到所在的作用域上面，在将来的代码执行过程中，按照先后顺序会先执行被提升的声明变量过程
• 提升过程中，只提升声明过程，不提升变量赋值，相当于变量定义未赋值，变量内存储undefined值
• 因此，在js中会出现一种现象，在前面调用后定义的变量，不会报错，只会使用undefined值

10、函数声明提升

• 在预解析过程中，所有定义的函数，都会将声明的过程提升到所在的作用域最上面，在将来的代码执行过程中，按照先后顺序会先执行被提升的函数声明过程
• 在预解析之后的代码执行过程中，函数定义过程已经在最开始就会执行，一旦函数定义成功，后续就可以直接调用函数
• 因此，在js中会出现一种现象，在前面调用后定义的函数，不会报错，而且能正常执行函数内部的代码

11、提升顺序

• 预解析过程中，先提升var变量声明，再提升function函数声明
• 假设出现变量名和函数名相同，那么后提升的函数名标识符会覆盖先提升的变量名，那么在后续代码中出现调用标识符时，内部是函数的定义过程，而不是undefined
• 如果调用标识符过程在源代码函数和变量定义后面，相当于函数名覆盖了一次变量名，结构在执行到变量赋值时，又被新值覆盖了函数的值，那么在后面再次调用标识符，用的就是变量存的新值

12、函数表达式提升

• 在预解析过程中，函数表达式进行的是变量声明提升，而不是函数声明提升，提升后变量内部存的是一个undefined，在前面进行函数方法调用，数据类型会提示错误
• 建议：定义函数时，最好使用function关键字定义方式，这样函数声明提升可永远生效

13、函数声明提升应用

• 函数声明提升可用于调整代码顺序，将大段定义过程放到代码最后，但是不影响代码执行效果

14、IIFE 自调用函数

• IIFE：叫做即时调用的函数表达式，也叫做自调用函数，表示函数在定义时就立即调用

• 函数调用方式：函数名或函数表达式的变量名后面加()运算符

• 函数名定义的形式不能实现立即执行自调用，函数使用函数表达式形式可实现立即执行，原因是因为函数表达式定义过程中，将一个函数矮化成一个表达式，后面加()运算符就可以立即执行

• 启发：如果想实现IIFE，可想办法将函数矮化成表达式

• 函数矮化成表达式，就可实现自调用

• 函数矮化表达式方法，可让函数参与一些运算，也就是说给函数前面加一些运算符

• 数学运算符：+、-、()

• 逻辑运算符：! 非运算

• IIFE结构可关住函数的作用域，在结构外面是不能调用函数的

• IIFE最常用的是()运算符，而且函数可不写函数名，使用匿名函数

12、对象

1、概念

1、为什么要有对象？

• 显示生活中的对象：万物皆是对象，对象是一个具体的事物，一个具体的事物就会有行为和特征
• 案例：一部车，一个手机
• 车是一类事物，门口停的那辆车才是对象
• 特征：红色、四个轮子
• 行为：驾驶、刹车

2、什么是对象？

• JavaScript中的对象：
• JavaScript中的对象其实就是生活中对象的一个抽象
• JavaScript的对象是无序属性的集合
• 其属性可以包含基本值、对象或函数，对象就是一组没有顺序的值，可把JavaScript中的对象想象成键值对，其中值可以是数据和函数
• 对象的行为和特征：
• 特征–在对象用属性表示
• 行为–在对象中用方法表示

2、对象字面量

• 创建一个对象最简单的方式是使用对象字面量赋值给变量，类似数组
• 对象字面量语法：{}
• 内部可以存放多条数据，数据与数据之间用逗号分隔，最后一个后面不要加逗号
• 每条数据都是有属性名和属性值组成，键值对写法：k:v
• k：属性名
• v：属性值，可以是任意类型的数据，比如简单类型数据、函数、对象

语法：

var obj = {
	k:v,
	k:v,
	k:v
};

案例：

var obj = {
	name: 'zs',
	age: 18,
	sex: true,
	sayHi: function () {
		console.log("你好！");
	}
};

区分属性和方法

• 属性：对象的描述性特征，一般是名词，相当于定义在对象内部的变量
• 方法：对象的行为和功能，一般是动词，定义在对象中的函数

调用对象内部属性和方法语法

• 用对象的变量名打点调用某个属性名，得到属性值
• 在对象内部用this打点调用属性名，this替代对象
• 用对象的变啊领名后面加[]调用，[]内部是字符串格式的属性名
• 调用方法时，需要在方法名后加()执行

更改对象内部属性和方法的语法

• 更改属性的属性值方法：先调用属性，再等号赋值（obj.age = 19;）
• 增加薪属性和属性值：使用点语法或者[]方法直接定义新属性，等号赋值（obj.height = 180;）
• 删除一条属性：使用一个delete关键字，空额后面加属性调用（delete obj.sex;）

3、其他创建对象方式

1、new Object() 创建对象

• Object()构造函数，是一种特殊的函数，主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中
• 1、构造函数用于创建一类对象，首字母要大写
• 2、构造函数要和new一起使用才有意义

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // new Object() 方法创建
    var person1 = new Object();   //创建了一个新的空的对象
    // 添加属性和方法
    person1.name = "zs";
    person1.age = 18;
    person1.sex = true;
    person1.sayHi = function () {
      console.log("你好");
    };

    var person2 = new Object();   //创建了一个新的空的对象
    // 添加属性和方法
    person1.name = "ls";
    person1.age = 19;
    person1.sex = true;
    person1.sayHi = function () {
      console.log("你好");
    };
    // 输出
    console.log(person1);
  </script>
</head>

<body>

</body>

</html>

说明：new在执行是会做四件事

• new会在内存中创建一个新的空对象
• new会让this指向这个新的对象
• 执行构造函数 目的：给这个新对象加属性和方法
• new会返回这个新对象

2、工厂函数 创建对象

• 如果要创建多个类似的对象，可将new Object()过程封装到一个函数中，将来调用函数就能创建一个对象，相当于一个生产对象的函数工厂，用来简化代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 工厂方法就是相当于对 new Object() 方法的一个封装
    function createPerson(name,age,sex) {
      // 创建一个空对象
      var person = new Object();
      // 添加属性和方法，属性可以接受参数的值
      person.name = name;
      person.age = age;
      person.sex = sex;
      person.sayHi = function () {
        console.log("hello");
      };
      // 将对象作为函数的返回值
      return person;
    }
    // 想创建一个对象，可以调用工厂函数
    var p1 = createPerson("zs",18,true);
    var p2 = createPerson("ls",19,false);
    // 输出
    console.log(p1);
    console.log(p2);
  </script>
</head>
<body>

</body>

</html>

3、自定义 构造函数

• 比工厂方法更简单
• 自定义一个创建具体对象的构造函数，函数内部不需要new一个构造函数的过程，直接使用this代替对象进行属性和方法的书写，也不需要return一个返回值
• 使用时，利用new关键字调用自定义的构造函数即可
• 注意：构造函数的函数名首字母需要大写，区别于其他普通函数名

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 自己定义一个构造函数
    function Person(name,age,sex) {
      // 不需要使用 new 一个新对象
      // 用 this 替代将来创建的新对象
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.sayHi = function () {
        console.log("hello");
      };
      // 不需要添加 return
    }
    // 用 new 关键字调用构造函数
    var p1 = new Person("zs",18,true);
    console.log(p1);
  </script>
</head>
<body>

</body>

</html>

4、对象遍历

• for in循环也是循环的一种，专门用来遍历对象，内部会定义一个k变量，k变量在每次循环时会从第一个开始接收属性名，一直接收到最后一条属性名，执行完后跳出循环
• 简单循环遍历：输出每一项的属性名和属性值

// 循环比那里输出每一项
for (var k in obj) {
	console.log(k + "项的属性值是" + obj[k]);
}

5、简单类型和复杂类型

1、简单类型和复杂类型的区别

• 基本类型又叫做值类型，复杂类型又叫引用类型
• 值类型：简单数据类型，基本数据类型，在存储时，变啊领中存储的是值本身，因此叫做值类型
• 引用类型：复杂数据类型，在存储时，变量中存储的仅仅是地址（引用），因此叫做引用数据类型

2、堆和栈

• JavaScript中没有堆和栈的概念，这里用堆和栈来讲解，目的是方便理解和方便以后学习
• 堆栈空间分配区别：
• 1、栈（操作系统）：由操作系统自动分配释放，存放函数的参数值，局部变量的值等
• 2、堆（操作系统）：存储复杂类型（对象），一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收

3、基础类型在内存中的存储

• 变量中如果存储的是简单类型的数据，那么变量中存储的是值本身，如果将变量赋值给另一个变量，是将内部的值赋值一份给了另一个变量，两个变量之间没有联系，一个变化，另一个不会同时变化

4、复杂类型在内存中的存储

• 如果将复杂类型的数据赋值给一个变量，复杂类型的数据会在内存中创建一个原型，而变量中存储的是指向对象的一个地址，如果将变量赋值给另一个变量，相当于将地址赋值一份给了新的变量，两个变量的地址相同，指向的是同一个原型，不论通过哪个地址更改了原型，都是在原型上发生的更改，两个变量下次访问时，都会发生变化

5、基本类型作为函数参数

• 基本类型的数据作为函数参数，符合基本函数类型的数据特点

6、内置对象

• JavaScript包含：ECMAScript、DOM、BOM
• ECMAscript包含：变量、数据、运算符、条件分支语句、循环语句、函数、数组、对象…
• JavaScript对象包含三种：自定义对象，内置对象，浏览器对象
• ECMAScript对象：自定义对象内置对象
• 使用一个内置对象，只需要知道对象中有哪些成员，有什么功能，直接使用
• 需要参考一些说明手册 W3C/MDN

1、MDN

Mozilla开发者网络提供有关开放网络技术的信息，包括HTML，CSS和万维网及HTML5应用的API

• MDN：https://developer.mozilla.org/zh-CN/
• 比如：通过查询MDN学习Math对象的random()方法的使用

如何学习一个方法？

• 1、方法的功能
• 2、参数的意义和类型
• 3、返回值意义和类型
• 4、demo进行测试

2、Math对象

• Math对象具有数学常数和函数的属性和方法，可直接使用
• 根据数学相关的运算来找Math中的成员（求绝对值，取整）

常用方法

• Math.PI：圆周率
• Math.random()：生成随机数
• Math.floor()/Math.ceil()：向下取整/向上取整
• Math.round()：取整，四舍五入
• Math.abs() ：绝对值
• Math.max()/Math.min()：求最大和最小值
• Math.sin()/Math.cos()：正弦/余弦
• Math.power()/Math.sqrt()：求指数次幂/求平方根

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 一个半径为10的圆的周长
    // 圆周率
    // console.log(2 * 10 * Math.PI);

    // 随机数
    function getRandomIntInclusive(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 
    }
    // console.log(getRandomIntInclusive(10,20));

    // 四舍五入取整
    // console.log(Math.round(4.3));
    // console.log(Math.round(4.7));

    // 绝对值
    // console.log(Math.abs(-90));

    // 获取最大值和最小值
    // console.log(Math.max(45,67,34,90,123,33));
    // console.log(Math.min(45,67,34,90,123,33));

    // 求一个数的几次方
    console.log(Math.pow(3,4));
    // 平方根
    console.log(Math.sqrt(4));
    console.log(Math.pow(4,1/2));
  </script>
</head>
<body>
  
</body>
</html>

3、Array对象（数组对象）

1、创建数组对象的两种方式

1、数组创建方法：字面量方式和new Array() 构造函数方法
2、语法：var arr = new Array(1,2,3);

2、检测数组类型

instanceof 检测某个实例是否是某个对象类型
语法：console.log(arr instanceof Array); // true

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 字面量方法
    var arr = [1,2,3];

    // 数组也是对象，可以通过构造函数生成
    // 空数组
    var arr1 = new Array();
    // 添加数据，可以传参数
    var arr2 = new Array(1,2,3);
    var arr3 = new Array("zs","ls","ww");
    // console.log(arr1);
    // console.log(arr2);
    // console.log(arr3);

    // 检测数组的数据类型
    // console.log(typeof(arr));
    // console.log(typeof(arr3));
    var a = {};
    // 检测某个实例对象是否属于某个对象类型
    console.log(arr instanceof Array);
    console.log(arr2 instanceof Array);
    console.log(a instanceof Array);

    function fun () {
      console.log(1);
    }
    console.log(fun instanceof Function);
  </script>
</head>
<body>
  
</body>
</html>

3、数组对象常用方法

1、toString()：将数组转换成字符串，逗号分隔每一项
2、首尾数据操作

• push()：在数组末尾添加一个或多个元素，并返回数组操作后的长度
• pop()：删除数组最后一项，返回删除项
• shift()：删除数组第一项，返回删除项
• unshift()：在数组开头添加一个或多个元素，并返回数组的新长度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 字面量方法
    var arr = [1,2,3,4];

    // toString() 方法：转字符串
    // console.log(arr.toString());

    // 首尾操作方法
    // 尾推,参数是随意的，可以有一个或多个
    // console.log(arr.push(5,6,7,8));
    // console.log(arr.push([5,6,7,8]));
    // console.log(arr);

    // 尾删，删除最后一项数据
    // 不需要传参
    // console.log(arr.pop());
    // console.log(arr);

    // 首删，删除第一项数据，不需要传参
    // console.log(arr.shift());
    // console.log(arr);

    // 首添，参数与 push 方法类似
    // console.log(arr.unshift(-1,0));
    // console.log(arr);
  </script>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 字面量方法
    var arr = [1,2,3,4];

    // 将数组的第一项移动到最后一项
    // 删除第一项
    // 将删除的项添到最后一项
    arr.push(arr.shift());
    console.log(arr);
    arr.push(arr.shift());
    console.log(arr);
    arr.push(arr.shift());
    console.log(arr);
    arr.push(arr.shift());
    console.log(arr);
  </script>
</head>
<body>
  
</body>
</html>

3、合并和拆分

• concat()：将两个数组合并成一个新的数组，原数组不受影响，参数位置可以是一个数组字面量、数组变量、零散值
• slice(start,end)：从当前数组中截取一个新的数组，不影响原来的数组，返回一个新的数组，包含从start到end（不包括该元素）的元素；参数区分正负，正值表示下标位置，负值表示从后面往前数第几个位置，参数可只传递一个，表示从开始位置截取到字符串结尾

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 字面量方法
    var arr = [1,2,3,4,5,6,7,8,9,10];
    // 合并方法
    // 参数：数组、数组的变量、零散的值
    // 返回值：一个新的拼接后的数组
    // var arr1 = arr.concat([5,6,7]);
    // var ar = [8,9,10]
    // var arr1 = arr.concat(ar);
    // var arr1 = arr.concat(11,12,13);
    // console.log(arr);
    // console.log(arr1);
    
    // 拆分方法
    // 参数为正
    // var arr1 = arr.slice(3,7);
    // 参数为负
    // var arr1 = arr.slice(-7,-1);
    // 只书写一个参数
    var arr1 = arr.slice(7);
    console.log(arr);
    console.log(arr1);
  </script>
</head>
<body>
  
</body>
</html>

4、删除、插入、替换

• splice(index,howmany,element1,element2,…)：用于插入、删除或替换数组的元素，index：删除元素的开始位置，howmany：删除元素的个数，可以是0,；element1,element2：要替换的新数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 字面量方法
    var arr = [1,2,3,4,5,6,7,8,9,10];
    // 删除功能，传前两个参数
    // console.log(arr.splice(2,5));
    // console.log(arr);

    // 替换功能，传3个及以上的参数
    // arr.splice(2,5,"haha","hello");
    // console.log(arr);

    // 插入功能，传3个及以上的参数，但是第二个参数必须为0
    arr.splice(2,0,"hello");
    console.log(arr);
  </script>
</head>
<body>
  
</body>
</html>

5、位置方法

• indexOf()：查找数据在数组中最先出现的下标
• lastIndexOf()：查找数据在数组中最后一次出现的下标
• 注意：如果没有找到返回-1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 字面量方法
    var arr = [1,2,3,4,5,6,7,8,9,10,4,5];

    // 查找某个元素在数组中从前往后第一次 出现位置的下标
    console.log(arr.indexOf(4));
    // 查找某个元素在数组中从前往后最后一次出现位置的下标
    console.log(arr.lastIndexOf(4));
    console.log(arr.lastIndexOf(11));
  </script>
</head>
<body>
  
</body>
</html>

6、倒序

• reverse()：将数组完全颠倒，第一项变成最后一项，最后一项变成第一项

7、排序

• sort()：默认根据字符编码顺序，从小到大排序；如果想要根据数值大小进行排序，必须添加sort的比较函数参数，改函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字，比较函数应该具有两个参数a和b，根据a和b的关系作为判断条件，返回值根据条件分为三个分支，正数、负数、0：返回值是负数-1：a排在b前面，返回值是正数1：a排在b后面，返回值是0：a和b的顺序保持不变

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 字面量方法
    var arr = [1,2,3,4,5,6,7,8,9,10,20,30];

    // 倒序排列
    // console.log(arr.reverse());
    // console.log(arr);
    
    // 排序，默认按照字符编码顺序从小到大排列
    // arr.sort();
    // 添加一个比较函数的参数
    arr.sort(function(a,b){
      if (a < b) {
        return -1;   //表示 a 要排在 b 前面
      } else if (a > b) {
        return 1;  //表示 a 要排在 b 后面
      } else {
        return 0;  //表示 a 和 b 保持原样，不换位置
      }
    });
    console.log(arr);
  </script>
</head>
<body>
  
</body>
</html>

8、转字符串方法
将数组的所有元素链接到一个字符串中

• join()：通过参数作为连字符将数组中的每一项用连字符连成一个完整的字符串

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 字面量方法
    var arr = [1,2,3,4,5,6,7,8,9,10,20,30];

    // 转字符串方法
    // var str = arr.join("*");
    // var str = arr.join("");
    // console.log(str);

    // 清空数组
    // arr = [];
    // arr.length = 0;
    arr.splice(0,arr.length);
    console.log(arr);
    
  </script>
</head>
<body>
  
</body>
</html>

9、清空数组
方式1：arr = [];（推荐）
方式2：arr.length = 0;
方式3：arr.splice(0,arr.length);

4、String对象（字符串对象）

1、基本包装类型

1、说明
为了方便操作简单数据类型，JavaScript 还提供了特殊的简单类型对象：String基本类型是没有方法的。
当调用 str.substring() 等方法的时候，先把 str 包装成 String 类型的临时对象，再调用substring 方法，最后销毁临时对象。
可以使用 new String() 构造函数方法创建字符串对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 基本类型的数据：没有属性和方法
    // 对象数据类型：有属性和方法
    // 但是字符串是可以调用一些属性和方法
    // var str = "这是一个字符串";
    // var str2 = str.slice(3,5);
    // console.log(str2);

    // 基本包装类型：基本类型的数据在进行一些特殊操作时，会暂时被包装成一个对象，结束后再被销毁
    // 字符串也有一种根据构造函数创建的方法
    // var str3 = new String("abcdef");
    // console.log(str);
    // console.log(str3);

    // 模拟计算机的工作
    var str = "这是一个字符串";
    // 进行了一个临时的包装
    var str4 = new String(str);
    var str2 = str4.slice(3,5);
    str4 = null;
  </script>
</head>
<body>
  
</body>
</html>

2、字符串特点
字符串是不可变的，由于字符串不可变，在大量拼接字符串时会有效率问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 定义一个字符串
    // 特点：字符串是不可变的
    // var a = "abc";
    // a = "cde";

    // 大量拼接字符串时，会有效率问题
    var sum = "";
    for (var i = 1 ; i <= 1000000 ; i++) {
      sum += i;
    }
    console.log(sum);
  </script>
</head>
<body>
  
</body>
</html>

3、字符串对象常用方法

注意：字符串所有的方法，都不会修改字符串本身（字符串是不可变的），操作完成会返回一个新
的字符串

字符串属性
长度属性：str.length：字符串长度指一个字符串中所有的字符总数

1、concat()方法用于连接两个或多个字符串

• 参数比较灵活，可以是字符串、或者字符串变量、多个字符串
• 生成的是一个新的字符串，原字符串不发生变化

2、split() 方法用于把一个字符串分割成字符串数组

• 参数部分是分割符，利用分割符将字符串分割成多个部分，多个部分作为数组的每一项组成数组
  如果分割符是空字符串，相当于将每个字符拆分成数组中的每一项

3、toLowerCase() 把字符串转换为小写
toUpperCase() 把字符串转换为大写

• 将所有的英文字符转为大写或者小写
• 生成的是新的字符串，原字符串不发生变化

4、slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分

• 语法：slice(start，end)
• 从开始位置截取到结束位置（不包括结束位置）的字符串
• 参数区分正负，正值表示下标位置，负值表示从后面往前数第几个位置，参数可以只传递一个，表示从开始位置截取到字符串结尾

5、substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符

• 语法：substr(start,howmany)
• 从开始位置截取到指定长度的字符串
• start 参数区分正负。正值表示下标位置，负值表示从后往前数第几个位置
• howmany 参数必须为正数，也可以不写，不写表示从 start 截取到最后

6、substring() 方法用于提取字符串中介于两个指定下标之间的字符

• 语法：substring(start,end)
• 参数只能为正数
• 两个参数都是指代下标，两个数字大小不限制，执行方法之前会比较一下两个参数的大小，会用小当做开始位置，大的当做结束位置，从开始位置截取到结束位置但是不包含结束位
  置
• 如果不写第二个参数，从开始截取到字符串结尾

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // 定义一个字符串
    var str = "这是一个普通的字符串，abc，   ￥%#";

    // 长度属性
    // console.log(str.length);

    // charAt() 返回指定下标位置的字符
    // console.log(str.charAt(6));

    // indexOf() 返回子串在原始字符串中第一次出现位置的下标
    // console.log(str.indexOf("字 符串"));

    // concat() 字符串拼接
    // var str2 = str.concat("哈哈哈","普通");
    // console.log(str);
    // console.log(str2);

    // split() 分割字符串成一个数组
    // var arr = str.split("，");
    // console.log(arr);

    // 字符串内容倒置
    // var arr = str.split("");
    // arr.reverse();
    // str = arr.join("");
    // str = str.split("").reverse().join("");
    // console.log(str);

    // 大小写转换
    // var str1 = str.toUpperCase();
    // var str2 = str1.toLowerCase();
    // console.log(str);
    // console.log(str1);
    // console.log(str2);

    // 截取字符串方法：三种
    // slice(start,end) 从开始位置截取到结束位置，但是不包含结束位置
    // var str1 = str.slice(3,7);
    // var str1 = str.slice(-7,-3);
    // var str1 = str.slice(-7);
    // console.log(str1);

    // substr(start,howmany) 从开始位置截取一定长度
    // var str2 = str.substr(3,7);
    // var str2 = str.substr(-9,7);
    // var str2 = str.substr(-9);
    // console.log(str2);

    // substring(start,end) 参数必须是整数，比较两个数的大小，小的作为开始，大的作为结束
    // var str3 = str.substring(3,7);
    var str3 = str.substring(7,3);
    var str3 = str.substring(7);
    console.log(str3);
  </script>
</head>
<body>
  
</body>
</html>