JavaScript对象与数组

博主： E_Page
发布时间：2021 年 10 月 22 日
334 次浏览
暂无评论
8352字数
分类： code

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内容。这将每秒覆盖内容，而不是重复打印到屏幕。

最后修改：2022 年 12 月 05 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

JavaScript对象与数组

E_Page • 2021 年 10 月 22 日

<img src="https://image.5yang.cc/uploads//uoloads2021/10/找不到对象-300x231.jpg" alt="" style=""><h1>JavaScript 对象</h1>JavaScript 中一切皆对象：字符串、数值、数组、函数...此外，JavaScript 也允许自定义对象。所有事物都是对象 
JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型。布尔型可以是一个对象。 
数字型可以是一个对象。 
字符串也可以是一个对象 
日期是一个对象 
数学和正则表达式也是对象 
数组是一个对象 
甚至函数也可以是对象 
对象定义 
你可以使用字符来定义和创建 JavaScript 对象:<pre><code class="language-JavaScript line-numbers">var person = {
 name: "John", age: 31, 
 favColor: "green", height: 183
};
</code></pre>**定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的。 
JavaScript 对象属性 
可以说 "JavaScript 对象是变量的容器"。但是，我们通常认为 "JavaScript 对象是键值对的容器"。键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为 对象属性。JavaScript 对象是属性变量的容器。<h3>访问对象属性</h3>您可以通过两种方式访问对象属性。<pre><code class="language-JavaScript line-numbers">objectName.propertyName
//或者
objectName['propertyName']
这个例子使用了两种方式访问 person 的年龄
var person = {
 name: "John", age: 31, 
 favColor: "green", height: 183
};
var x = person.age;
var y = person['age'];
</code></pre>JavaScript的内置长度属性用于计算属性或字符串中的字符数。<pre><code class="language-JavaScript line-numbers">var course = {name: "JS", lessons: 54};
document.write(course.name.length);
// -&gt; 2
</code></pre>两种方式访问对象属性的区别：1.点方法后面跟的必须是一个指定的属性名称，而中括号方法里面可以是变量。例如<pre><code class="language-JavaScript line-numbers">var haha = "name";
console.log(obj.haha); // undefined
console.log(obj[haha]); // cedric
</code></pre>2.中括号方法里面的属性名可以是数字，而点方法后面的属性名不可以是数字3.当动态为对象添加属性时，必须使用中括号[]，不可用点方法<hr /><h3>更新对象属性</h3>当你创建了一个对象后，你可以用.或[]来更新对象的属性。举个例子，让我们看看ourDog：<pre><code class="language-JavaScript line-numbers">var ourDog = {"name": "Camper","legs": 4,"tails": 1,"friends": ["everything!"]};
</code></pre>让我们更改它的名称为“ Happy Camper”，这有两种方式来更新对象的名称属性：<pre><code class="language-JavaScript line-numbers">ourDog.name = "Happy Camper";
ourDog["name"] = "Happy Camper";
</code></pre><h3>添加对象属性</h3>你也可以像更改属性一样给对象添加属性。<pre><code class="language-JavaScript line-numbers">var ourDog = {
"name": "Camper",
"legs": 4,
"tails": 1,
"friends": ["everything!"]
};

ourDog.bark = "bow-wow";
// 等价于 ourDog['bark'] = "bow-wow";
</code></pre><h3>删除对象属性</h3>我们同样可以删除对象的属性，例如：<pre><code class="language-JavaScript line-numbers">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
</code></pre><hr /><h2>对象方法</h2>对象方法是一个包含函数定义的属性。 
您可以通过以下语法来调用方法：对象名.方法名() 
这个例子使用了 String 对象的 toUpperCase() 方法来将文本转换为大写：<pre><code class="language-JavaScript line-numbers">var message = "Hello world!";
var x = message.toUpperCase();
</code></pre>在以上代码执行后，x 的值将是：<pre><code class="language-JavaScript line-numbers">HELLO WORLD!
</code></pre>提示: 方法是作为对象属性存储的函数。使用 [] 读取对象属性<pre><code class="language-JavaScript line-numbers">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
</code></pre><hr /><h3>对象构造器</h3>对象构造器 
本例使用函数来构造对象：<pre><code class="language-JavaScript line-numbers">function person(firstname, lastname, age, eyecolor)
{
 this.firstname = firstname;
 this.lastname = lastname;
 this.age = age;
 this.eyecolor = eyecolor;
}
</code></pre>在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）<h4>创建 JavaScript 对象实例</h4>一旦您有了对象构造器，就可以创建新的对象实例，就像这样：<pre><code class="language-JavaScript line-numbers"> var myFather = new person("John","Doe",50,"blue");
 var myMother = new person("Sally","Rally",48,"green");
 document.write(myFather.age); // -&gt; 50
 document.write(myMother.name); // -&gt; Sally
