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 主要用于遍历对象的可枚举属性,包括自有属性. ...
随机推荐
- Docker容器入门实践
Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux 基金会,遵从了 ...
- [bzoj2878][Noi2012]迷失游乐园(基环树dp)
[bzoj2878][Noi2012]迷失游乐园(基环树dp) bzoj luogu 题意:一颗数或是基环树,随机从某个点开始一直走,不走已经到过的点,求无路可走时的路径长期望. 对于一棵树: 用两个 ...
- tea加密算法及其变种的研究
tea 介绍 "TEA" 的全称为"Tiny Encryption Algorithm" 是1994年由英国剑桥大学的David j.wheeler发明的. T ...
- JDK8新特性关于Stream流
在Java1.8之前还没有stream流式算法的时候,我们要是在一个放有多个User对象的list集合中,将每个User对象的主键ID取出,组合成一个新的集合,首先想到的肯定是遍历,如下: 1 2 3 ...
- 简述 Mybatis 的插件运行原理，以及如何编写一个插件?
Mybatis 仅可以编写针对 ParameterHandler.ResultSetHandler. StatementHandler.Executor 这 4 种接口的插件,Mybatis 使用 J ...
- java程序如何确保多线程的运行安全？
线程的安全问题体现在: 原子性:一个或多个操作在CPU执行过程中不被中断的特性 可见性:一个线程对共享变量的修改,另一个线程能立刻看到 有序性:程序执行的顺序按照代码的先后顺序执行 导致线程存在安全问 ...
- Java 中，编写多线程程序的时候你会遵循哪些最佳实践？
这是我在写 Java 并发程序的时候遵循的一些最佳实践: a)给线程命名,这样可以帮助调试. b)最小化同步的范围,而不是将整个方法同步,只对关键部分做同步. c)如果可以,更偏向于使用 volati ...
- mybatis源码之我见
以前一直想看mybatis的源代码,但是一直没找到入口(傻),最近看教程,有些感悟. 和起以前一样,关键代码我会用红色标记. 首先,先贴下我的dao和mapper,代码很简单,和平时写的hello w ...
- Netty学习摘记 —— 初识编解码器
本文参考 本篇文章是对<Netty In Action>一书第十章"编解码器框架"的学习摘记,主要内容为解码器和编码器 编解码器实际上是一种特殊的ChannelHand ...
- Linux文件管理 | Linux 文件基础知识
目录 Linux 常用文件类别 Linux 目录结构概述 LInux 系统目录及说明 一.Linux 常用文件类别 1.文件 在Linux上系统上,有一切皆文件的说法,就是说任何软件和I/O设备都 ...