• JavaScript系列------2

    1. JS 数据类型：

            基本数据类型：number数字型,string字符串型,boolean布尔型,undefined未定义型,null空类型

            引用数据类型：object对象

    js 是弱数据类型的语言，只有当我们赋值了才知道是什么数据类型。

    声明一个变量未赋值就是 undefined

    如果一个变量里面确定存放的是对象，如果还没准备好对象，可以放个null。

    JavaScript优先级越高越先被执行，优先级相同时从左到右执行。乘、除、取余优先级相同。

    模板字符串

    拼接字符串和变量。

    在没有它之前，拼接变量比较麻烦。

    document.write('我今年' + age + '岁了')

    有了后这么写：

     document.write(`我今年${age}`)

    检测数据类型

    (1) 控制台输出语句: console.log(数据)

    (2) 通过typeof关键字检测数据类型

    2. 类型转换

    为什么要类型转换？

    因为JS是弱数据类型，它也不知道变量到底属于哪种数据泄露，只有赋值了才清楚。（使用表单、prompt获取过来的数据默认是字符串类型的，此时不能直接简单的进行加法运算。）

    隐式转换

    某些运算符被执行的时候，系统内部自动将数据类型进行转换，这些转换称为隐式转换。

    规则：

    '+'号两边只要有一个是字符串，都会把另外一个转成字符串。

    除了+以外的算术运算符，比如 - * / 等都会把数据转成数字类型。

    缺点：转换类型不明确，靠经验才能总结。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         console.log(1 + 1)
    11.         console.log('pink' + 1)
    12.         console.log(2 + 2)
    13.         console.log(2 + '2')
    14.         console.log(2 + '2')
    15.  
    16.         console.log(2 - '2')
    17.         console.log(+12)
    18.         console.log(+'123')
    19.     script>
    20. body>
    21. html>

    输出：

    显式转换

    console.log(parseInt('12.94px'))

    显示为:12

    Number\parseInt\parseFloat

    console.log(parseFloat('abc12.94px'))

    显示为：NaN 

    最后一个综合案例，可以实现自己输入商品价格、商品数量及地址：

    代码如下：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <style>
    8.         h2 {
    9.             text-align: center;
    10.         }
    11.         table {
    12.             border-collapse: collapse; /* 合并相邻边框 */
    13.             height: 80px;
    14.             margin: 0 auto;
    15.             text-align: center;
    16.         }
    17.         table,
    18.         th,
    19.         td {
    20.             border: 1px solid #000;
    21.         }
    22.         th {
    23.             padding: 5px 30px;
    24.         }
    25.     style>
    26. head>
    27. <body>
    28.     <h2>订单确认h2>
    29.     <script>
    30.         // 1 用户输入   
    31.         let price = +prompt('请输入商品价格')
    32.         let num = +prompt('请输入商品数量')
    33.         let address = prompt('请输入地址')
    34.         // 2 计算总额
    35.         let totalNum = price * num;
    36.         // 3 页面打印
    37.         document.write(
    38.           `  <table>
    39.         <tr>
    40.             <th>商品名称th>
    41.             <th>商品价格th>
    42.             <th>商品数量th>
    43.             <th>总价th>
    44.             <th>收货地址th>
    45.         tr>
    46.         <tr>
    47.             <td>小米青春手机PLUStd>
    48.             <td>${price}元td>
    49.             <td>${num}td>
    50.             <td>${totalNum}元td>
    51.             <td>${address}td>
    52.         tr>
    53.     table>
    54.        ` )
    55.     script>
    56. body>
    57. html>

    3. if单分支语句及判断语句

    3.1 if语句

    if语句有三种使用：单分支、双分支、多分支。

    if(条件) {满足条件要执行的代码}

            括号内的条件为true时，进入大括号里执行代码；

            小括号内的结果若不是布尔类型时，会发生隐式转换为布尔类型。

    3.2 三元运算符

    条件 ? 满足条件执行的代码 : 不满足条件执行的代码

    一般用来取值。

  • 相关阅读:
    使用 Learner Lab - 使用 AWS Lambda 将图片写入 S3
    NLP 文本表征方式
    银行信息系统应用架构导论-引用
    安卓手机投屏到电视，跨品牌、跨地域同样可以实现！
    Python机器视觉--OpenCV进阶(核心)--常用低通滤波器(方盒滤波器,均值滤波器,高斯滤波器,中值滤波器,双边滤波器)
    Mycat高可用方案-HAProxy+Keepalived
    快速入门vuex！！
    Jmeter吞吐量控制器使用小结
    python--selenium：元素点击不到，你需要的点击方法都在这
    3-SpringBoot架构设计与实现原理-自动装配底层原理和手写自动装配
  • 原文地址：https://blog.csdn.net/weixin_44725351/article/details/138152073