</code></pre>提示: myFather 和 myMother 是 person 对象的实例,它们的属性分配给相应的值。<h3>对象初始化</h3>使用英文大括号{}创建单个对象<pre><code class="language-JavaScript line-numbers">var John = {name: "John", age: 25};
var Loen = {name: "Loen", age: 28};
</code></pre><h4>使用对象初始化器</h4>空格和换行符并不重要。对象定义可以跨多行。<pre><code class="language-JavaScript line-numbers">var John = {
 name: "John",
 age: 25
};
var Loen = {
 name: "Loen",
 age: 28
};
</code></pre>无论如何创建对象，访问属性和方法的语法不会更改。<pre><code class="language-JavaScript line-numbers">document.write(Loen.age);
</code></pre><h3>添加方法</h3>添加方法 
方法是存储在对象属性中的函数。使用以下方式创建对象函数:<pre><code class="language-JavaScript line-numbers">methodName : function() { code lines }
</code></pre>使用以下方式访问对象函数:<pre><code class="language-JavaScript line-numbers">objectName.methodName()
</code></pre>this 关键词是当前对象的引用，这意味着您可以使用 this 来访问对象属性和方法。在构造函数中定义方法:<pre><code class="language-JavaScript line-numbers">function person(name, age) {
 this.name = name; 
 this.age = age;
 this.changeName = function (name) {
 this.name = name;
 }
}

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

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

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

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

var winScreenTop = window.screenTop; // 返回相对于屏幕窗口的y坐标
</code></pre>关于<a class="wp-editor-md-post-content-link" href="https://www.5yang.cc/5646" title="window对象的方法">window对象的方法</a>你可以在本博客的JavaScript 方法一文中查阅<h2>Date 对象</h2>Date 对象 
日期对象用于处理日期和时间。日期由 年，月，日，时，分，秒和毫秒组成。使用 new Date() , 将创建一个存储当前日期和时间的日期对象。<pre><code class="language-JavaScript line-numbers">var d = new Date();
</code></pre>//d 存储了当前的日期和时间 
初始化日期的其他方法允许从指定的日期和时间创建新的日期对象。<pre><code class="language-JavaScript line-numbers">new Date(milliseconds) // 毫秒
new Date(dateString) // 日期字符串
new Date(year, month, day, hours, minutes, seconds, milliseconds) //年，月，日，时，分，秒和毫秒
</code></pre>提示: JavaScript日期以1970年01月01日00:00:00世界时（UTC）计算。一天包含 86400000 毫秒。<pre><code class="language-javascript line-numbers">//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);

</code></pre>提示: JavaScript计数从0到11的月份。1月是0，12月是11。 
日期对象是静态的，而不是动态的。计算机时间正在往前走，但是日期对象一旦创建，日期就不会改变。<h3>Date 方法</h3><pre><code>当创建一个Date 对象时，有很多方法可以对它进行操作。
</code></pre><img src="https://image.5yang.cc/uploads//uoloads2021/10/Date方法.png" alt="" style=""> <img src="https://image.5yang.cc/uploads//uoloads2021/10/Date方法2.png" alt="" style=""> <img src="https://image.5yang.cc/uploads//uoloads2021/10/Date方法3.png" alt="" style=""><hr />例如:<pre><code class="language-javascript line-numbers">var d = new Date();
var hours = d.getHours();
//hours 等于当前的小时数值
</code></pre>让我们来写一个程序,每秒打印一次当前浏览器的时间:<pre data-language=HTML><code class="language-markup line-numbers">&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script&gt;
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 第二个参数单位是 毫秒
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre><hr />我们定义了一个 printTime 函数,通过 new Date() 生成当前时间的对象,然后通过 getHours(),getMinutes(),getSeconds() 获取到当前的时,分,秒,并打印出来.通过 setInterval 每隔 1秒执行一次 printTime 函数提示: innerHTML 属性设置或返回元素的HTML内容。在我们的例子中，我们正在改变我们文档体的HTML内容。这将每秒覆盖内容，而不是重复打印到屏幕。<hr />

JavaScript 对象

访问对象属性

更新对象属性

添加对象属性

删除对象属性

对象方法

对象构造器

创建 JavaScript 对象实例

对象初始化

使用对象初始化器

添加方法

Array（数组） 对象

创建数组

字面量语法创建数组

访问与修改数组

length属性

关联数组

String 对象方法

Window 对象

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

Window 对象属性

Date 对象

Date 方法

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

JavaScript对象与数组

Array（数组）对象

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款