一， JS变量和数据类型

1 - 计算机语言和编程语言的关系和区别

1.1 编程语言

编程语言（英语：programming language），是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧，用来向计算机发出指令，一种能够让程序员准确地定义计算机所需要使用数据的计算机语言，并精确地定义在不同情况下所应当采取的行动。

1.2 计算机语言

计算机语言（computer language）指用于人与计算机之间通讯的语言，是人与计算机之间传递信息的介质。但是其概念比通用的编程语言要更广泛。例如，HTML是标记语言，也是计算机语言，但并不是编程语言。

1.3 编程语言的特点

数据和数据结构
指令及流程控制
引用机制和重用机制
设计哲学

2 - 计算机基础

2.2 数据存储

计算机内部使用二进制 0 和 1来表示数据。
所有数据，包括文件、图片等最终都是以二进制数据（0 和 1）的形式存放在硬盘中的。
所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。
硬盘、内存都是保存的二进制数据。

2.3 数据存储单位

大小关系：bit < byte < kb < GB < TB<.....

位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位）
字节(Byte)： 1B = 8b
千字节(KB)： 1KB = 1024B
兆字节(MB)： 1MB = 1024KB
吉字节(GB): 1GB = 1024MB
太字节(TB): 1TB = 1024GB 注意：之所以要内存的一个重要原因，是因为 cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）

3 - 初识JavaScript

3.1 JavaScript 是什么

是一种运行在客户端（浏览器）的编程语言，实现人机交互效果;
JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言；
JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言（Script 是脚本的意思）
脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
现在也可以基于 Node.js 技术进行服务器端编程
HTML和CSS也是前端开发的重要组成部分, 而JavaScript是前端开发的灵魂;

3.2 JavaScript的作用

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

3.3 JavaScript的组成

ECMAScript:

规定了js基础语法核心知识。\
比如：变量、分支语句、循环语句、对象等等 Web APIs:
DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作\
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

3.6 JavaScript编写方式

位置一：HTML代码行内（不推荐）

<input type="button" value="点我试试" onclick="alert('Hello World')" />

特点:

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
可读性差，在html中编写JS大量代码时，不方便阅读；
引号易错，引号多层嵌套匹配时，非常容易弄混；
特殊情况下使用

位置二：script标签中(内嵌式)

<script>
    alert('Hello  World~!');
</script>

特点:

可以将多行JS代码写到 script 标签中
内嵌 JS 是学习时常用的方式
推荐将JavaScript代码和编写位置放在body子元素的最后一行；

位置三：外部JS文件

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

特点:

需要通过script元素的src属性来引入JavaScript文件
利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
引用外部 JS文件的 script 标签中间不可以写代码
适合于JS 代码量比较大的情况
script标签不能写成单标签，即不能写成；
推荐将JavaScript代码和编写位置放在body子元素的最后一行；

4 - JavaScript注释

4.1 单行注释

单行注释的注释方式如下：

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来
// 用来注释单行文字（ 快捷键 ctrl + / ）

4.2 多行注释

多行注释的注释方式如下：

/*
获取用户年龄和姓名
并通过提示框显示出来
默认快捷键 alt + shift + a 
*/

5 - JavaScript输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。

Chrome的调试工具

6 - 变量的概念

6.1 什么是变量

在我们平时开发中，使用最多的并不是固定的数据, 而是会变换的数据

比如购物车商品的数量、价格的计算等等；\
比如一首歌曲播放的时间、进度条、歌词的展示等等；\
比如微信聊天中消息条数、时间、语音的长度、头像、名称等等；\
比如游戏中技能的冷却时间、血量、蓝量、buff时间、金币的数量等等；

使用变量存储一些会变的数据

一个变量，就是一个用于存放数值的容器；\
这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据；\
变量的独特之处在于它存放的数值是可以改变的；\
变量本质是一块内存空间的别名；

7 - 变量的使用

7.1 变量的命名格式

变量的声明：在JavaScript中声明一个变量使用var关键字（variable单词的缩写）（后续学习ES6还有let、const声明方式）
变量的赋值：使用 = 给变量进行赋值；

//  声明变量  
var name = "wc"; //  声明一个 名称为name 的变量

这个过程也可以分开操作

//  声明变量  
var name;
name = "wc"

同时声明多个变量：

//  声明变量  
var name, age, height;
name = "wc"
age = 18
height = 1.88

7.2 变量的命名规范

age = 10; // 给 age  这个变量赋值为 10

变量命名规则：必须遵守\

第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）\
其他字符可以是字母、下划线、美元符号或数字\
不能使用关键字和保留字命名：
developer.mozilla.org/zh-CN/docs/…
变量严格区分大小写\

变量命名规范：建议遵守\

多个单词使用驼峰标识；\
赋值 = 两边都加上一个空格；\
一条语句结束后加上分号; 也有很多人的习惯是不加；\
变量应该做到见名知意；

练习：

练习一：定义一些变量，保存自己的个人信息：
比如姓名、年龄、身高、体重、爱好等等\
练习二：定义一个变量name，赋值成wangcai。定义一个变量admin，将name赋值给admin\
练习三：定义变量，保存两个数字，并且对两个变量的数字进行交换\

7.3 变量的使用注意

使用注意：

注意一：如果一个变量未声明（declaration）就直接使用，那么会报错；\
注意二：如果一个变量有声明，但是没有赋值，那么默认值是undefined；\
注意三：如果没有使用var声明变量也可以，但是不推荐（事实上会被添加到window对象上）；\

8 - 数据类型介绍

8.1 数据类型简介

为什么需要数据类型:

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。

变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：

为什么需要数据类型？

