JS07 JS对象

Posted Silent1376

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS07 JS对象相关的知识,希望对你有一定的参考价值。

所有事物都是对象

javascript 提供多个内建对象,比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。

  • 布尔型可以是一个对象。
  • 数字型可以是一个对象。
  • 字符串也可以是一个对象
  • 日期是一个对象
  • 数学和正则表达式也是对象
  • 数组是一个对象
  • 甚至函数也可以是对象

对象只是一种特殊的数据。对象拥有属性方法

访问对象属性的语法是:

objectName.propertyName

方法是能够在对象上执行的动作

objectName.methodName()

 

自定义对象:

类似JavaOOP一开始的写法:

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

但是JS支持这种K&V键值写法:

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用函数对象构造

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
}

函数对象装函数对象

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;

    this.changeName=changeName;
    function changeName(name)
    {
        this.lastname=name;
    }
}

JavaScript 类 ?

JavaScript 是面向对象的语言,但 JavaScript 不使用类。

在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。

JavaScript 基于 prototype,而不是基于类的。

 

FOR IN 遍历JS对象的属性 ?

for (variable in object)
{
    执行的代码……
}

1、prototype(原型对象)

所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。

  • Date 对象从 Date.prototype 继承。
  • Array 对象从 Array.prototype 继承。
  • Person 对象从 Person.prototype 继承。

所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

JavaScript 对象有一个指向一个原型对象的链。

当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,

直到找到一个名字匹配的属性或到达原型链的末尾。

Date 对象, Array 对象, 以及 Person 对象从 Object.prototype 继承。

添加属性和方法

有的时候我们想要在所有已经存在的对象添加新的属性或方法。

另外,有时候我们想要在对象的构造函数中添加属性或方法。

使用 prototype 属性就可以给对象的构造函数添加新的属性:

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";

2、Number 对象

所有 JavaScript 数字均为 64 位

JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。

在JavaScript中,数字不分为整数类型和浮点型类型,所有的数字都是由 浮点型类型。

JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字,它能表示最大值为 ±1.7976931348623157e+308,最小值为 ±5e-324。

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

var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

无穷大(Infinity)

当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在JavaScript中以Infinity表示。

同样地,当负数的值超过了JavaScript所能表示的负数范围,结果为负无穷大,在JavaScript中以-Infinity表示。

无穷大值的行为特性和我们所期望的是一致的:

基于它们的加、减、乘和除运算结果还是无穷大(当然还保留它们的正负号)。

myNumber=2;
while (myNumber!=Infinity)
{
    myNumber=myNumber*myNumber; // 重复计算直到 myNumber 等于 Infinity
}

NaN【Not a Number】 - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。

你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。

var x = 1000 / "Apple";
isNaN(x); // 返回 true
var y = 100 / "1000";
isNaN(y); // 返回 false

可以是数字或者对象

数字可以私有数据进行初始化,就像 x = 123;

JavaScript 数字对象初始化数据, var y = new Number(123);

var x = 123;
var y = new Number(123);
typeof(x) // 返回 Number
typeof(y) // 返回 Object

但是数字和Number对象类型判断不会一致

var x = 123;             
var y = new Number(123);
(x === y) // 为 false,因为 x 是一个数字,y 是一个对象

Number对象具有的一些属性

Number.MAX_VALUE 最大值
Number.MIN_VALUE 最小值
Number.NaN 非数字
Number.NEGATIVE_INFINITY 负无穷,在溢出时返回
Number.POSITIVE_INFINITY 正无穷,在溢出时返回
Number.EPSILON

表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别

Number.MIN_SAFE_INTEGER 最小安全整数。
Number.MAX_SAFE_INTEGER 最大安全整数。

Number对象具有的一些方法

Number.parseFloat() 将字符串转换成浮点数,和全局方法 parseFloat() 作用一致。
Number.parseInt()

将字符串转换成整型数字,和全局方法 parseInt() 作用一致。

Number.isFinite() 判断传递的参数是否为有限数字。
Number.isInteger() 判断传递的参数是否为整数。
Number.isNaN() 判断传递的参数是否为 isNaN()。
Number.isSafeInteger() 判断传递的参数是否为安全整数。

Number对象所属原型的一些方法

toExponential() 返回一个数字的指数形式的字符串,如:1.23e+2
toFixed()

返回指定小数位数的表示形式。

var a=123;
b=a.toFixed(2); // b="123.00"
toPrecision()

返回一个指定精度的数字。如下例子中,a=123 中,3会由于精度限制消失:

var a=123;
b=a.toPrecision(2); // b="1.2e+2"

3、字符串(String) 对象

允许单引号或者双引号表示字符串

var carname="Volvo XC60";
var carname=‘Volvo XC60‘;

使用位置(索引)可以访问字符串中任何的字符

索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等

