[JavaScript知识库]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 位，

整数
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 对象属性

七、 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>

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

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

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

量词

RegExp 对象方法

RegExp 对象属性