数据存储在内存，内存空间不是无限的，我们合理的使用内在空间
给不同的数据分配不同的内存空间，数据类型就是为了让我们合理地使用内存空间

在 JavaScript 中有 8 种基本的数据类型（7 种原始类型和 1 种复杂类型）

Number
String
Boolean
Undefined
Null
Object
BigInt（后续了解）
Symbol（后续了解）

8.2 简单数据类型

JavaScript 中的简单数据类型及其说明如下：

8.3 typeof操作符

typeof介绍:

因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型，typeof 操作符就是为此而生的。
typeof 可用来获取检测变量的数据类型

对一个值使用 typeof 操作符会返回下列字符串之一:

"undefined"表示值未定义;
"boolean"表示值为布尔值;
"string"表示值为字符串;
"number"表示值为数值;
"object"表示值为对象(而不是函数)或 null;
"function"表示值为函数;
"symbol"表示值为符号；

typeof用法:

typeof是一个操作符，并非是一个函数，()只是将后续的内容当做一个整体而已；
typeof(x)，它与 typeof x 相同；

9 - Number数据类型

9.1 Number

number 类型代表整数和浮点数:

var name = "wc";
var age = 18;

*数字number可以有很多操作，比如，乘法 、除法 /、加法 +、减法 - 等:

var res = 10 * 10;
var out = 10 + 20;

除了常规的数字，还包括所谓的“特殊数值（“special numeric values”）”也属于Number类型（了解）

Infinity：代表数学概念中的无穷大 ∞，也可以表示-Infinity；

比如 1/0 得到的就是无穷大；

NaN：NaN 代表一个计算错误，它是一个错误的操作所得到的结果；

比如字符串和一个数字相乘；

console.log(10 * "abc"); // NaN  Not a Number

在JS中，不要对小数进行运算

var a = .3;
var b = 1 - .7;
console.log(a == b); // false

数字类型也有其他的进制表示方法:

// 十进制（掌握）、十六进制、二进制、八进制（了解）
// 10进制
var num1 = 123;
// 16进制
var num1 = 0x123;
// 8进制
var num1 = 0o123;
// 2进制
var num1 = 0b0101;

数字表示的范围:

最小正数值：Number. MIN_VALUE，这个值为： 5e-324，小于这个的数字会被转化为0；
最大正数值：Number. MAX_VALUE，这个值为： 1.7976931348623157e+308；

console.log(Number.MAX_VALUE); // MAX_VALUE表示最大值  1.7976931348623157e+308
console.log(Number.MIN_VALUE); // MIN_VALUE表示最小值  5e-324
console.log(Number.MAX_VALUE + 100); // 1.7976931348623157e+308
console.log(Number.MAX_VALUE * 10); // Infinity 无穷大

isNaN:

用于判断是否不是一个数字。不是数字返回true，是数字返回false。；

10 - String数据类型

10.1 String

在开发中我们经常会有一些文本需要表示，这个时候我们会使用字符串String:

比如人的姓名：wangcai。地址：北京市。简介：一名前端程序员；

JavaScript 中的字符串必须被括在引号里，有三种包含字符串的方式:

双引号："Hello"
单引号：'Hello'
反引号：Hello（ES6之后学习）

前后的引号类型必须一致：

如果在字符串里面本身包括单引号，可以使用双引号；
如果在字符串里面本身包括双引号，可以使用单引号；
一个字符串，使用了双引号，它里面不能再嵌套双引号，外双内单或外单内双

转义字符（转义就是转变原有的意思）：

如： \n 表示换行 \r换行回车 \t 表示制表；

