JavaScript学习笔记（五）

JavaScript学习笔记（五) JavaScript 对象

• 学习记录，仅供参考。

JavaScript 对象

• 对象只是一种特殊的数据。对象拥有属性和方法。

访问对象的属性

• 属性是与对象相关的值。
• 访问对象属性的语法是objectName.propertyName

访问对象的方法

• 方法是能够在对象上执行的动作。
• 调用方法的语法是objectName.methodName()

创建 JavaScript 对象

• 创建新对象有两种不同的方法：
  • 使用 Object 定义并创建对象的实例。
  • 使用函数来定义对象，然后创建新的对象实例。

使用 Object

• 在 JavaScript 中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法。

• Object 构造函数创建一个对象包装器。

• Object 构造函数，会根据给定的参数创建对象，具体有以下情况：

  • 如果给定值是 null 或 undefined，将会创建并返回一个空对象。
  • 如果传进去的是一个基本类型的值，则会构造其包装类型的对象。
  • 如果传进去的是引用类型的值，仍然会返回这个值，经他们复制的变量保有和源对象相同的引用地址。
  • 当以非构造函数形式被调用时，Object 的行为等同于 new Object()。

• 语法格式

  • new Object([value])

• 使用对象字面量来创建对象

  • { name1 : value1, name2 : value2,...nameN : valueN }

• 其实就是大括号里面创建 name:value 对，然后 name:value 对之间以逗号 , 隔开。

使用对象构造器

•   function person(firstname,lastname,age,eyecolor)
    {
        this.firstname=firstname;
        this.lastname=lastname;
        this.age=age;
        this.eyecolor=eyecolor;
    }
  

创建JS对象实例

•   var myFather=new person("John","Doe",50,"blue");
    var myMother=new person("Sally","Rally",48,"green");
  

把属性添加到 JavaScript 对象

• 方法只不过是附加在对象上的函数。

• 在构造器函数内部定义对象的方法

  •   function person(firstname,lastname,age,eyecolor)
      {
          this.firstname=firstname;
          this.lastname=lastname;
          this.age=age;
          this.eyecolor=eyecolor;
      
          this.changeName=changeName;
          function changeName(name)
          {
              this.lastname=name;
          }
      }
    

JavaScript 类

• JavaScript 是面向对象的语言，但 JavaScript 不使用类。
• 在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。
• JavaScript 基于 prototype，而不是基于类的。

JavaScript for … in 循环

• JavaScript for…in 语句循环遍历对象的属性。

语法

•   for (variable in object)
    {
        执行的代码……
    }
    //注意： for...in 循环中的代码块将针对每个属性执行一次。
  

实例

•   //循环遍历对象的属性：
    var person={fname:"John",lname:"Doe",age:25}; 
     
    for (x in person)
    {
        txt=txt + person[x];
    }
  

JavaScript 的对象是可变的

• 对象是可变的，它们是通过引用来传递

JavaScript prototype（原型对象）

• 所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

使用对象的构造器（constructor）

•   function Person(first, last, age, eyecolor) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eyecolor;
    }
     
    var myFather = new Person("John", "Doe", 50, "blue");
    var myMother = new Person("Sally", "Rally", 48, "green");
  

prototype继承

• 所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法：
  • Date 对象从 Date.prototype 继承。
  • Array 对象从 Array.prototype 继承。
  • Person 对象从 Person.prototype 继承。
• 所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。
• JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。
• Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

添加属性和方法

•   //使用 prototype 属性就可以给对象的构造函数添加新的属性
    function Person(first, last, age, eyecolor) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eyecolor;
    }
     
    Person.prototype.nationality = "English";
  

•   //使用 prototype 属性就可以给对象的构造函数添加新的方法
    function Person(first, last, age, eyecolor) {
      this.firstName = first;
      this.lastName = last;
      this.age = age;
      this.eyeColor = eyecolor;
    }
     
    Person.prototype.name = function() {
      return this.firstName + " " + this.lastName;
    };
  

