JavaScript - 精简

Posted 2020-09-19 Mr_liyang

  javascript 对象

　１　什么是对象？
　　　对象只是一种特殊的数据，对象拥有属性和方法．

　２　对象有哪些？
　　　js中所有的事物都是对象：字符串，数值，数组，函数．
　　　js允许自定义对象．提供多个内建对象．
　　　比如：String , Date,　Array等．
　　　布尔型，数字型，字符串，日期，数学和正则表达式，数组，函数

　３　怎么访问对象的属性．

　　    属性是与对象相关的值，

      访问对象属性的语法是：objectName.propertyName (对象名.属性名)．
　　　eg:
        　使用String对象的length属性来获得字符串的长度．

    　　　　var username="Hello world!";
           var x = username.length;


２　访问对象的方法？
　　　  方式是能够在对象上执行的操作．
　　　　访问对象的语法是：objectName.methodName() / (对象名.方法名);
       eg:
　　　　　　使用String的方法toUpperCase()方法将文本转换为大写．

　　　　　　var message = "Hello world!";
          var x= message.toUpperCase();

    3 如何创建一个对象？
    　　
　　　　创建对象的两种不同的方法　

　　　　１　定义并创建对象的实例．

　 eg:
      var person=new Object();
      person.firstname="John";
      person.lastname="Doe";
      person.age=50;
      person.eyecolor="blue";
      document.write(person.firstname + " is " + person.age + " years old.");


      2 literals 直接创建对象实例

        literals创建对象实例是一种简化方法.

    eg:
     person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
     document.write(person.firstname + " is " + person.age + " years old.");



3　使用函数来定义对象，然后创建新的对象实例．

   (1) 使用对象构造器
　　　　  function person(firstname,lastname,age,eyecolor){
              this.firstname=firstname;
              this.lastname=lastname;
              this.age=age;
            this.eyecolor=eyecolor;
　　　　}
  myFather=new person("John","Doe",50,"blue");
  document.write(myFather.firstname + " is " + myFather.age + " years old.");

  　 (2) 创建对象实例
        您有了对象构造器，就可以创建新的对象实例：
        var myFather=new person("John","Doe",50,"blue");
        var myMother=new person("Sally","Rally",48,"green");

    （３）把属性添加到javascript对象．

          person.firstname="John";
          person.lastname="Doe";
          person.age=30;
          person.eyecolor="blue";

          x=person.firstname;

    （４）把方法添加到javascript对象

    　　  eg:

    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;
  　         }
  　　　  }
          myMother=new person("Sally","Rally",48,"green");
          myMother.changeName("Doe");
          document.write(myMother.lastname);

４　for....in 循环　

  　　　１　for....in 语句循环遍历对象的属性．

  　　　２　语法：　
　　　　　　for(variable in object){

                执行当然代码块．．．．
          }　

　　　　　注意：for...in 循环中的代码块针对每个属性执行一次．　

　　　　　eg: 循环遍历对象的属性

        function myFunction(){
              var x;
              var txt="";
              var person={fname:"Bill",lname:"Gates",age:56};
              for (x in person){
              　    txt=txt + person[x];
              }
              　　document.getElementById("demo").innerhtml=txt;
          }


５　String 对象　

    （1） String 用于处理已有的字符块．
     (2)　一个字符串用于储存一系列的字符＂liyang wangming＂
         也可是单引号或者是双引号．

     (3)　使用位置索引可以访问字符串的任何字符．
　　　　　 var char = carname[2];
         注意：字符串都是从０开始，所以字符串的第一位是[0],第二位是[1].

         eg:  var username ="li yang";
              var char = username[7];
              alert(char);

     (4) 使用转义字符

         　var carname1="Volvo XC60";
          var carname2=‘Volvo XC60‘;
          var answer1=‘It\‘s alright‘;
          var answer2="He is called \"Johnny\"";
          var answer3=‘He is called "Johnny"‘;
          document.write(carname1 + "<br>")
          document.write(carname2 + "<br>")
          document.write(answer1 + "<br>")
          document.write(answer2 + "<br>")
          document.write(answer3 + "<br>")

    (5)字符串使用长度属性length来计算字符串的长度.
 　　　　eg :
            var txt = "Hello World!";
            document.write("<p>" + txt.length + "</p>");
            var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            document.write("<p>" + txt.length + "</p>");

     (6) 　字符串查找字符串
     　　字符串使用indexOf()来定位字符串中某个指定的字符首次出现的位置.
        eg:　
        　　　 <p id="p1">I love you</p>
　　　　　　　  <p id="p2">0</p>
            　<button onclick="myFunction()">点我</button>
              <script>
                  function myFunction(){
                          var str=document.getElementById("p1").innerHTML;
                          var n=str.indexOf("you");
                          document.getElementById("p2").innerHTML=n;
                  }
              </script>

        注意：　如果没找到对应的字符函数返回-1

　　　　　　　　　lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。

　　　　(7)　内容匹配　
　　　　　　match()函数用来查找字符串中特定的字符，如果找到的话，则返回这个字符．

