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>

JS_进阶-遍历对象属性、数组输出、Math、正则表达式匹配的更多相关文章

  1. js遍历对象属性

    对象虽然与数组一样,都是数据的集合. 因为对象中的数据是处于无序状态,不能像数组那样,使用下标来遍历对象的所有属性. 如果要遍历对象属性,就必须要使用for in 语句. var a={ A1=180 ...

  2. javaScript遍历对象、数组总结（转载）

    javaScript遍历对象.数组总结  转载来源 https://www.cnblogs.com/chenyablog/p/6477866.html 在日常工作过程中,我们对于javaScript遍 ...

  3. ES6之6种遍历对象属性的方法

    ES6之6种遍历对象属性的方法 for ... in 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性). Obejct.keys(obj),返回一个数组,包括对象自身的(不含继承的)所有可 ...

  4. JS/jQuery 遍历对象属性

    Javascript For/In 循环: 循环遍历对象的属性 var person={fname:"John",lname:"Doe",age:25}; fo ...

  5. JS遍历对象和数组总结

    在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天把经常用到的方法总结一下! 一.遍历对象 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不 ...

  6. JavaScript 遍历对象、数组总结

    在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用!   javaScript遍历对象总结     1.使用Objec ...

  7. jquery中each遍历对象和数组示例

    通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个s ...

  8. [C#]反射遍历对象属性

    /// <summary> /// C#反射遍历对象属性 /// </summary> /// <typeparam name="T">对象类型 ...

  9. js 遍历对象属性(for in、Object.keys、Object.getOwnProperty) 以及高效地输出 js 数组

    js中几种遍历对象的方法,包括for in.Object.keys.Object.getOwnProperty,它们在使用场景方面各有不同. for in 主要用于遍历对象的可枚举属性,包括自有属性. ...

随机推荐

  1. Java的自动装箱与拆箱(Autoboxing and unboxing)

    一.什么是自动装箱拆箱 很简单,下面两句代码就可以看到装箱和拆箱过程 1 //自动装箱 2 Integer total = 99; 3 4 //自动拆箱 5 int totalprim = total ...

  2. 容器化 | 在 K8s 上部署 RadonDB MySQL Operator 和集群

    作者:程润科 数据库研发工程师 编辑:张莉梅 高级文档工程师 视频:钱芬 高级测试工程师 本文将演示在 Kubernetes 上部署 RadonDB MySQL Kubernetes 2.X(Oper ...

  3. KestrelServer详解[2]: 网络链接的创建

    <注册监听终结点(Endpoint)>已经详细讲述了如何使用KestrelServer,现在我们来简单聊聊这种处理器的总体设计和实现原理.当KestrelServer启动的时候,注册的每个 ...

  4. hanoi(老汉诺塔问题新思维)

    #include <stdio.h> //第一个塔为初始塔,中间的塔为借用塔,最后一个塔为目标塔 int i=1;//记录步数 void move(int n, char from,cha ...

  5. String s = new String("xyz");创建了几个String Object?

    两个.一个是直接量的xyz对象:另一个是通过new Sting()构造器创建出来的String对象. 通常来说,应该尽量使用直接量的String对象,这样具有更好的性能.

  6. 电源PCB布板的10个基本法则

    电容模型 电容并联高频特性 电感模型 电感特性 镜象面概念 高频交流电流环路 过孔 (VIA) 的例子 PCB板层分割 降压式(BUCK)电源:功率部分电流和电压波形 降压式电源排版差的例子 电路等效 ...

  7. Microservices

    Microservices What are Microservices? What are Microservices - microservices.io Microservices - mart ...

  8. css写作建议和性能优化小结

    1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,cs ...

  9. 微信小程序：自定义组件的数据传递

    一.前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.下面介绍一个简单的组件和一个复杂的组件. 二.简单的组件(计数器) 1. 组件功能介绍 这个组件常见于外卖软件 ...

  10. 分享一个react 图片上传组件 支持OSS 七牛云

    react-uplod-img 是一个基于 React antd组件的图片上传组件 支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 排序等功能 需要 react 版本大于 v ...