11 - Boolean数据类型

](tubie.gitee.io/fe-blog/bas… Boolean

Boolean（布尔）类型用于表示真假:

比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人；
比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等；

Boolean 类型仅包含两个值：true 和 false:

就两个值，一个是true，一个false，true表示真 false表示假
前面，讲的string或number数据类型，对应的值有无数个
使用关系运算符运算的结果，就是布尔数据类型

var isLogin = false;
var flag = true;

12 - Undefined数据类型

12.1 Undefined

Undefined 类型只有一个值，就是特殊值 undefined:

如果我们声明一个变量，但是没有对其进行初始化时，它默认就是undefined；
und是一种数据类型，这种数据类型，对应的值，就一个，也是und

13 - Object数据类型

13.1 Object

Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型:

其他的数据类型我们通常称之为 “原始类型”，因为它们的值质保函一个单独的内容（字符串、数字或者其他）；
Object往往可以表示一组数据，是其他数据的一个集合；
在JavaScript中我们可以使用花括号{} 的方式来表示一个对象；
Object是对象的意思，后续我们会专门讲解面向对象的概念等；

14 - Null数据类型

14.1 Null

Null 类型同样只有一个值，即特殊值 null:

null类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为null；

null和undefined的关系:

undefined通常只有在一个变量声明但是未初始化时，它的默认值是undefined才会用到；
并且我们不推荐直接给一个变量赋值为undefined，所以很少主动来使用；
null值非常常用，当一个变量准备保存一个对象，但是这个对象不确定时，我们可以先赋值为null；

15 - 数据类型总结

15.1 数据类型总结

JavaScript 中有八种基本的数据类型（前七种为基本数据类型，也称为原始类型，而 object 为复杂数据类型，也称为引用类型）:

number 用于任何类型的数字：整数或浮点数。
string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。
boolean 用于 true 和 false。
undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
object 用于更复杂的数据结构。
null 用于未知的值 —— 只有一个 null 值的独立类型。

16 - 数据类型转化介绍

16.1 数据类型转化介绍

把一种数据类型转化成另一种数据类型:

强制数据类型转化通过写代码的方法进行转化。
隐式数据类型转化悄悄地，没有写转化代码，就可以转化。

17 - 其它的数据类型转成stirng

17.1 其它的数据类型转成stirng

把number转成sring，把boolean转成string，把und转成string:

对于number和boolean来说，可以通过toString方法来转化。
通过String类来转化。
通过+ 也可以转化。

toString()

number类型，boolean类型转字符串

 // number类型，boolean类型转字符串
 var a = 123;
 console.log(a); // 123
 console.log(typeof a); // number
 var b = a.toString();
 console.log(b);
 console.log(typeof b); // string

 var f = false;
 let k = f.toString();
 console.log(k);
 "false"
 console.log(typeof k); // string

 // 字面量的123不能打点
 console.log(123. toString()); // SyntaxError

undefined类型转字符串

 // undefined类型转字符串
 var a; // a的值是und   a的类型是und

 // Cannot read properties of undefined (reading 'toString')
 // properties是属性的值   of是...的意思
 // a中没有toString属性  
 var res = a.toString(); // a是und  不能转成对象  
 console.log(res);

String()构造函数

undefined通过String构造函数转化成字符串

var b = undefined;
let res = String(b);
console.log(res);
console.log(typeof res); // string

字面量，布尔数据，null通过String构造函数转化成字符串

console.log(String(123));
console.log(typeof String(123));

console.log(String(true));
console.log(typeof String(true));

console.log(String(null));
console.log(typeof String(null)); // string

+把其它数据类型转字符串

+在数学中就表示加号
在JS中，+有多层含义，1）表示加号 2）表示字符串连接运算符 3）...

var str1 = "hello ";
var str2 = "js";
var res = str1 + str2;
console.log(res); // hello js

+把其它数据类型转字符串

var str1 = 123;
var str2 = " js";
// 前提：运算符，两侧的操作数的数据类型必须一样。
// + 如果不一样，此时，它会发生隐式类型转化
// 把number的123 转成 string的123
var res = str1 + str2;
console.log(res); // hello js
console.log(typeof res); // hello js   string

console.log(123 + "hello");
console.log(typeof(123 + "hello")); // string

// 运算符是有优先级的   typeof的优先级是高于 + 
console.log(typeof 123 + "hello"); // string

总结：

强制类型转化：toString / String构造器
隐式类型转化：+

18 - 其它的数据类型转成number

18.1 其它的数据类型转成number

将string类型转成nubmer类型:

Number构造器
parseInt parseFloat

把字符串转成number

如果字符串中都是数值，就可以正常转化，如："123" => 123
如果是一个空串，空串是""，转化后，是0 "" => 0
如果字符串中不只有数字，转化后是NaN 如："hello123" => NaN

 var str = "123";
 var num = Number(str);
 console.log(num);
 console.log(typeof num); 

 var str = "";
 var num = Number(str);
 console.log(num);
 console.log(typeof num); 

 var str = "12px";
 var num = Number(str); 
 console.log(num); 
 console.log(typeof num);

利用+或-进行转化

// + - 底层，还是去调用Number构造器
var str = "123";
var num = +str; 
console.log(num);  
console.log(typeof num);

var str = "123";
var num = -str; 
console.log(num);  
console.log(typeof num)

// "    "  不能空串    如果一个字符串中，都是空格，最终也是转化成0
var str = "    ";
var num = +str; 
console.log(num);   // 0
console.log(typeof num)

parseInt parseFloat

 var str = "123";
 var num = parseInt(str); // 123
 console.log(num); 
 console.log(typeof num) 

 var str = "123.456";
 // Int表示整数   parseInt会过滤掉小数
 var num = parseInt(str); // 123
 console.log(num); 
 console.log(typeof num) 

 var str = "123abc";
 // parseInt 会尽可能地去转化  从前往后面，只要能转就转，如果遇到了一个非数字，就停止转化
 var num = parseInt(str); // 123
 console.log(num); 
 console.log(typeof num) 

 var str = "def123abc";
 // parseInt 会尽可能地去转化  从前往后面，只要能转就转，如果遇到了一个非数字，就停止转化
 var num = parseInt(str); // NaN
 console.log(num); 
 console.log(typeof num) 

 var str = "123.456abc";
 // parseFloat 可以转小数，规则和parseInt一模一样
 var num = parseFloat(str); // 123.456
 console.log(num); 
 console.log(typeof num)

将boolean类型转成nubmer类型

转化方式：A）Number构造器 B）+ -
如果是true，转化成数字1
如果是false，转化成数字0

 var b = true;
 var num = Number(b); 
 console.log(num);  // 1
 console.log(typeof num); 

 var b = false;
 var num = Number(b); 
 console.log(num);  // 0
 console.log(typeof num); 

 // + 或 - 底层还是调用Nubmer构造器来转化
 var b = false;
 var num = +b; 
 console.log(num);   // 0
 console.log(typeof num)

将und类型转成nubmer类型

转化方式：A）Number构造器

var z;  // z没有值，默认就是und
var num = Number(z); 
console.log(num);  // NaN
console.log(typeof num);

将null类型转成nubmer类型

转化方式：A）Number构造器
在JS中，+有多层含义，1）表示加号 2）表示字符串连接运算符 3）...

var n = null;
var num = Number(n); 
console.log(num);   // 0
console.log(typeof num);

// 问：哪些数据转化后，会变成0
// 答：空串 false  null 转化成number，就是0

19 - 其它的数据类型转成boolean

19.1 其它的数据类型转成boolean

将string类型转成boolean类型:

Boolean构造器

var str1 = "hello";
let flag = Boolean(str1);
console.log(flag);  // true
console.log(typeof flag);  // boolean

var str1 = "";
let flag = Boolean(str1);
console.log(flag);  // false
console.log(typeof flag);  // boolean

将number类型转成boolean类型

var num = 123;
let flag = Boolean(num);
console.log(flag);  // true
console.log(typeof flag);  // boolean

var num = 0;
let flag = Boolean(num);
console.log(flag);  // false
console.log(typeof flag);  // boolean

var num = -0;
let flag = Boolean(num);
console.log(flag);  // false
console.log(typeof flag);  // boolean

var num = NaN;
let flag = Boolean(num);
console.log(flag);  // false
console.log(typeof flag);  // boolean

将und类型转成boolean类型

var num; // num的值默认就是und
let flag = Boolean(num);
console.log(flag);  // false
console.log(typeof flag);  // boolean

将null类型转成boolean类型

var num = null;
let flag = Boolean(num);
console.log(flag);  // false
console.log(typeof flag);  // boolean

结论：空串/0/-0/NaN/und/null 会转化成false，其它的都会转化成true 这个结论非常重要

02-JS运算符

1 - 运算符（操作符）

1.1 运算符的分类

运算符（operator）也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。

几乎所有的编程语言都有各种各样的运算符(也被称之为操作符，operators)

JavaScript中常用的运算符有：

算术运算符
递增和递减运算符
关系运算符
逻辑运算符
赋值运算符

1.2 算数运算符

算术运算符概述：

概念：数学运算符也叫算术运算符，主要包括加、减、乘、除、取余（求模）。

浮点数的精度问题：

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。
```
var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001
```
所以：不要直接判断两个浮点数是否相等 !

表达式和返回值：

表达式：是由数字、运算符、变量等以能求得数值的有意义排列方法所得的组合
简单理解：是由数字、运算符、变量等组成的式子
表达式最终都会有一个结果，返回给开发者，称为返回值

1.3 递增和递减运算符

递增和递减运算符概述：

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（ -- ）运算符来完成。
在 JavaScript 中，递增（++）和递减（ -- ）既可以放在变量前面，也可以放在变量后面。放在变量前面时，我们可以称为前置递增（递减）运算符，放在变量后面时，我们可以称为后置递增（递减）运算符。
递增和递减运算符必须和变量配合使用。

递增运算符：

前置递增运算符
++num 前置递增，就是自加1，类似于 num = num + 1，但是 ++num 写起来更简单。
num++ 后置递增，就是自加1，类似于 num = num + 1，但是 num++ 写起来更简单。
使用口诀：++在前，整体是一个新值，++在后，整体是一人旧值

1.4 赋值运算符

赋值运算符：

概念：用来把数据赋值给变量的运算符。前面我们使用的 = 其实也是一个运算符，被称之为赋值（ assignments ）运算符

= 有副作用，语句 x = value 将值 value 写入 x 然后返回 x。
链式赋值

var a, b, c;
// 链式赋值从右到左进行计算
a = b = c = 2 + 2;

原地修改:对一个变量做运算，并将新的结果存储在同一个变量中。

var age = 10;
age += 5;  // 相当于 age = age + 5;
age -= 5;  // 相当于 age = age - 5;
age *= 10; // 相当于 age = age * 10;

1.5 比较运算符

比较运算符概述：

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值（true / false）作为比较运算的结果。

=== 和 == 的区别：

普通的相等性检查 ==，不能区分出 0 和 false，或者空字符串和 false这类运算
因为在比较不同类型的值时，处于判断符号 == 两侧的值会先被转化为数字
严格相等运算符 === 在进行比较时不会做任何的类型转换
a 和 b 属于不同的数据类型，那么 a === b 不会做任何的类型转换而立刻返回 false
“不相等”符号 != 类似，“严格不相等”表示为 !==

1.6 逻辑运算符

逻辑运算符概述：

概念：将多个表达式或者值放到一起来获取到一个最终的结果

逻辑或的本质：

||（或）两个竖线符号表示“或”运算符（也称为短路或）
从左到右依次计算操作数，处理每一个操作数时，都将其转化为布尔值（Boolean）
如果结果是 true，就停止计算，返回这个操作数的初始值
如果所有的操作数都被计算过（也就是，转换结果都是 false），则返回最后一个操作数
返回的值是操作数的初始形式，不会转换为Boolean类型

逻辑与的本质：

&&（或）两个竖线符号表示“与”运算符（也称为短路与）
从左到右依次计算操作数，在处理每一个操作数时，都将其转化为布尔值（Boolean）
如果结果是 false，就停止计算，并返回这个操作数的初始值（一般不需要获取到初始值）
如果所有的操作数都被计算过（例如都是真值），则返回最后一个操作数
返回的值是操作数的初始形式，不会转换为Boolean类型

逻辑非：

将操作数转化为布尔类型：true/false
两个非运算 !! 有时候用来将某个值转化为布尔类型

1.7 运算符优先级

运算符放到一起使用时会有一定的优先级
在MDN上给出了所有运算符的优先级（不用去记）
developer.mozilla.org/zh-CN/docs/…

03-JS分支语句

1 - 分支结构

1.1 三大流程控制

在日常生活中，也有三大流程，有：顺序流程，选择流程，循环流程。日常生活中是任何事件，都可以使用上面的三大流程解释。在计算机中，对应了三大结构，顺序结构，分支结构，循环结构。

顺序 —— 从上向下，顺序执行代码
分支 —— 根据条件判断，决定执行代码的分支
循环 —— 让特定代码重复执行

1.2 分支语句之if语句

代码块:

代码块是多行执行代码的集合，通过一个花括号{}放到了一起
在JavaScript中，我们可以通过流程控制语句来决定如何执行一个代码块

分支语句可以让我们有选择性的执行想要的代码:

if分支语句
三元运算符
switch 语句

if语句：

if语句有三种使用：单分支、双分支、多分支
单分支if语法：

// 括号内的条件为true时，进入大括号里执行代码
// 小括号内的结果若不是布尔类型时，会发生隐式转换转为布尔类型
// 数字 0、空字符串 “”、null、undefined 和 NaN 都会被转换成 false
// 其他值被转换为 true
if (条件) {
    满足条件要执行的代码
}


-   双分支if语法：

    ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/92bcc7a14a324471ac6de7045b89afeb~tplv-k3u1fbpfcp-zoom-1.image)

