Js_Study

---

JavaScriptjs资源

网址：https://www.wangdoc.com/

初识JavaScript

1. 历史

JavaScript 和 Java 的关系。它们是两种不一样的语言，但是彼此存在联系。

Netscape 公司雇佣了程序员 Brendan Eich 开发这种网页脚本语言。Brendan Eich 有很强的函数式编程背景，希望以 Scheme 语言（函数式语言鼻祖 LISP 语言的一种方言）为蓝本，实现这种新语言。

2. JavaScript是什么

1. JavaScript是世界上最流行语言之一。是一种运行在客户端的脚本语言(Script是脚本的意思)
2. 脚本语言(高级语言)：不需要编译，运行由js解释器(js引擎)逐行来进行解释并执行
3. 也可以基于Node.js技术进行服务器端编程

3. JavaScript使用

1. 表单动态校验(密码强度检测)(JS产生最初的目的)
2. 网页特效
3. 服务器开发(Node.js)
4. 桌面程序(Electron)
5. App(Cordova)
6. 控制硬件-物联网(Ruff)
7. 游戏开发(cocos2d-js)

4. html/css/js关系

html：决定网页结构和内容，相当于人的身体

css：决定网页呈现给用户的模样，相当于给人穿衣服、化妆

js：实现业务逻辑和页面控制(决定功能)相当于人的各种动作

5. 浏览器执行js介绍

浏览器分为两部分：渲染引擎和js引擎

渲染引擎：解析html和css，俗称内核

js引擎：js解释器，用来读取网页中的JavaScript代码，对其处理后运行

浏览器本身不会执行js代码，而是通过内置JavaScript引擎来执行js代码，逐行执行

6. JS组成

组成：

1. ECMAScript：JavaScript语法
2. DOM：页面文档对象模型
3. BOM：浏览器对象模型

**ECMAScript：**是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。

文档对象模型：（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。

