Day15_学点儿JavaScript_数据类型、关系运算符、String、Boolean、Array、Math、eval

1 JS简介

1.1 JS

1、直接嵌入HTML页面。
2、由浏览器解释执行代码，不进行预编译。

1.2 解释型语言和编译型语言

JS：解释型语言、弱类型语言
Java：编译型语言、强类型语言
变量: var num = 100;
variable 用var来定义一个变量。
int num = 100;
变量名区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号。
起有意义的名字，最重要一点就是“见名知意”。
JS不区分单引号和双引号。一般都用双引号（约定俗成）

<!--
  ~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
  ~ Copyright @TangXJ
  ~ Created by TangXJ
  ~ Created&Used date: 2024/4/1 下午1:58 ~ 2024/4/1 下午8:37
  ~ Modified date: 2024/4/1 下午8:37
  -->
<!--JS数据类型-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style></style>
    <script>
        var num1 = 3;
        var num2 = 5;
        var result = num1 + num2;
        console.log(result);
        var str = '10';//java Integer.parseInt
        console.log(num1+str);//310
        //Java是纯面向对象，而C++、JS不是纯面向对象语言
        var result2 = num1 + parseInt(str);
        //parseInt就是js定义的全局函数
        console.log(result2);
        alert(result2);
    </script>
</head>
<body>

</body>
</html>

2 JS数据类型

在这里插入图片描述

null、undefined区别

var x;
var y;
没有初始化的变量自动取值为undefined。
如果这个变量值为null表示这个变量已经赋值了，这个值正好是null。
声明变量统一使用var声明，声明的时候变量是没有类型。
但是变量赋值之后就有类型，这个变量值的类型就是这个变量的类型。

<!--
  ~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
  ~ Copyright @TangXJ
  ~ Created by TangXJ
  ~ Created&Used date: 2024/4/1 下午2:14 ~ 2024/4/1 下午8:38
  ~ Modified date: 2024/4/1 下午8:38
  -->
<!--基本数据类型 关系运算符-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //int num;
        //js是弱类型语言 赋给它什么类型的值，就是什么数据类型
        var v;
        console.log(v);//undefined
        console.log(typeof(v));//undefined
        v = 3.14;
        console.log(v);//3.14
        console.log(typeof(v));//number
        v = 'hello js';
        console.log(v);//hello js
        console.log(typeof(v));//string
        v = true;
        console.log(v);//true
        console.log(typeof(v));//boolean
        v = null;
        console.log(v);//null
        console.log(typeof(v));//Object
    </script>
</head>
<body>

</body>
</html>

3 关系运算符

全等：===
不全等：!==
判断值是不是相等，而且判断类型是不是相等。

<script type="text/javascript">
    var m = '3';
    var n = 3;
    if (m == n) {//值相等就可以
       console.log('m==n')
    }
    if (m === n) {//值相等，类型也要相等
       console.log('m===n')
    }
</script>

4 String

创建String对象有两种方式
1、var str1 = 'hello js!';
2、var str2 = new String('hello js!');
String属性：length
str1.length; // 9

String常用的方法：
1、大小写转换

str.toLowerCase();
str.toUpperCase();
var str = 'Hello jS!';
console.log(str.toLowerCase());//hello js!
console.log(str.toUpperCase());//HELLO JS！

2、获取指定字符：

str.charAt(index)      返回指定位置的字符
index：字符位置
console.log(str.charAt(6));//j

3、查询指定字符串出现索引

str.indexOf(findstr, [index]);
str.indexOf(findstr);
str.indexOf(findstr,index);
str.indexOf(findstr,[index])
str.lastIndexOf(findstr, [index]);

使用说明：
findstr:查找的字符串
index:开始查找的位置索引，可以省略
返回findstr在x中出现的首字符位置索引，如果没有找到则返回-1
lastIndexOf:从后面找起
4、split() 方法用于把一个字符串分割成字符串数组。
x.split(separator,howmany)
separator : 字符串或正则表达式，从该参数指定的地方分割 stringObject
howmany:指定返回数组的最大长度，可以省略
返回分割后的字符串数组

5 Boolean

Java中条件表达式必须返回布尔类型 if() while()
2<3 && ||
JS中表达式可以是任意表达式。
在这里插入图片描述
1不是0，就是非空值，表示true。
1不是0，就是一个非空值，表示true。
NaN=Not a number（非数）
在JS里面一切表示空的值都是false，非空的值都是true。

<script type="text/javascript">
        console.log('-----------------')
        if (true) {
            console.log('true');
        }
        if (0) {//false
            console.log('0');
        }
        if (!0) {//true
            console.log('!0');
        }
        if ('') {//false
            console.log('空字符串');
        }
        if ('abc') {//true
            console.log('abc');
        }
        if (12) {//true
            console.log('12');
        }
        if (null) {//false
            console.log('null');
        }
        if (!null) {//true
            console.log('!null');
        }
    </script>

6 Array

创建数组对象

int[] array; //java
String[] array;//java

var array1 = new Array();//创建一个空的数组
var array2 = new Array(7);//创建长度是7的数组
var array3 = new Array(100, 'a', true);
var array4 = [100, 200, 300];

获取数组元素的个数：length属性

<script>
        var array1 = new Array(7);
        console.log(array1.length);//7
        var array2 = new Array(100, 'abc', true);
        console.log(array2.length);//3

        var array3 = new Array();
        console.log(array3.length);//0
        array3[0] = '123';
        console.log(array3);//['123']
        console.log(array3.length);//1
        array3[1] = true;
        console.log(array3);//['123', true]
        console.log(array3.length);//2

        //对JS里面的数组可以不适用下标，使用push和pop向数组里面放数据和拿数据
        var array4 = new Array();
        array4.push("zhangsan");
        console.log(array4);//['zhangsan']
        console.log(array4.length);//1
        array4.push(false);
        console.log(array4);//['zhangsan', false]
        console.log(array4.length);//2
        array4.push(45);
        console.log(array4);//['zhangsan', false, 45]
        console.log(array4.length);//3

        console.log(array4.pop());//45
        console.log(array4.pop());//false
        console.log(array4.pop());//'zhangsan'

    </script>

在这里插入图片描述

7 Math

Math.PI
Math.round(3.14)
在这里插入图片描述

8 eval

console.log(eval('2+3')); //5
eval('var x=10;var y=20;console.log(x*y);'); //200

在这里插入图片描述