JS 学习（四）对象

对象

  • 在JS中，对象是数据（变量），拥有属性和方法。
  • JS中所有事物都是对象：字符串、数字、数组、日期等。
  • 对象是拥有属性和方法的特殊数据类型。
    • 属性是与对象相关的值。
    • 方法是能够在对象上执行的动作。
// 对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
var myDog = {
    age : 20,        //也可以这样写 'age' : 20      "age" : 20
    name : 'rose'
};

// 对象属性有两种寻址方式
console.log(myDog.name);
console.log(myDog['name']); // 这种方括号里面只能传字符串，不加引号系统会认为是一个变量

  • 自己创建对象
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
document.write(person.firstname + " is " + person.age + " years old.");

JS Number对象

  • number：所有数字，比如小数整数，JS数字均为64位。 JavaScript 中的所有数字都存储为根为 10 的 64 位（8 比特），浮点数。
  • 精度：
    • 整数：最多15位。
    • 小数：最大17位，浮点数运算并不100%准确。
  • Number对象属性：
    • constructor：返回对创建此对象的Number函数的引用。
    • MAX VALUE：
    • MIN VALUE：
    • NaN：非数字值
  • Number对象方法：
    • toString()等

JS 字符串对象

<script type="text/javascript">
    var txt="Hello World!"

    document.write("<p>Big: " + txt.big() + "</p>")
    document.write("<p>Small: " + txt.small() + "</p>")

    document.write("<p>Bold: " + txt.bold() + "</p>")
    document.write("<p>Italic: " + txt.italics() + "</p>")

    document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
    document.write("<p>Fixed: " + txt.fixed() + "</p>")
    document.write("<p>Strike: " + txt.strike() + "</p>")

    document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
    document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")

    document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
    document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")

    document.write("<p>Subscript: " + txt.sub() + "</p>")
    document.write("<p>Superscript: " + txt.sup() + "</p>")

    document.write("<p>Link: " + txt.link("http://www.baidu.com") + "</p>")