BOM：(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

7. JS三种书写位置

1. 行内式js 直接写到元素的内部

   <!--行内式js 直接写到元素的内部-->
   <input type="button" value="唐伯虎" οnclick="alert('秋香姐')">
   

   注意：

   1. html使用双引号，js中推荐使用单引号
   2. 可以将单行或者少量js代码写在html标签的事件属性中
   3. 可读性差
   4. 引号易错，引号多层嵌套匹配时，容易错

2. 内嵌式js

   <script>
   	alert("沙漠骆驼");
   </script>
   

3. 外部式

<script src="my.js"></script>

注意：

1. 引用外部js文件的script标签中间不可以写代码
2. 适合于js代码量比较大的情况

8. JS注释

单行注释：//

快捷键：ctrl+/

多行注释：/**/

快捷键：ctrl + alt + /

9. JS输入输出语句

方法	说明
alert()	弹窗输出警示框
prompt()	弹窗输入
console.log();	浏览器控制台打印。

阻止链接跳转

在a标签href里添加 ：javascript:;

变量

1. 什么是变量

通俗：变量是用于存放数据的容器，通过变量名获取数据

2. 变量在内存中的存储

本质：变量是程序在内存中申请一块用来存放数据的空间

3. 变量的使用

分为两步：声明和赋值

1. 声明变量var

   //声明变量
   var age;
   

2. 赋值

   将值放入变量中，通过变量名

   // 赋值
   age = 18;
   

3. 变量初始化

   //初始化
   var myname = 'giao';
   

4. 变量语法扩展

01-更新变量

一个变量被重新赋值后，原来的值会被覆盖，以最后一次赋的值为准

02-同时声明多个变量

// 同时声明多个变变量
var age = 18,
    address = '火影村',
    gz = '2000';

03-声明变量特殊情况

// 1.只声明不复制，结果是？    结果是undefined 未定义的
var sex;
console.log(sex);   //undefined
// 2.不声明不复制，直接报错
console.log(tel);
// 3.不声明直接复制使用
qq = 110;
console.log(qq);    //可以直接使用，但不推荐这样使用

5. 变量命名规范

1. 由字母、数字、下划线、美元符号$组成
2. 严格区分大小写
3. 不能以数字开头
4. 不能是关键字、保留字，如：var，for，while
5. 变量名必须有意义
6. 遵循驼峰命名法，首字母小写，后面单词的首字母大写
7. 推荐翻译网站，有道

数据类型

1. 数据类型简介

JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了第七种 Symbol 类型的值，本教程不涉及。）【简单数据类型】

• 数值（number）：整数和小数（比如1和3.14）。默认：0
• 字符串（string）：文本（比如Hello World）。默认：“”
• 布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）。默认：false
• undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值。默认：undefined
• null：表示空值，即此处的值为空。默认：null
• 对象（object）：各种值组成的集合。

对象是最复杂的数据类型，又可以分成三个子类型。【复杂数据类型】

• 狭义的对象（object）
• 数组（array）
• 函数（function）

js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

js拥有动态类型，同时也意味着相同的变量可用作不同的类型

2. 数字型number

01-数值进制

使用字面量直接表示一个数值时，JavaScript 对整数提供四种进制的表示方法：十进制、十六进制、八进制、二进制。

• 十进制：没有前导0的数值。
• 八进制：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
• 十六进制：有前缀0x或0X的数值。
• 二进制：有前缀0b或0B的数值。

// 八进制 前面加0o或0O
var num1 = 0o10;
console.log(num1);
// 十六进制
var num2 = 0x1f;
console.log(num2);

02-数字型范围

JavaScript 提供Number对象的MAX_VALUE和MIN_VALUE属性，返回可以表示的具体的最大值和最小值。

console.log(Number.MAX_VALUE);//1.7976931348623157e+308
console.log(Number.MIN_VALUE);//5e-324

03-数字型三个特殊值

Infinity，代表无穷大，大于任何数值

-Infinity，代表无穷小，小于任何数值

NaN，not a number，代表一个非数值

NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。

Infinity大于一切数值（除了NaN），-Infinity小于一切数值（除了NaN）。

Infinity与NaN比较，总是返回false。

//无穷大
console.log(Number.MAX_VALUE * 2);
//无穷小
console.log(-Number.MAX_VALUE * 2);

04-isNaN

isNaN方法可以用来判断一个值是否为NaN。

isNaN(NaN) // true
isNaN(123) // false

isNaN只对数值有效，如果传入其他值，会被先转成数值。比如，传入字符串的时候，字符串会被先转成NaN，所以最后返回true，也就是说，isNaN为true的值，有可能不是NaN，而是一个字符串。

2.字符串string

01-定义

1. 字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。

   'abc'
   "abc"
   

2. 单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号。最好用单引号

   'key = "value"'
   "It's a long journey"
   

3. 如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。

4. 字符串默认只能写在一行内，分成多行将会报错。

02-转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。

需要用反斜杠转义的特殊字符，主要有下面这些。

• \0 ：null（\u0000）
• \b ：后退键（\u0008）
• \f ：换页符（\u000C）
• \n ：换行符（\u000A）
• \r ：回车键（\u000D）
• \t ：制表符（\u0009）
• \v ：垂直制表符（\u000B）
• \' ：单引号（\u0027）
• \" ：双引号（\u0022）
• \\ ：反斜杠（\u005C）

03-字符串长度

length属性返回字符串的长度。

var s = 'hello';
s.length // 5

s.length = 3;
s.length // 5

上面代码表示字符串的length属性无法改变，但是不会报错。

04-字符串拼接

连接运算符（+）可以连接多个单行字符串，将长字符串拆成多行书写，输出的时候也是单行。

字符串 + 任何类型 = 拼接之后的新字符串

//拼接
console.log('沙漠' + '骆驼');
console.log('12' + 12);//结果：'1212'
var name = '张三';
console.log('我叫' + name + '，你好');//我叫张三，你好

+号总口诀：数值相加，字符相连

3. boolean型

布尔类型有两个值true (1)和false (0)，true表示真，false表示假

布尔型参与计算true相当于1，false相当于0

下列运算符会返回布尔值：

• 前置逻辑运算符： ! (Not)
• 相等运算符：===，!==，==，!=
• 比较运算符：>，>=，<，<=

isFinite方法返回一个布尔值，表示某个值是否为正常的数值。

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true

除了Infinity、-Infinity、NaN和undefined这几个值会返回false，isFinite对于其他的数值都会返回true。

4. null 和 undefined

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，语法效果几乎没区别。

var a = undefined;
// 或者
var a = null;

在if语句中，它们都会被自动转为false，相等运算符（==）甚至直接报告两者相等。

null可以自动转为0。

Number(null) // 0

undefined与数字相加，结果为NaN

null与数字相加，结果为数字，null自动转换为0

获取数据类型

1. typeof运算符

JavaScript 有三种方法，可以确定一个值到底是什么类型。

• typeof运算符
• instanceof运算符
• Object.prototype.toString方法

typeof运算符可以返回一个值的数据类型。

数值、字符串、布尔值分别返回number、string、boolean，函数返回function，undefined返回undefined，对象返回object，null返回object。

2. 字面量

字面量是在源代码中一个固定值得表示法，通俗来说，就是字面量表示如何表达这个值

1. 数字字面量：8，9，10
2. 字符串字面量：“朱元璋”，‘人物’
3. 布尔字面量：true，false

数据类型转换

把一个数据类型的变量转换成两外一种数据类型

通常实现3种方式的转换

1. 转换为字符串型
2. 转换成数字型
3. 转换成布尔型

1. 转换为字符串

方法	说明
toString()	转换成字符串
String()强制转换	转换成字符串
加号拼接字符串 隐式转换（重点）	和字符串拼接结果都是字符串

2. 转换成数字型(重点)

方法	说明
parseInt(string)函数	将字符串转为整数。
parseFloat(string)函数	将一个字符串转为浮点数。
Number()强制转换函数	将字符串转为数值型。
js隐式转换(- * /)	利用算术运算隐式转换为数值型

parseInt进制转换

parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。

parseInt('1000') // 1000
// 等同于
parseInt('1000', 10) // 1000

下面是转换指定进制的数的例子

parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512

如果第二个参数不是数值，会被自动转为一个整数。这个整数只有在2到36之间，才能得到有意义的结果，超出这个范围，则返回NaN。如果第二个参数是0、undefined和null，则直接忽略。

parseFloat

如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。

parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN

3. 转换为布尔型

方法	说明
Boolean()函数	其他类型转换成布尔值

代表空、否定的值会转换为false，如：0、NaN、null、undefined

其余值都会转换成true

4. 标志符、关键字、保留字

1. 标志符：开发人员为变量、属性、函数、参数取的名字，不能是关键字或保留字
2. 关键字：js本身使用了的字，不能再用他们充当变量名、方法名

eg：break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instranceof、typeof。

3. 保留字：js同样保留了一些关键字，这些关键字在当前语言版本中并没有用到，但在未来版本中可能会用到。

eg：class const enum export extends import super implements let 　　private 　　public yield 2 interface package protected static

运算符

也称操作符，用于实现赋值、比较和执行算术运算功能的符号

js中有

1. 算术运算符
2. 递增递减运算符
3. 比较运算符
4. 逻辑运算符
5. 赋值运算符

1. 算术运算符

JavaScript 共提供10个算术运算符，用来完成基本的算术运算。

• 加法运算符：x + y
• 减法运算符： x - y
• 乘法运算符： x * y
• 除法运算符：x / y
• 指数运算符：x ** y
• 余数运算符：x % y
• 自增运算符：++x 或者 x++
• 自减运算符：--x 或者 x--
• 数值运算符： +x
• 负数值运算符：-x

注意：

1. 浮点数算数运算里面会有问题
2. 不能直接拿着浮点数进行相比较

01-表达式和返回值

表达式：由数字、运算符、变量等组成的式子

表达式最终会有一个结果，称为返回值

2. 自增和自减运算符

自增和自减运算符，是一元运算符，只需要一个运算子。它们的作用是将运算子首先转为数值，然后加上1或者减去1。它们会修改原始变量。

自增和自减运算符有一个需要注意的地方，就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作，称为后置；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值，称为前置。

3. 比较运算符

JavaScript 一共提供了8个比较运算符。

• > 大于运算符
• < 小于运算符
• <= 小于或等于运算符
• >= 大于或等于运算符
• == 相等运算符
• === 严格相等运算符
• != 不相等运算符
• !== 严格不相等运算符

JavaScript 提供两种相等运算符：==和===。

1. 简单说，它们的区别是相等运算符（==）比较两个值是否相等，严格相等运算符（===）比较它们是否为“同一个值”。如果两个值不是同一类型，严格相等运算符（===）直接返回false，而相等运算符（==）会将它们转换成同一个类型，再用严格相等运算符进行比较。
2. 需要注意的是，NaN与任何值都不相等（包括自身）。另外，正0等于负0。
3. 严格相等运算符有一个对应的“严格不相等运算符”（!==），它的算法就是先求严格相等运算符的结果，然后返回相反值。

4. 逻辑运算符

布尔运算符用于将表达式转为布尔值，一共包含四个运算符。

• 取反运算符：!
• 且运算符：&&
• 或运算符：||
• 三元运算符：?:

三元条件运算符由问号（?）和冒号（:）组成，分隔三个表达式。它是 JavaScript 语言唯一一个需要三个运算子的运算符。如果第一个表达式的布尔值为true，则返回第二个表达式的值，否则返回第三个表达式的值。

't' ? 'hello' : 'world' // "hello"
0 ? 'hello' : 'world' // "world"

上面代码的t和0的布尔值分别为true和false，所以分别返回第二个和第三个表达式的值。

对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为false。

• undefined
• null
• false
• 0
• NaN
• 空字符串（''）

逻辑中断(短路运算)

当有多个表达式时，左边的表达式值可以确定结果时，就不在运算右边表达式的值

1. 逻辑与

   语法：表达式1 && 表达式2

   如果第一个表达式值为真，则返回表达式2

   如果第一个表达式值为假，则返回表达式1

2. 逻辑或

   语法：表达式1 || 表达式2

   如果第一个表达式值为真，则返回表达式1

   如果第一个表达式值为假，则返回表达式2

5. 赋值运算符

概念：用来把数据赋值给变量的运算符

赋值运算符	说明
=	直接复制
+=、-=	加、减一个数 后再赋值
*=、/=、%=	乘、除、取模 后在赋值

6. 运算符优先级和左右结合

JS运算符优先级（从高到低列出)

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ – - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
|	按位或
&&	逻辑与
||	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

