文章

JavaScript对象与数组

文章目录

JavaScript 对象

JavaScript 中一切皆对象:字符串、数值、数组、函数...

此外,JavaScript 也允许自定义对象。

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

布尔型可以是一个对象。
数字型可以是一个对象。
字符串也可以是一个对象
日期是一个对象
数学和正则表达式也是对象
数组是一个对象
甚至函数也可以是对象
对象定义
你可以使用字符来定义和创建 JavaScript 对象:

var person = {
 name: "John", age: 31, 
 favColor: "green", height: 183
};

**定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的。
JavaScript 对象属性
可以说 "JavaScript 对象是变量的容器"。

但是,我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 ​name : value​ (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 ​对象属性​。

JavaScript 对象是属性变量的容器。

访问对象属性

您可以通过两种方式访问​​对象属性。

objectName.propertyName
//或者
objectName['propertyName']
这个例子使用了两种方式访问 person 的年龄
var person = {
 name: "John", age: 31, 
 favColor: "green", height: 183
};
var x = person.age;
var y = person['age'];

JavaScript的内置长度属性用于计算属性或字符串中的字符数。

var course = {name: "JS", lessons: 54};
document.write(course.name.length);
// -> 2

两种方式访问​​对象属性的区别:

1.点方法后面跟的必须是一个指定的属性名称,而中括号方法里面可以是变量。例如

var haha = "name";
console.log(obj.haha); // undefined
console.log(obj[haha]); // cedric

2.中括号方法里面的属性名可以是数字,而点方法后面的属性名不可以是数字

3.当动态为对象添加属性时,必须使用中括号​[]​,不可用点方法


更新对象属性

当你创建了一个对象后,你可以用​.​或​[]​来更新对象的属性。

举个例子,让我们看看​ourDog​:

var ourDog = {"name": "Camper","legs": 4,"tails": 1,"friends": ["everything!"]};

让我们更改它的名称为“ Happy Camper”,这有两种方式来更新对象的名称属性:

ourDog.name = "Happy Camper";
ourDog["name"] = "Happy Camper";

添加对象属性

你也可以像更改属性一样给对象添加属性。

var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};

ourDog.bark = "bow-wow";
// 等价于 ourDog['bark'] = "bow-wow";

删除对象属性

我们同样可以删除对象的属性,例如:

var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};

var c1 = ourDog['tails']; // c1 等于 1
// 删除 tails 属性
delete ourDog['tails']; // 等价于 delete ourDog.tails
var c2 = ourDog['tails']; // c2 等于 undefined

对象方法

对象方法是一个包含函数定义的属性。
您可以通过以下语法来调用方法:

对象名.方法名()
这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写:

var message = "Hello world!";
var x = message.toUpperCase();

在以上代码执行后,x 的值将是:

HELLO WORLD!

提示: 方法是作为对象属性存储的函数。

使用 [] 读取对象属性

var myObj = {
"name": "Loen",
"age": "28",
"eat": function(){
    return "I'm eating";

}
};

myObj["name"]; // Loen

var a = 'age';
myObj[a]; // 还可以用变量访问对象属性, 这里返回 28

myObj['eat'](); // 返回 I'm eating

对象构造器

对象构造器
本例使用函数来构造对象:

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

在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)

创建 JavaScript 对象实例

一旦您有了对象构造器,就可以创建新的对象实例,就像这样:

 var myFather = new person("John","Doe",50,"blue");
 var myMother = new person("Sally","Rally",48,"green");
 document.write(myFather.age); // -> 50
 document.write(myMother.name); // -> Sally

提示: myFather 和 myMother 是 person 对象的实例,它们的属性分配给相应的值。

对象初始化

使用英文大括号{}​创建单个对象

var John = {name: "John", age: 25};
var Loen = {name: "Loen", age: 28};

使用对象初始化器

空格和换行符并不重要。对象定义可以跨多行。

var John = {
  name: "John",
  age: 25
};
var Loen = {
  name: "Loen",
  age: 28
};

无论如何创建对象,访问属性和方法的语法不会更改。

document.write(Loen.age);

添加方法

