初识javaScript（二）

最新推荐文章于 2021-11-04 09:14:03 发布

打酱油的女孩子

最新推荐文章于 2021-11-04 09:14:03 发布

阅读量107

点赞数

文章标签： javascript html html5 css3

本文链接：https://blog.csdn.net/weixin_38341556/article/details/107582016

版权

1 JS的严格语法格式

如果希望js代码的书写规范更加严格，js规定了一种严格的语法格式，在该模式下，代码的书写格式要求更加接近严格的语言，比如Java、C等。
启用严格语法格式，在script 标签内，添加use strict

<body>
<script>
    "use strict"
    var num;
    num = 10;
    var value = 100;
    //不需要使用关键字 var 也可以定义变量。 不建议使用。
    val = 100;
    console.log (val);//报错

2 JS中支持的数据类型

程序是用来处理数据的，那么js程序中可以对哪些类型的数据进行处理呢？可以分为两大类：

基本数据类型（简单数据类型）

（1） Number：数值型整数、小数、NaN、Infinity、-Infinity
（2） String：字符串类型。单引号或者双引号内的字符序列。
（3） Boolean：布尔类型。真和假，对和错。 true false。
（4） Null：空，只有一个值 null
（5） Undefined：未定义只有一个值 undefined

复合数据类型（复杂数据类型、引用数据类型）

（1）对象：Object
（2）数组：特殊的对象 Array
（3）方法：Function

3 基本数据类型

3.1 Number类型

Number基本数据类型：支持四种进制的表示形式。包含的内容:

（1）正数、负数、0、NaN、Infinity、-Infinity
（2）NaN ： not a Number （ js的一个关键字。）
关于Infinity与-Infinity
Infinity 代表正无穷。js的关键字。一个正数除以了0.结果就是Infinity。(其他语言中不允许除以0.) -Infinity 代表负无穷。一个负数除以了0.结果就是-Infinity

  console.log (1/0);//Infinity
   console.log (-1/0)//-Infinity

关于NaN
（1）进行数值计算时，如果没有办法得到一个数值型的结果，那么就会得到一个NaN的结果
（2）NaN和其他数进行运算，结果还是NaN
（3）NaN和自身不相等
（4）可以通过方法 isNaN(数据) 对数据进行判断是否是NaN.如果数据是NaN，那么方法返回 true，否则返回false。

<script>
    var num = 10;
    var num1 = -10;
    var num2 = 0;
    var num3 = "abc" * 4;//NaN
    console.log (num3);
    console.log (num3 + 6);//NaN
    console.log (NaN == NaN);
    console.log (isNaN(num3));//true
    console.log (isNaN(3));//false

3.1.1 如何得到一个随机的正整数

需求：得到一个区间是[10,20]之间的随机数。

<body>
<script>
    //前闭后开
    const MIN = 10;
    const MAX = 12;
    //返回一个随机的小数[0.0~1.0)
    console.log (Math.random())
    var num = Math.random() * (MAX-MIN);//[0.0~11)
    var num = Math.random() * (MAX-MIN) + MIN;//[10.0~21)
    //对上述的结果直接砍掉小数部分结果是 [10,20]
    var number = parseInt(Math.random() * (MAX-MIN) + MIN);
    console.log (number);
</script>
</body>

<body>
<!--
    练习：随机得到区间[1,10]之间的随机数。得到2个随机数。
    定义两个变量来保存两个随机数的值，并打印到控制台。
    然后交换两个变量的值。然后再次打印交换的结果。

    代码格式化：ctrl+alt+L
-->
<script>
    //定义区间
    const MIN = 1, MAX = 11;
    //得到两个随机数
    var num1 = parseInt (Math.random () * (MAX - MIN) + MIN);
    var num2 = parseInt (Math.random () * (MAX - MIN) + MIN);
    //打印两个变量的值
    console.log (`num1 = ${num1};num2 = ${num2}`);
    //交换两个变量的值
    //备份
    var temp = num1;
    num1 = num2;
    num2 = num1;
    //打印两个变量的值
    console.log (`num1 = ${num1};num2 = ${num2}`);
</script>
</body>

3.2 String类型