if (条件) { 满足条件要执行的代码 } else { 不满足条件要执行的代码 }


-   多分支if语法：

    ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07b83baa9f0e4ab08162de4fa6087687~tplv-k3u1fbpfcp-zoom-1.image)

// 先判断条件1，若满足条件1就执行代码1，其他不执行 // 若不满足则向下判断条件2，满足条件2执行代码2，其他不执行 // 若依然不满足继续往下判断，依次类推 // 若以上条件都不满足，执行else里的代码n  注：可以写N个条件，但这里演示只写2个 if (条件1) { 代码1 } else if (条件2) { 代码2 } else if (条件3) { 代码3 } else { 代码n }



**注意细节：**

-   if语句中的条件，不管是什么表达式，都会转化成布尔类型
-   if语句中对 是否相等 来判断时，最好将常量写在前面
-   if语句后面的{}可以不写，如果不写，只有if后面第1条语句，相当于是{}中的
-   if语句可以嵌套

**练习题：**

-   接收用户输入的数据，判断这个数据是偶数还是奇数，如果是偶数，输出yes，如果是奇数，输出no
-   接收用户输入的1~7数据，判断是星期几后，打印出来
-   接收用户输入的1~12的数据，判断是什么季节后输出
-   有三个变量：a,b,c  将变量升序排序后输出
-   判断一个年份是否是闰年
-   输入一个0到50的数，如果数小于10，需要在它前面补0。

