当前位置：首页 > article >正文

山西农业大学20241010

article 2024/10/11 18:18:37

02-JAVASCRIPT

- 一.JS基础语法
- - 1. 数据类型转换
  - - 1.1 隐式转换
    - 1.2 强制转换
  - 2. 运算符
- 二.JS语句
- - 1. 条件语句
  - 2. 循环语句
- 三.函数(方法)
- - 1. 声明函数的第一种方法
  - 2. 声明函数的第二种方法
  - 3. 声明函数的第三种方法
- 四.对象
- - 1. 对象的创建 -- 字面量
  - 2. 访问对象的属性
  - 3. 内置构造函数以及for in 循环
  - 4. 对象中的方法
  - 5. 检测属性是否存在

一.JS基础语法

1. 数据类型转换

1.1 隐式转换

运算过程中发生的转换

// 1. 隐式转换 - 计算过程中发生的转换
    var a = 2+"1";  // 数字+字符串==>数字转为字符串
    console.log(a)   //21
    var b = 1+true; // 数字+布尔型==>布尔型转为数值, true-1; false-0
    console.log(b);  //2
    var c = "2"+true;//字符串+布尔型==>将布尔型转为字符串
    console.log(c);  //2true

    // NaN:Not a Number:不是一个数字
    // 将数据类型转化失败的结果,和任何类型执行数学运算, 结果都是NaN
    var d = 2 + undefined;
    console.log(d);  //NaN
    var e = 2+null;
    console.log(e);  //2

1.2 强制转换

// 强转转换为数值 -- Number()
    var n1 = Number(true); // 1
    var n2 = Number(false); // 0
    var n3 = Number('2'); //2
    var n4 = Number('2a');//NaN
    var n5 = Number(undefined);//NaN
    var n6 = Number(null);//0
    console.log(n1,n2,n3,n4,n5,n6);
    // 2.强制转换为整型 -- parseInt()
    var p1 = parseInt(8.9);
    var p2 = parseInt("8.9");
    var p3 = parseInt("8.9a");
    var p4 = parseInt("a8.9");//NaN
    var p5 = parseInt(true); //NaN
    console.log(p1,p2,p3,p4,p5);
    // 3.强制转换为浮点型 -- parseFloat()
    var f1 = parseFloat("8.9");
    var f2 = parseFloat("8.9a");
    var f3 = parseFloat("a8.9");//NaN
    console.log(f1,f2,f3);
    // 4.将数值和布尔型强制转为字符串 -- toString()
    var num = 5;
    var str = num.toString();
    console.log(str,typeof str); //5 string

2. 运算符

分为: 算术运算符, 比较运算符, 逻辑运算符, 位运算符, 赋值运算符, 三目运算符
算术运算符: +, -, *, / , %, ++, –
比较运算符: >,<,>=,<=,==,===, !=

==: 等于, 只是比较值是否相同, 可能会发生隐式转换
===:全等于, 先比较类型, 然后再比较值
console.log(2=='2');//true // console.log(2==='2');//false

逻辑运算符: &&, ||, !
位运算符: 按位与&, 按位或|,按位异或^,按位右移>>, 按位左移<<
赋值运算符: =, +=, -=, *=,/=,%=
三目运算符: 条件表达式 ? 表达式1 : 表达式2

二.JS语句

1. 条件语句

// if条件句
    // 超市打折, 满30减10
    var total = 35;
    if (total>=30){
        // 在当前总价值的基础上减10
        total-=10;
    }
    console.log("实际支付价钱:"+total);
    // if-else
    var age = 18;
    if (age>=18){
        console.log("成年人")
    }else{
        console.log("为成年人")
    }
    // if...else if ... else if ... else
    // switch-case
    // 状态码:1-等待付款; 2-等待发货,3-运输中,4-已签收,5-已取消,其他-无法追踪
    var status = 5;
    switch (status){
        case 1:
            console.log("等待付款");
            break;
        case 2:
            console.log("等待发货");
            break;
        case 3:
            console.log("运输中");
            break;
        case 4:
            console.log("已签收");
            break;
        case 5:
            console.log("已取消");
            break;
        default:
            console.log("无法追踪")
            break;
    }

2. 循环语句

// while
    // while(循环条件){循环体;}
    var i = 1;
    while(i<=10){
        console.log(i);
        i++;
    }
    //do{循环体}while{循环条件}
    //break 和 continue
    // for循环
    // for(初始值;循环条件;增量){循环体}
    // 打印1-100之间可以被3整除的数字
    for (var i=1;i<=100;i++){
        if (i%3==0){
            console.log(i);
        }
    }

三.函数(方法)

java: public 返回值方法名(参数列表){ 方法体 }
js: function 方法名(参数列表){方法体}

1. 声明函数的第一种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法</title>
</head>
<body>
<!-- 通过按钮调用现有方法 -->
<input type="button" value="按钮" onclick="f1()">
<script>
    // 1. 创建普通方法 - 无参无返回值
    function f1(){
        console.log("f1");
    }
    // 调用方法
    f1();
    // 2. 有参无返回值
    function f2(name,age){ //形参
        console.log(name+":"+age);
    }
    f2("张三",20); // 实参
    // 3. 无参有返回值
    function f3(){
        return "这是一个返回值";
    }
    var res = f3();
    console.log(res);
    // 4. 有参有返回值
    function f4(x,y){
        // return用于返回函数调用后的结果,如果函数中没有return或者return不加任何值
        // 则返回undefined
        // 一旦return执行就会跳出函数, 结束函数的执行
        return x*y;
        console.log("aaa"); // 打印不出来;
    }
    var num = f4(4,5);
    console.log(num); //20
</script>
</body>
</html>

2. 声明函数的第二种方法

// 第二种声明方法的方式
    let f5 = function(name,age){
        console.log(name+":"+age);
    }
    f5("王五",25);

3. 声明函数的第三种方法

 let f6 = new Function("name","age","console.log(name+':'+age)")
 f6("李四",20);

四.对象

属于引用类型的数据
对象是一组属性和方法的集合

1. 对象的创建 – 字面量

var phone = {
        brand:'iphone 14 pro',
        color:'white',
        id:1011,
        'made-in': '深圳'
}
console.log(phone);

2. 访问对象的属性

对象.属性名
对象[‘属性名’]

console.log(phone.color);
console.log(phone["brand"]);
console.log(phone.price);//undefined

3. 内置构造函数以及for in 循环

// 内置构造函数
    let emp = new Object();
    emp.name='zhangsan';
    emp.age=25;
    emp.id=1;
    console.log(emp);

// 一次访问对象中的每个属性 --- 遍历
    for (var k in emp){
        // k 代表属性名
        // emp[k] 属性名对应的属性值
        console.log(emp[k]);
    }

4. 对象中的方法

// 对象中方法
    let person={
        // 成员的属性
        name:'zs',
        sex:'男',
        age:20,
        // 方法
        play:function(){
            // this指代调用当前方法的对象
            console.log(this.name+"正在打游戏...");
        }
    }
    person.play();

5. 检测属性是否存在

对象名.属性名 === undefined

true 属性不存在
false 属性存在

对象.hasOwnProperty(‘属性名’)

true 属性存在
false 属性不存在

‘属性名’ in 对象

true 属性存在
false 属性不存在

console.log(person.salary === undefined); // true-salary属性不存在
    console.log(person.hasOwnProperty('name'))// true-name属性存在
    console.log('sex' in person) //true 表示sex属性存在