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 主要用于遍历对象的可枚举属性,包括自有属性. ...
随机推荐
- 知识点简单总结——Lyndon分解
知识点简单总结--Lyndon分解 Lyndon串 定义:一个字符串的最小后缀就是整个串本身. 等效理解:这个串为其所有循环表示中最小的. Lyndon分解 定义:将字符串分割为 $ s_{1} s_ ...
- CF1479B Painting the Array（贪心+DP）
题目大意:给你一个序列,让你提取出一个子序列A,剩余的部分组成子序列B,现定义seg(x)表示把序列x中相邻的相同数合并成一个数后,序列x的长度,分别求seg(A)+seg(B)的最大值和最小值,n= ...
- ShardingSphere-Proxy(一)
1.现实中的问题 我们知道数据库的数据,基本80%的业务是查询,20%的业务涵盖了增删改,经过长期的业务变更和积累数据库的数据到达了一定的数量之后,直接影响的是用户与系统的交互,查询时的速度,插入数据 ...
- 从零开始，开发一个 Web Office 套件（13）：删除、替换已选中文字
这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一 ...
- XStream类对象把List<javaBean>()转成json数据
[省市联动] Servlet端: XStream把list转成json数据 //JSONArray-->变成数组/集合[] //JSONObject-->变成简单的数据{name:ayee ...
- 利用 ps 怎么显示所有的进程? 怎么利用 ps 查看指定进程的信息？
ps -ef (system v 输出)ps -aux bsd 格式输出ps -ef | grep pid
- 请说说你对Struts2的拦截器的理解?
Struts2拦截器是在访问某个Action或Action的某个方法,字段之前或之后实施拦截,并且Struts2拦截器是可插拔的,拦截器是AOP的一种实现． 拦截器栈(Interceptor Stac ...
- mybatis源码之我见
以前一直想看mybatis的源代码,但是一直没找到入口(傻),最近看教程,有些感悟. 和起以前一样,关键代码我会用红色标记. 首先,先贴下我的dao和mapper,代码很简单,和平时写的hello w ...
- 为什么HTTP/3要基于UDP？可靠吗？
目录 前言 为什么转用UDP? HTTP/3解决了那些问题? 队头阻塞问题 QPACK编码 Header 参考 推荐阅读: 计算机网络汇总 HTTP/3竟然是基于UDP的!开始我也很疑惑,UDP传输不 ...
- WzwJDBC 自定义工具类(获取连接,释放资源)
package wzwUtil;import java.io.IOException;import java.io.InputStream;import java.sql.*;import java. ...