JS 2

Posted 2020-09-28 Hale.Proh

1、使用JS

         1、运行环境

                   1、独立的JS解释器(NodeJS)

                   2、浏览器内核中嵌入的JS解释器

                            1、浏览器 Console 中直接输入脚本

                            2、将JS嵌入在html页面中执行

                                     1、元素事件中

                                               <ANY onclick="">

                                               console.log("输出的内容");

                                     2、<script></script>元素中

                                               <script>

                                                        document.write("输出在页面的内容");

                                                        注意：该内容是被内容排版引擎解析

                                               </script>

                                     3、外部脚本文件

                                               1、创建  .js 文件

                                               2、引入js文件

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

                                                        window.alert("");

                                                        alert("");

2、变量和常量

         1、变量

                   1、what

                            内存中的一段存储空间

                   2、变量的声明

                            var 变量名;//声明

                            变量名=值;//赋值

                            //声明并赋值

                            var 变量名=值;

                            //一次性声明多个变量并赋值

                            var n1,n2=25,n3,n4;

                   3、变量名规范

                            1、不能是JS关键字和保留关键字

                            2、包含 字母，数字，下划线，"$"

                            3、不能以数字开头

                   4、变量的使用

                            1、声明变量未赋值

                                     值默认为 undefined

                            2、使用未声明过的变量

                                     console.log(userName);

                                     报错

                            3、对变量进行的存取操作

                                     1、存 - SET

                                               = : 赋值符号

                                               变量出现在 = 的左边，一定是赋值

 

                                               var num1 = 12;

                                               var num2 = 21;

                                               num1=num1+num2;

                                               console.log(num1);

                                     2、取 - GET

                                               只要变量不出现在=的左边，都是取值操作

                                               var num1 = 12;

                                               var num2 = num1;

                                               console.log(num1);

         2、运算符

                   算术运算符：+，-，*，/，%

                   1、%

                            作用：取余数

                            场合：

                                     1、判断奇偶性或算倍数

                                     2、获取某数字的最后几位

                   2、+

                            作用：

                                     1、做数字的 加法 操作

                                               如果 + 两边的数据都是数字类型则做 加法操作

                                     2、做字符串的 连接 操作

                                               如果 + 两边的数据有一个是字符串类型的则做的就是 连接操作

         3、常量

                   1、what

                            一旦声明后，在程序运行过程中不能被修改的数据叫做常量

                   2、语法

                            const 常量名=值;

                            注意：通常常量名采用全大写模式

                   3、使用

                            const PI = 3.14;

                            PI = 31.4; // 报错

3、数据类型

         1、what

                   保存在内存中的数据的类型

                   决定了数据在内存中所占的空间大小

         2、分类

                   1、基本数据类型(原始类型)

                            1、number类型

                                     数字类型：

                                               表示 32 位的整数(4字节)

                                               表示 64 位的浮点数(8字节)

                                     整数：

                                               十进制：var n1 = 123;

                                               八进制：var n2 = 0123;

                                               十六进制：var n3 = 0x12FA;

                                     小数：

                                               小数点表示法：var f1 = 123.456;

                                               指数表示：var f2 = 123.4e10;

                            2、string类型

                                     字符串类型：

                                               表示一系列的文本字符数据

                                               由Unicode字符、数字、标点组成

                                               Unicode：

                                                        1、每个字符 都有一个 独立编码

                                                                 "我".charCodeAt() : 返回Unicode码的十进制表现形式

 

                                                                 "我".charCodeAt().toString(2)

                                                                 返回Unicode码的二进制表现形式

 

                                                                 "我".charCodeAt().toString(16)

 

                                                                 返回Unicode码的十六进制表现形式

 

                                                                 通过 Unicode码 打印字符：

                                                                 console.log("\u4e00");

                                                        2、每个字符 都占据 2字节

                                              

                                                转义字符：表示JS中的特殊字符

                                                \n:换行

                                                \r:回车(接收指令而非换行)

                                                \t:制表符

                                                \‘:‘

                                                \":"

                                                \\:\

                            3、boolean类型

                                     布尔类型：表示真或假的一种结果

                                     只有两个值：

                                               1、true：真

                                               2、false：假

                                     实际运算中：

                                               true 当做 1 运算

                                               false 当做 0 运算

                            4、undefined类型

                                     语义：访问的数据不存在

                                     产生undefined的场合

                                     1、声明变量未赋值

                                     2、访问不存在的对象的属性

                   2、引用数据类型