少数运算符是“右结合”，其中最主要的是赋值运算符（=）和三元条件运算符（?:），指数运算符（**）也是右结合。

流程控制-分支

1. 流程控制

流程控制主要有三种结构：顺序结构、分支结构、循环结构，这三种结构代表三种代码执行顺序

2. 顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，没有特定语法结构，程序会按照代码的先后顺序，依次执行

3. 分支流程控制

01-分支结构

由上向下执行代码过程中，根据不同条件，执行不同的路径代码，得到不同结果

两种分支结构

1. if语句
2. switch语句

02-if语句

语法：

if ( 条件表达式 ) {
    //条件成立执行语句
}
//if else双支
        if ( 条件表达式 ) {
            //执行语句
        }else {
            //执行语句
        }
//多分支语句
        if ( 条件表达式 ) {
            //执行语句
        }else if ( 条件表达式 ){
            //执行语句
        }else {
            //执行语句
        }

03-switch语句

语法：

switch (表达式) {
    case value1:
        执行语句;
        break;
    case value2:
        执行语句;
        break;
    ...
    default:
        执行最后的语句;
}

switch注意事项

1. 表达式常写成变量
2. 表达式与value值必须是全等，值和数据类型都得一致
3. break 如果当前case里面没有break，则不会退出switch，继续执行下一个case

