JavaScript--后端也有自己的JS要学-优快云博客

一、变量与常量

1.变量

1.1变量的定义

先写一个demo.html文件，把JS脚本index.js嵌入进去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
</meta>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

1.2变量重新赋值

//声明一个变量num，并且赋值为10
var num = 10;
//重新赋值变量num为20
num=20;

1.3变量提升：JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升(hoisting)，

例如：

console.log(hello);
//console.log()的作用是：打印信息，在浏览器的控制台中显示出来括号内的值
//控制台会显示hello is not defined

点开文件夹中html文件两下可在浏览器打开，右键页面进行检查，点开控制台，会有如下提示

例如：

console.log(num);
var num = 10;
//控制台会显示undefined，即变量提升

例如:

var num;
console.log(num);
num = 20;
//控制台会显示undefined

例如：

var num = 10;
console.log(num);
//控制台会显示10

2.常量：使用const定义常量后，常量无法改变(扩展知识,ES6新特性)。常量一旦声明，是不可以更改的。

例如：

const URL = "www.google.com";
URL = "www.baidu.com";
//控制台会显示报错信息：Assignment to constant variable.

二、关联JavaScript和HTML，一共有如下三种方式

1.内联脚本：嵌入到HTML文件中，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo 0707</title>
</meta>
</head>
<body>
    <h1>Demo</h1>
    <p>这是一个段落</p>
    <script>
        var num = 10;
        console.log(num);
    </script>
</body>
</html>

优点：一个文件就全部都搞定了

缺点：HTML和JS未分离，而现在流行分离开发的思想

2.外部脚本：引入本地独立JS文件，如：

如果JS文件不依赖于body当中的某些标签，则写在<head></head>当中，否则，写在<body></body>当中

优点：两种文件完全独立分开了，后期维护也比较方便

3.引入网络来源文件，以jquery cdn为例

运行后在浏览器打开，右键检查，选择网络，重新加载页面，可以看到加载出来的文件，如

4.什么是CDN?网络加速资源，加快访问速度

CDN 是内容分发网络(Content Delivery Network)的缩写。它是一种分布式的服务器系统，用于在全球范围内快速传输内容。CDN 的主要目的是通过将内容缓存到多个地理位置的服务器上，从而加快用户访问网站的速度，减少延迟，提高网站的可用性和可靠性。

三、数据类型

1.原始类型（基础类型）：数值、字符串、布尔值、undefined和null

1.1 数值

var age=10;

var num=21.5;

var num1=-20;

1.2字符串

var str="hello";

var name='尚学^%&堂';

1.3布尔值

var isTrue=true;// 真

var isFalse=false;// 假

1.4undefined和null：

undefined 和null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是undefined 和null.

undefined 代表的含义是未定义，null代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。

var hello;//打印结果为undefined

var haha=undefined;//打印结果为undefined

var time=null;//定时器初始化操作

undefined利 nu11都表示“没有值"或"空值”，但它们有一些区别:

1.4.1类型不同:

undefined 是一个类型(undefined 类型)，表示变量未定义。

nu11是一个对象(cbject类型)，表示空对象指针。

1.4.2使用场景不同:

undefined 通常用于变量声明但未赋值的情况。

nu11 通常用于显式地表示“空“或”无值”的情况

1.4.3赋值方式不同:

undefined 是Javascript 引擎自动赋予未初始化变量的值。

nu11是开发者可以显式赋予变量的值，

1.4.4比较不同:

undefined== nu11返回true，因为它们都表示"空值”。

undefined===false返向false，因为它们类型不同。

2.合成类型（复合类型）：对象。因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器

2.1对象：分为狭义对象和广义对象

2.2狭义对象：键值对的集合

var obj={

name:"itbaizhan",

age:10,

flag:false

}

2.3广义对象：在JS中，一切皆对象

四、类型判断

1.JavaScript 有多方法可以确定一个值到底是什么类型。包括typeof、instanceof、Object.prototype.toString.call、 Array.isArray，而我们现在需要接触到的就是typeof

1.1数值返回number，字符串范围string，布尔值返回boolean，对象返回object

1.2当对unl和undefined这两种类型使用 typeof进行判断时，null 类型化会返回“object”，这是一个历史遗留的问题

如：

console.log(typeof 123);//number

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

console.log(typeof true);//boolean

console.log(typeof {});//object

var obj={};

console.log(typeof obj);//object

console.log(typeof undefined); //undefined

console.log(typeof null);//object

五、算术运算符

1.加法运算符

1.1数值相加

var num1=10;

var num2=29;

console.log(num1+num2);//39

1.2非数值相加

//true:1 false:0

var f1 = true;

var f2 = true;

var f3 = false;

var num3 =10;

console.log(f1+f2);//2

console.log(f1+f3);//1

console.log(f1+num3);//11

console.log(f3+num3);//10

1.3与字符串相加

//字符串与任何非字符串变量相加时，会先将其转化为字符串类型，再连接起来

var s1="Hello";

var s2="World";

var num4=10;

var f4=false;

console.log(s1+s2);//HelloWorld

console.log(s1+num4);//Hello10

console.log(s1+f4);//Hellofalse

2.加减乘除运算符

var num5=30;

var num6=4;

console.log(num5+num6);//34

console.log(num5-num6);//26

console.log(num6-num5);//-26

console.log(num5*num6);//120

console.log(num5/num6);//7.5

3.余数运算符

var num7=15;

var num8=4;

console.log(num7%num8);//3

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

var x=10;

var y=20;

console.log(++x);//11

console.log(--y);//19

console.log(x);//11

console.log(y);//19

var a=10;

var b=20;

console.log(a++);//10

console.log(b--);//20

console.log(a);//11

console.log(b);//19

var m=10;

var n=20;

console.log(++m - n--);//-9

六、赋值运算符：

1.赋值运算符(Assignment Operators)用于给变量赋值