　　　　　eg:
              var str="Hello world!";
              document.write(str.match("world") + "<br>");
              document.write(str.match("World") + "<br>");
              document.write(str.match("world!"));

       (8) 替换内容　
       　　　replace()方法在字符串中用些字符替换另一些字符．

       　　eg:
            <p>替换 "Microsoft" 为 "Runoob" :</p>
            <button onclick="myFunction()">点我</button>
            <p id="demo">请访问 Microsoft!</p>

            function myFunction() {
                var str = document.getElementById("demo").innerHTML;
                var txt = str.replace("Microsoft","Runoob");
                document.getElementById("demo").innerHTML = txt;
            }

        (9)  字符串大小写的转换．
        　　　字符串大小写的转换使用函数 toUpperCase() / toLowerCase()
             注意：该方法返回一个新的字符串，源字符串没有被改变。
          eg:
          var txt="Hello World!";
          document.write("<p>" + txt.toUpperCase() + "</p>");
          document.write("<p>" + txt.toLowerCase() + "</p>");
          document.write("<p>" + txt + "</p>");

       (10) 字符串转数组．　
           字符串使用split()函数转为数组.
       　eg:
         function myFunction(){
                  var str="a,b,c,d,e,f";  // 字符串．
                  txt.split(",");   // 使用逗号分隔
                  txt.split(" ");   // 使用空格分隔
                  txt.split("|");   // 使用竖线分隔
                  document.getElementById("demo").innerHTML=n[3];
            }


6  Array(数组) 对象

       (1)数组对象: 使用单独的变量名来存储一系列的值.
       (2)怎么创建一个数组
          三种方式
          1 常规方式.
             eg:  var myCars=new Array();
                  myCars[0]="Saab";
                  myCars[1]="Volvo";
                  myCars[2]="BMW";
          2 简洁方式.
            eg :
             var myCars=new Array("Saab","Volvo","BMW");

          3 字面
            eg:
             var myCars=["Saab","Volvo","BMW"];

        (3)访问数组

           通过指定的数组名和索引号码,可以访问某个特定的元素.
           一 以下实例可以访问myCars数组的第一个值：
           var name=myCars[0];

           二 以下实例修改了数组 myCars 的第一个元素:
           myCars[0]="Opel";

        注意: [0] 是数组的第一个元素。[1] 是数组的第二个元素。

       (4) 合并两个数组- concat();
            eg:
                var hege = ["Cecilie", "Lone"];
                var stale = ["Emil", "Tobias", "Linus"];
                var kai = ["Robin"];
                var children = hege.concat(stale,kai);
                document.write(children);

       (5) 用数组的元素组成字符串 - join().
          eg:
            function myFunction(){
                var fruits = ["Banana", "Orange", "Apple", "Mango"];
                var x=document.getElementById("demo");
                x.innerHTML=fruits.join();
            }

       (6)删除数组的最后一个元素 - pop().
          eg:
          var fruits = ["Banana", "Orange", "Apple", "Mango"];
          function myFunction(){
              fruits.pop();
              var x=document.getElementById("demo");
              x.innerHTML=fruits;
          }

        (7)数组的末尾添加新的元素 - push().
          eg:
          var fruits = ["Banana", "Orange", "Apple", "Mango"];
          function myFunction(){
              fruits.push("Kiwi")
              var x=document.getElementById("demo");
              x.innerHTML=fruits;
          }

        (8) 将一个数组中的元素的顺序反转排序 - reverse()
          eg:
          var fruits = ["Banana", "Orange", "Apple", "Mango"];
          function myFunction(){
              fruits.reverse();
              var x=document.getElementById("demo");
              x.innerHTML=fruits;
          }

         (9) 删除数组中的第一个元素  - shift().
           eg:
           var fruits = ["Banana", "Orange", "Apple", "Mango"];
           function myFunction(){
              var delell = fruits.shift();
              var x=document.getElementById("demo");
              x.innerHTML= ‘删除后数组为：‘ +  fruits;
              document.getElementById("demo2").innerHTML=
              ‘删除的元素是：‘ +  delell;
           }

          (10) 从一个数组中选择元素 - slice().
            eg:
            function myFunction(){
              var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
              var citrus = fruits.slice(1,3);
              var x=document.getElementById("demo");
              x.innerHTML=citrus;
           }

          (11) 数组排序  - sort().
            1 按字母顺序排列
              eg:
              function myFunction(){
                  var fruits = ["Banana", "Orange", "Apple", "Mango"];
                  fruits.sort();
                  var x=document.getElementById("demo");
                  x.innerHTML=fruits;
                }

            2 按数字顺序升序
              eg:
              function myFunction(){
                    var points = [40,100,1,5,25,10];
                    points.sort(function(a,b){return a-b});
                    var x=document.getElementById("demo");
                    x.innerHTML=points;
                }

            3 按数字顺序降序
            function myFunction(){
                    var points = [40,100,1,5,25,10];
                    points.sort(function(a,b){return b-a});
                    var x=document.getElementById("demo");
                    x.innerHTML=points;
             }

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

          function myFunction(){
                var fruits = ["Banana", "Orange", "Apple", "Mango"];
                fruits.splice(3,0,"Lemon","Kiwi");
                var x=document.getElementById("demo");
                x.innerHTML=fruits;
          }

          (13) 转化数组到字符串 - toString().

          function myFunction(){
                var fruits = ["Banana", "Orange", "Apple", "Mango"];
                var str = fruits.toString();
                var x=document.getElementById("demo");
                x.innerHTML= str;
           }

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

          function myFunction(){
               var fruits = ["Banana", "Orange", "Apple", "Mango"];
               fruits.unshift("Lemon","Pineapple");
               var x=document.getElementById("demo");
               x.innerHTML=fruits;
           }

  七  Math(算数) 对象

      1 作用: 执行常见的算术任务.

      2 如何使用 random() 来返回 0 到 1 之间的随机数 - random()
       eg:
         function myFunction(){
             document.getElementById("demo").innerHTML=Math.random();
         }

      3 如何使用 max() 来返回两个给定的数中的较大的数 - max().
        (该方法只有两个参数)
        eg:
        function myFunction(){
            document.getElementById("demo").innerHTML=Math.max(5,10);
         }

      4  如何使用 min() 来返回两个给定的数中的较小的数 - min().
         (该方法只有两个参数)

        function myFunction(){
           document.getElementById("demo").innerHTML=Math.min(5,10);
        }