</script>

　　

  • indexOf( ) 方法
    • 定位字符串中某个执行的字符首次出现的位置
    • var str="Hello world!"
      document.write(str.indexOf("Hello") +"<br />”)  // 0
      document.write(str.indexOf("World") +"<br />”)  // -1
      document.write(str.indexOf("world”))             // 6

  • match()
    • 查找字符串中特定的字符，找到返回
    • var str="Hello world!"
      document.write(str.match("world") + "<br />”)  // world
      document.write(str.match("World") + "<br />”)  // null

  • replace()
    • var str="Hello World!"
      document.write(str.replace(/Hello/,"你好"))

  • txt.toUpperCase()转为大写

JS Date对象

  • Date()
    • 返回当前日期
    • document.write(Date())
      Wed Aug 17 2016 14:43:23 GMT+0800 (CST)

  • getTime()
    • 返回从1970.1.1至今的毫秒数

  • setFullYear()
    • 设置具体的日期
    • var d = new Date()
      d.setFullYear(1992,10,3) //  表示月份的参数介于 0 到 11 之间。也就是说，如果希望把月设置为 8 月，则参数应该是 7。
      document.write(d)
      Tue Nov 03 1992 14:40:27 GMT+0800 (CST)

  • toUTString()
    • 将当日的日期（根据UTC）转为字符串。
    • var d = new Date()
      document.write (d.toUTCString())
      Wed, 17 Aug 2016 06:42:51 GMT

  • getDay()
    • 返回星期几的Number
    • var d=new Date()
      var weekday=new Array(7)
      weekday[0]="星期日"
      weekday[1]="星期一"
      weekday[2]="星期二"
      weekday[3]="星期三"
      weekday[4]="星期四"
      weekday[5]="星期五"
      weekday[6]="星期六"

      document.write("今天是" + weekday[d.getDay()])
      今天是星期三

  • 显示一个时钟
<html>
<head>
<script type="text/javascript">
function startTime() {
    var today=new Date()
    var h=today.getHours()
    var m=today.getMinutes()
    var s=today.getSeconds()
    // add a zero in front of numbers<10
    m=checkTime(m)
    s=checkTime(s)
    document.getElementById('txt').innerHTML=h+":"+m+":"+s
    t=setTimeout('startTime()',500)
}

function checkTime(i) {
    if (i<10) {
        i="0" + i
    }
    return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

　　

  • 将日期对象设置为 5 天后的日期：
    • var myDate=new Date()
      myDate.setDate(myDate.getDate()+5)
      注意：如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

  • 比较日期
var myDate=new Date();
myDate.setFullYear(2008,8,9);

var today = new Date();

if (myDate > today) {
    alert("Today is before 9th August 2008");
} else {
    alert("Today is after 9th August 2008");
}

JS 数组对象

  • 数组中可以放任意类型的数据
  • 写法一：
    • var cars = new Array();
    • cars[0] = "Audi";
      cars[1] = "BMW";

  • 写法二：
    • var newArr = [10, -5, age, name, result, score, ['哈哈哈', 'dewdew']];

  • 写法三：
    • var names = new Array("jack", "rose", "dd");

  • 也可以使用一个整数自变量来控制数组的容量
    • var arr = new Array(3)
      arr[0] = "111"
      arr[1] = "222"
      arr[2] = "333"

  • 输出数组中的内容，遍历有两种方式
    • for
    • for in

  • 删除最后一个元素,添加一个新的元素到数组中 pop()和push()
    • newArr.pop(); //删除数组中最后的元素
    • newArr.push([‘添加一个新的元素']);

  • concat()合并两个数组
    • var arr = new Array(3)
      arr[0] = "111"
      arr[1] = "222"
      arr[2] = "333"

      var arr2 = new Array(3)
      arr2[0] = "444"
      arr2[1] = "555"
      arr2[2] = "666"

      document.write(arr.concat(arr2))
      111,222,333,444,555,666

  • join（）将数组的所有严肃组成一个字符串
    • var arr = new Array(3);
      arr[0] = "AAA"
      arr[1] = "BBB"
      arr[2] = "CCC"

      document.write(arr.join());  // 默认以“ ，”分割
      document.write("<br />");
      document.write(arr.join("."));
      AAA,BBB,CCC
      AAA.BBB.CCC

  • sort（）
    • 从字面上对数组进行排序
      • var arr = new Array(6)
        arr[0] = "ABB"
        arr[1] = "AAA"
        arr[2] = "DDE"
        arr[3] = "CCCC"
        arr[4] = "C"
        arr[5] = "B"

        document.write(arr + "<br />")
        document.write(arr.sort())
        ABB,AAA,DDE,CCCC,C,B
        AAA,ABB,B,C,CCCC,DDE

    • 从数值上对数组进行排序
      • function sortNumber(a, b) {
            return a - b
        }

        var arr = new Array(6)
        arr[0] = "10"
        arr[1] = "5"
        arr[2] = "40"
        arr[3] = "25"
        arr[4] = "1000"
        arr[5] = "1"

        document.write(arr + "<br />")
        document.write(arr.sort(sortNumber))
        10,5,40,25,1000,1
        1,5,10,25,40,1000
 

JS Boolean（逻辑）对象

  • 我们将Boolean对象理解为一个产生逻辑值得对象包装器。将非逻辑值转换为逻辑值
  • true / false
  • 0、空字符串、null、NaN、-0、undefined 为false
  • 1、’false’(这是一个字符串)为true

JS Math(算数)对象

  • Math对象的作用是：执行普通的算数任务
  • round（）
    • 四舍五入 转换为整数
    • document.write(Math.round(0.50) + "<br />”)   // 1
      document.write(Math.round(0.49) + "<br />”)   // 0
      document.write(Math.round(-4.40) + "<br />”)  // -4
      document.write(Math.round(-4.60))             // -5

  • random（）
    • 返回 0 - 1 之间的随机数

  • max（）/ min（）
    • 返回两个给定的数中的较大/小的数。（ECMASCript v3之前，该方法只有两个参数）
    • document.write(Math.max(7.25, -4, 7.30))  // 7.3

  • 使用 floor() 和 random() 返回0-11之间的随机数
    • floor() 对数进行下舍入
    • document.write(Math.floor(Math.random()*11)) 

JS RegExp对象

  • RegEx是正则表达式的缩写。
  • 当检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp就是这种模式。
  • 简单的模式可以是一个独立的字符，负责的模式可以包括了很多的字符，并可用于解析、格式检查、替换等。可以规定字符串中的检索位置，以及要检索的字符类型。
  • 定义RegExp对象
    • RegExp对象用于存储检索模式。
    • var patt1 = new RegExp(“e”);  // 模式为 e

  • RegEx对象有三个方法：test()、exec()、compile（）

  • test()
    • 检索字符串中的指定值，返回true或false
    • var patt1=new RegExp("e");
      document.write(patt1.test("The best things in life are free"));  // 该字符串存在 e  所以返回true
 
  • exec()
    • 检索字符串中的指定值，返回值是被找到的值。如果没有发现匹配，则返回null.
    • var patt1=new RegExp(“ee");
      document.write(patt1.test("The best things in life are free"));  // ee

  • 向RegExp对象中添加第二个参数，以设定检索。
    • 例如，如果需要找到所有某个字符的所有存在，则可以使用“g”参数（“global”）
    • 参数手册：http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
    • 使用“g”参数时，工作原理：
      • 找到第一个“e”，并存储其位置
      • 如果再次运行exec（），则从存储的位置开始检索，并找到下一个“e”，并存储其位置
      • var patt1=new RegExp("e","g");
        do {
            result=patt1.exec("The best things in life are free");
            document.write(result);
        }
        while (result!=null)
        eeeeeenull

  • compile（）
    • 既可以改变检索模式，也可以添加或删除第二个参数
    • var patt1=new RegExp("e");
      document.write(patt1.test("The best things in life are free")); // true

      patt1.compile("d");
      document.write(patt1.test("The best things in life are free"));  // false 字符串中存在 e 而没有 d   

对象调用方法

function temp(){
    console.log('跑起来');
}
var dog = {
    age : 5,
    run : temp,
    // 一般都是把函数封装到对象的里面
    run2 : function () {
        console.log(this.age + '岁的狗跑起来');  //this == self
    }
};
dog.run();   // JS里的对象是这样调用方法的      跑起来
dog.run2();  //  5岁的狗跑起来

dog.age = 100;    //age变为100
dog.run = function () {
    console.log(this.age + '岁的狗叫了');
};
dog.run(); //  100岁的狗叫了

var dog2 = {
    age : 1
};

dog2.run = dog.run;
dog2.run();  //1岁的狗叫了
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/10-19-92/p/5782947.html