String：字符串类型是若干个被一对单引号或者一对双引号包裹的字符序列。
注意：
（1）不能使用一个单引号和一个双引号
（2）可以在双引号的字符串中使用单引号，但是内部不能使用双引号。
（3）可以在单引号的字符串内使用双引号，内部不能使用单引号。
（4）单引号符号，双引号符号，本质上都是字符，但是在String类型中充当了一个特殊的角色。具有特殊的含义。作为字符序列的开始和结束的标识使用。

     <script>
    var str = "abc";
    var str1 = "abcd";
    var str2 = "";

    var str3 = '123';
    var str4 = "你好";
    //如下的代码是错误的
    // var str5 = 'hello";
    // var str = "ab"c";
    // var str = 'df'df';
    //如下的代码是可以的
    var str = "a'ab'abab";
    str = 'dsfd"fdf""""""sf';
    </script>

了解一些字符集
字符集的本质：底层是整数表示的。每个字符都对应了唯一的一个整数。
ASCII：美国使用的字符集。单字节字符集。该字符集中一共收录了128个字符。只使用了一个字节的7bits部分来表示所有的字符。其他的国家的字符集都兼容了该字符集。
字符0: 48
字符A：65
字符a：97
西欧字符集：iso8859-1
中国字符集：国标码：gb2312 早期字符集。 gbk 兼容了gb2312。
世界通用字符集：utf-8: 世界上所有的符号。
控制字符：在ASCII字符集中，有些特殊的字符。这些特殊的字符，没有一个符号与之对应，这些符号属于控制字符。用于控制显示其他内容的符号。在计算机科学中，规定了将上面的符号，如果想在程序中使用，必须使用一种特殊的形式来表达他们，使用\ 开始后面跟一个字符来表示。即转义字符：
回车符：\r
换行符：\n
水平制表符：\t
反斜杠：\
单引号：’
双引号："
//了解
退格符：\b
垂直制表符：\v
换页符：\f


<script>
    // alert("abc\nabc");
    // alert("abc\rabc");
    // alert("abc\tabc");

    //占用【1-4】个半角字符。
    console.log ("123\t456789");
    console.log ("\t123456789");
    console.log ("1234\t56789");
    console.log ("\\");
    console.log ('\'');
    console.log ("\"");
</script>

3.3 Boolean类型

Boolean 类型用来代表现实世界中的真和假，或者是对或错。
该类型只有两个值。真：true。假：false。
这两个值都是js的关键字。也是字面常量。
true 该值对应了二进制的1。
false对应了二进制的0.
当true和false在需要转换为数值型的环境下使用的时候：
true 可以转换为1使用。
false 转换为0 使用。

<body>
<script>
   var isGirlInClass = true;
   var isGirlBeauty = true;
   var isBoyHandsome = true;
   console.log (1+true);//2
   console.log (1-false);//1
   console.log (true == 1);//true
   console.log (false == 0);//true
</script>
</body>

3.4 Null类型

Null类型：只有一个值。null。
null 是js的关键字。是字面常量。
null的类型：object
代表了对象为空。
作用：当不想再使用一个对象的时候，要丢弃该对象,可以将指向该对象的变量赋值为null即可。
特点：
（1）当null需要转换为整数的时候，转换为0使用。
（2）null 和 0 不相等。
（3）null 和 undefined 相等。

<body>
<script>
    console.log (typeof null);//object
    //obj 变量要表示一个对象，但是该对象还不存在。obj指向了空。
    //空指向。
    var obj = {};
    console.log (typeof obj);//object
    obj = null;//丢弃对象。

    console.log (null + 1);//1
    console.log (null == 0);//false
    console.log (null == undefined);//true
</script>
</body>

3.5 Undefined类型

Undefined类型：
1：该类型只有一个值。undefined。js 的关键字。
2：如果一个变量的值为 undefined。【代表了变量只声明未定义】。
3: undefined 和任意的数值做运算，结果为NaN
4：undefined 和 null 相等。

<body>
<script>
    console.log (typeof undefined);//undefined
    var value = 10;
    console.log (typeof value);//number
    console.log (typeof num);//undefined
    var num;

    console.log (undefined + 1);
    console.log (undefined == null);
</script>
</body>

4 引用数据类型

