美文网首页
第十六次课程小结

第十六次课程小结

作者: jiujiumi | 来源:发表于2019-10-23 14:31 被阅读0次

    一、数据类型转换

    在js读取文本框或者其它表单数据的时候获得的值是字符串类型的,例如两个文本框a和b,如果获得a的value值为11,b的value值为9
    方法主要有三种:转换函数、强制类型转换、利用js变量弱类型转换。

    1. 转换函数:

    js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数,后者把值转换成浮点数。只有对String类型调用这些方法,这两个函数才能正确运行;对其他类型返回的都是NaN(Not a Number)。

    一些示例如下:

    parseInt(“1234blue”); //returns 1234
    
    parseInt(“0xA”); //returns 10
    
    parseInt(“22.5”); //returns 22
    
    parseInt(“blue”); //returns NaN
    

    parseInt()方法还有基模式,可以把二进制、八进制、十六进制或其他任何进制的字符串转换成整数。基是由parseInt()方法的第二个参数指定的,示例如下:

    parseInt(“AF”, 16); //returns 175
    
    parseInt(“10”, 2); //returns 2
    
    parseInt(“10”, 8); //returns 8
    
    parseInt(“10”, 10); //returns 10
    

    如果十进制数包含前导0,那么最好采用基数10,这样才不会意外地得到八进制的值。例如:

    
    parseInt(“010”); //returns 8
    
    parseInt(“010”, 8); //returns 8
    
    parseInt(“010”, 10); //returns 10
    

    parseFloat()方法与parseInt()方法的处理方式相似。

    使用parseFloat()方法的另一不同之处在于,字符串必须以十进制形式表示浮点数,parseFloat()没有基模式。

    下面是使用parseFloat()方法的示例:

    
    parseFloat(“1234blue”); //returns 1234.0
    
    parseFloat(“0xA”); //returns NaN
    
    parseFloat(“22.5”); //returns 22.5
    
    parseFloat(“22.34.5”); //returns 22.34
    
    parseFloat(“0908”); //returns 908
    
    parseFloat(“blue”); //returns NaN
    

    2. 强制类型转换

    还可使用强制类型转换(type casTIng)处理转换值的类型。使用强制类型转换可以访问特定的值,即使它是另一种类型的。

    ECMAScript中可用的3种强制类型转换如下:

    Boolean(value)——把给定的值转换成Boolean型;

    Number(value)——把给定的值转换成数字(可以是整数或浮点数);

    String(value)——把给定的值转换成字符串。

    用这三个函数之一转换值,将创建一个新值,存放由原始值直接转换成的值。这会造成意想不到的后果。

    当要转换的值是至少有一个字符的字符串、非0数字或对象(下一节将讨论这一点)时,Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null,它将返回false。

    可以用下面的代码段测试Boolean型的强制类型转换。

    
    Boolean(“”); //false – empty string
    
    Boolean(“hi”); //true – non-empty string
    
    Boolean(100); //true – non-zero number
    
    Boolean(null); //false - null
    
    Boolean(0); //false - zero
    
    Boolean(new Object()); //true – object
    

    Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似,只是它转换的是整个值,而不是部分值。示例如下:

    
      用法结果
    
    Number(false) 0
    
    Number(true) 1
    
    Number(undefined) NaN
    
    Number(null) 0
    
    Number( “5.5 ”) 5.5
    
    Number( “56 ”) 56
    
    Number( “5.6.7 ”) NaN
    
    Number(new Object()) NaN
    
    Number(100) 100
    

    3. 利用js变量弱类型转换

    举个小例子,一看,就会明白了。

    var add1 = document.getElementById("add1").value;
    
    var add2 = document.getElementById("add2").value;
    
    document.getElementById("sum").value = add1*1 + add2*1
    

    三种方法:

      document.getElementById("add-btn").onclick=function(){
    
          document.getElementById("result").innerHTML =
    
             parseFloat(document.getElementById('first-number').value) +
    
             parseFloat(document.getElementById('second-number').value);//第一种
    
     
           document.getElementById("result").innerHTML =
    
            document.getElementById('first-number').value*1 +
    
            document.getElementById('second-number').value*1;//第二种
    
    
             document.getElementById("result").innerHTML =
    
              Number(document.getElementById('first-number').value) +
    
              Number(document.getElementById('second-number').value);//第三种
    
          }
    

    二、简单语法汇总

    简单指令
    alert(""); 提示框;
    confirm(""); 确认框,点击后会响应返回true或false;
    prompt(); 弹出一个输入框;
    document.write("");
    console.log(""); 在控制台打印相应的信息;
    console.dir(""); 在控制台打印出该对象的所有信息;

    数组Array

    (1)、定义法
    构造函数:
    var arr = new Array("123","abc","xxx");
    字面量:
    var arr = ["123","646","abc"];
    数组长度:
    var arr = new Array(6);(数组长度为6);
    (2)、赋值
    arr[0]=1;

    匿名函数
    匿名函数的name属性值为anonymous;
    函数仅用一次的情况,即用即废;
    eg:
    setTimeout(function(){
    console.log(this.name);
    },1000);
    tips:在1秒后在控制台打印出本函数的名称;
    回调函数
    在一个函数当中,另一个函数作为参数传入该函数中,另一个的这个函数即为回调函数;
    eg:
    function atack(callback){
    return callback;
    }
    tips:在调用该函数时,指定callback是哪个函数;
    atack(func);

    自执行函数
    (function func2(){
    })()
    tips:在函数定义的结束最后写入一个(),该函数定义完成后直接被调用执行;
    递归
    在函数执行的最后再一次的调用自身;
    tips:递归是一种非常耗资源的做法,通常为了简化运算,还会结合缓存进行;
    并且注意,递归必须要有结束判断条件(if),否则该函数被调用后就是死循环
    (Array)数组对象

    (1)、arr1.concat(arr2);
    数组拼接,结果为将arr2拼接到arr1的最后;

    (2)、arr.join();
    数组字符串输出,括号内可以指定元素连接的符号;
    eg:
    arr=["a","b","c","d"];
    console.log(arr.join("|")); (结果为"a|b|c|d")

    (3)、arr.pop();
    切除数组的最后一个元素,返回值为该元素;

    (4)、arr.slice(start,end)
    获取,获取数组的指定片段,start必须有,如果参数为负数则从末尾开始选取;
    返回值为该片段组成的,一个新的数组;

    (5)、arr.push
    添加,用于向数组的末尾添加新的元素,参数可以是多个;
    返回值为数组的新长度;

    (6)、arr.splice
    1、用于向数组中指定的索引添加元素;
    arr.splice(2, 0, "William","asdfasdf");
    在第2个元素开始,删除的元素个数(可以为0,为0到结尾),
    加入元素为"William"、"asdfasdf";

    替换数组中的元素
    arr.splice(2,1,"William");

    用于删除数组中的元素
    arr.splice(2,2);

    (7)、arr.indexOf(element);
    查找,在数组中查找element,返回值为索引,如果没有该元素返回-1;

    (8)、arr.sort(function);
    排序,function为一个函数;
    eg:
    function sortNumber(a,b){
    return a-b;
    }
    arr.sort(sortNumber);(从小到大排序)
    tips:如果a-b改成b-a,那么执行的操作为从大到小;
    tips:字符串对象(String)的方法与Array的方法类似;

    (Date)日期对象
    date.getTime()
    date.getMilliseconds()
    date.getSeconds()
    date.getMinutes()
    date.getHours()
    date.getDay()
    date.getDate()
    date.getMonth()
    date.getFullYear()

    substring(start,end) 截取从start开始,end结束的字符,
    返回一个新的字符串,若start为负数,那么从最后一个字符开始;
    substr(start,length) 截取从start开始,length长度的字符,得到一个新的的字符串
    indexOf(char) 获取指定字符第一次在字符串中的位置
    lastIndexOf(char) 获取指定字符最后一次出现在字符串中的位置
    trim() 去除字符串前后的空白
    toUpperCase()
    toLocaleUpperCase() 转换为大写
    toLowerCase()
    toLocaleLowerCawse() 转换为小写
    replace() 替换字符
    split() 分割字符串为数组

    自定义对象
    对象:无序属性的集合;
    特征:属性(key);
    行为:方法(value);
    js是基于对象的弱类型语言;
    继承:基于类,子类可以从父类得到的特征;

    工厂模式:定义一个function构造函数,作为对象,要创建对象直接调用该构造函数,加new关键字;
    构造函数:定义对象的函数,里面存有该对象拥有的基本属性和方法;
    命名首字母大写,this会自动指代当前对象;
    访问对象属性:
    obj[key];
    obj.key;
    遍历对象:
    for(key in obj){
    key 为属性名;
    obj[key] 为属性值(value);
    }
    JSON
    {
    "name" : "李狗蛋",
    "age" : 18,
    "color" : "yellow"
    }
    1、 所有的属性名,必须使用双引号包起来;
    2、 字面量侧重的描述对象,JSON侧重于数据传输;
    3、 JSON不支持undefined;
    4、 JSON不是对象,从服务器发来的json一般是字符串,
    通过JSON.parse(jsonDate.json)可以将其转换成js对象;

    JS解析
    (1)、作用域
    全局作用域:整个代码所有地方都可以调用;
    局部作用域:在函数内部声明的变量,只可以在函数内部使用;
    (2)、变量提升和函数提升
    预解析:在解析的时候,var和function都会被提升到代码的最顶端;
    但是赋值操作不会被提升,定义和函数才会被提升;
    if里面的变量定义也会被提升,但是赋值操作不会;

    其他细节(tips)
    (1)、元素由对象组成的数组进行排序
    eg:
    var data = [
    {title: "老司机", count: 20},
    {title: "诗人", count: 5},
    {title: "歌手", count: 10},
    {title: "隔壁老王", count: 30},
    {title: "水手", count: 7},
    {title: "葫芦娃", count: 6},
    ];
    //该数组的元素都为对象。我们需求为根据count的值给数组重新排序。
    //解决方案:使用sort方法,对传入的函数做手脚。

     function sortArr(a,b){
           return a.count > b.count;   
       }
       data.sort(sortArr);
    

    原本的a和b的比较方法变成a.count和b.count;
    至此,data将以count值从小到大排列。

    tips:Array对象的sort方法传入的为比较函数,比较函数里return排序比较的方法;
    原始的sort方法传入的函数内部return的值为a>b,
    通过修改sort传入的函数,可以实现对元素为对象的数组的排序!

    相关文章

      网友评论

          本文标题:第十六次课程小结

          本文链接:https://www.haomeiwen.com/subject/hvihvctx.html