JavaScript Number 对象

• 均为64位的数字

• 精度15位

• infinity 无穷大

• NaN 非数字值

• 数字可以是数字或对象

• Number 属性

  属性	描述
  Number.MAX_VALUE	最大值
  Number.MIN_VALUE	最小值
  Number.NaN	非数字
  Number.NEGATIVE_INFINITY	负无穷，在溢出时返回
  Number.POSITIVE_INFINITY	正无穷，在溢出时返回
  Number.EPSILON	表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别
  Number.MIN_SAFE_INTEGER	最小安全整数。
  Number.MAX_SAFE_INTEGER	最大安全整数。

• 数字方法

  方法	描述
  Number.parseFloat()	将字符串转换成浮点数，和全局方法 parseFloat() 作用一致。
  Number.parseInt()	将字符串转换成整型数字，和全局方法 parseInt() 作用一致。
  Number.isFinite()	判断传递的参数是否为有限数字。
  Number.isInteger()	判断传递的参数是否为整数。
  Number.isNaN()	判断传递的参数是否为 isNaN()。
  Number.isSafeInteger()	判断传递的参数是否为安全整数。

• 数字类型原型上的一些方法

  方法	描述
  toExponential()	返回一个数字的指数形式的字符串，如：1.23e+2
  toFixed()	返回指定小数位数的表示形式。var a=123; b=a.toFixed(2); // b="123.00"
  toPrecision()	返回一个指定精度的数字。如下例子中，a=123 中，3会由于精度限制消失:var a=123; b=a.toPrecision(2); // b="1.2e+2"

JavaScript String

• 字符串的索引从零开始
• 使用长度属性length来计算字符串的长度
• 使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置
  • 如果没找到对应的字符函数返回-1
  • lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。

内容匹配

• **match()**函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

替换内容

• replace() 方法在字符串中用某些字符替换另一些字符。

字符串大小写转换

• 字符串大小写转换使用函数 toUpperCase() / toLowerCase():

字符串转为数组

• 字符串使用**split()**函数转为数组

特殊字符

• Javascript 中可以使用反斜线（\）插入特殊符号，如：撇号,引号等其他特殊符号。
• 使用反斜线来转义引号：
  • var txt=“We are the so-called “Vikings” from the north.”;
    document.write(txt);

字符串属性和方法

• 属性:
  • length
  • prototype
  • constructor
• 方法:
  • charAt()
  • charCodeAt()
  • concat()
  • fromCharCode()
  • indexOf()
  • lastIndexOf()
  • match()
  • replace()
  • search()
  • slice()
  • split()
  • substr()
  • substring()
  • toLowerCase()
  • toUpperCase()
  • valueOf()

JavaScipt Date（日期）对象

•   Date.prototype.format = function (fmt) {
      var o = {
        "M+": this.getMonth() + 1,                   //月份
        "d+": this.getDate(),                        //日
        "h+": this.getHours(),                       //小时
        "m+": this.getMinutes(),                     //分
        "s+": this.getSeconds(),                     //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()                  //毫秒
      };
    
      //  获取年份 
      // ①
      if (/(y+)/i.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
      }
    
      for (var k in o) {
        // ②
        if (new RegExp("(" + k + ")", "i").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        }
      }
      return fmt;
    }
    
    var now = new Date();
    var nowStr = now.format("YYYY-MM-DD"); // 2021-01-11
  

JavaScript Array（数组）对象

• 创建一个数组

  • 1: 常规方式:

    var myCars=new Array();
    myCars[0]=“Saab”;
    myCars[1]=“Volvo”;
    myCars[2]=“BMW”;

  • 2: 简洁方式:

    • var myCars=new Array("Saab","Volvo","BMW");

  • 3: 字面:

    • var myCars=["Saab","Volvo","BMW"];