引用数据类型：
数组：array
对象：object
函数：function
typeof 数组：object 一种特殊的对象。

<body>
<script>
   //定义数组
   var arr = [1,2,4,6,7,true,undefined,null,false,{},function () {}];
   console.log (typeof arr);//object
   //定义对象
   var obj = {
       name:"小花",
       age:17,
       books:["围城","钢铁是怎样炼成的","鲁宾逊漂流记"],
       study:function () {
           console.log ("Learning In Trust");
       }
   };
   console.log (typeof obj);//object
   //定义方法
   /**
    * 用来得到任意区间的随机数的。
    * @param min 区间最小值，包含
    * @param max 区间最大值，不包含
    */
   function randomNumber(min,max) {
       return parseInt(Math.random()*(max-min)+min);
   }
 console.log (typeof randomNumber);//function
   //调用方法
   var number = randomNumber(10,20);
   console.log (number);
</script>
</body>

5 关键字操作符 typeof

typeof：js的一个关键字。
作用：用来判断某个变量保存的数据的类型。
语法：typeof 变量名
返回：返回该变量当前保存的数据的类型的【字符串】表示形式。

<body>
<script>
    console.log (typeof 1);//number
    console.log (typeof  NaN);//number
    console.log (typeof Infinity);//number

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

    var value = "";
    console.log (typeof value);//string
</script>
</body>

6 js支持的运算符

在js中可以使用那些运算符对数据进行运算。
1：赋值运算符
2：算数运算符
1-1：复合赋值运算符
3：关系运算符
4：逻辑运算符
5：位运算符
6：条件运算符
涉及到的概念
1：运算符
2：操作数 1+1：参与运算符运算的数据。
+ ：运算符
1 、1 操作数
3：表达式：1+1 就是一个表达式：
运算符和操作数的整体就称为表达式。
常量表达式：所有的操作数都是常量。
变量表达式：有操作数是变量。
4：返回值：
表达式的返回值：表达式计算得到的结果。
所有的计算，都是表达式或者是操作数的返回值参与的。

<body>
<script>
    var num = 10;
    num = num + 10 + 20;
</script>
</body>

6.1 赋值运算符

赋值运算符：
作用：将右边的操作数或者是表达式的返回值赋值给左边的变量或者是只读变量。
语法：变量 = 表达式;
左边的变量：可以是变量，或者是 const修饰的变量。
右边的表达式：可以是返回任意类型结果的表达式。
注意：= 运算符在所有的运算符中的优先级最低，赋值运算符最后做。

<body>
<script>
    var num  = 10 * 100;
</script>
</body>

6.2 算数运算符

概念：
一元运算符：只有一个操作数的运算符。比如：+1 正数1 也称为单目运算符
二元运算符：需要两个操作数的运算符。比如：1+1 也称为双目运算符。
三元运算符：需要三个操作数的运算符。比如：条件运算符。 ? : 也称为三目运算符。
算数运算符：
+：加
-：减
*：乘
/: 除
%: 取余
++：自增
++ : 自增运算符：对变量进行自增1的操作。
语法：
1：前缀模式： ++ num;
2：后缀模式： num ++;

后缀模式：后缀模式的表达式的返回值是自增之前的值。先返回后自增。
前缀模式：先自增，后返回。
–：自减
作用：对变量自减1.
语法同上。
模式同上。