添加方法
方法是存储在对象属性中的函数。

使用以下方式创建对象函数:

methodName : function() { code lines }

使用以下方式访问对象函数:

objectName.methodName()

​this ​关键词是当前对象的引用,这意味着您可以使用 ​this ​来访问对象属性和方法。

在构造函数中定义方法:

function person(name, age) {
  this.name = name;  
  this.age = age;
  this.changeName = function (name) {
    this.name = name;
  }
}

var p = new person("Loen", 28);
p.changeName("John");

在上面的示例中,我们定义了一个名为 ​changeName ​的方法,该方法是一个函数,它接受参数名称并将其分配给对象的 ​name ​属性。


你也可以在构造函数外部定义一个函数,通过函数名关联到对象的属性上:

function person(name, age) {
  this.name= name;  
  this.age = age;
  this.yearOfBirth = bornYear; // 关联 bornYear 函数
}
function bornYear() {
  return new Date().getFullYear() - this.age; 
}

以上代码中 ​new Date().getFullYear()​ 是获取今年完整的年份时间 如:2017 , 如您所见,我们已将对象的 ​yearOfBirth ​属性赋予 ​bornYear ​函数。当通过对象调用 ​bornYear ​函数时, ​bornYear ​函数中 ​this ​指向这个对象。

提示: 请注意,将函数关联到对象属性时不需要写括号。

    <script type="text/javascript">
        function person(name, age) {
          this.name= name;  
          this.age = age;
          this.yearOfBirth = bornYear; // 关联 bornYear 函数
        }
        function bornYear() {
          return new Date().getFullYear() - this.age; 
        }
        sister = new person("zhongchen",19)
        document.write(sister.yearOfBirth())  //若要输出值,需要在调用的时候加括号
    </script>

Array(数组) 对象

数组对象是使用单独的变量名来存储一系列的值。

如果你有一组数据(例如:车名字),存在单独变量如下所示:

var car1="Saab";
var car2="Volvo";
var car3="BMW"; 

然而,如果你想从中找出某一辆车?并且不是3辆,而是300辆呢?这将不是一件容易的事!

最好的方法就是用数组。

数组可以用一个变量名存储所有的值,并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID,以便它可以很容易地被访问到。

创建数组
创建数组,并赋值给 ​mycars ​变量:

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

以上通过 ​new Array() ​生成 ​mycars ​数组对象,并赋予初始值。

创建数组

JavaScript数组是动态的,所以你可以声明一个数组,不给 ​Array()​ 构造函数传递任何参数。然后可以动态添加元素。

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

提示: 您可以添加任意数量的元素。

字面量语法创建数组

为了更大的简单性,可读性和执行速度,您还可以使用数组字面量语法来声明数组。

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

这种声明方式和使用 ​new Array() ​方式创建的数组相同.

提示: 你可以通过数字索引访问和修改数组的值,推荐使用字面量语法创建数组

访问与修改数组

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

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

var mycars = new Array("Saab","Volvo","BMW");
var name = myCars[0];

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

myCars[0] = "Opel";

提示: ​[0]​ 是数组的第一个元素。​[1]​ 是数组的第二个元素。

length属性

JavaScript数组具有非常有用的内置属性和方法。

数组的 ​length ​属性返回它的元素的数量。

var courses = ["HTML", "CSS", "JS"];
document.write(courses.length);
// -> 3

因为数组索引是从0开始的,所以 length 属性总是比最高的数组索引大1。如果数组为空则length属性的值为0

关联数组

虽然许多编程语言支持具有命名索引的数组(文本而不是数字),称为关联数组,但JavaScript不支持。

但是,您仍然可以使用命名数组语法,这将产生一个对象。 例如:

var person = []; // 空数组
person["name"] = "Loen";
person["age"] = 28;
document.write(person["age"]);
// -> "28"

现在,​person ​被视为一个对象,而不是一个数组。

命名索引​“name”​和​“age”​成为​person​对象的属性。

提示: 当 ​person ​数组被视为对象时,标准数组方法和属性将产生不正确的结果。例如,现在​person.length​将返回​0​。