最常见的赋值运算符，当然就是等号(=)

var x=10;

var y;

console.log(y);//undefined

y=x;

console.log(y);//10

2.赋值运算符还可以与其他运算符结合，形成变体。

2.2+=

var m=10;

var n=20;

m+=n;

console.log(m);//30

2.3-=

var j=10;

var k=20;

console.log(j-=k);//-10

2.4*=

var a=10;

var b=20;

console.log(a*=b);//200

2.5/=

var p=10;

var q=20;

console.log(p/=q);//0.5

2.6%=

var r=15;

var s=4;

console.log(r%=s);//3

七、比较运算符

1.比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。

var num1 = 10;

var num2 = 5;

console.log(num1<num2);//false

console.log(num1>num2);///true

2.JS一共提供了8个比较运算符

<小于运算符

console.log(10<5);//false

>大于运算符

console.log(10>5);///true

<=小于或等于运算符

console.log(10<=5);//false

console.log(10<=10);//true

>=大于或等于运算符

console.log(10>=5);//true

console.log(10>=10);//true

==相等运算符

console.log(10==5);//false

===严格相等运算符

console.log(10===5);//false

!=不相等运算符

console.log(10!=5);//true

!==严格不相等运算符

console.log(10!==5);//true

3.“==”和“===”的区别

双等比较值，三等比较值和类型

var num3=10;

var num4="10";

console.log(num3==num4);//true

console.log(num3===num4);//false

console.log(num3!=num4);//false

console.log(num3!==num4);//true

八、布尔运算符

1.取反运算符！

1.1布尔值取反

console.log(!true);//false

console.log(!false);//true

1.2非布尔值取反

console.log(!undefined);//true

console.log(!null);//true

console.log(!0);//true

console.log(!NaN);//true

console.log(!"");//true

console.log(!"Hello");//false

console.log(!123);//false

var obj={name:"John"};

console.log(!obj);//false

2.且运算符 &&：多个条件都要满足

如果一个人一直做好事，突然有一天做了一件坏事，那么人们会认为这个人很虚伪，以前说不定都是装的！对这个人不再认可

console.log(10>5&&20<30);//true

console.log(10>5&&20>30);//false

3.或运算符 ||：满足一个条件即可

如果一个人一直做坏事，突然有一天做了一件好事，那么人们会认为这个人其实还不错，以前也许是另有原因！对这个人突然就认可了

console.log(10<5||20<30);//true

console.log(10<5||20>30);//false

九、类型转换

1.自动转换：遇到以下两种情况时，JavaScript 会自动转换数据类型即转换是自动完成的，用户不可见

1.1不同类型的数据互相运算

var num = 100;

var str="hello";

//num先进行自动类型转换，转成字符串，再与str拼接

console.log(num+str);//100hello

1.2对非布尔值类型的数据求布尔值

//hello先进行自动类型转换成布尔值，再取反

var hello = "hello";

console.log(!hello);//false

2.强制转换：主要指使用Number、String和Boolean三个函数，手动将各种类型的值，分别转换成数字、字符串或者布尔值。

2.1强制转化-Number()：使用Number函数，可以将任意类型的值转化成数值，如

//数值：转换后还是原来的值

console.log(Number(123));//123

console.log(typeof Number(123));//number

//字符串：如果可以被解析为数值，则转换为相应的数值

console.log(Number("123"));//123

console.log(typeof Number("123"));//number

//字符串：如果不可以被解析为数值，返回NaN

console.log(Number("123ABC"));//NaN

console.log(typeof Number("123ABC"));//number

//空字符串转为0

console.log(Number(""));//0

console.log(typeof Number(""));//number

//布尔值：true转为1

console.log(Number(true));//1

console.log(typeof Number(true));//number

//布尔值：false转为0

console.log(Number(false));//0

console.log(typeof Number(false));//number

2.2强制转化-String()：String函数可以将任意类型的值转化成字符串，转换规则如下

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

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

console.log(String("abc"));//abc

console.log(typeof String("abc"));//string

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

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

console.log(String(undefined));//undefined

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

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

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

2.3强制转化-Boolean()：Boolean函数可以将任意类型的值转为布尔值

它的转换规则相对简单：除了以下五个值的转换结果为false，其他的值全部为true。

undefined、null、-0或+0、NaN、"(空字符串)

console.log(Boolean(undefined));// false

console.log(typeof Boolean(undefined));// boolean

console.log(Boolean(null));// false

console.log(typeof Boolean(null));// boolean

console.log(Boolean(-0));// false

console.log(typeof Boolean(-0));// boolean

console.log(Boolean(+0));// false

console.log(typeof Boolean(+0));// boolean

console.log(Boolean(NaN));// false

console.log(typeof Boolean(NaN));// boolean

console.log(Boolean(""));// false

console.log(typeof Boolean(""));// boolean

console.log(Boolean(123));// true

console.log(typeof Boolean(123));// boolean

console.log(Boolean("hello"));// true

console.log(typeof Boolean("hello"));// boolean

console.log(Boolean(true));// true

console.log(typeof Boolean(true));// boolean

十、条件语句之if语句--前方的路要不要走？

1.if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示真，false表示伪。

2.需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中。

var num1 = 3;

if(num1==5){

//这里的语句，代码块是否执行取决于if语句的条件判断

num1+=5;

}

console.log(num1);//8

var num2 = 3;

if(num2==5){

//这里的语句，代码块是否执行取决于if语句的条件判断

num2+=5;

}

console.log(num2);//3

3.注意：if后面的表达式之中，不要混淆赋值表达式(=)、严格相等运算符(===)和相等运算符(==)。尤其是赋值表达式不具有比较作用。if代码块后面，还可以跟一个else代码块，表示不满足条件时所要执行的代码。

var x=1;

var y=2;

if(x===y){

console.log("x等于y");

}

else{

console.log("x不等于y");//输出"x不等于y"

}

