变量的值会改变,// 判断是否为简单数据类型

  • 栏目:前端 时间:2020-01-04 12:42
<返回列表

// 判断是否为undefined或null

第二章笔记

const isDef = (v) = { return v !== undefined  v !== null}

一、数据类型(data type)

javascript使用三种基本数据类型:text、number、boolean。

数据类型直接影响JavaScript代码里处理数据的方式。举例来说,alert框只能呈现文本,无法列出数字。数字将暗中转换为文本,而后呈现在我们面前。

// 判断是否为Promise 函数

二、常量(constant)和变量(variable)

在脚本执行过程中,变量的值会改变,而常量的值不变。

const isPromise = (val) = { return ( val !== undefine  typeof val.then === 'function'  typeof val.catch === 'function' )}

变量(variable)

// 判断是否为简单数据类型

1、创建变量

格式例子: var age;

var 变量名;

const isPrimitive (value) = { return ( typeof value === 'string' || typeof value === 'number' || typeof value === 'symbol' || typeof value === 'boolean' )}

2、变量初始化(initializing)

格式例子:var age = 18;

var 变量名 = 初始值;

JavaScript数据的数据类型在设置设定数据为特定值的同时建立,而且变量值的类型可以改变。

JavaScript会根据变量初始化的值自动决定变量的数据类型。如果事后变量被指派了其他类型,变量类型会顺应新数据而改变。

如果不知道将变量初始化为什么值合适,则可以将变量初始值设置为 空""(文本) 、0(数字) 、false(布尔),这种设定有助于减少不小心存取未初始化变量的风险。

// 严格检查复杂数据类型

常量(constant)

const isPlainObject = (obj) = { return Object.prototype.toString.call(obj) === '[object Object]'}const isRegExp = (v) = { return Object.prototype.toString.call(v) === '[object RegExp]'}

1、创建一个常量

格式例子:const PI = 3.14;

const 常量名 = 常量值;

常量名应该是一个具有描述性的名称。

常量全部用大写字母。

创建常量时务必对创建进行初始化。

// 将驼峰字符串转成连接符 magicEightTall 转换成 magic-eight-tall

三、标识符

标识符应该具有描述性,才能轻易辨识数据。

标识符使用驼峰型(CamelCase)的外形风格。

const hyphenateRE = /B([A-Z])/gconst hyphenate = (str) = { return str.replace(hyphenateRE, '-$1').toLowerCase()}

韦德体育 ,四、undefined和NaN

undefined代表一种特殊的数据状态,一段数据如果没有值,就是undefined。

NaN(Not a Number),表示数字数据类型有误的表示,通常只在计算过程中需要数字,却受到非数值的数据时,才会看到NaN。

// 将连接符转成驼峰字符串 magic-eight-tall 转换成 magicEightTall

五、文本转换为数字——parseInt()与parseFloat()

小心字符串连接符和加法运算符。(在做数值加法或字符串相连之前,最后先判断)

parseInt()把字符串传给函数,函数就把字符串转换为整数。

parseFloat()把字符串传给函数,函数就把字符串转换为浮点数。

parseInt()和parseFloat()函数不保证转换一定成功。如:parseFloat("$31.50"); 转换结果为NaN,因为$字符将使函数混淆。

const camelizeRE = /-(w)/gconst camelize = (str) = { return str.replace(camelizeRE, (_, c) = c ? c.toUpperCase() : '')}

本章例子最终源码

