• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

2021.6.9.19:08

开发技术 开发技术 3小时前 2次浏览

今天学了好多js的类型,感觉有点吃力了。

变量

<script>
    // 变量 可以变化的量
    // 1.先声明 后赋值
    // var 声明变量的关键字、命令;x 变量名 代号
    var x;
    //'=' 赋值运算符,运算顺序 从右往左
    x =1;
    //2.声明与赋值同时进行
    var  y= 10;
    //3.同时声明多个变量
    var a=1,b=2,c=3
    //变量命名的规范:
    //1.有意义
    //2.首字母只能是英文字母、_、$,其余的字符可以是字母,数字,$,_
    //3.不能使用关键字和保留字符,比如:var for if else whild break continue let const function 等等
    //4.尽量使用驼峰命名法 比如:userName backgroundColor
    
</script>

数据类型

<script>
    //【基本数据类型/简单数据类型】
    //1.数值类型 number 可以进行数学运算
    var age = 18;
    var price = 299;
    //2.字符串类型;string  定义文本信息 用''或""或 ``包裹
    var userName ='张三';
    var str = '你真是个"好孩子"' //注意:单双引号相互嵌套 
    var str2  = "你真是个"好孩子""  //可以使用转义符
    var stt3 = `hello world`

    // 3.布尔类型 boolean 真(true) 和 假(false)
    var isOpent = true
    // var res = confirm('确定要删除吗?')
    // console.log(res);

    //4.未定义类型 undefined 变量未赋值
    var y;
    console.log(y);
    
    //5.空值 null (空对象)  不存在
    var div = document.getElementById('box');//查找页面中id为box的元素
    console.log(div);
    //【复杂数据类型/引用类型】
    //1.对象 用{}包裹
    var pName = '张三';
    var pAge = 18;
    var pSex = '';
    var isMale = true;
    //语法:键值对 属性名:属性值
    var person = {
        uname:'张三',
        age:18,
        isMale:true,
        color:'黑色'
    }
    var product1 = {
        imgUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=200&h=200&f=webp&q=90',
        pname:'Note 10 Pro',
        desc:'天玑1100年度旗舰芯',
        sPrice:1599,
        yPrice:1699
    }
    var product2 = {
        imgUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=200&h=200&f=webp&q=90',
        pname:'Note 10 Pro',
        desc:'天玑1100年度旗舰芯',
        sPrice:1599,
        yPrice:1699
    }
    //获取对象的属性值 对象.属性名   .=的
    //product1.imgUrl
    document.write('<img src = "'+product1.imgUrl+'">')//拼接字符串
    document.write(`<img src = "${product2.imgUrl}">`)//``号 表示字符串
    document.write(`
        <div class = "product">
            <img src ="${product1.imgUrl}">
            <h4>${product1.pname}</h4>
            <p>${product1.desc}</p>
            <p><span>${product1.sPrice}</span><i>${product1.yPrice}</i></p>
        </div>
    `)
    //2.数组 一组数据的集合 用[]包裹
    // 元素:指的是数组中的数据
    //索引(编号):从0开始
    var arr = ['a','b','c','d',1,2,3,4,undefined,null,true];
    //根据 索引 的访问数组中的元素
    console.log(arr[2]);
    var procArr = [
        {
        imgUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=200h=200&f=webp&q=90',
        pname:'小米 10 Pro',
        desc:'高通晓龙865年度版',
        sPrice:1599,
        yPrice:1799
        },
        {
        imgUrl:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=200h=200&f=webp&q=90',
        pname:'Note 10 Pro',
        desc:'天玑1100年度旗舰芯',
        sPrice:9999,
        yPrice:999
        },
    ]
    var procObj = procArr[1];
    console.log(procObj);
    //根据 对象.属性名 获取属性值
    console.log(procObj.pname);
    var arr2 = [[],[],[]]
</script>

赋值运算

<script>
    //1.= 赋值运算符 运算顺序:从右往左

    //+= -=  *=  /=
    var x = 1;
   // x+=2 //x = x +2
    // console.log(x);
    x-=2 //x = x-2
    console.log(x);
</script>

算术运算符

<script>
    // +  -  *  /(求商)   %(求余运算符)
    var num1= 10;
    var num2= 3;
    console.log(num1/num2);
    console.log(num1%num2);
    //使用求与运算,判断一个个数是否是偶数
    //++ -- 递增 递减运算符
    var x = 10;
   // var y = x++;//.y先参与其他运算 ,再自增1             
   // console.log(x);//11
    //console.log(y);//10
    var y = ++x// x.先自增1.在参与其他运算
    console.log(y);//10
    //区分x++ 与 ++x
    //var a = 5
    //var b = a++ + ++a // b = 5 +7 =12
    var c = 10
    var d = c++ + ++c - --c - c--;
    //10+12-11-11
    console.log(d);
</script>

比较运算符