var x=1;

var y=2;

if(x=y){

//这里把y赋值给了x

console.log("x等于y");//输出"x等于y"

}

else{

console.log("x不等于y");

}

console.log(x);//2

4.对同一个变量进行多次判断时，多个if...else语句可以连写在一起

var day=3;

if(day==1){

console.log("Today is Monday");

}else if(day==2){

console.log("Today is Tuesday");

}else if(day==3){

console.log("Today is Wednesday");//输出"Today is Wednesday"

}else if(day==4){

console.log("Today is Thursday");

}else if(day==5){

console.log("Today is Friday");

}else if(day==6){

console.log("Today is Saturday");

}else if(day==7){

console.log("Today is Sunday");

}else{

console.log("Invalid day");

}

5.嵌套if-else语句

var eat=true;

var food="pizza";

if(eat){

console.log("今天吃饭");//输出"今天吃饭"

if(food=="pizza"){

console.log("今天吃披萨");//输出"今天吃披萨"

}else{

console.log("今天不吃披萨");

}

}else{

console.log("今天不吃饭");

}

var eat=true;

var food="面条";

if(eat){

console.log("今天吃饭");//输出"今天吃饭"

if(food=="pizza"){

console.log("今天吃披萨");

}else{

console.log("今天不吃披萨，吃别的东西");//输出"今天不吃披萨，吃别的东西"

}

}else{

console.log("今天不吃饭");

}

var eat=false;

var food="piszza";

if(eat){

console.log("今天吃饭");

if(food=="pizza"){

console.log("今天吃披萨");

}else{

console.log("今天不吃披萨，吃别的东西"); }

}else{

console.log("今天不吃饭");//输出“今天不吃饭”

}

十一、条件语句之switch--switch简化你的选择

多个if...else连在一起使用的时候，可以转为使用更方便的switch结构

1.需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

var day=2;

switch(day){

case 1:

console.log("Today is Monday");

break;

case 2:

console.log("Today is Tuesday");

break;

case 3:

console.log("Today is Wednesday");

break;

case 4:

console.log("Today is Thursday");

break;

case 5:

console.log("Today is Friday");

break;

case 6:

console.log("Today is Saturday");

break;

case 7:

console.log("Today is Sunday");

break;

default:

console.log("Invalid day");

}

十二、三元运算符--也被称为三目运算符

JavaScript还有一个三元运算符(即该运算符需要三个运算子)?:，也可以用于逻辑判断

(条件)?表达式1:表达式2

var n=100;

//输出n is not divisible by 3

console.log(n%3==0? "n is divisible by 3" : "n is not divisible by 3");

十三、循环语句之for--每天一句吃了么？直到你爱上我为止

循环语句用于重复执行某个操作

for语句就是循环命令，可以指定循环的起点、终点和终止条件。

1.初始化表达式：确定循环变量的初始值，只在循环开始时执行一次。

2.布尔表达式：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环

3.迭代因子：每轮循环的最后一个操作，通常用来递增循环变量

//循环打印0-9

for(var i=0;i<10;i++){

console.log(i);

}

4.for语句的三个表达式，可以省略任何一个也可以全部省略。如果三个都省略，结果就导致了一个无限循环（死循环）

//循环输出0-9

var j=0;

for(;j<10;j++){

console.log(j);

}

//循环输出0-9

var j=0;

for(;j<10;){

console.log(j);

j++;

}

//无限循环打印 hello world

for(;;){

console.log("hello world");

}

十四、循环语句之while--每天一句吃了么？知道你爱上我为止

1.while语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块

var i=0;

while(i<10){

console.log(i);

i++;

}

var i=1;

while(i<10){

if(i%2==0){

console.log(i);

}

i++;

}

2.下面的例子是一个无限循环，因为循环条件总是为真

while(true){

console.log("Hello World");

}

十五、break语句和continue语句--我叫你停，你就停

1.break语句用于跳出代码块或循环