==========================================

1、数据类型的转换

2、运算符和表达式

==========================================

1、数据类型转换

         1、弱类型

                   由数据来决定数据类型

                   var num;//undefined

                   num=12;//number

                   num="你好";//string

                   num=false;//boolean

 

                   强数据类型：由数据类型来决定数据

 

                   1 、typeof() 函数

                            作用：获取指定数据的数据类型

                            语法：

                                     typeof(变量) 或者 typeof 变量;

                            使用：

                                     var result = typeof(变量);

         2、隐式转换

                   不同类型的数据在计算过程中会自动进行转换

                   特点：

                            任何一种数据类型的数据，再与string做“+”运算时，都会转换成 string，再做连接

                   NaN : Not a Number , 不是一个数字

 

                   函数：isNaN(数据)

                   作用：判断数据是否为 非数字类型(只判断数值，与类型无关) ，如果是非数字，返回true，是数字返回false

 

                   问题：将字符串25转换为 数字25，再做加法运算

         3、强制转换(显示转换)

                   由JS提供的一组转换函数来完成数据类型的转换

                   1、toString()

                            转换成字符串，任一数据类型的数据均可转换为string类型

                            语法：数据(变量).toString()

                   2、parseInt(数据)

                            将数据转换为number类型(整数)

                            碰到第一个非整数字符，则停止转换

                            如果无法转换时，转换的结果为NaN

                   3、parseFloat(数据)

                            将数据转换为number类型(小数)

                            碰到第一个非小数点或数字字符，则停止换换

                   4、Number(数据)

                            将一个数据解析为number类型

                            注意：如果数据中包含非法字符，则返回NaN

 

                            Number("25") : 25

                            Number("25.5") : 25.5

                            Number("25.5abc") : NaN