### [](https://tubie.gitee.io/fe-blog/basic/js/03/03.html#_1-3-%E5%88%86%E6%94%AF%E8%AF%AD%E5%8F%A5%E4%B9%8Bswitch%E8%AF%AD%E5%8F%A5)1.3 分支语句之switch语句

**switch语句：**

-   它是通过判断表达式的结果（或者变量）是否等于case语句的常量，来执行相应的分支体的；
-   与if语句不同的是，switch语句只能做值的相等判断（使用全等运算符 ===），而if语句可以做值的范围判断
-   switch case一般需要配合break关键字使用 没有break会造成case穿透

// 找到跟小括号里数据全等的case值，并执行里面对应的代码 // 若没有全等 === 的则执行default里的代码

switch (数据) {
    case 值1:
        代码1
        break;
    case 值2:
        代码2
        break;
    default:
        代码n
        break;
}

04-JS循环结构

1 - 循环结构

1.1 循环语句之while循环

while循环语句:

跟if语句很像，都要满足小括号里的条件为true才会进入执行代码
while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

// 循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。
// 循环需要具备三要素：
// 1. 变量起始值
// 2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
// 3. 变量变化量（用自增或者自减）
// 开发中一定要避免死循环的产生；
while (循环条件) {
    重复要执行的代码（循环体）
}

while循环的练习题目：

练习一：打印10次Hello World
练习二：打印0~99的数字
练习三：计算0~99的数字和
练习四：计算0~99所有奇数的和
练习五：计算0~99所有偶数的和*

1.2 循环语句之do..while循环

do..while循环语句:

do..while循环和while循环非常像，二者经常可以相互替代(不常用)
do..while的特点是不管条件成不成立，do循环体都会先执行一次

do{
  重复要执行的代码（循环体）
}while (循环条件)

1.3 循环语句之for循环

for循环语句:

for 循环更加复杂，但它是最常使用的循环形式。
把声明起始值、循环条件、变化值写到一起，让人一目了然

for(声明记录循环次数的变量; 循环条件; 变化值){
  循环体
}

for循环的练习题目：

练习一：打印10次Hello World
练习二：打印0~99的数字
练习三：计算0~99的数字和
练习四：计算0~99所有奇数的和
练习五：计算0~99所有偶数的和*

for循环和while循环有什么区别呢：

当如果明确了循环的次数的时候推荐使用for循环
当不明确循环的次数的时候推荐使用while循环

1.4 循环语句之for循环嵌套

一个循环里再套一个循环，一般用在for循环里

for(外部声明记录循环次数的变量; 循环条件; 变化值){
  for(内部声明记录循环次数的变量; 循环条件; 变化值){
    循环体
  }
}

1.5 循环语句之循环控制

循环的跳转（控制）：

在执行循环过程中, 遇到某一个条件时, 我们可能想要做一些事情；
比如循环体不再执行(即使没有执行完), 跳出循环；
- break: 直接跳出循环, 循环结束
- 某一条件满足时，退出循环，不再执行后续重复的代码
比如本次循环体不再执行, 执行下一次的循环体；
- continue: 跳过本次循环次, 执行下一次循环体
- continue 某一条件满足时，不执行后续重复的代码

05-JS中的函数

hs 6/29/2022

1 - 函数

1.1 函数的概念

在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。

函数：函数其实就是某段代码的封装，这段代码帮助我们完成某一个功能
默认情况下JavaScript引擎或者浏览器会给我们提供一些已经实现好的函数
我们也可以编写属于自己的函数
在开发程序时，使用函数可以提高编写的效率以及代码的重用