<html>
  <head>
    <title>Duncan's Just-In-Time Donuts</title>

    <link rel="stylesheet" type="text/css" href="donuts.css" />

    <script type="text/javascript">
      function updateOrder() {
        const TAXRATE = 0.0925;     //常量初始化
        const DONUTPRICE = 0.50;
        var numCakeDonuts = parseDonuts(document.getElementById("cakedonuts").value);
        var numGlazedDonuts = parseDonuts(document.getElementById("glazeddonuts").value);
        //检测数据是否合法
        if (isNaN(numCakeDonuts))
          numCakeDonuts = 0;    
        if (isNaN(numGlazedDonuts))
          numGlazedDonuts = 0;
          //小计
        var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE;
        //计算税率
        var tax = subTotal * TAXRATE;
        //计算总价
        var total = subTotal + tax;
        //显示结果
        document.getElementById("subtotal").value = "$" + subTotal.toFixed(2);
        document.getElementById("tax").value = "$" + tax.toFixed(2);
        document.getElementById("total").value = "$" + total.toFixed(2);
      }
        //检测 个性化输入
      function parseDonuts(donutString) {
        numDonuts = parseInt(donutString);
        if (donutString.indexOf("dozen") != -1)     //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
          numDonuts *= 12;
        return numDonuts;
      }

        //根据不合法输入做出对应的提示
      function placeOrder(form) {
        if (document.getElementById("name").value == "")    //检测姓名是否为空
          alert("I'm sorry but you must provide your name before submitting an order.");
        else if (document.getElementById("pickupminutes").value == "" ||
          isNaN(document.getElementById("pickupminutes").value))        //检测姓名或订单时间是否合法
          alert("I'm sorry but you must provide the number of minutes until pick-up before submitting an order.");
        else
          // Submit the order to the server
          form.submit();
      }
    </script>
  </head>

  <body>
    <div id="frame">
      <div class="heading">Duncan's Just-In-Time Donuts</div>
      <div class="subheading">All donuts 50 cents each, cake or glazed!</div>
      <div id="left">
        <img src="donuttime.png" alt="Just-In-Time Donuts" />
      </div>
      <form name="orderform" action="donuts.php" method="POST">
        <div class="field">
          Name: <input type="text" id="name" name="name" value="" />
        </div>
        <div class="field">
        # of cake donuts: <input type="text" id="cakedonuts" name="cakedonuts" value=""
          onchange="updateOrder();" />
        </div>
        <div class="field">
        # of glazed donuts: <input type="text" id="glazeddonuts" name="glazeddonuts" value=""
          onchange="updateOrder();" />
        </div>
        <div class="field">
        Minutes 'til pickup: <input type="text" id="pickupminutes" name="pickupminutes" value="" />
        </div>
        <div class="field">
        Subtotal: <input type="text" id="subtotal" name="subtotal" value="" readonly="readonly" />
        </div>
        <div class="field">
        Tax: <input type="text" id="tax" name="tax" value="" readonly="readonly" />
        </div>
        <div class="field">
        Total: <input type="text" id="total" name="total" value="" readonly="readonly" />
        </div>
        <div class="field">
        <input type="button" value="Place Order" onclick="placeOrder(this.form);" />
        </div>
      </form>
    </div>
  </body>
</html>

// 如果不想重复转换,可用以下方法调用转换函数

const cached = (fn) = { const cache = Object.create(null) console.log(cache); return ((str) = { const hit = cache[str] return hit || (cache[str] = fn(str)) })};// 例const camelize = cached((str) = { return str.replace(camelizeRE, (_, c) = c ? c.toUpperCase() : '')})
上一篇:对于X进行保留两位小数的处理 下一篇:没有了

更多阅读

变量的值会改变,// 判断是否为简单数据

前端 2020-01-04
// 判断是否为undefined或null 第二章笔记 const isDef = (v) = { return v !== undefined v !== null} 一、数据类...
查看全文

部分提供网页的具体内容

前端 2020-01-04
韦德体育 ,Web前端开发怎么入门,主要都有哪些要素组成?Web前端开发是由网页制作演变而来...
查看全文

对于X进行保留两位小数的处理

前端 2020-01-04
1 、tofixed方法 toFixed() 方法可把 Number四舍五入为指定小数位数的数字。例如将数据Num保留2位小...
查看全文

友情链接: 网站地图

Copyright © 2015-2019 http://www.koi-bumi.com. 韦德体育有限公司 版权所有