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>
JS_进阶-遍历对象属性、数组输出、Math、正则表达式匹配的更多相关文章
- js遍历对象属性
对象虽然与数组一样,都是数据的集合. 因为对象中的数据是处于无序状态,不能像数组那样,使用下标来遍历对象的所有属性. 如果要遍历对象属性,就必须要使用for in 语句. var a={ A1=180 ...
- javaScript遍历对象、数组总结（转载）
javaScript遍历对象.数组总结 转载来源 https://www.cnblogs.com/chenyablog/p/6477866.html 在日常工作过程中,我们对于javaScript遍 ...
- ES6之6种遍历对象属性的方法
ES6之6种遍历对象属性的方法 for ... in 循环遍历对象自身的和继承的可枚举属性(不含Symbol属性). Obejct.keys(obj),返回一个数组,包括对象自身的(不含继承的)所有可 ...
- JS/jQuery 遍历对象属性
Javascript For/In 循环: 循环遍历对象的属性 var person={fname:"John",lname:"Doe",age:25}; fo ...
- JS遍历对象和数组总结
在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天把经常用到的方法总结一下! 一.遍历对象 1.使用Object.keys()遍历 返回一个数组,包括对象自身的(不 ...
- JavaScript 遍历对象、数组总结
在日常工作过程中,我们对于javaScript遍历对象.数组的操作是十分的频繁的,今天抽空把经常用到的方法小结一下,方便今后参考使用! javaScript遍历对象总结 1.使用Objec ...
- jquery中each遍历对象和数组示例
通用遍历方法,可用于遍历对象和数组.$().each(),回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应变量或内容.如需退出each循环可使回调函数返回false 现有如下两个s ...
- [C#]反射遍历对象属性
/// <summary> /// C#反射遍历对象属性 /// </summary> /// <typeparam name="T">对象类型 ...
- js 遍历对象属性(for in、Object.keys、Object.getOwnProperty) 以及高效地输出 js 数组
js中几种遍历对象的方法,包括for in.Object.keys.Object.getOwnProperty,它们在使用场景方面各有不同. for in 主要用于遍历对象的可枚举属性,包括自有属性. ...
随机推荐
- vue自定义指令？
除核心指令之外的指令, 使用directive进行注册. 指令自定义钩子函数: bind, inserted, update, componentUpdated, unbind
- Java 枚举和单例模式?
编写 Java 程序时, 如何在 Java 中创建死锁并修复它?经典但核心Java面试问题之一.如果你没有参与过多线程并发 Java 应用程序的编码,你可能会失败.如何避免 Java 线程死锁?如何避 ...
- java-字节流-字符流
I/O叙述 FileOutputStream类字节输出流的介绍: 写入数据的原理 java程序-->JVM(java虚拟机)--->OS(操作系统)---->OS调用写数据的方法-- ...
- SqlMapConfig.xml文件详解
SqlMapConfig.xml 是 mybatis 的全局配置文件,配置内容如下: properties(属性) settings(全局配置参数) typeAliases(类型别名) typeHan ...
- Redis缓存穿透、缓存雪崩、缓存击穿
缓存穿透: 缓存穿透,是指查询一个数据库一定不存在的数据.正常的使用缓存流程大致是,数据查询先进行缓存查询,如果key不存在或者key已经过期,再对数据库进行查询,并把查询到的对象,放进缓存.如果 ...
- piwik安装部署
1.piwik介绍 Piwik是一个PHP和MySQL的开放源代码的Web统计软件,它给你一些关于你的网站的实用统计报告,比如网页浏览人数,访问最多的页面,搜索引擎关键词等等. Piwik拥有众多不同 ...
- FPGA入门到精通系列1：数字电路基础知识
本文主要介绍数字电路基础知识,用最简洁的内容介绍最核心的知识. 1.数字电路是什么? 数字电路是利用电源电压的高电平和低电平分别表示1和0,进而实现信息的表达.模拟信号:随时间连续变化的信号.处理 ...
- python模块 | 时间处理模块—datetime模块
在python中,与时间处理相关的模块有 time,datetime,calendar. 时间的两个概念: UTC(世界协调时): 整个地球分为二十四时区,每个时区都有自己的本地时间.格林威治天文时间 ...
- pushbutton 移动端弹出列表选择框
pushbutton 移动端弹出列表选择框 移动端从下往上推动画效果端弹出列表选择框,适应所有主流移动端机型,支持Node引入,require引入;如有用得不爽可以随时提意见,谢谢. demo地址: ...
- CentOS系统Tomcat 8.5或9部署SSL证书
本文档介绍了CentOS系统下Tomcat 8.5或9部署SSL证书的操作说明. 环境准备 操作系统:CentOS 7.6 64位 Web服务器:Tomcat 8.5或9 前提条件 已从阿里云SSL证 ...