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 主要用于遍历对象的可枚举属性,包括自有属性. ...
随机推荐
- Spring核心思想：IOC（控制反转）、DI（依赖注入）和AOP（面向切面编程）
Spring有三大核心思想,分别是控制反转(IOC,Inversion Of Controller),依赖注入(DI,Dependency Injection)和面向切面编程(AOP,Aspect O ...
- 保姆教程系列二、Nacos实现注册中心
前言: 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 上篇我们介绍到 保姆教程系列一.Linux搭建Nacos 注册中心原理 一.环境准备 Java版本:1.8+ (Linux ce ...
- Nacos 使用
Nacos(一)-下载安装 https://blog.csdn.net/qq_21067307/article/details/103895607 转载 ...
- 什么叫 CC 攻击？什么叫 DDOS 攻击？
CC 攻击,主要是用来攻击页面的,模拟多个用户不停的对你的页面进行访问,从而使你的系统资源消耗殆尽.DDOS 攻击,中文名叫分布式拒绝服务攻击,指借助服务器技术将多个计算机联合起来作为攻击平台,来对一 ...
- Python使用pip安装No matching distribution found for PyYaml==5.3.1
ERROR: Command errored out with exit status 1: command: /usr/local/dmahz/p_book_data/bin/python3.9 - ...
- Java程序要操作数据库，一定要使用JDBC技术吗？
<!-- MySQL驱动,连接数据库用,由数据库厂商提供 --> <dependency> <groupId>mysql</groupId> <a ...
- 什么是 Apache Kafka？
Apache Kafka 是一个分布式发布 - 订阅消息系统.它是一个可扩展的,容错的 发布 - 订阅消息系统,它使我们能够构建分布式应用程序.这是一个 Apache 顶 级项目.Kafka 适合离线 ...
- 静态嵌套类(Static Nested Class)和内部类（Inner Class） 的不同？
Static Nested Class 是被声明为静态(static)的内部类,它可以不依赖于外部类 实例被实例化.而通常的内部类需要在外部类实例化后才能实例化,其语法看起 来挺诡异的,如下所示. / ...
- 有没有可能两个不相等的对象有有相同的 hashcode？
有可能,两个不相等的对象可能会有相同的 hashcode 值,这就是为什么在 hashmap 中会有冲突.相等 hashcode 值的规定只是说如果两个对象相等,必 须有相同的 hashcode 值, ...
- 4.RDD操作
目录 一. RDD创建 从本地文件系统中加载数据创建RDD 从HDFS加载数据创建RDD 通过并行集合(列表)创建RDD 二. RDD操作 转换操作 filter(func) map(func) fl ...