JS_进阶-遍历对象属性、数组输出、Math、正则表达式匹配

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7 <body>
  8     <hr><h1>循环遍历对象“person”的属性</h1>
  9         <button onclick="myFunction()">点击显示循环</button>
 10         <p id="demo"></p>
 11         <p id="demo1"></p>
 12     <hr><h1>数组方法</h1>
 13         <p id="demo2"></p>
 14         <button onclick="myFunction1()">点击将数组作为字符串输出</button>
 15     <hr><h1>Math(算数) 对象</h1>
 16         <p id="demo3"></p>
 17         <button onclick="myFunction2()">点击显示算数</button>
 18     <hr><h1>RegExp:是正则表达式(regular expression)</h1>
 19         <p id="demo4"></p>
 20 
 21     <script>
 22         function myFunction() {
 23             var x,txt = "";
 24             var person={fname:"Bill ",lname: "Gates ",age:56};
 25             for (x in person){
 26                 txt+=person[x];
 27             }
 28             document.getElementById("demo").innerHTML=txt;
 29         }
 30         function person(firstname,lasrname,age,eyecolor) {//使用函数来构造对象
 31             this.firstname = firstname;
 32             this.lastname = lasrname;
 33             this.age = age;
 34             this.eyecolor = eyecolor;
 35             // this.nationality = "English";
 36             this.changeName = changeName;
 37             function changeName(name) {
 38                 this.lastname = name;
 39             }
 40         }
 41         person.prototype.nationality = "English";// 添加属性;相当于this.nationality = "English";
 42         person.prototype.name = function(){return this.firstname + " "+ this.lastname};//给对象的构造函数添加新的方法
 43 
 44         myMother = new person("Sally","Rally",48,"Green");
 45         myMother.changeName("Doe");//changeName() 函数 name 的值赋给 person 的 lastname 属性。
 46         document.getElementById("demo").innerHTML=myMother.nationality;
 47         document.getElementById("demo1").innerHTML=myMother.name();
 48 
 49         document.write(myMother.lastname);
 50         document.write(myMother.firstname,myMother.lastname,myMother.age,myMother.eyecolor);
 51 
 52         var hege = ["Cecilie","Lone"];
 53         var stale = ["Emil","Tobias","Linus"];
 54         var brothers = ["Jani","Tove"];
 55         var Children = hege.concat(stale);//合并两个数组 - concat()
 56         var Children1 = hege.concat(stale,brothers);//合并三个数组 - concat()
 57         document.write(Children);
 58         document.write(Children1);
 59 
 60         function myFunction1() {
 61             var fruits = ["Banana","Orange","Apple","Mango","Lemon"];
 62             var x = document.getElementById("demo2");
 63             x.innerHTML = fruits.join();
 64             fruits.pop();//删除数组的最后一个元素
 65             x.innerHTML = fruits;
 66             fruits.push("Kiwi");//给数组添加新的元素
 67             x.innerHTML = fruits;
 68             fruits.reverse();//将数组反转排序
 69             x.innerHTML = fruits;
 70             fruits.shift();//删除数组的第一个元素
 71             x.innerHTML = fruits;
 72             var citrus = fruits.slice(1,3);//截取数组下标 1 到 2 的元素
 73             x.innerHTML = citrus;
 74             fruits.sort();//字母升序排列数组
 75             x.innerHTML = fruits;
 76             var points = [100,10,15,45,56,77];//数字升序排列数组
 77             points.sort(function (a,b) {return a-b});
 78             x.innerHTML = points;
 79             points.sort(function (a,b) {return b-a});//数字降序排列数组
 80             x.innerHTML = points;
 81             fruits.splice(2,0,"Lemon","Kiwi","Kiwi1");//向数组第2个位置添加元素;0指的是覆盖后面几个元素
 82             x.innerHTML = fruits;
 83             x.innerHTML = fruits.toString();//将数组转为字符串并返回
 84             fruits.unshift("Pineapple","Pineapple1");//在数组的开头插入元素
 85             x.innerHTML = fruits;
 86         }
 87 
 88         document.write("<br>"+Math.floor(Math.random()*11));// floor() 方法和 random() 来返回一个介于 0 和 11 之间的随机数
 89         function myFunction2() {
 90             document.getElementById("demo3").innerHTML=Math.round(2.6);//round 方法对一个数进行四舍五入
 91             document.getElementById("demo3").innerHTML=Math.random();//返回一个介于 0 和 1 之间的随机数
 92             document.getElementById("demo3").innerText = Math.max(2,2.6);//max() 来返回两个给定的数中的较大的数;min() 来返回两个给定的数中的较小的数
 93         }
 94 
 95         var str="Is this all there is?";
 96         var patt1 = /is/gi;//i 不区分大小写的匹配;g 全文的搜索(而不是在找到第一个就停止查找,而是找到所有的匹配)
 97         document.write(str.match(patt1));
 98     </script>
 99 </body>
100 </html>

 

posted @ 2020-08-12 13:48  白月如初12138  阅读(480)  评论(0)    收藏  举报