目前, 我们已经接触过几个函数了

alert函数
prompt函数
console.log函数
String/Number/Boolean函数

2.2 函数的使用

函数的使用包含两个步骤:

声明函数 —— 封装独立的功能
调用函数 —— 享受封装的成果

声明函数

声明函数的过程是对某些功能的封装过程
开发中，我们会根据自己的需求定义很多自己的函数
声明函数使用function关键字：这种写法称之为函数的定义

// 声明函数
// function 是声明函数的关键字,必须小写
function 函数名() {
    //函数体代码
}

注意细节：

函数名的命名规则和前面变量名的命名规则是相同的
函数定义完后里面的代码是不会执行的，函数必须调用才会执行
函数要尽量做到见名知意
由于函数一般是为了实现某个功能才定义的，所以通常我们将函数名命名为动词，比如 getSum

调用函数

调用函数是让已存在的函数为我们所用
可以是自己写的函数，也可以是系统中内置的，也可以是第三方的
调用的时候千万不要忘记添加小括号

// 调用函数
// 调用函数通过函数名()即可
函数名();  // 通过调用函数名来执行函数体代码

2.3 函数的参数

函数参数语法

函数的参数，增加函数的通用性，针对相同的数据处理逻辑，能够适应更多的数据：

形参：定义函数时，小括号中的参数，是用来接收参数用的，在函数内部作为变量使用
实参：调用函数时，小括号中的参数，是用来把数据传递到函数内部用的

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

注意细节：

调用的时候实参值是传递给形参的
形参简单理解为：不用声明的变量
实参和形参的多个参数之间用逗号（,）分隔

全局变量和局部变量：

定义在函数内部的变量是局部变量
定义在函数外部的变量是全局变量

2.4 函数的返回值

函数不仅仅可以有参数, 也可以有返回值

使用return关键字来返回结果
一旦在函数中执行return操作，那么当前函数会终止
如果函数中没有使用 return语句，那么函数有默认的返回值：undefined
如果函数使用 return语句，但是return后面没有任何值，那么函数的返回值也是：undefined