• 访问数组

  • 通过指定数组名以及索引号码，你可以访问某个特定的元素。
    • 以下实例可以访问myCars数组的第一个值：
      • var name=myCars[0];
    • 以下实例修改了数组 myCars 的第一个元素:
      • myCars[0]="Opel";

• 数组中可以有不同对象

  • myArray[0]=Date.now;
    myArray[1]=myFunction;
    myArray[2]=myCars;
    

• 数组方法和属性

  •   //使用数组对象预定义属性和方法：
      
      var x=myCars.length             // myCars 中元素的数量
      var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值
    

• 创建新方法

  •   //创建新方法
      //原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。
      
      //实例：创建一个新的方法。
      Array.prototype.myUcase=function(){
          for (i=0;i<this.length;i++){
              this[i]=this[i].toUpperCase();
          }
      }
    

• 合并两个数组 - concat()

• 合并三个数组 - concat()

• 用数组的元素组成字符串 - join()

• 删除数组的最后一个元素 - pop()

• 数组的末尾添加新的元素 - push()

• 将一个数组中的元素的顺序反转排序 - reverse()

• 删除数组的第一个元素 - shift()

• 从一个数组中选择元素 - slice()

• 数组排序（按字母顺序升序）- sort()

• 数字排序（按数字顺序升序）- sort()

• 数字排序（按数字顺序降序）- sort()

• 在数组的第2位置添加一个元素 - splice()

• 转换数组到字符串 -toString()

• 在数组的开头添加新元素 - unshift()

JavaScript Boolean（布尔） 对象

• Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。
• 创建布尔对象
  • var myBoolean=new Boolean();
  • 如果布尔对象无初始值或者其值为:
    • 0
    • -0
    • null
    • “”
    • false
    • undefined
    • NaN
  • 那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 “false” 时）！

JavaScript Math（算数）对象

• Math（算数）对象的作用是：执行常见的算数任务。
• round()
  • 对一个数进行四舍五入。
• random()
• 返回 0 到 1 之间的随机数。
• max()
• 返回两个给定的数中的较大的数。（在 ECMASCript v3 之前，该方法只有两个参数。）
• min()
• 返回两个给定的数中的较小的数。（在 ECMASCript v3 之前，该方法只有两个参数。

Math 对象

• Math（算数）对象的作用是：执行普通的算数任务。

• Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

• 使用 Math 的属性/方法的语法：

  • var x=Math.PI;
  • var y=Math.sqrt(16);

算数值

• JavaScript 提供 8 种可被 Math 对象访问的算数值

•   Math.E
    Math.PI
    Math.SQRT2
    Math.SQRT1_2
    Math.LN2
    Math.LN10
    Math.LOG2E
    Math.LOG10E
  

JavaScript RegExp对象

• RegExp：是正则表达式（regular expression）的简写。

语法

•   var patt=new RegExp(pattern,modifiers);
    
    //或更简单的方法
    
    var patt=/pattern/modifiers;
  

• 模式描述了一个表达式模型。

• 修饰符(modifiers)描述了检索是否是全局，区分大小写等。

• 当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \）。比如，以下是等价的：

  var re = new RegExp("\\w+");
  var re = /\w+/;
  

RegExp 修饰符

• 修饰符用于执行不区分大小写和全文的搜索。

• i - 修饰符是用来执行不区分大小写的匹配。

• g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。

• 在字符串中不区分大小写找"runoob"

  • var str = "Visit RUnoob";
  • var patt1 = /runoob/i;

• 全文查找"is"

  • var str="Is this all there is?";
  • var patt1=/is/g;

• 全文查找和不区分大小写搜索 “is”

  • var str="Is this all there is?";
  • var patt1=/is/gi;

test()

• test()方法搜索字符串指定的值，根据结果并返回真或假。

• var patt1=new RegExp("e");

• document.write(patt1.test("The best things in life are free"));

exec()

• exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

• var patt1=new RegExp("e");

• document.write(patt1.exec("The best things in life are free"));