关联数组
请记住,JavaScript不支持使用名称索引数组。

在JavaScript中,数组总是使用数字编号的索引。

当您希望索引为字符串(文本)时,最好使用对象。

当您希望索引为数字时使用数组。

提示: 如果使用名称索引,JavaScript将会将数组重新定义为标准对象。

String 对象方法

txt = '第三方非官方个行业'

以下罗列的是 ​String ​对象方法以及描述:

示例:

var str = "Hello, Nier";
var a = str.toLowerCase(); // 把字符串转为小写
var b = str.toUpperCase(); // 吧字符串转为大写
var c = "   Hello world ".trim() //去掉字符串两边的空白


Window 对象

Window 对象
​Window ​对象表示浏览器中打开的窗口。

如果文档包含框架(​ ​或 ​

<

iframe>​ 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 ​window ​对象。

注意: 没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。

window作为全局变量,代表了脚本正在运行的窗口,暴露给Javascript代码。

Window 对象属性


例子:

var winInnerHeight = window.innerHeight; //返回窗口的文档显示区的高度。

var winInnerWidth = window.innerWidth; //返回窗口的文档显示区的宽度。


var winOuterWidth = window.outerWidth; // 返回窗口的外部宽度,包含工具条与滚动条。

var winOuterHeight = window.outerHeight; // 返回窗口的外部高度,包含工具条与滚动条。


var winScreenLeft = window.screenLeft; // 返回相对于屏幕窗口的x坐标

var winScreenTop = window.screenTop; // 返回相对于屏幕窗口的y坐标

关于window对象的方法你可以在本博客的JavaScript 方法一文中查阅

Date 对象

Date 对象
日期对象用于处理日期和时间。

日期由 年,月,日,时,分,秒和毫秒组成。

使用 new Date() , 将创建一个存储当前日期和时间的日期对象。

var d = new Date();

//d 存储了当前的日期和时间
初始化日期的其他方法允许从指定的日期和时间创建新的日期对象。

new Date(milliseconds) // 毫秒
new Date(dateString) // 日期字符串
new Date(year, month, day, hours, minutes, seconds, milliseconds) //年,月,日,时,分,秒和毫秒

提示: JavaScript日期以1970年01月01日00:00:00世界时(UTC)计算。一天包含 86400000 毫秒。

//Fri Jan 02 1970 08:00:00 GMT+0800 (中国标准时间)
var d1 = new Date(86400000); 

//Thu Oct 19 2017 15:56:00 GMT+0800 (中国标准时间)
var d2 = new Date("October 19, 2017 15:56:00");

//Sat Jun 11 1988 11:42:00 GMT+0800 (中国标准时间)
var d3 = new Date(88,5,11,11,42,0,0);

提示: JavaScript计数从0到11的月份。1月是0,12月是11。
日期对象是静态的,而不是动态的。计算机时间正在往前走,但是日期对象一旦创建,日期就不会改变。

Date 方法

当创建一个Date 对象时,有很多方法可以对它进行操作。


例如:

var d = new Date();
var hours = d.getHours();
//hours 等于当前的小时数值

让我们来写一个程序,每秒打印一次当前浏览器的时间:

<html>
<head>
</head>
<body>
<script>
function printTime() {
  var d = new Date();
  var hours = d.getHours();
  var mins = d.getMinutes();
  var secs = d.getSeconds();
  document.body.innerHTML = hours+":"+mins+":"+secs;
}
setInterval(printTime, 1000); // setInterval 第二个参数单位是 毫秒
</script>
</body>
</html>

我们定义了一个 printTime 函数,通过 new Date() 生成当前时间的对象,然后通过 getHours(),getMinutes(),getSeconds() 获取到当前的时,分,秒,并打印出来.

通过 setInterval 每隔 1秒执行一次 printTime 函数

提示: innerHTML 属性设置或返回元素的HTML内容。在我们的例子中,我们正在改变我们文档体的HTML内容。这将每秒覆盖内容,而不是重复打印到屏幕。


原文来自:JavaScript对象与数组,尊重自己,尊重每一个人;转发请注明来源!
0 0

发表评论