04-switch和if else区别

1. 一般情况下，它俩是可以互相替换
2. switch通常处理一些比较确定值得情况，而if else更加灵活，常用语范围判断
3. switch语句进行条件判断后直接执行到程序的条件语句，效率更高，if语句几个条件，就得判断多少次
4. 分支较少时，if效率会比switch高

循环

1. 循环目的

规律性的重复执行，用循环来重复执行某些语句

2. js中的循环

js中有三种循环

for循环

while循环

do…while循环

3. for循环

语法

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

for-in—循环遍历对象的属性

用 for-in 来遍历一遍数组的内容，代码如下：

const arr = [1, 2, 3];
let index;
for(index in arr) {
    console.log("arr[" + index + "] = " + arr[index]);
}
// 输出结果如下
// arr[0] = 1 
// arr[1] = 2 
// arr[2] = 3

for-in 并不适合用来遍历 Array 中的元素，其更适合遍历对象中的属性

forEach–引入新循环

forEach 方法为数组中含有有效值的每一项执行一次 callback 函数，那些已删除（使用 delete 方法等情况）或者从未赋值的项将被跳过（不包括那些值为 undefined 或 null 的项）。 callback 函数会被依次传入三个参数：

• 数组当前项的值；
• 数组当前项的索引；
• 数组对象本身；

