javascript学习笔记八 - 对象

一、property

avaScript中的所有事物都是对象：字符串、数值、数组、日期、函数等，JavaScript允许自定义对象。对象是一种特殊的数据。拥有属性和方法。属性是与对象相关的值。

对象属性的语法是：objectName.propertyName

<script>
person = {
	firstname: "poya",
	lastname: "dj",
	age:30,
	eyecolor: "blue"
}
document.write(person.firstname + " is " + person.age + " years old.");
</script>

JavaScript是面向对象的语言，但不使用类。在JavaScript 中，不会创建类，也不会通过类来创建对象（就像在JAVA中那样面向对象）。JavaScript 基于prototype，而不是基于类的。

for…in 语句循环遍历对象的属性

for…in 循环中的代码块将针对每个属性执行一次
语法：for (variable in object) {
执行的代码……
}

<p>点击下面的按钮，查看演示示例。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
	function myFunction() {
		var i;
		var text = "";
		var person = {
			fname: "Poya",
			lname: "DJ ",
			age:34
		};
		for (i in person) {
			text = text + person[i];
		}
		document.getElementById("demo").innerHTML = text;
	}
</script>`在这里插入代码片`

所有的JavaScript对象都会从一个 prototype（原型对象）中继承属性和方法。Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。
所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例
1、Date 对象从 Date.prototype 继承。
2、Array 对象从 Array.prototype 继承。
3、Person 对象从 Person.prototype 继承。
JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾为止。

<p id="demo"></p>

<script>
	function Person(first, last, age, eye) {
		this.firstName = first;
		this.lastName = last;
		this.age = age;
		this.eyeColor = eye;
	}

	var iAm = new Person("王", "涛", 14, "blue");
	var mySister = new Person("王", "梅", 12, "green");

	document.getElementById("demo").innerHTML =
		"我今年 " + iAm.age + "。我妹妹 " + mySister.age;
</script>

添加属性和方法
有的时候我们想要在所有已经存在的对象添加新的属性或方法。使用 prototype 属性就可以给对象的构造函数添加新的属性。

<p id="demo2"></p>
<script>
    function Person(first, last, age, eye) {
        this.firstName = first;
        this.lastName = last;
        this.age = age;
        this.eyeColor = eye;
    }

    Person.prototype.nationality = "中国";

    var iAm = new Person("poya", "dj", 50, "blue");
    document.getElementById("demo2").innerHTML =
        "我国籍是 " + iAm.nationality;
</script>

**

二、 String 对象

**
String 对象用于处理已有的字符块。字符串的索引从“ 0 ”开始, 所以字符串第一字符为 [0],第二个字符为 [1], 第三个字符为 [2], 依此类推。字符串（String）使用长度属性length来计算字符串的长度

<script>
	var text = "中国";
	document.write("<p>" + text.length + "</p>");//输出结果 2
	var text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	document.write("<p>" + text.length + "</p>");//输出结果 26
</script>

indexOf() 查找
字符串中使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置

<p id="p1">0</p>
<button onclick="functionBtn()">点我查看结果</button>
<script>
function functionBtn() {
	var str = document.getElementById("p").innerHTML;
	var weizhi = str.indexOf("100");
	document.getElementById("p1").innerHTML = weizhi  + 1;
}
</script>

如果没找到对应的字符函数返回0，lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。

match() 匹配
match()函数用来查找字符串中特定的字符，如果找到的话，则返回这个字符。

<script>
	var str = "My name is Poya dj !";
	document.write(str.match("Poya"));
</script>

replace() 替换
replace() 方法在字符串中用某些字符替换另一些字符。

<pid="demo3">这是台湾省!</p>
<button onclick="functionBtn()">点我看结果</button>
<script>
	function functionBtn() {
		var str = document.getElementById("demo3").innerHTML;
		var text = str.replace("100元", "壹佰圆");
		document.getElementById("demo3").innerHTML = text;
	}
</script>

大小写转换
字符串中大小写转换使用函数 toUpperCase() 和toLowerCase()，该方法返回一个新的字符串，源字符串没有被改变。