var character=carname[7];

单双引号的嵌套使用:

var answer="It‘s alright";
var answer="He is called ‘Johnny‘";
var answer=‘He is called "Johnny"‘;

或者使用转义

var answer=‘It‘s alright‘;
var answer="He is called "Johnny"";

length属性

用于获取字符串的长度,也就是字符个数

var txt="Hello World!";
document.write(txt.length);

var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length);

查找参数字符串在此String对象中的首个字符首次出现的位置

小提示:只要结果是大于-1的就表示存在,字符可能在开头就会出现,而开头就返回0,首个位置

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");

查找指定的字符串

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

var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));

替换字符串中的内容

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

str="Please visit Microsoft!"
var n=str.replace("Microsoft","Runoob");

全大小写转换

字符串大小写转换使用函数 toUpperCase() / toLowerCase():

var txt="Hello World!";       // String
var txt1=txt.toUpperCase();   // txt1 文本会转换为大写
var txt2=txt.toLowerCase();   // txt2 文本会转换为小写

按照指定的符号对字符串分割,返回一个字符串数组

字符串使用split()函数转为数组:

txt="a,b,c,d,e"   // String
txt.split(",");   // 使用逗号分隔
txt.split(" ");   // 使用空格分隔
txt.split("|");   // 使用竖线分隔 

String对象详细见Runoob描述:

https://www.runoob.com/jsref/jsref-obj-string.html

 

4、Date(日期) 对象

创建日期对象:

new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

示例:

var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)

对日期对象设置一个指定的时间:

var myDate=new Date();
myDate.setFullYear(2010,0,14);

对日期的比较:

var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
{
    alert("今天是2100年1月14日之前");
}
else
{
    alert("今天是2100年1月14日之后");
}

 

5、Array(数组) 对象

用于存储一些列的值

创建数组:

1: 常规方式:

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

访问数组元素:

以下实例可以访问myCars数组的第一个值:

var name=myCars[0];

以下实例修改了数组 myCars 的第一个元素:

myCars[0]="Opel";

数组支持存放一切对象【数组,函数,对象】

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此,你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组:

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

一些属性和方法:

var x=myCars.length             // myCars 中元素的数量
var y=myCars.indexOf("Volvo")   // "Volvo" 值的索引值
concat() 连接两个或更多的数组,并返回结果。
copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries() 返回数组的可迭代对象。
every() 检测数值元素的每个元素是否都符合条件。
fill() 使用一个固定值来填充数组。
filter() 检测数值元素,并返回符合条件所有元素的数组。
find() 返回符合传入测试(函数)条件的数组元素。
findIndex() 返回符合传入测试(函数)条件的数组元素索引。
forEach() 数组每个元素都执行一次回调函数。
from() 通过给定的对象中创建一个数组。
includes() 判断一个数组是否包含一个指定的值。
indexOf() 搜索数组中的元素,并返回它所在的位置。
isArray() 判断对象是否为数组。
join() 把数组的所有元素放入一个字符串。
keys() 返回数组的可迭代对象,包含原始数组的键(key)。
lastIndexOf() 搜索数组中的元素,并返回它最后出现的位置。
map() 通过指定函数处理数组的每个元素,并返回处理后的数组。
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素,并返回新的长度。
reduce() 将数组元素计算为一个值(从左到右)。
reduceRight() 将数组元素计算为一个值(从右到左)。
reverse() 反转数组的元素顺序。
shift() 删除并返回数组的第一个元素。
slice() 选取数组的的一部分,并返回一个新数组。
some() 检测数组元素中是否有元素符合指定条件。
sort() 对数组的元素进行排序。
splice() 从数组中添加或删除元素。
toString() 把数组转换为字符串,并返回结果。
unshift() 向数组的开头添加一个或更多元素,并返回新的长度。
valueOf() 返回数组对象的原始值。

6、Boolean(布尔) 对象

用于将非布尔值转换为布尔值(true 或者 false)

toString() 把布尔值转换为字符串,并返回结果。
valueOf() 返回 Boolean 对象的原始值。

下面的代码定义了一个名为 myBoolean 的布尔对象:

var myBoolean=new Boolean();

如果布尔对象无初始值或者其值为:

0
-0
null
""
false
undefined
NaN

那么对象的值为 false。

否则,其值为 true(即使当变量值为字符串 "false" 时)!

7、Math(算数) 对象

类似Java的Math类,不过按JS这里就是说成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) 返回角的正切。

 

以上是关于JS07 JS对象的主要内容,如果未能解决你的问题,请参考以下文章

js代码片段

AJAX相关JS代码片段和部分浏览器模型

VSCode自定义代码片段12——JavaScript的Promise对象

VSCode自定义代码片段12——JavaScript的Promise对象

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js

js代码片段: utils/lcoalStorage/cookie