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 主要用于遍历对象的可枚举属性,包括自有属性. ...
随机推荐
- linux管理用户（组）与相关问题处理
相关联文件如下: /etc/passwd/etc/shadow/etc/group ================================= [切换当前用户为root]sudo -i [创建 ...
- ClassLoader如何加载class ？
jvm里有多个类加载,每个类加载可以负责加载特定位置的类,例如,bootstrap类加载负责加载jre/lib/rt.jar中的类, 我们平时用的jdk中的类都位于rt.jar中.extclasslo ...
- XML文档约束有哪几种？有什么区别？
XML DTD(功能有限) XML Schema (功能强大) Schema本身是XML的,可以被XML解析器解析(这也是从DTD上发展schema的根本目的),Schema支持命名空间,Schema ...
- 什么是 FutureTask?使用 ExecutorService 启动任务?
在 Java 并发程序中 FutureTask 表示一个可以取消的异步运算.它有启动和取消 运算.查询运算是否完成和取回运算结果等方法.只有当运算完成的时候结果才 能取回,如果运算尚未完成 get 方 ...
- ubuntu16 和ubuntu18安装及设置静态ip
1.准备ubuntu16镜像2.安装:https://zhuanlan.zhihu.com/p/1447048653.安装ubuntu后,sudo passwd root这个命令建立root用户的密码 ...
- JavaScript对不同数据结构的常见循环
var obj1 = { title : 'tom and jetty', author : 'pecool' } function Book(){} Book.prototype.price = 2 ...
- java 中有几种方法可以实现一个线程？
继承 Thread 类 实现 Runnable 接口 实现 Callable 接口,需要实现的是 call() 方法
- System.getenv和getProperty的区别
/** * System.getenv()是获取---环境变量(environment variables), * 系统层面的,好比我linux系统里的.bash_profile文件里面的变量 * 返 ...
- 用 wait-notify 写一段代码来解决生产者-消费者问题？
只要记住在同步块中调用 wait() 和 notify()方法,如 果阻塞,通过循环来测试等待条件.
- SQL语句之Column 'Status' in where clause is ambiguous错误
问题: AND created_by IN (?,?,?,?,?,?,?,?,?,?,?,?,?,?,?) limit 0, 10]; Column 'created_by' in where cla ...