for(var i=1;i<20;i++){

console.log(i);

if(i==12){

break;

}

var j=1;

while(j<=20){

console.log(j);

if(j==12){

break;

}

j++;

}

2.continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环。

//输出1-33中不带4的数字

for(var i=1;i<=33;i++){

if(i==4||i==14||i==24){

continue;

}

console.log(i);

}

十六、字符串

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

如，'itbaizhan'、"itbaizhan"

var str1="hello";

var str2="world";

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

如，'key="value"'、"It's a long baizhan"

var str3="我家在'东北'，我叫李雷";

var str4='我家在"东北"，我叫李雷';

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

如，'Did she say \'hello\'?'、"Did she say \"hello\"?"

var str3="我家在\"东北\"，我叫李雷";

var str4='我家在\'东北\'，我叫李雷';

4.温馨提示：字符串默认只能写在一行内，分成多行将会报错，如：

var str4='我家在\'东北\'，

我叫李雷';

5.如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠，如：

var str4="我家在东北，\

我叫李雷，\

我今年30岁了";

6.转义：反斜杠(\)在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符

\0：null(\u0000)

\b：后退键(\u0008)

\f：换页符(\u000C)

\n：换行符F(\uOOOA)

\r：回车键(\u000D)

\t ：制表符(\u0009)

\v：垂直制表符(\u000B)

'：单引号(\u0027)

"：双引号(\u0022)

\：反斜杠(\u005C)

7.length属性：length属性返回字符串的长度，该属性也是无法改变的

var str2="world";

console.log(str2+"的长度是"+str2.length);

//world的长度是5

十七、字符串常用方法：字符串方法夺（多）笋啊

1.concat()：用于连接两个字符串，返回一个新字符串，不改变原字符串，相当于两个字符串用加法运算符

var str1="hello";

var str2="world";

console.log(str1.concat(str2));

//helloworld

console.log(str1+str2);

//helloworld

2.slice()：用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置(不含该位置)，如果省略第二个参数，则表示子字符串一直到原字符串结束，如

var str="mynameisczx";

var substr1=str.slice(0,6);

console.log(substr1);

//myname

var substr2=str.slice(6);

console.log(substr2);

//isczx

3.substring()：用于从原字符串取出子字符串并返回，不改变原字符串，跟 slice 方法很相像。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置(返回结果不含该位置)，当参数为负数时才能看出substring和slice的区别

var str="mynameisczx";

var substr1=str.substring(0,6);

console.log(substr1);

//myname

var substr2=str.substring(6);

console.log(substr2);

//isczx

4.indexOf()：用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回 -1，就表示不匹配

var str="hello world";

console.log(str.indexOf('o'));//4

console.log(str.indexOf('czx'));//-1

5.trim()：用于去除字符串两端的空格，返回一个新字符串，不改变原字符串

var str=" hello world ";

console.log(str);

// hello world

console.log(str.trim());

//hello world

6.replace()：用于替换匹配的子字符串

var str="I am a coder.";

console.log(str);

//I am a coder.

var replacestr=str.replace("a coder","czx");

console.log(replacestr);

//I am czx.

7.split()：按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组

var str="I|am|a|coder.";

console.log(str.split("|"));//["I", "am", "a", "coder."]

var str1="I am a coder."

console.log(str1.split(" "));//["I", "am", "a", "coder."]

var str2="Iamacoder.";

console.log(str2.split(""));//["I", "a", "m", "a", "c", "o", "d", "e", "r", "."]

十八、数组(array)：是按次序排列的一组值。我每个值的位置都有编号(从0开始)，整个数组用方括号表示。两端的方括号是数组的标志。

1.数组的定义与赋值

1.1定义时赋值

var array1=['I','am','a','programmer'];

console.log(array1);

//output: ["I", "am", "a", "programmer"]

1.2先定义后赋值

var array2=[];

array2[0]='I';

array2[1]='am';

array2[2]='a';

array2[3]='programmer';

console.log(array2);

//output: ["I", "am", "a", "programmer"]

1.3任何类型的数据，都可以放入数组

var array3=[123,'abc',[4,3,2],true,null,undefined];

console.log(array3);

//output: [123, 'abc', Array(3), true, null, undefined]

2.length属性：返回数组的成员数量

var array3=[123,'abc',[4,3,2],true,null,undefined];

console.log(array3.length);

//output: 6

3.读取数组中的某一个元素，通过下标

var array3=[123,'abc',[4,3,2],true,null,undefined];

console.log(array3[2][1]);//output: 3

4.数组遍历

var array1=['I','am','a','programmer'];

for(var i=0;i<array1.length;i++){

console.log(array1[i]);

}

var j=0;

while(j<array1.length){

console.log(array1[j]);

j++;

}

//I

//am

//a

//programmer

十九、数组常用方法

1.Array.isArray()：返回一个布尔值，表示参数是否为数组。它可以弥补`typeof运算符的不足

var arr=[1,2,3];

console.log(typeof arr);//object

console.log(Array.isArray(arr));//true

2.push()：用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组

var arr=[1,2,3,4,5,6,7,8,9,10];

console.log(arr);

//输出[1,2,3,4,5,6,7,8,9,10]

var add=arr.push(11,12);

console.log(arr);

//输出[1,2,3,4,5,6,7,8,9,10,11]

console.log("一共有"+add+"个元素");

//输出"一共有11个元素"

3.pop()：用于删除数组的最后一个元素，并返回被删除的元素。注意，该方法会改变原数组

var reduce=arr.pop();

console.log(arr);

//输出[1,2,3,4,5,6,7,8,9,10]

console.log("删除了"+reduce+"这个元素");

//输出"删除了12这个元素"

4.join()：以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔

var time=[2025,7,9];

console.log(time.join("-"));

// Output: 2025-7-9

console.log(time.join(""));

// Output: 202579

5.concat()：用于多个数组的合并。它将新数组的成员，添加到原数组成员的后部，然后返回一个新数组，原数组不变

var arr1=[1,2,3];

var arr2=[4,5,6];

var arr3=[7,8,9];

console.log(arr1.concat(arr2,arr3));

// Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

console.log(arr3.concat(arr2,arr1));

// Output: [7, 8, 9, 4, 5, 6, 1, 2, 3]

6.slice()：用于提取目标数组的一部分，返回一个新数组，原数组不变

它的第一个参数为起始位置(从0开始)，第二个参数为终止位置(但该位置的元素本身不包括在内)。如果省略第二个参数，则一直返回到原数组的最后一个成员

var arr1=[10,20,30,40,50];

console.log(arr1.slice(2,4)); // [30,40]

console.log(arr1.splice(2)); // [30,40,50]

二十、函数：是一段可以反复调用的代码块

1.函数声明：function命令声明的代码区块，就是一个函数。function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面

1.1第一种函数常见方式

var a=10;

var b=20;

function add(a,b){

if(typeof a === 'number' && typeof b === 'number'){

console.log(a+b);

}else{

console.log("数据类型有问题")

}

add(a,b);//输出30

add(100,200);//输出300

add("100","200");//输出数据类型有问题

1.2.第二种函数常见方式

var print=function(){

console.log("Hello World");

}

print();//输出Hello World

2.函数参数：函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数

function square(x){

console.log(x*x);

}

square(3);//9

square(4);//16

square(5);//25

3.函数返回值：JavaScript函数提供两个接口实现与外界的交豆，其中参数作为入口，接收外界信息;返回值作为出口，把运算结果反馈给外界。

3.1

function getName(name){

return "Hello " + name;

}

var myname=getName("John");

console.log(myname);//Hello John

3.2return后面不会再执行任何代码

function getName(name){

return "Hello " + name;

console.log("Hello " + name);//不执行

}

var myname=getName("John");

console.log(myname);//Hello John

二十一、案例之数组去重

1.应用场景

1.1在处理大量数据时，为了提高效率和减少冗余，我们经常需要对数据进行去重操作。

1.2在展示数据时，去除重复的元素可以提供更好的用户体验，避免重复显示相同的内容

1.3在进行数据分析时，去重可以确保分析结果的准确性，避免重复计算和误导

2.数组去重函数

var arr=[10,20,30,10,20];

function unique(arr){

if(!Array.isArray(arr)){

console.log("传入的参数有误");

return;

}

var result = [];

for(var i=0;i<arr.length;i++){

if(result.indexOf(arr[i]) == -1){

result.push(arr[i]);

}

return result;

}

console.log(unique(arr));

//[10,20,30];

3.使用set的去重函数

var arr=[10,20,30,10,20];

function unique(arr){

var set=new Set(arr);

return Array.from(set);

}

console.log(unique(arr));

//[10, 20, 30]

二十二、案例之数组排序

1.冒泡排序（Bubble Sort）

// 冒泡排序

function BubbleSort(arr){

var a = arr.slice();

for(var i=0;i<a.length-1;i++){

for(var j=0;j<a.length-1-i;j++){

if(a[j]>a[j+1]){

var temp=a[j];

a[j]=a[j+1];

a[j+1]=temp;

}

return a;

}

2.选择排序（Selection Sort）

// 选择排序

function SelectionSort(arr){

var a = arr.slice();

for(var i=0;i<a.length-1;i++){

var min=i;

for(var j=i+1;j<a.length;j++){

if(a[j]<a[min]) min=j;

}

if(min!==i){

var temp=a[i];

a[i]=a[min];

a[min]=temp;

}

return a;

}

3.插入排序（Insertion Sort）

// 插入排序

function InsertionSort(arr){

var a = arr.slice();

for(var i=1;i<a.length;i++){

var key=a[i],j=i-1;

while(j>=0&&a[j]>key){

a[j+1]=a[j];

j--;

}

a[j+1]=key;

}

return a;

}

4.希尔排序（Shell Sort）

// 希尔排序

function ShellSort(arr){

var a = arr.slice();

var gap=Math.floor(a.length/2);

while(gap>0){

for(var i=gap;i<a.length;i++){

var temp=a[i],j=i;

while(j>=gap&&a[j-gap]>temp){

a[j]=a[j-gap];

j-=gap;

}

a[j]=temp;

}

gap=Math.floor(gap/2);

}

return a;

}

5.归并排序（Merge Sort）

// 归并排序

function MergeSort(arr){

if(arr.length<=1) return arr;

var mid=Math.floor(arr.length/2);

var left=MergeSort(arr.slice(0,mid));

var right=MergeSort(arr.slice(mid));

return merge(left,right);

function merge(l,r){

var res=[];

while(l.length&&r.length){

if(l[0]<r[0]) res.push(l.shift());

else res.push(r.shift());

}

return res.concat(l,r);

}

6.快速排序（Quick Sort）

// 快速排序

function QuickSort(arr){

if(arr.length<=1) return arr;

var pivot=arr[0];

var left=[],right=[];

for(var i=1;i<arr.length;i++){

if(arr[i]<pivot) left.push(arr[i]);

else right.push(arr[i]);

}

return QuickSort(left).concat([pivot],QuickSort(right));

}

7.堆排序（Heap Sort）

// 堆排序

function HeapSort(arr){

var a = arr.slice();

var n=a.length;

function heapify(a,n,i){

var largest=i,l=2*i+1,r=2*i+2;

if(l<n&&a[l]>a[largest]) largest=l;

if(r<n&&a[r]>a[largest]) largest=r;

if(largest!==i){

var temp=a[i];a[i]=a[largest];a[largest]=temp;

heapify(a,n,largest);

}

for(var i=Math.floor(n/2)-1;i>=0;i--) heapify(a,n,i);

for(var i=n-1;i>0;i--){

var temp=a[0];a[0]=a[i];a[i]=temp;

heapify(a,i,0);

}

return a;

}

8.计数排序（Counting Sort）

// 计数排序（假设非负整数）

function CountingSort(arr){

var max=Math.max.apply(null,arr),min=Math.min.apply(null,arr);

var count=new Array(max-min+1).fill(0);

for(var i=0;i<arr.length;i++) count[arr[i]-min]++;

var res=[];

for(var i=0;i<count.length;i++){

while(count[i]--) res.push(i+min);

}

return res;

}

9.桶排序（Bucket Sort）

// 桶排序（假设非负整数）

function BucketSort(arr,bucketSize=5){

if(arr.length===0) return arr;

var min=Math.min.apply(null,arr),max=Math.max.apply(null,arr);

var bucketCount=Math.floor((max-min)/bucketSize)+1;

var buckets=Array.from({length:bucketCount},()=>[]);

for(var i=0;i<arr.length;i++){

buckets[Math.floor((arr[i]-min)/bucketSize)].push(arr[i]);

}

arr=[];

for(var i=0;i<buckets.length;i++){

arr=arr.concat(InsertionSort(buckets[i]));

}

return arr;

}

10.基数排序（Radix Sort）

// 基数排序（假设非负整数）

function RadixSort(arr){

var max=Math.max.apply(null,arr);

var exp=1;

var a=arr.slice();

while(Math.floor(max/exp)>0){

var output=new Array(a.length).fill(0);

var count=new Array(10).fill(0);

for(var i=0;i<a.length;i++) count[Math.floor(a[i]/exp)%10]++;

for(var i=1;i<10;i++) count[i]+=count[i-1];

for(var i=a.length-1;i>=0;i--){

var idx=Math.floor(a[i]/exp)%10;

output[--count[idx]]=a[i];

}

for(var i=0;i<a.length;i++) a[i]=output[i];

exp*=10;

}

return a;

}

11.测试调用

// 测试调用

var arr=[16,7,13,8,2,14,6,4,5,15];

console.log("原始数组："+arr);

console.log("冒泡排序：", BubbleSort(arr));

console.log("选择排序：", SelectionSort(arr));

console.log("插入排序：", InsertionSort(arr));

console.log("希尔排序：", ShellSort(arr));

console.log("归并排序：", MergeSort(arr));

console.log("快速排序：", QuickSort(arr));

console.log("堆排序：", HeapSort(arr));

console.log("计数排序：", CountingSort(arr));

console.log("桶排序：", BucketSort(arr));

console.log("基数排序：", RadixSort(arr));

二十三、DOM：是 JavaScrint 操作网页的接口，全称为"文档对象模型"(Document Obiect Model)。它的作用是将网页转为一个 JavaScript对象，从而可以用脚本进行各种操作(比如对元素增删内容)。浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构(DOM Tree)。所有的节点和最终的树状结构，都有规范的对外接口。

1.节点：DOM 的最小组成单位叫做节点(node)。文档的树形结构(DOM 树)，就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

1.1节点的类型有七种：

1.1.1Document：整个文档树的顶层节点

1.1.2DocumentType：doctype标签

1.1.3Element：网页的各种HTML标签

1.1.4Attribute：网页元素的属性(比如class="right")

1.1.5Text：标签之间或标签包含的文本

1.1.6Comment：注释

1.1.7DocumentFragment：文档的片段

2.DOM之document

2.1document.getElementsByTagName()：搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象(HTMLCollection 实例)，可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集

var divs=document.getElementsByTagName("div");

console.log(divs);

//innerHTML:给元素添加内容

divs[0].innerHTML="Hello";

</script>

2.2document.getElementsByClassName()：返回一个类似数组的对象(HTMLCollection 实例)，包括了所有 class 名字符合指定条件的元素，元素的变化实时反映在返回结果中

2.2.1

var box=document.getElementsByClassName("box1");

console.log(box);

</script>

2.2.2

var box=document.getElementsByClassName("box");

console.log(box);

</script>

2.3document.getElementsByName()：用于选择拥有 name 属性的 HTML 元素(比如 <form><radio>、<img>等)，返回一个类似数组的的对象(NodeList实例)，因为 name 属性相同的元素可能不止一个

var imgs=document.getElementsByName("image");

console.log(imgs);

</script>

2.4document.getElementByld()：返回匹配指定 id 属性的元素节点。如果没有发现匹配的节点，则返回 null。注意：html标签的id属性是不可重复的

var title=document.getElementById("title");

title.innerHTML = "This is a dynamic title";

console.log(title);

</script>

2.5document.querySelector()：接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 nul。注意：在CSS中，匹配class（.），匹配id（#）

2.5.1匹配一个id返回匹配的节点

var tit=document.querySelector("#title");

console.log(tit);

</script>

2.5.2匹配多个class时返回第一个匹配的节点

var divs=document.querySelectorAll('.box');

console.log(divs);

</script>

2.6document.querySelectorAll()：与 querySelector 用法类似，区别是返回一个 NodeList对象，包含所有匹配给定选择器的节点

var divs=document.querySelectorAll('.box');

console.log(divs);

</script>

3.DOM之Element：Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象

3.1Element.id 属性：返回指定元素的 id 属性，该属性可读写

<div id="box">hello box</div>

var div=document.querySelector('div');

console.log(div.id);//box

div.id="myBox";

console.log(div.id);//myBox

</script>

3.2Element.className属性：用来读写当前元素节点的 class 属性。它的值是一个字符串，每个 class 之间用空格分割

<div id="box" class="box box1">hello box</div>

var div=document.querySelector('div');

console.log(div.className);// Output: "box box1"

div.className = 'new-class';

console.log(div.className);// Output: "new-class"

</script>

3.3Element.classList对象有两个方法，add()：增加一个class，remove()：移除一个class

<div id="box" class="box box1">hello box</div>

var div=document.querySelector('div');

console.log(div.className);//box box1

div.classList.add('box2');

console.log(div.className);//box box1 box2

div.classList.remove('box1');

console.log(div.className);//box box2

</script>

3.4Element.innerHTML属性：返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素

<div id="box" class="box box1">hello box</div>

var div=document.querySelector('div');

console.log(div.innerHTML);//输出hello box

div.innerHTML="这是一个新的box";

console.log(div.innerHTML);//输出这是一个新的box

</script>

</body>

3.5Element.innerText：和innerHTML类似，不同的是 innerText 无法识别元素，会直接渲染成字符串

3.5.1Element.innerText的使用

<div id="box" class="box box1">hello box</div>

var div=document.querySelector('div');

console.log(div.innerText);//在控制台输出hello box

div.innerText="这是innerText文本";//在页面输出"这是innerText文本"

console.log(div.innerText);//在控制台输出"这是innerText文本"

</script>

3.5.2innerText和innerHTML的区别：

<div id="box" class="box box1">hello box</div>

var div=document.querySelector('div');

div.innerHTML = '<a href="https://www.baidu.com">这是innerHTML</a>';

//在页面显示文本“这是innerHTML”，点击即可可以跳转到百度

div.innerText='<a href="https://www.baidu.com">这是innerText</a>';

//在页面显示文本“这是innerText”，点击不会跳转

</script>

4.DOM之Attribute

4.1Element.getAttribute 方法：返回当前元素节点的指定属性。如果指定属性不存在，则返回 nul

<div id="box" name="box">hello box</div>

var div=document.getElementById("box");

console.log(div.getAttribute("name"));// Outputs: box

console.log(div.getAttribute("class"));// Outputs: null

</script>

4.2Element.setAttribute方法：用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性

<div id="box" align="left">hello box</div>

var div=document.getElementById("box");

div.setAttribute("align", "center");//页面文本从左边移到了中间

div.setAttribute("style", "color: red; font-size: 20px;");//页面文本变成红色，字体大小变大

</script>

4.3Element.hasAttribute 方法：返回一个布尔值，表示当前元素节点是否包含指定属性

<div id="box" align="left">hello box</div>

var div=document.getElementById("box");

console.log(div.hasAttribute("align"));//true

console.log(div.hasAttribute("style"));//false

</script>

4.4removeAttribute方法：用于从当前元素节点移除属性

<div id="box" align="left">hello box</div>

var div=document.getElementById("box");

div.removeAttribute("align");//失去align属性

</script>

5.DOM之Node

5.1textContent 属性：返回当前节点和它的所有后代节点的文本内容

hello box</br>

<a href="https://www.example.com">Click me</a>

</div>

var div=document.getElementById("box");

console.log(div.textContent);

// Output: hello box

// Click me

div.textContent = "New content";

console.log(div.textContent);

// Output: New content

</script>

5.2appendChild 方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点

var div=document.getElementById("box");

//创建节点

var p=document.createElement("p");

//设置文本内容

p.innerText="我是p标签";

//设置id属性

p.setAttribute("id", "p1");

//在控制台打印p节点

console.log(p);

//将p节点添加到div节点中

div.appendChild(p);

//在控制台打印div节点

console.log(div);

</script>

6.DOM之CSS操作

6.1HTML元素的style属性：操作 CSS 样式最简单的方法，就是使用网页元素节点的setAttribute方法直接操作网页元素的style属性

<div id="box">like Jennie</div>

var div=document.getElementById("box");

div.setAttribute("style","background-color:red;width:200px;height:200px;border:1px solid black;");

</script>

6.2元素节点的style属性：

<div id="box">like Jennie</div>

var divstyle=document.getElementById("box").style;

divstyle.color="red";

divstyle.backgroundColor="blue";

divstyle.fontSize="20px";

divstyle.textAlign="center";

</script>

6.3cssText属性：

<div id="box">like Jennie</div>

var div=document.getElementById("box");

div.style="color:green;"+

"background-color:yellow;"+

"font-size:20px;"+

"border:2px solid black;"+

"padding:10px;"+

"text-align:center;";

</script>

二十四、事件

1.事件处理程序：为页面添加事件

1.1HTML事件处理：优点直观，缺点html与js未分离，有安全性问题

<button id="'btn" οnclick="clickHandler()">Click Me</button>

</div>

var div=document.getElementById("box");

function clickHandler(){

var p=document.createElement("p");

p.innerHTML="Hello World!";

p.setAttribute("style", "color: red; font-size: 20px;");

div.appendChild(p);

}

</script>

1.2DOM0级事件处理：优点html与js分离，安全性有保障，缺点只能发生一个事件，添加新事件会覆盖旧事件

<button id="btn">Click Me</button>

</div>

var box = document.getElementById("box");

var btn=document.getElementById("btn");

btn.onclick = function() {

var p=document.createElement("p");

p.innerHTML="Hello World!";

p.setAttribute("style","color:blue; font-size:20px; text-align:center;");

box.appendChild(p);

};

</script>

1.3DOM2级事件处理：优点html与js分离，安全性有保障，并且可以同时发生多个事件

<button id="btn">Click Me</button>

</div>

var div = document.getElementById('box');

var btn = document.getElementById('btn');

btn.addEventListener("click",click1);

btn.addEventListener("click",click2);

function click1(){

var p=document.createElement("p");

p.innerHTML="Hello World!";

p.setAttribute("style","color:blue;font-size:20px;");

div.appendChild(p);

}

function click2(){

alert("clicked click2");

}

</script>

2.事件类型：常见事件类型鼠标事件、键盘事件、表单事件、Touch事件等

2.1鼠标事件

2.1.1click：按下鼠标时触发

<button id="btn">Click Me</button>

var btn = document.getElementById('btn');

btn.onclick = function() {

alert('鼠标点击');

};

</script>

2.1.2mousedown:按下鼠标键时触发

<button id="btn">Click Me</button>

var btn = document.getElementById('btn');

btn.onmousedown = function() {

alert('鼠标按下');

};

</script>

2.1.3mouseup:释放按下的鼠标键时触发

<button id="btn">Click Me</button>

var btn = document.getElementById('btn');

btn.onmouseup = function() {

alert('鼠标抬起');

};

</script>

2.1.4mousemove:当鼠标在节点内部移动时触发。当鼠标持续移动时，该事件会连触发

var div = document.getElementById('msg');

div.style="background-color:yellow;color:red; font-size: 20px; border: 1px solid black; width: 200px; height: 100px;";

div.onmousemove = function() {

console.log('鼠标移动');

}

</script>

2.1.5mouseover:鼠标进入一个节点时触发

var div = document.getElementById('msg');

div.style="background-color:yellow;color:red; font-size: 20px; border: 1px solid black; width: 200px; height: 100px;";

div.οnmοuseοver=function(){

alert("鼠标移入");

}

</script>

2.1.6mouseout:鼠标离开一个节点时触发

var div = document.getElementById('msg');

div.style="background-color:yellow;color:red; font-size: 20px; border: 1px solid black; width: 200px; height: 100px;";

div.οnmοuseοut=function(){

alert("鼠标移出");

}

</script>

2.2键盘事件：由用户打击键盘触发，主要有keydown、keypress、keyup三个事件，要记住回车的keycode是13

2.2.1keydown：按下键盘时触发

var input = document.getElementById("input");

input.οnkeydοwn=function(e){

console.log('keydown',e);

if(e.keyCode==13){

console.log("回车");

}

</script>

2.2.2keypress：按下有值的键时触发，即按下Ctrl、Alt、Shift、Meta这样无值的键，这个事件不会触发。对于有值的键，按下时先触发keydown事件，再触发这个事件

var input = document.getElementById("input");

input.οnkeypress=function(e){

console.log("keypress", e.keyCode);

}

</script>

2.2.3keyup：松开键盘时触发该事件

var input = document.getElementById("input");

input.οnkeyup=function(e){

console.log("keyup", e.keyCode);

}

</script>

2.3表单事件：是在使用表单元素及输入框元素时可以监听的一些列事件

2.3.1input事件

var input = document.getElementById("input");

input.οninput=function(e) {

console.log("input",e.target.value);

};

</script>

2.3.2select事件

//鼠标选中输入框内的文本标变成蓝色时触发

var input = document.getElementById("input");

input.οnselect=function(e) {

console.log("select", e.target.value);

};

</script>

2.3.3change事件

//在文本框内输入文本回车时触发

//下一次触发前要改变文本内容

var input = document.getElementById("input");

input.οnchange=function(e) {

console.log("change", e.target.value);

};

</script>

2.4Touch事件：触摸引发的事件，有以下几种。可以通过TouchEvent.type属性，查看到底发生的是哪一种事件

2.4.1touchstart:用户开始触摸时触发，它的target属性返回发生触摸的元素节点

//只能通过DOM2级事件绑定方式，在移动端触摸

var box=document.getElementById("box");

box.addEventListener("touchstart",function(e) {

console.log("touchstart");

});

</script>

2.4.2touchend:用户不再接触触摸屏时触发

var box=document.getElementById("box");

box.addEventListener("touchend",function(e) {

console.log("touchend");

});

</script>

2.4.3touchmove:用户移动触摸点时触发

//按下滑动时触发

var box=document.getElementById("box");

box.addEventListener("touchmove",function(e) {

console.log("touchmove");

});

</script>

3.事件代理（事件委托）：由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理(delegation)。例如：

<button id="btn">Click me</button>

</div>

</ul>

var box=document.getElementById("box");

var btn=document.getElementById("btn");

var list=document.getElementById("list");

box.onclick = function() {

console.log("box clicked");

};

btn.onclick = function() {

console.log("button clicked");

};

//事件代理/事件委托：阻止事件冒泡

list.οnclick=function(){

if(event.target.tagName === "LI") {

console.log(event.target.innerHTML);

}

JavaScript--后端也有自己的JS要学

一、变量与常量

1.变量

1.1变量的定义

1.2变量重新赋值

1.3变量提升：JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升(hoisting)，

2.常量：使用const定义常量后，常量无法改变(扩展知识,ES6新特性)。常量一旦声明，是不可以更改的。

二、关联JavaScript和HTML，一共有如下三种方式

1.内联脚本：嵌入到HTML文件中，如：

2.外部脚本：引入本地独立JS文件，如：

3.引入网络来源文件，以jquery cdn为例

4.什么是CDN?网络加速资源，加快访问速度

三、数据类型

1.原始类型（基础类型）：数值、字符串、布尔值、undefined和null

1.1 数值

1.2字符串

1.3布尔值

1.4undefined和null：

undefined 和null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是undefined 和null.

undefined 代表的含义是未定义，null代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。

undefined利 nu11都表示“没有值"或"空值”，但它们有一些区别:

1.4.1类型不同:

undefined 是一个类型(undefined 类型)，表示变量未定义。

1.4.2使用场景不同:

1.4.3赋值方式不同:

1.4.4比较不同:

2.合成类型（复合类型）：对象。因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器

2.1对象：分为狭义对象和广义对象

2.2狭义对象：键值对的集合

2.3广义对象：在JS中，一切皆对象

四、类型判断

1.JavaScript 有多方法可以确定一个值到底是什么类型。包括typeof、instanceof、Object.prototype.toString.call、 Array.isArray，而我们现在需要接触到的就是typeof

1.1数值返回number，字符串范围string，布尔值返回boolean，对象返回object

1.2当对unl和undefined这两种类型使用 typeof进行判断时，null 类型化会返回“object”，这是一个历史遗留的问题

如：

五、算术运算符

1.加法运算符

1.1数值相加

1.2非数值相加

1.3与字符串相加

2.加减乘除运算符

3.余数运算符

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

六、赋值运算符：

1.赋值运算符(Assignment Operators)用于给变量赋值

最常见的赋值运算符，当然就是等号(=)

2.赋值运算符还可以与其他运算符结合，形成变体。

2.2+=

2.3-=

2.4*=

2.5/=

2.6%=

七、比较运算符

1.比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。

2.JS一共提供了8个比较运算符

3.“==”和“===”的区别

双等比较值，三等比较值和类型

八、布尔运算符

1.取反运算符 ！

1.1布尔值取反

1.2非布尔值取反

2.且运算符 &&：多个条件都要满足

3.或运算符 ||：满足一个条件即可

九、类型转换

1.自动转换：遇到以下两种情况时，JavaScript 会自动转换数据类型即转换是自动完成的，用户不可见

1.1不同类型的数据互相运算

1.2对非布尔值类型的数据求布尔值

2.强制转换：主要指使用Number、String和Boolean三个函数，手动将各种类型的值，分别转换成数字、字符串或者布尔值。

2.1强制转化-Number()：使用Number函数，可以将任意类型的值转化成数值，如

2.2强制转化-String()：String函数可以将任意类型的值转化成字符串，转换规则如下

2.3强制转化-Boolean()：Boolean函数可以将任意类型的值转为布尔值

它的转换规则相对简单：除了以下五个值的转换结果为false，其他的值全部为true。

十、条件语句之if语句--前方的路要不要走？

1.if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示真，false表示伪。

2.需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中。

3.注意：if后面的表达式之中，不要混淆赋值表达式(=)、严格相等运算符(===)和相等运算符(==)。尤其是赋值表达式不具有比较作用。if代码块后面，还可以跟一个else代码块，表示不满足条件时所要执行的代码。

4.对同一个变量进行多次判断时，多个if...else语句可以连写在一起

5.嵌套if-else语句

十一、条件语句之switch--switch简化你的选择

多个if...else连在一起使用的时候，可以转为使用更方便的switch结构

1.取反运算符！