zoukankan      html  css  js  c++  java
  • JavaScript编程基础2

    1,数据类型相关操作

    使用typeof x函数查看变量的数据类型:

    typeof "John"                // 返回 string 
    typeof 3.14                  // 返回 number
    typeof false                 // 返回 boolean
    typeof [1,2,3,4]             // 返回 object,数组是一种特殊的对象类型
    typeof {name:'John', age:34} // 返回 object, 因此 typeof [1,2,3,4] 返回 object

    null:

      null表示什么都没有,它自己是一种类型,表示一个空对象引用。所以可以把变量设置为null来清空对象。

    undefined:

      在 JavaScript 中, undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回 undefined

    null和undefined区别:

    typeof undefined             // undefined
    typeof null                  // object
    null === undefined           // false
    null == undefined            // true

    2,类型转换

    在 JavaScript 中有 5 种不同的数据类型:

    • string
    • number
    • boolean
    • object
    • function

    3 种对象类型:

    • Object
    • Date
    • Array

    2 个不包含任何值的数据类型:

    • null
    • undefined

    constructor属性:

    constructor属性返回javaScript变量的构造函数:

    "John".constructor                 // 返回函数 String()  { [native code] }
    (3.14).constructor                 // 返回函数 Number()  { [native code] }
    false.constructor                  // 返回函数 Boolean() { [native code] }
    [1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
    {name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
    new Date().constructor             // 返回函数 Date()    { [native code] }
    function () {}.constructor         // 返回函数 Function(){ [native code] }

      在我看来,js中的数组:var mycar=new Array("hello","i am","fine")是对象的实例,而[1,2,4]这种,更接近真正意义上的数组。

    isArray()和isDate()用法,第一个为例

    //看isArray()的用法,
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    document.getElementById("demo").innerHTML = isArray(fruits);    //返回true
    //true直接会写到id=demo的元素中

    数据类型转换:变成字符串

    String(x)    把数字转换为字符串

    String(x)         // 将变量 x 转换为字符串并返回
    String(123)       // 将数字 123 转换为字符串并返回
    String(100 + 23)  // 将数字表达式转换为字符串并返回,先算,后转换,转换以后是,字符串123,当然了输出的时候并不会表明自己的类型

           toString()也是这样的作用:(123).toString()

      其他的数字变字符串方法简介:留后再学,赶进度

    方法描述
    toExponential() 把对象的值转换为指数计数法。
    toFixed() 把数字转换为字符串,结果的小数点后有指定位数的数字。
    toPrecision() 把数字格式化为指定的长度。

    布尔值转换为字符串:

    String(false)        // 返回 字符串false
    false.toString()     // 返回 字符串false,两个方法都可以

    日期变成字符串:

    String(new Date())  //返回当前日期的字符串格式
    
    obj.toString()     //同上

    Date方法简介:

    方法描述
    getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
    getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
    getFullYear() 从 Date 对象以四位数字返回年份。
    getHours() 返回 Date 对象的小时 (0 ~ 23)。
    getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
    getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
    getMonth() 从 Date 对象返回月份 (0 ~ 11)。
    getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
    getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

    数据类型转换:变成数字

    Number("3.14")    // 返回 3.14  空字符串转换为0,其他字符串转换为NaN
    Number("99 88")   // 返回 NaN

    var x="5";
    var y=+5; //y将是数字5,一元运算符可以把变量转化为数字,如果不能转化,那就得到NaN,仍旧是数字类型

      其他字符串转换为数字的方法:

    方法描述
    parseFloat() 解析一个字符串,并返回一个浮点数。
    parseInt() 解析一个字符串,并返回一个整数

    布尔值转化为数字:

    Number(false)     // 返回 0
    Number(true)      // 返回 1

    日期转化为数字:

    d = new Date();
    Number(d)    //我得到的是15多少多少的一个数,估计是时间戳
    //用d.getTime()也是可以的。

    数据类型转换:自动转换类型

    当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型

    5 + null    // 返回 5         null 转换为 0
    "5" + null  // 返回"5null"   null 转换为 "null"
    "5" + 1     // 返回 "51"      1 转换为 "1"  
    "5" - 1     // 返回 4         "5" 转换为 5

    当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法:

    document.getElementById("demo").innerHTML = myVar;

    myVar = {name:"Fjohn"} // toString 转换为 "[object Object]" myVar = [1,2,3,4] // toString 转换为 "1,2,3,4" myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

    数字和布尔值也经常相互转换:

    myVar = 123             // toString 转换为 "123"    为什么数字123会转换成字符串123呢,我估计可能是因为html需要输出统一的字符给用户看
    myVar = true            // toString 转换为 "true"
    myVar = false           // toString 转换为 "false"

    3,正则表达式 

    语法实例:

    var patt = /runoob/i    //声明变量patt等于rundoob,i表示不区分大小写;这语法和sed,awk有点像

    正则的修饰符:

    修饰符描述
    i 执行对大小写不敏感的匹配。
    g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
    m 执行多行匹配。


    search() 方法
     

    用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。

    var str = "Visit Runoob!"; 
    var n = str.search(/Runoob/i);    //返回6

    replace() 方法 

    用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

    <body>
    
    <button onclick="myFunction()">点我</button>    //按钮激发事件
    <p id="demo">请访问 Microsoft!</p>
    <script>
    function myFunction() {
        var str = document.getElementById("demo").innerHTML;     //得到id=demo的元素的内容,赋值给str
        var txt = str.replace(/microsoft/i,"Runoob");    //声明变量txt等于在str的基础上把microsoft换成runoob。
        document.getElementById("demo").innerHTML = txt;    //重写id=demo的元素
    }
    </script>
    </body>

    js中的正则表达式简介:

    表达式描述
    [abc] 查找方括号之间的任何字符。
    [0-9] 查找任何从 0 至 9 的数字。
    (x|y) 查找任何以 | 分隔的选项。
    元字符描述
    d 查找数字。
    s 查找空白字符。
     匹配单词边界。
    uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
    量词描述
    n+ 匹配任何包含至少一个 n 的字符串。
    n* 匹配任何包含零个或多个 n 的字符串。
    n? 匹配任何包含零个或一个 n 的字符串。

    使用 RegExp 对象

    在 JavaScript 中,RegExp 对象是一个预定义了属性和方法的正则表达式对象

    调用var xxx=new RegExp('patton')就可以使用以下命令:

    使用test():

    test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false。

    <script>
    var patt1=new RegExp("e");   //实例化
    document.write(patt1.test("The best things in life are free")); // 返回true,注意格式,是patt.test(),作用是查找字符串中有没有e。
    </script>
    //简写:/e/.test("The best things in life are free!")    厉害了,还有这种操作,但是好像不支持正则修饰符

    使用exec():

    exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null。

    <script>
    var patt1=new RegExp("be|es");
    document.write(patt1.exec("The best things in life are free"));
    </script>
    //返回的是be,所以我觉得它实际上只是返回匹配到的第一个值

    4,javascript错误

    try 语句测试代码块的错误。它允许我们定义在执行时进行错误测试的代码块。

    catch 语句处理错误。catch 语句允许我们定义当 try 代码块发生错误时,所执行的代码块。

    throw 语句创建自定义错误。当错误发生时,JavaScript 引擎通常会停止,并生成一个错误消息。

     

    try...catch...

    <script>
    var txt="";
    function message(){
        try {
            adddlert("Welcome guest!");    //特意写错了alert,如果try语句有错误,那就执行catch语句
        }
        catch(err) {    //catch 块会捕捉到 try 块中的错误,并执行代码来处理它。
            txt="本页有一个错误。
    
    ";
            txt+="错误描述:" + err.message + "
    
    ";    //捕捉错误用err.message
            txt+="点击确定继续。
    
    ";
            alert(txt);
        }
    }
    </script>
    </head>
    <body>
    <input type="button" value="查看消息" onclick="message()" />    //激发事件
    </body>

    throw语句

    <body>
    
    <p>请输出一个 5 到 10 之间的数字:</p>
    
    <input id="demo" type="text">    //定义了一个文本框,用于收集用户端的信息
    <button type="button" onclick="myFunction()">测试输入</button>    //按钮激发事件
    <p id="message"></p>    //结果会更新在这个段落中,尽管现在是空的
    
    <script>
    function myFunction() {
        var message, x;    //两个变量
        message = document.getElementById("message");    //message相当于获取元素了
        message.innerHTML = "";    //元素的用空填充的
        x = document.getElementById("demo").value;    //x用于获取用户的输入
        try { 
            if(x == "")  throw "值为空";    //如果用户的输入是空的话,直接引发错误,下面的代码不执行了,调到catch语句,打印出错误.err指代的是什么呢?其实就是throw后面的部分。
            if(isNaN(x)) throw "不是数字";
            x = Number(x);
            if(x < 5)    throw "太小";
            if(x > 10)   throw "太大";
        }
        catch(err) {
            message.innerHTML = "错误: " + err;    //向带id=message的元素中输出错误
        }
    }
    </script>
    
    </body>
    </html>

     5 javascript调试

    在程序代码中寻找错误叫做代码调试。调试很难,但幸运的是,很多浏览器都内置了调试工具。浏览器启用调试工具一般是按下 F12 键,并在调试菜单中选择 "Console" ,chrome的调试快捷键是ctrl+shift+j

    console.log()方法:

    在调试窗口上打印js程序的某个值

    a = 5;
    b = 6;
    c = a + b;
    console.log(c);

    设置断点:用debugger

    <body>
    <p id="demo"></p>
    <p>开启调试工具,在代码执行到第三行前会停止执行。</p>
    <script>
    var x = 15 * 5;
    debugger;    //不开启调试工具的时候正常执行,开启以后在此处形成一个断点,点击下一步以后,页面会显示正确的内容
    document.getElementById("demo").innerHTML = x;
    </script>
    </body>

    6 变量提升

    在js解释器内部,函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

    //先用后声明,
    x = 5; // 变量 x 设置为 5
    elem = document.getElementById("demo"); // 查找元素 
    elem.innerHTML = x;                     // 在元素中显示 x
    var x; // 声明 x
    
    //先声明后用,是一样的
    var x; // 声明 x
    x = 5; // 变量 x 设置为 5
    elem = document.getElementById("demo"); // 查找元素 
    elem.innerHTML = x;                     // 在元素中显示 x
    
    //声明的时候同时赋值叫初始化,初始化的变量不会提升
    var x = 5; // 初始化 x
    elem = document.getElementById("demo"); // 查找元素 
    elem.innerHTML = x + " " + y;           // 显示 x 为5,但是y是undefined
    var y = 7; // 初始化 y以后,y并没有被提升

    为了避免由于声明提升引发的问题,通常我们在每个作用域开始前声明这些变量,这也是正常的 JavaScript 解析步骤,易于我们理解。

    7,严格模式

    启用严格模式

    <script>
    "use strict";    //启用全局的严格模式的代码写在<script>标签内部的开头,双引号,分号,启用局部严格模式就写在局部咯
    x = 3.14;       // 报错 (x 未定义)
    </script>

    严格模式的优点

    消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;

    • 消除代码运行的一些不安全之处,保证代码运行的安全;
    • 提高编译器效率,增加运行速度;
    • 为未来新版本的Javascript做好铺垫。

    "严格模式"体现了Javascript更合理、更安全、更严谨的发展方向

    严格模式的限制:有的不甚理解,留后

      不允许使用没有声明的变量;对象也是一个变量

      不允许删除变量,函数或者对象:错误示范:var x;delete x;

      不允许变量重名;

      不允许使用八进制;

      不允许转义字符;

      不允许对只读属性赋值;

      不允许对一个使用getter方法读取的属性进行赋值

      不允许删除一个不允许删除的属性:

      变量名不能使用 "eval" 字符串,arguments字符串,在作用域 eval() 创建的变量不能被调用:

      禁止this关键字指向全局对象。

    8.js使用误区

      1, if (x==10)    注意,用比较运算符:==而不是=。

      2,注意+号:var x=10; var y="5"; var z=x+y ;  //得到z等于105.

      3,浮点型数据注意事项:var x=0.1;var y=0.2;var z=x+y;  //得到z等于0.30000000000000004 ,所以使用浮点数的时候要小心精度引起的问题

      4,字符串分行:

    <script>
    document.getElementById("demo").innerHTML = "Hello 
    World!";    //在编辑器里分行使用“”反斜杠,输出中换行的话,使用<br>
    </script>

      5,分号

    <script>
    var x = 5;
    if (x == 19);{    //此处错误地使用了分号,导致满足条件才执行的代码立马被执行了
        document.getElementById("demo").innerHTML = "Hello";
    }
    </script>

    6,return

    //错误示范:
    function myFunction(a) {
        var
        power = 10;  //前一句分行写没毛病,因为var后面没有东西的时候浏览器会加载下一句。
        return    //但是return语句不能分开写,因为它本身可以被当作独立的语句,所以老老实实地遵循规则吧
        a * power;
    }

    7,这个比较重要:

      js的数组中只能使用数字作为索引,

    var person = [];
    person[0] = "John";
    person[1] = "Doe";
    person[2] = 46;
    var x = person.length;         // person.length 返回 3
    var y = person[0];             // person[0] 返回 "John"

      不能使用名字(字符串)作为索引,因为只要它用了字符串做索引,它就不再是数组了,而是对象。

    var person = [];
    person["firstName"] = "John";
    person["lastName"] = "Doe";
    person["age"] = 46;
    var x = person.length;         // person.length 返回 0,数组的方法已经不能再继续使用
    var y = person[0];             // person[0] 返回 undefined

      8,js中定义数组和对象,最后一个元素后边不能加逗号。

    //错误示范:
    var colors = [5, 6, 7,]; //这样数组的长度可能为3 也可能为4
    websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}    //这个是对象

      9,undefined不是null

    在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法。对象只有被定义才有可能为 null,否则为 undefined。

    如果我们想测试对象是否存在,在对象还没定义时将会抛出一个错误。

    所以我们一般这样写:

    if (typeof myObj !== "undefined" && myObj !== null)  
    // myObj的类型不是undefined 并且myObj的值不等于null

      10,程序块的作用域一般是全局的

    for (var i = 0; i < 10; i++) {
        // some code
    }
    return i;    //这是正确的

     

    9,js表单

    表单验证:http://www.runoob.com/js/js-validation.html

  • 相关阅读:
    java注解
    SpringBoot 整合 MybatisPlus 3.0
    第三章 列表简介
    第二章 变量及简单数据类型
    收藏通俗知识
    2017.8.13 列标,元组,字符串
    Python入门--4--分之和循环
    Python入门---易错已错易混淆----知识点
    Perl语言入门--4--函数
    perl学习之精髓中的精髓
  • 原文地址:https://www.cnblogs.com/0-lingdu/p/9629094.html
Copyright © 2011-2022 走看看