<body>
<script>
   //+ ：既是一元运算符，也是二元运算符。
   console.log (+5);
   console.log (1 + 1);

   //- : 既是一元运算符，也是二元运算符。
   console.log (-5);
   console.log (7 - 2);

   //* :二元运算符。运算符的规则和数学中一样的。
   console.log (3 * 3);
   console.log (-3 * 3);
   console.log (-3 * -3);

   // / : 二元运算符  运算符的规则和数学中一样的。
   //如果除不尽，就会有小数。
   console.log (-5 / 2);//-2.5
   console.log (3 / 2);//1.5
   console.log (-5 / -3);//1.6666666666666667

   // % 二元运算符。 a%b : a除以b所得的余数。结果的符号位取决于左边的值
   console.log (5 % 3);//2
   console.log (-5 % 7);//-5
   console.log (-7 % -5);//-2

   //除和取余的应用：
   //随机的得到一个三位数。把每一个位上的数值打印出来。
   const MIN = 100;
   const MAX = 1000;
   var ran = parseInt (Math.random () * (MAX - MIN) + MIN);
   console.log (ran);
   //123
   var unit = ran % 10;
   var decade = parseInt (ran / 10) % 10;
   var hundred = parseInt (ran / 100);
   console.log (`unit=${unit};decade=${decade};hundred=${hundred}`);

   // ++ : 自增运算符：对变量进行自增1的操作。
   var num = 0;
   num = num++;
   //1: num ++ 表达式的返回值是 0，然后num做自增1.num变成了1.最后将返回值0 赋值给num。
   console.log (num);
   num = 0;
   console.log (num++ + num++ + num++);//3
   console.log (num);//3

   num = 0;
   num = ++num;
   console.log (num);
   num = 0;
   console.log (++num + num++ + ++num - ++num);//1
   console.log (num);//4

   num = 0;
   console.log (num++ - ++num + num--);//0
   console.log (num);//1
</script>
</body>

6.3 复合赋值运算符

复合赋值运算符：
+=
-=
*=
/=
%=

<body>
<script>
   var num = 0;

   num = num + 5;
   num += 5;

   num = num - 5;
   num -= 5;

   num = num * 5;
   num *= 5;

   num = num / 5;
   num /= 5;

   num = num % 5;
   num %= 5;

   console.log (num);

   //对某个变量实现自增一
   num++;
   ++num;
   num = num + 1;
   num += 1;

</script>
</body>

6.4 关系运算符

关系运算符： > < >= <= == !=
1：一共有6个关系运算符。都是双目运算符。需要两个操作数。
2：作用：用来比较两个操作数的关系是否成立的？
3：返回：如果关系成立，关系表达式，返回true。不成立，返回false。
关系表达式返回结果为布尔值。

<body>
<script>
  var num = 0;
  console.log (num++ > 0);//false
  console.log (num > 0);//true

  console.log (num < ++num);//true
  console.log (num >= num++);//true
  console.log (num == num++);//true
  console.log (num != --num);//true
</script>
</body>

6.5 逻辑运算符

逻辑运算符：参与逻辑运算的操作数必须都是布尔值。
如果操作数不是布尔值。那么会进行类型的转换，转换为布尔值。
逻辑表达式的返回值都是布尔值。
&&：逻辑与：二元运算符。
||: 逻辑或：二元运算符。
!：逻辑非，逻辑取反。：单目运算符。
逻辑与 && 逻辑或，都具有短路的特点。
逻辑与的短路：当有一个操作数的结果为false，那么其他的操作数将直接被短路掉，不再执行。
逻辑或的短路：当有一个操作数的结果为true，那么其他的操作数将被短路，不再执行。

<body>
<script>
    //&& 逻辑与。规则：有假则假，全真则真。
    //表达的是并且的意思。
    console.log (false && false);//false
    console.log (true && false);//false
    console.log (false && true);//false
    console.log (true && true);//true
    var num = 0;
    console.log ((num < ++num) && (num == num ++));//true

    console.log ("---------------")

    //|| 逻辑或。规则：有真则真，全假则假。
    //表达的是或者的意思。
    console.log (false || false);//false
    console.log (true || false);//true
    console.log (false || true);//true
    console.log (true || true);//true

    //! : 逻辑非。 有真则假，有假则真。
    console.log (!true);//false
    console.log (!false);//true
    console.log ("---------------")
    //随机的得到一个布尔值。保存到变量中。
    //再将该该值的反值赋值给它。
    const MIN = 0;
    const MAX = 2;
    var ran = parseInt(Math.random()*(MAX-MIN)+MIN);
    var bool = false;
    if(ran == 1){
        bool = true;
    }
    console.log (bool);
    bool = !bool;
    console.log (bool);
    console.log (!(ran < ran ++));//true

    //短路的例子
    var num = 0;
    console.log (num <= 0 && num ++ == 0);//false
    console.log (num);

    console.log (num < 1 || num ++ == 0);
    console.log (num);

</script>
</body>

6.6 位运算符