const arr = [1, 2, 3];
arr.forEach((data) => {
    console.log(data);
});
// 输出结果如下
// 1 
// 2 
// 3

添加数组当前项的索引参数，注意callback 函数中的三个参数顺序是固定的，不可以调整。

const arr = [1, 2, 3];
arr.forEach((data,index,arr) => {
    console.log("arr[" + index + "] = " + data);
});
// 输出结果如下
// arr[0] = 1 
// arr[1] = 2 
// arr[2] = 3

需要注意的是，forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。

const arr = [];
arr[0] = "a";
arr[3] = "b";
arr[10] = "c";
arr.name = "Hello world";
arr.forEach((data, index, array) => {
    console.log(data, index, array);
});

运行结果：

a 0 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
b 3 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
c 10 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]

01-断点调试

首先是普通调试，又叫单步调试。F12找到Sources后，在左侧文件夹中找到你想运行的文件，然后点击pause script execution按钮再刷新页面（F5），就可以进入单步调试，点击Step over next function call就是程序逐步调试，每点击一次，就会按照代码执行顺序，向下执行一句代码。

02-双层for循环

for (语句 1; 语句 2; 语句 3)
{
  for (语句 4; 语句 5; 语句 6)
  {
      被执行的代码块；
  }
}

4. while语句

语法：

while (条件)
{
    需要执行的代码；
    结束条件；
}

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

5. do while语句

语法：

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

该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行

6. continue break

01-break 语句

break 语句：它用于跳出 switch() 语句。

break 语句：也可用于跳出循环。

break 语句跳出循环后，会继续执行该循环之后的代码

02-continue 语句

continue 语句：断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

规范

1. 标识符命名规范

变量、函数的命名必须有意义

变量一般用名词

函数一般用动词

2. 操作符语法规范

操作符的左右两侧各保留一个空格

3. 单行注释规范

单行注释前有个空格

数组array

1. 数组的概念

数组对象是使用单独的变量名来存储一系列的值。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

2. 数组创建方法

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1: 常规方式:

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

4: 数组元素类型

数组中可以存放任意类型的数据，如字符串，数字，布尔值等

3. 访问数组元素

通过指定数组名以及索引号码，你可以访问某个特定的元素。

可以访问myCars数组的第一个值：

var name=myCars[0];

可以修改数组 myCars 的第一个元素:

myCars[0]="Opel";

索引(下标)：用来访问数组元素的序号。

注意：[0] 是数组的第一个元素。[1] 是数组的第二个元素。

遍历数组：for循环，下标0开头