// 声明函数
function 函数名（）{
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

break ,continue ,return 的区别

break ：结束当前的循环体（如 for、while）
continue ：跳出本次循环，继续执行下次循环（如 for、while）
return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体内的代码

2.5 函数的两种声明方式

function声明函数

// 声明定义方式
function fn() {...}
// 调用  
fn();

函数表达式方式(匿名函数）

// 利用函数表达式方式的写法如下： 
// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

因为函数没有名字，所以也被称为匿名函数
这个fn 里面存储的是一个函数
函数表达式方式原理跟声明变量方式是一致的
函数调用的代码必须写到函数体后面

06-数组

1 - 数组（Array）

1.1 数组的概念

数组和对象都是一种保存多个数据的数据结构，是一种容器，数组是有序的集合，我们可以通过索引来获取到它里面的元素。 创建方式:

可以通过[]来创建一个数组
可以通过new Array()来创建一个数组

操作数组：

访问数组中的元素；
修改数组中的元素；
增加数组中的元素；
删除数组中的元素；

2.2 数组的基本操作

访问数组中的元素：

通过中括号[]访问，数组元素从 0 开始编号（索引index）
arr.at(i)
- 如果 i >= 0，则与 arr[i] 完全相同
- 对于 i 为负数的情况，它则从数组的尾部向前数。

修改数组中的元素：

arr[0] = "wc"

数组的添加、删除方法(在数组的尾端添加或删除元素):

push 在末端添加元素
pop 从末端取出一个元素

数组的添加、删除方法(在数组的首端添加或删除元素):

shift 取出队列首端的一个元素，整个数组元素向前前移动
unshift 在首端添加元素，整个其他数组元素向后移动

数组的添加、删除方法(如果我们希望在中间某个位置添加或者删除元素应该如何操作呢？):

arr.splice 方法可以说是处理数组的利器，它可以做所有事情：添加，删除和替换元素。
arr.splice的语法结构如下：

从start位置开始，处理数组中的元素；
deleteCount：要删除元素的个数，如果为0或者负数表示不删除；
item1, item2, ...：在添加元素时，需要添加的元素；

// 1,删除一个元素
arr.splice(1,1)
// 2,新增两个元素
arr.splice(1,0,"hehe","xixi")
// 3,替换两个元素
arr.splice(1,2,"wc","xq")

length属性:

length属性用于获取数组的长度，当我们修改数组的时候，length 属性会自动更新。。
length 属性是可写的，增加一个大于默认length的数值，那么会增加数组的长度，减少它，数组就会被截断：
清空数组最简单的方法就是：arr.length = 0;

2.3 数组的遍历

所谓的遍历就是一个个的把数组中的元素取出来。

普通for循环遍历：

for(var i=0; i<arr.length; i++){
  console.log(arr[i])
}

for..in 遍历，获取到索引值：

for(var index in arr){
  console.log(arr[index])
}

for..of 遍历，获取到每一个元素：

for(var item of arr){
  console.log(item)
}

2.4 数组方法 – slice、cancat、 join

arr.slice 方法：用于对数组进行截取（类似于字符串的slice方法）

包含bigin元素，但是不包含end元素；

arr.concat方法：创建一个新数组，其中包含来自于其他数组和其他项的值。

arr.join方法：将一个数组的所有元素连接成一个字符串并返回这个字符串。

2.5 数组的查找

arr.indexOf方法：查找某个元素的索引。

从fromIndex开始查找，如果找到返回对应的索引，没有找到返回-1；
也有对应的从最后位置开始查找的 lastIndexOf 方法

arr.includes方法：判断数组是否包含某个元素。

从索引 from 开始搜索 item，如果找到则返回 true（如果没找到，则返回 false）。

find 和 findIndex 直接查找元素或者元素的索引（ES6之后新增的语法）

var res = arr.find(function(item,index,arr){
  return item.id === 110;
})
console.log(res)

2.6 数组的排序

sort方法也是一个高阶函数，用于对数组进行排序，并且生成一个排序后的新数组。

如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 前面；
如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变；
如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 前面；
也就是说，谁小谁排在前面；

reverse() 方法将数组中元素的位置颠倒，并返回该数组。

2.7 数组的其他高阶方法

arr.forEach:

遍历数组，并且让数组中每一个元素都执行一次对应的方法；

arr.map:

map() 方法创建一个新数组；
这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成；

arr.filter:

filter() 方法创建一个新数组；
新数组中只包含每个元素调用函数返回为true的元素；

arr.reduce:

用于计算数组中所有元素的总和；
对数组中的每个元素按序执行一个由您提供的 reducer 函数；
每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值；

1 - 字符串（String）

1.1 创建方式

创建方式:

可以通过字面量的形式来创建一个字符串
可以通过new String()来创建一个字符串

length:

获取字符串的长度；

2.2 访问字符串的字符

使用方法一：通过字符串的索引 str[0]
使用方法二：通过str.charAt(pos)方法
它们的区别是索引的方式没有找到会返回undefined，而charAt没有找到会返回空字符串；

2.3 字符串的遍历

普通for循环遍历：

var str = "hello";
for(var i=0; i<str.length; i++;){
  console.log(str[i])
}

for..of遍历：

for(var item of str){
  console.log(item)
}

2.4 修改字符串

字符串的不可变性，字符串在定义后是不可以修改的，所以下面的操作是没有任何意义的；

var msg = "hello"
msg[1] = "H";
console.log(msg);

很多操作都是生成一个新串：

toLowerCase()：将所有的字符转成小写；
toUpperCase() ：将所有的字符转成大写；

2.5 查找字符串

查找字符串位置

从fromIndex开始，查找searchValue的索引；
如果没有找到，那么返回-1；
有一个相似的方法，叫lastIndexOf，从最后开始查找（用的较少）

是否包含字符串

从position位置开始查找searchString，根据情况返回 true 或 false
这是ES6新增的方法；

2.6 开头和结尾

以xxx开头

从position位置开始，判断字符串是否以searchString开头；
这是ES6新增的方法，下面的方法也一样；

以xxx结尾

在length长度内，判断字符串是否以searchString结尾；

替换字符串

查找到对应的字符串，并且使用新的字符串进行替代；
这里也可以传入一个正则表达式来查找，也可以传入一个函数来替换；

2.7 获取子字符串和其它方法

拼接字符串:

str.concat (str2，[,..strN]） 删除首位空格: str.trim()

字符串分割:

str.split([separator[,limit]])

separator：以什么字符串进行分割，也可以是一个正则表达式；
limit：限制返回片段的数量；

08-JS中的对象

1 - 对象（Object）

1.1 创建方式

创建方式:

可以通过字面量的形式来创建一个字符串

var obj = {
    name: "wc",
    age: 18,
    code: function () {
        console.log("coding...");
    }
}
// .叫属性访问运算符   通过打点的形式就可以访问对象中的属性
// 通过[]的形式也可以访问   [键] 使用引号起来  如果不包，name会当成变量
console.log(obj.name);
console.log(obj["name"]);

// 数组也是一个特殊的对象，键是从0开始的索引
var arr = ["wc","xq"];
console.log(arr[0]);

数组和对象都是容器，容器就是集合，集合就意味着，里面可以放大量的数据。
对象中放的是属性，属性分属性名和属性值，也叫key-value,key是键的意思，value是值的意思
还可以通过new Object()来创建一个字符串

var obj2 = new Object();
obj2.name = "cc";
obj2.age = 22;
console.log(obj2);

2.2 操作对象中的属性

访问对象中的属性

<script>
    // 对象也是一个容器，说到容器，立马操作操作，说到操作，立即CRUD
    var obj = {
        name: "wc",
        age: 18,
        code: function () {
            console.log("coding...");
        }
    }
    // .叫属性访问运算符   通过打点的形式就可以访问对象中的属性
    // 通过[]的形式也可以访问   [键] 使用引号起来  如果不包，name会当成变量
    console.log(obj.name);
    console.log(obj["name"]);

    // 数组也是一个特殊的对象，键是从0开始的索引
    var arr = ["wc","xq"];
    console.log(arr[0]);
</script>

其它的操作

<script>
    var obj = {}; // 空对象
    // 添加属性
    obj.name = "wc";
    obj.age = 110;
    obj.run = function(){ console.log("run..."); }

    // 访问属性
    console.log(obj.name);
    console.log(obj.age);
    console.log(obj.run()); // run() 调用方法  在你的眼中一个值

    // 删除属性
    delete obj.age;  // delete是一个运算符 用来删除对象中的某个属性
    console.log(obj.age);  // 如果访问一个对象中不存在的属性，结果是und
</script>

使用方法二：通过str.charAt(pos)方法
它们的区别是索引的方式没有找到会返回undefined，而charAt没有找到会返回空字符串；

[07-字符串]

(tubie.gitee.io/fe-blog/bas…)

09-Math和Date

1 - Math

1.1 创建方式

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

常见的属性：

Math.PI：圆周率，约等于 3.14159；

常见的方法：

Math.floor：向下舍入取整
Math.ceil：向上舍入取整
Math.round：四舍五入取整
Math.random：生成0~1的随机数（包含0，不包含1）
Math.pow(x, y)：返回x的y次幂

2 - Date

2.1 关于时间的基本认识

最初，人们是通过观察太阳的位置来决定时间的，但是这种方式有一个最大的弊端就是不同区域位置大家使用的时间是不一致的，相互之间没有办法通过一个统一的时间来沟通、交流。
之后，人们开始制定的标准时间是英国伦敦的皇家格林威治（ Greenwich ）天文台的标准时间（刚好在本初子午线经过的地方），这个时间也称之为GMT（Greenwich Mean Time），其他时区根据标准时间来确定自己的时间，往东的时区（GMT+hh:mm），往西的时区（GMT+hh:mm）；
但是，根据公转有一定的误差，也会造成GMT的时间会造成一定的误差，于是就提出了根据原子钟计算的标准时间UTC（Coordinated Universal Time）
目前GMT依然在使用，主要表示的是某个时区中的时间，而UTC是标准的时间。

2.2 使用Date来表示和处理时间

//创建Date对象
//当前时间- Fri ·May 13 2022∶15:22:53·GWT+0800(伊尔库茨克标准时间)
var date1 = new Date()

//传入的是毫秒数，表示从1970-01-01-00:00:00 UTC ·经过的毫秒数
var date2 = new Date(1000)

//传入的是dateString, 日期的字符串值
var date3 = new Date("2022-08-08")

// new Date(year , monthIndex [ , day [, hours [,minutes  [ , seconds· [ , milliseconds]]]]])
var date4 = new Date(2022，08,08，08， 08，08，08)

dateString时间的表示方式

日期的表示方式有两种：RFC 2822 标准或者 ISO 8601 标准。
默认打印的时间格式是RFC 2822标准的
利用toISOString()将其转化成ISO 8601标准的
- YYYY：年份，0000 ~ 9999
- MM：月份，01 ~ 12
- DD：日，01 ~ 31
- T：分隔日期和时间，没有特殊含义，可以省略
- HH：小时，00 ~ 24
- mm：分钟，00 ~ 59
- ss：秒，00 ~ 59
- .sss：毫秒
- Z：时区

Date获取信息的方法：

getFullYear()：获取年份（4 位数）
getMonth()：获取月份，从 0 到 11；
getDate()：获取当月的具体日期，从 1 到 31；
getHours()：获取小时；
getMinutes()：获取分钟；
getSeconds()：获取秒钟；
getMilliseconds()：获取毫秒；

获取某周中的星期几：

getDay()：获取一周中的第几天，从 0（星期日）到 6（星期六）；

Date获取Unix时间戳：

Unix 时间戳：它是一个整数值，表示自1970年1月1日00:00:00 UTC以来的毫秒数。
方式一：new Date().getTime()
方式二：new Date().valueOf()
方式三：+new Date()
方式四：Date.now()

Date.parse方法：

Date.parse(str) 方法可以从一个字符串中读取日期，并且输出对应的Unix时间戳。。
作用等同于 new Date(dateString).getTime() 操作；
需要符合 RFC2822 或 ISO 8601 日期格式的字符串；
其他格式也许也支持，但结果不能保证一定正常；
如果输入的格式不能被解析，那么会返回NaN；

JS基础

一， JS变量和数据类型

1 - 计算机语言和编程语言的关系和区别

1.1 编程语言

1.2 计算机语言

1.3 编程语言的特点

2 - 计算机基础

2.2 数据存储

2.3 数据存储单位

3 - 初识JavaScript

3.1 JavaScript 是什么

3.2 JavaScript的作用

3.3 JavaScript的组成

3.6 JavaScript编写方式

位置一：HTML代码行内（不推荐）

位置二：script标签中(内嵌式)

位置三：外部JS文件

4 - JavaScript注释

4.1 单行注释

4.2 多行注释

5 - JavaScript输入输出语句

6 - 变量的概念

6.1 什么是变量

7 - 变量的使用

7.1 变量的命名格式

7.2 变量的命名规范

7.3 变量的使用注意

8 - 数据类型介绍

8.1 数据类型简介

8.2 简单数据类型

8.3 typeof操作符

9 - Number数据类型

9.1 Number

10 - String数据类型

10.1 String

11 - Boolean数据类型

](tubie.gitee.io/fe-blog/bas… Boolean

12 - Undefined数据类型

12.1 Undefined

13 - Object数据类型

13.1 Object

14 - Null数据类型

14.1 Null

15 - 数据类型总结

15.1 数据类型总结

16 - 数据类型转化介绍

16.1 数据类型转化介绍

17 - 其它的数据类型转成stirng

17.1 其它的数据类型转成stirng

18 - 其它的数据类型转成number

18.1 其它的数据类型转成number

19 - 其它的数据类型转成boolean

19.1 其它的数据类型转成boolean

02-JS运算符

1 - 运算符（操作符）

1.1 运算符的分类

1.2 算数运算符

1.3 递增和递减运算符

1.4 赋值运算符

1.5 比较运算符

1.6 逻辑运算符

1.7 运算符优先级

03-JS分支语句

1 - 分支结构

1.1 三大流程控制

1.2 分支语句之if语句

04-JS循环结构

1 - 循环结构

1.1 循环语句之while循环

1.2 循环语句之do..while循环

1.3 循环语句之for循环

1.4 循环语句之for循环嵌套

1.5 循环语句之循环控制

05-JS中的函数

1 - 函数

1.1 函数的概念

2.2 函数的使用

声明函数

调用函数

2.3 函数的参数