2、运算符和表达式

         1、运算符

                   做数据的运算

         2、表达式

                   由运算符和操作数所组成的式子，称之为表达式

                   var a = 5;//赋值表达式

                   var b = 10;//赋值表达式

                   a+b;//算术表达式

 

                   注意：每一个表达式，都有值

                   console.log(a+b);

 

                   b=a=a+b;

 

                   console.log(a=a+b);

         3、运算符分类

                   1、算术运算符

                            +,-,*,/,%

 

                            ex:

                                     1、

                                               var a="15";

                                               var b="13";

                                               var result=a-b;//2

                            注意：

                                     -，*，/，%

                                     如果两边的操作数不是number类型，会试图通过 Number()先进行转换，如果无法转换成Number类型，结果则为NaN

 

                            ++(自增)，--(自减)

                            ++：在自己值的基础上做加1操作

                            --：在自己值的基础上做减1操作

 

                            var num=5;

                            num++; 作为后缀，先去使用变量的值，然后对其进行自增操作

                            ++num; 作为前缀，先对变量进行自增操作，然后再使用变量的值

 

                            优先级：

                            先*，/，%，再+，-

                            想提升优先级：()

 

                            ex:

                                     1、var result=35+2*18/3+12/6%4

                                         =35+12+2 = 49

                                     2、var result=(35+2)*(18/(3+3))/6%4

                                                  =37*3/6%4

                   2、关系运算符

                            1、运算符

                                     >,<,>=,<=,==(判断等于),!=

 

                                     ===(全等),!==(不全等)

 

                                     === 与 ==的区别:

                                     1、==

                                               只判断数值，不判断类型

                                               "35"==35 结果为 true

                                     2、===

                                               判断 类型以及数值 是否都相等

                                               "35"===35 结果为 false

 

                                     由关系运算符组成的表达式称之为关系表达式，关系表达式的结果都是boolean类型

                            2、特殊注意

                                     1、字符串 和 数字比较大小关系时

                                               先将字符串通过Number()转换成数字再进行比较

                                     2、字符串 和 字符串比较大小关系时

                                               实际上是比较每位字符的Unicode码

                                               张三丰

                                               张无忌

                                     3、NaN参与关系比较时，结果一律为 false

                            3、isNaN 函数

                                     判断一个数据是否为非数字

                                     isNaN()

                   3、逻辑运算符

                            1、作用

                                     多条件之间的判断关系

                            2、逻辑运算符

                                     逻辑非 : !

                                     逻辑与 : &&

                                     逻辑或 : || 

 

                                     逻辑与：

                                               判断两个条件，如果两个条件的值都为true的话，整个表达式的结果为true，如果有一个条件的结果为false，整个表达式的结果就为 false

 

                                               ex:

                                                        如果 笔试成绩 大于60分，并且面试成绩 也大于 60分，可以入职。

                                     逻辑或：

                                               判断两个条件，两个条件中，有一个条件为true，那么整个 逻辑或 的结果就为 true，否则为 false(两个结果同时为false时)

 

                                     逻辑非：

                                               对现有条件结果进行取反

                                               非真即假

                                               非假即真

                                     练习：判断是数字？是英文字符？是汉字?

                                     var num=prompt("input....");

                                     思路：判断num的所在范围

                                     1、num在 字符 0 到 字符9之间，说明是数字

                                     2、num在字符a到字符z或者在字符A到字符Z之间，说明是英文

                                     3、num在字符 \u4e00 到 \u9fa5 范围内,说明是 汉字

                            3、短路逻辑

                                     1、&&(短路与)

                                               如果第一个表达式的结果为false，那么第二个表达式就不用再判断，整个表达式的结果为 false

                                               如果第一个表达式的结果为true的话，则继续判断第二个表达式的结果，并且以第二个表达式的执行结果作为整个逻辑表达式的结果。

                                     2、||(短路或)

                                               如果第一个表达式的结果为true的话，那么就不在继续执行第二个表达式，并且将 true作为整个逻辑表达式的结果。

                                               如果第一个表达式的结果为false的话，则继续执行第二个表达式，并且将第二个表达式的计算结果作为逻辑表达式的结果

                   4、位运算

                            1、特点

                                     1、做数字运算

                                     2、将数字转换为二进制，再进行运算

                            2、运算符

                                     1、&

                                               按位 与,将两边的操作数转换成二进制，每位的数字，只有对应都为1的时候，该位的结果才为1，否则该位的结果就是0

                                               ex:

                                                        5 & 3 ?

 

                                                        5:101

                                                        3:011

                                                        -----------

                                                        r:001

                                               作用：判断一个数字的奇偶性，判断的数字与1做按位与

 

                                                        5 & 1?

                                                        5 :101

                                                        1 :001

                                                        -----------

                                                                            1

                                     2、|

                                               按位或，两边的操作数转换成二进制，比较每位上的数字，两个数中有1个是1的话，该位的结果为1，否则为0

                                               场合：向下求整

                                               求：5 | 3

                                                        5:101

                                                        3:011

                                                        =========

                                                                 111

                                                        6.5 | 0

                                                        ==>

                                                        6 | 0

                                                        6:110

                                                        0:000

                                     3、<<

                                               按位左移，将2进制数向左移动几位，后面以0补齐

                                               ex:

                                                        2<<1 : 4

                                                        2<<2 : 8

                                                        2<<3 : 16

 

                                                        0000 0000 0000 0000

                                                        0000 0000 0001 0000

                                     4、>>

                                               按位右移，将2进制数向右移动几位，前面补0

                                               8>>1 : 4

                                                        0000 0000 0000 0000

                                                        0000 0000 0000 0100

                                               8>>2 : 2

                                               8>>3 : 1

                                               8>>4 : 0

 

    5、练习

                            计算克莱托指数(身高体重比)

                            公式如下：体重(kg) / (身高(m)*身高(m))

                            20-25 : 正常

                            25以上：偏胖

                            20以下：偏瘦

 

                            ex:

                                     体重：85

                                     身高：1.81

 

                                     指数=85/(1.81*1.81);//25.945483