4. 数组长度

.length：获取数组长度，一般在遍历数组时会用到。

var array3 = [10,11,12,13,14,"15","abc"];
console.log(array3.length);

数组转换成字符串：遍历之后用空字符串相连

5. 数组新增元素

1. 通过内置函数BIF添加

   // push:在数组末尾添加成员
   // pop：把末尾成员删除
   // shift删除并返回第一个成员
   // unshift 在数组头部添加成员,返回新数组的长度
   var array4 = [10,11,12,13,14,“15”,“abc”];
   array4.push(“def”);
   console.log(array4);

   array4.pop();
   console.log(array4);

   var ary = array4.shift();
   console.log(array4);
   console.log(ary);

   var ary2 = array4.unshift(“abc”);
   console.log(array4);
   console.log(ary2);

2. 新增数组元素，修改索引号，追加数组元素

   不能直接给已存在的索引号赋值，否则会覆盖掉以前的数据

函数

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

函数就是封装了一段可以被重复执行调用的代码块，目的：让大量代码重复使用

1. 函数的使用

函数声明

函数声明的语法 :

function 函数名(参数) {
  执行的代码	// 函数体
}

注意：

1. function 声明函数的关键字，全部小写
2. 函数名一般为动词
3. 函数不调用不执行

调用函数

函数名();

2. 函数的参数

//声明函数
function 函数名(形参1，形参2...) {// 声明函数小括号里面的是形参，用逗号隔开
 	函数体
}
函数名(实参1，实参2...);// 函数调用小括号里面的是 实参

3. 函数的返回值

return语句：可以实现函数的返回

function 函数名() {
  return 需要返回的结果;
}

1. 函数只是实现某种功能，结果需要返回给函数的调用这，通过return 实现
2. 只要函数遇到return 就把后面的结果返回给调用者 函数名() = return后面结果

return也可以终止函数 ，return之后代码不被执行

return只能返回一个值。如果想返回多个值，用数组

return如果有返回值，则返回return后面的值，没有则返回undefined

4. arguments的使用

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。

arguments展示形式是一个伪数组，可以进行遍历

1. 具有length属性
2. 按索引方式储存数据
3. 不具有数组push，pop等方法

5. 函数的两种声明

1. 利用函数关键字自定义函数

//声明函数
function 函数名(形参1，形参2...) {// 声明函数小括号里面的是形参，用逗号隔开
 	函数体
}

2. 函数表达式

//声明函数
var 变量名 = function(){};
//调用函数
变量名();

1. fun是变量名，不是函数名
2. 函数表达是声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达是里面存的是函数

作用域

1. 什么是作用域

它是指对某一变量和方法具有访问权限的代码空间, 在JS中, 作用域是在函数中维护的.

表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。

Javascript的作用域只有两种(es6之前)：全局作用域和局部作用域，局部作用域是按照函数来区分的。

2. 变量作用域

变量作用域：根据作用域不同分为全局变量和局部变量

全局变量：在全局作用域下的变量，在全局下都可以使用

局部变量：在局部作用域下的变量，或者说是函数内部的变量就是局部变量，只能在函数内部使用

注意：如果在函数内部，乜有声明直接赋值的变量也是全局变量

从执行效率上看全局变量和局部变量

1. 全局变量只有浏览器关闭的时候才会销毁，比较占资源
2. 局部变量：当程序执行完毕就会销毁，节约内存资源

3. 作用域链

内部函数访问外部函数的变量，采取的是脸是查找的方式来决定取那个值，这种结构称为作用域链（就近原则）

JS预解析

js代码分为两步：预解析和代码执行

1. 预解析：js引擎会把js里面所有var 和 function 提升到当前作用域在前面
2. 代码执行：按照代码书写的顺序从上到下执行

预解析分为变量预解析(变量提升) 和 函数预解析(函数提升)

1. 变量提升：把所有变量声明提升到当前作用域最前面，不提升赋值操作
2. 函数提升：把所有函数声明提升到当前作用域最前面，不提升调用