<script>
    //1.> <
    //2.>= <=
    //3.== 等于, ===完全等于
    //4.!= 不等于  !==完全不等于
    var x = 10;//值类型:number
    var y = '10';//值类型:string
    console.log(x == y);//true == 只比较值,不比较类型
    console.log(x === y);//false == 即比较值,也比较类型
    console.log(x != y);//false
    console.log(x !== y);//false

</script>

逻辑运算符

 <script>
    //1. && and 且
    var x = 10,y = 20;
    console.log(x > 9 && y < 20);
    //如果多个表达式是 && 连接,那么这些表达式必须同时成立。才会返回true,否则返回false
    //2.|| or 或
    console.log(x>9 || y<20);//true
    //如果多个表达式是 || 连接 那么这些表达式中只要有一个成立,就返回true
    //如果使用表达式都不成立,才会返回false
    //3.! not 非 对结果取反
    console.log(!(x>9));//false
    // 
    </script>

if判断语句

<script>
        // if (条件表达式) {
        //     //如果条件表达式成立,则执行此代码块
        // }
        var score = 570;
        //单分支语句
        // if (score >619) {
        //     alert('买!都可以买')
        // }
        //双分支语句
        // if (condition) {
        //如果条件成立,则执行此代码块
        // }else {
        //否则(条件不成立)就执行此代码块
        // }
        var age = 12;
        // if (age>=18) {
        //     alert('你可以进')
        // }else {
        //     alert('未成年人不允许进入')
        // }
        //多分支语句
        var res1 = prompt('今天是周几?');
        if (res1 >= 1 && res1 <= 7) {
            if (res1 == 1) {
                alert('今天是周一呢')
            } if (res1 == 2) {
                alert('今天是周二呢')
            } if (res1 == 3) {
                alert('今天是周三呢')
            } if (res1 == 4) {
                alert('今天是周四呢')
            } if (res1 == 5) {
                alert('今天是周五呢')
            } if (res1 == 6) {
                alert('今天是周六呢')
            } if (res1 == 7) {
                alert('今天是周日呢')
            }
        }else {
            alert('请输入正确的数字')
        }

    </script>

用if语句判断成绩

<script>
    //>=90 优秀
    //>=80 <90 良好
    //>=60 <80  及格
    // <60 废物
    var score = prompt('请输入你的成绩(0-100)')
    // if (score >= 0 && score <= 100) {
    //     if (score >= 90) {
    //         alert('你很优秀')
    //     } if (score < 90 && score >= 80) {
    //         alert('你是良好')
    //     } if (score < 80 && score >= 60) {
    //         alert('你及格了')
    //     } if (score < 60) {
    //         alert('你好low啊')
    //     }
    // } else {
    //     alert('你输入的不在范围内,请重新输入')
    // }


    if (score >= 90) {
        alert('你很优秀')
    } else if (score >= 80) {
        alert('你是良好')
    } else if (score >= 60) {
        alert('你及格了')
    } else {
        alert('你好low啊')
    }
</script>

隐式转换

<script>
    //前提:对于一个纯数字的字符串
    var x = '100';
    var y = 10;
    var sum = x + y //此时 + 是一个拼接符(拼接字符串)
    console.log(sum);//10010

    //如何进行隐式转换?    乘法 除法 减法 运算都可以实现(纯数字)字符串的隐式转换
    //*1 、/1、 -0
    
    console.log(x*1+y);
    var a = '120a'
    console.log(a*1);//NaN not a number 不是一个数字
</script>

判断用户输入的是否是数字

<script>
//判断用户输入的是否是数字
// var res = prompt ('请输入成绩'); //prompt()返回的数据类型是string
//NaN 与任何值都不相等
//isNaN()检测某个数值是否是NaN
//如果某个数值是NaN 该方法返回 true否则返回false
// if (isNaN(res*1) == true ) {
//     console.log('不是数字');
// }else {
//     console.log('是数字');
// }
console.log(isNaN('12'*1));//false
console.log(isNaN('12a'*1));//true
//根据用户输入的年龄,计算他的出生年份
var age = prompt('请输入宁的年龄')

// console.log(year);
if (isNaN(age*1) ==true|| age*1<=0) {
    alert('宁输入的年龄有误,请重新输入')
}else {
    var year = 2021-age*1
    alert('你的出生年份是'+year+'')
}
</script>

总结

#变量
1.声明 赋值
2.变量命名

#数据类型
1.简单类型 number string boolean undefined null
2.复杂类型   对象(object) 数组 (array)

#运算符

#if判断语句
1.单分支语句     if(){}
2.双分支语句     if(){}else{}
3.多分支语句     if(){}if(){}if(){}...  if(){}else{}if(){}else{}if(){}...

#隐式转换
-注意 针对 纯数字组成的字符串
-*、/、-
#isNaN()
-用来检测一个数值是否是NaN

 

加油 努力 你一定会成功!


程序员灯塔
转载请注明原文链接:2021.6.9.19:08
喜欢 (0)