<script>
	var text = "My name is Poya !";
	document.write("<p>toUpperCase转大小：" + text.toUpperCase() + "</p>");
	document.write("<p>toLowerCase转小写：" + text.toLowerCase() + "</p>");
	document.write("<p> 原字符串：" + text + "</p>");
</script>
//

字符串转数组
字符串转数组使用split()，

<button onclick="functionBtn()">点我看结果</button>
	<script>
		function functionBtn() {
			var str = "A,B,C,D,E,F,G,H,I,J,K";
			var text = str.split(",");
			document.getElementById("demo").innerHTML = text[1];
		}
	</script>

var str 中使用什么符号，.split(“使用对应符号”)即可，可以使用逗号、空格、竖线分隔

**

三、Number 数字对象

**
数字可以是数字或者对象，在JavaScript 只有一种数字类型。可以使用也可以不使用小数点来书写数字。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等。在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由浮点型类型。JavaScript采用IEEE754标准定义的64位浮点格式表示数字，它能表示最大值为±1.7976931348623157 x 10308，最小值为±5 x 10 -324，所有JavaScript 数字均为 64 位，

值 (aka Fraction/Mantissa)	指数	Sign
52 bits (0 - 51)	11 bits (52 - 62)	1 bit (63)

整数
Number 对象中整数在（不使用小数点或指数计数法）最多为 15 位。

 <p id="demoNumber1"></p>
<button onclick="functionBtn()">点我</button>

<script>
 function myFunction() {
     var x = 999999999999999;// x 为 999999999999999
     var y = 9999999999999999;// y 为 10000000000000000
     document.getElementById("demoNumber1").innerHTML = x + "<br>" + y;
 }
</script>

小数
Number 对象中小数在最大位数是 17位。

<script>
	var x;
	document.write("<p>仅显示17位: ");
	x = 12345678901234567890;
	document.write(x + "</p>");
	document.write("<p>0.2 + 0.1 = ");
	x = 0.2 + 0.1;
	document.write(x + "</p>");
	document.write("<p>浮点运算并不总是100%准确，可以通过乘以10或除以10来计算: ");
	x = (0.2 * 10 + 0.1 * 10) / 10;
	document.write(x + "</p>");
</script>

示例中 x 最多仅支持17位显示，超出17位后面的全是0 。

八进制与十六进制
如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 “x”，则解释为十六进制数。

<script>
	var x = 0377;
	var y = 0xFF;
	document.write(x + "<br>");//结果为255
	document.write(y);//结果为255
</script>

绝不要在数字前面写零，除非您需要进行八进制转换。

默认情况下，JavaScript 数字为十进制显示。

但可以使用 toString() 方法 输出16进制、8进制、2进制。

<script>
	var Number = 137;
	document.write(Number + ' 十进制<br>');
	document.write(Number.toString(16) + ' 十六进制<br>');
	document.write(Number.toString(8) + ' 八进制<br>');
	document.write(Number.toString(2) + ' 二进制');
</script>

Infinity无穷大
当数字运算结果超过了JavaScript所能表示的数字上限值（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）

<script>
	nb = 2;
	while (nb != Infinity) {
		nb = nb * nb;
		document.write(nb+'<br>');
	}
</script>

四、 Date-日期

日期对象用于处理日期和时间，常用的日期对象方法，JavaScript 月数是从0至11。10是11月。没有12月，因为JavaScript是从0开始，0就是我们对应的1月，11月就是我们对应的12月。

getFullYear()
使用 getFullYear() 获取年份。

<p id="demoDateYear"></p>
<script>
		var d = new Date();
		var x = document.getElementById("demoDateYear");
		x.innerHTML = d.getFullYear();
</script>

getTime()
getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

<p id="demoDateTime">单击按钮显示1970年1月1号至今的毫秒数。</p>
<script>
    var d = new Date();
    var x = document.getElementById("demoDateTime");
    x.innerHTML = d.getTime();
</script>

setFullYear()
使用 setFullYear() 设置具体的日期。