对象

1. 对象是什么

对象是一个具体的事务

对象由属性和方法组成的

1. 属性：事物的特征
2. 方法：事务的特征

2. 创建对象的三种方法

01-字面量创建对象

用花括号来创建对象

var obj = {};// 创建一个空对象
//eg
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue", 
sayHi: function() {
  console.log('hi~');
}};

1. 里面的属性或方法采用键值对的形式，键：属性名；值：属性值
2. 多个属性或方法中间用逗号隔开
3. 方法冒号后面跟的是一个匿名函数

访问对象

1. 调用对象的属性：对象名.属性名

person.lastName;

2. 第二种调用舒兴国的方法：对象[‘属性名’]

person["lastName"];

3. 调用对象方法：对象名.方法名

02-利用new Object创建对象

语法：

var obj = new Object(); // 创建一个空的对象
obj.uname = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function () {
    console.log('hi~');
}

1. 利用等号 = 赋值来添加对象和方法
2. 每个属性和方法之间用分号隔开

03-利用构造函数创建对象

构造函数

1. 定义：通过 new 函数名 来实例化对象的函数叫构造函数。
2. 任何的函数都可以作为构造函数存在。
3. 之所以有构造函数与普通函数之分，主要从功能上进行区别的，构造函数的主要 功能为 初始化对象，特点是和new 一起使用。
4. new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。
5. 构造函数定义时首字母大写。

语法格式

function 构造函数名() {
    this.属性 = 值;
    this.方法 = function () {};
}
new 构造函数名();

//eg
function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (sang) {
                console.log(sang);
            }
        }

        var ldh = new Star('刘德华', 18, '男');
        console.log(ldh.age, ldh.name, ldh.sex);
        ldh.sing('冰雨');

1. 构造函数里面不需要return 就可以返回结果
2. 调用构造函数必须使用new

04-构造函数和对象

1. 构造函数：构造名(); 泛指的某一大类，类似于java的class
2. 创建对象：new 对象名(); 特指某一个，通过new创建，称对象实例化

3. new关键字

1. new构造函数可以再内存中创建一个空的对象
2. this 会指向刚才创建的空对象
3. 执行构造函数里面的代码，给空对相关添加属性和方法
4. 返回对象

4. 对象遍历

for… in 语句用于对数组或者对象的属性进行循环操作。(最好是对对象进行操作)

语法：

for (变量 in 对象) {
    
}
// eg
for (var k in ldh) {
            console.log(k); // k 变量输出可以得到属性名
            console.log(ldh[k]);// obj[k]得到属性值
}

内置对象

1. 什么是内置对象

JS对象分为三种：自定义对象、内置对象、浏览器对象

前两种对象是js基础内容

第三种是属于js独有，在JS API

内置对象：就是js语言自带的一些对象，由开发者提供，并提供了一些常用的或是最基本而必要的功能(属性和方法)

内置对象有点：帮助快速开发

内置对象有：Math、Date、Array、String等

2. 查文档

学习一个内置对象的使用，可以通过文档学习，通过MDN/W3c来查询

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

3. Math对象(不是函数对象)

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

不是构造函数，不用new调用，可以直接使用

console.log(Math.PI);	//3.141592653589793
console.log(Math.max(1,2,3,34,124.23));	//124.23

常用方法

Math.abs(x) 函数返回指定数字 “x“ 的绝对值

Math.PI 表示一个圆的周长与直径的比例，约为 3.14159：

Math.ceil()函数返回大于或等于一个给定数字的最小整数。向上取值

Math.floor()返回小于或等于一个给定数字的最大整数。向下取整

Math.round() 函数返回一个数字四舍五入后最接近的整数。

Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括 1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。

Math.sqrt() 函数返回一个数的平方根

4. Date日期对象

Date是一个构造函数，需要实例化，用来处理事件

语法：

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

创建一个新Date对象的唯一方法是通过new 操作符，例如：let now = new Date();
若将它作为常规函数调用（即不加