位运算符：
1：运算符只能对整数做操作。如果不是整数，就会对操作数的小数部分做截断。
2：位运算符直接对底层的二进制位做操作。所以效率比较高。所以如果能用位运算符实现的功能就使用位运算实现。
位运算符：& | ^ ~ >> << >>>

<body>
<script>
    //& 按位与：二元运算符。对应的二进制位进行与操作。规则：有0则0，全1则1.
    console.log (3 & 7);//3
    console.log (5 & 8);//0

    //|  按位或：二元运算符。对应的二进制位进行或操作。规则：有1则0，全0则0.
    console.log (3 | 7);//7
    console.log (5 | 8);//13
    console.log (1 | 2);//3
    console.log (1 | 2 | 4);//7
    console.log (1 | 2 | 4 | 8);//15
    console.log (8 | 16);//24

    //^ :按位异或。二元运算符。对应的二进制位进行异或操作。规则：相异为1，相同为0
    //特点：一个数，先后异或同一个数两次，结果是它自身。
    console.log (5 ^ 2);//7
    console.log (7 ^ 7);//0
    console.log (7 ^ 7 ^ 7);//7
    //应用-1：不用定义第三方变量，实现交换两个变量的值。
    var num1 = 97;
    var num2 = 20;
    num1 = num1 ^ num2;
    //将num1初始值赋值给了num2.但是num1 的值是变化了的。
    num2 = num1 ^ num2;
    //将num2原始的值赋值给了num1。
    num1 = num1 ^ num2;
    console.log (num1);//
    console.log (num2);//

    //明文
    var heart = 5211314;
    //秘钥
    var key = 7777777;
    //加密
    var value = heart ^ key;
    console.log (value);
    //解密：
    console.log (value ^ key);

    //~ 按位取反：单目运算符。所有的二进制位全部取反，1变0,0变1.
    console.log (~~5.999999999999);
    //取整的应用。
    console.log (~~(Math.random()*10));

    // >> 右移动运算符。双目运算符。
    //右移动n位，低n位被挤走，高n位补符号位。负数补1，正数补0
    //作用：右移动n位。等价于除以2的n次幂取整。
    console.log (3>>1);//1
    console.log (8>>2);//2
    console.log (24>>3);//3

    //左移 << 双目运算符。 规则：高位被挤走，低位补0.
    //作用：左移动n位。等价于乘以2的n次幂取整。
    console.log (3<<4);//48

</script>
</body>

6.7 条件运算符

条件运算符是js中的惟一的一个三目运算符。需要三个操作数。
语法：操作数1 ? 操作数2 ：操作数3;
操作数1：必须是一个返回值为布尔值的表达式。
操作数2：任意的js的合法的表达式即可。有返回值就可以。
操作数3和2一样的。
执行过程：
1：先计算操作数1的返回值。
2：如果返回是true。那么执行操作数2.并将操作数2的返回值作为整个条件表达式的返回值。
3：如果操作数1返回值为false，那么就跳过操作数2，执行操作数3，并将3的表达式的返回值作为整个条件表达式的返回值。

<body>
<script>
   //随机得到两个整数，区间[1,10],并打印。然后使用三目运算符。求得两个随机数的最大值。
   //并打印最大值。
   const MIN = 1;
   const MAX = 11;
   var ran1 = ~~(Math.random () * (MAX - MIN) + MIN);
   var ran2 = ~~(Math.random () * (MAX - MIN) + MIN);
   var ran3 = ~~(Math.random () * (MAX - MIN) + MIN);
   console.log (`ran1=${ran1}\t\tran2=${ran2}\t\tran3=${ran3}`);
   //定义变量保存最大值。
   var max = ran1 > ran2 ? ran1 : ran2;
   max = max > ran3 ? max : ran3;
   console.log ("max = " + max);
   //使用三目嵌套求最小值。
   var min = ran1 < ran2 ? (ran1 < ran3 ? ran1 : ran3) : (ran2 < ran3 ? ran2 : ran3);
   console.log ("min = " + min);

   //判断ran1是奇数还是偶数。打印出结果。
   var result = ran1 % 2 == 0 ? "偶数":"奇数";
   console.log (`ran1 = ${ran1}\t\t是${result}`);
</script>
</body>