<p id="demoDateSet">单击按钮显示修改后的年月日。</p>
	<script>
        var d = new Date();
        d.setFullYear(2020, 10, 3);
        var x = document.getElementById("demoDateSet");
        x.innerHTML = d;
	</script>

toUTCString()
使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

<p id="demoDateUTC"></p>
	<script>
			var d = new Date();
			var x = document.getElementById("demoDateUTC");
			x.innerHTML = d.toUTCString();
	</script>

getDay()
使用 getDay() 和数组来显示星期，而不仅仅是数字。

<p id="demoWeekday"></p>
<script>
   var d = new Date();
   var weekday = new Array(7);
   weekday[0] = "星期日";
   weekday[1] = "星期一";
   weekday[2] = "星期二";
   weekday[3] = "星期三";
   weekday[4] = "星期四";
   weekday[5] = "星期五";
   weekday[6] = "星期六";
   var x = document.getElementById("demoWeekday");
   x.innerHTML = weekday[d.getDay()];
</script>

五、Array 数组

数组对象的作用是：使用单独的变量名来存储一系列的值。
创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1、常规方式：
var hobby=new Array();
hobby[0]=“游泳”;
hobby[1]=“羽毛球”;
hobby[2]=“乒乓球”;
2、简洁方式：
var hobby=new Array(“游泳”,“羽毛球”,“乒乓球”);

3、字面：
var hobby=[“游泳”,“羽毛球”,“乒乓球”];

通过指定数组名以及索引号码，你可以访问某个特定的元素。

以下实例可以访问hobby数组的第一个值：var name=hobby[0];
以下实例修改了数组 hobby的第一个元素：hobby[0]=“羽毛球”;

[0] 是数组的第一个元素。
[1] 是数组的第二个元素。

六、Math算数

Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

语法：
var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根

<p id="demoRound">“2.5”最接近的整数,四舍五入</p>
<script>
    document.getElementById("demoRound").innerHTML = Math.round(2.5);
</script>

Math 对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.4426950408889634）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

**Math 对象方法**

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 Ex 的指数。
floor(x)	对 x 进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	四舍五入。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。

七、 RegExp正则表达式

RegExp是正则表达式（regular expression）的简写。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

语法

var patt=new RegExp(pattern,modifiers);
var patt=/pattern/modifiers;//简单的写法

pattern（模式） 描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

执行对大小写不敏感的匹配

<script>
	var str = "My name is Poya";
	var text = /poya/i;//i 执行对大小写不敏感的匹配。
	document.write(str.match(text));//输出结果：Poya
</script>

全文查找 “is”

<script>
	var str = "My name is Poya, Is 27, is ……";
	var text = /is/g;//g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）
	document.write(str.match(text) + '<br>');//输出结果：is,is,区分大小写，所以只有2个
	//匹配并查找
	var text2 = /is/gi;
	document.write(str.match(text2 ));//输出结果：is,is,is,不区分大小写，所以全部输出
</script>

test()
test()方法搜索字符串指定的值，根据结果并返回真或假。示例是从字符串中搜索字符 “y” ,

<script>
	var vTest = new RegExp("y");
	document.write(vTest.test("my name is poya"));
	//由于该字符串中存在字母 "e"，以上代码的输出将是：true
</script>

exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

<script>
    var execy = new RegExp("y");
	document.write(execy.exec("my name is poya"));
</script>

修饰符
修饰符用于执行区分大小写和全局匹配：

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号
方括号用于查找某个范围内的字符：

元表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red	blue

元字符
元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法	描述
compile	在 1.5 版本中已废弃。 编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。
toString	返回正则表达式的字符串。

RegExp 对象属性

属性	描述
constructor	返回一个函数，该函数是一个创建 RegExp 对象的原型。
global	判断是否设置了 “g” 修饰符
ignoreCase	判断是否设置了 “i” 修饰符
lastIndex	用于规定下次匹配的起始位置
multiline	判断是否设置了 “m” 修饰符
source	返回正则表达式的匹配模式