xml地图|网站地图|网站标签 [设为首页] [加入收藏]

美高梅游戏网站

当前位置:美高梅游戏网站 > 美高梅游戏网站 > JavaScript 对象和数组

JavaScript 对象和数组

来源:http://www.gd-chuangmei.com 作者:美高梅游戏网站 时间:2019-12-15 23:37

JavaScript 数组和对象就像书和报纸一样

2017/05/26 · JavaScript · 对象, 数组

原文出处: Kevin Kononenko   译文出处:蔡耀冠   

简评:作者将 JavaScript 的数组和对象比喻为书和报纸,数组更注重顺序,而标签则对对象更重要。

如果你读书、看报,那么你会理解 JavaScript 的数组和对象之间的不同之处。

当你刚开始学 JavaScript 时,用哪一种方式组织和存储数据更好往往会让人困惑。

一方面,你可能在学习 “for” 循环的时候熟悉了数组。但是,一旦你尽可能多地将数据塞进数组,当你在检查你的代码的时候,你创造的乱七八糟的东西将会让你难以理解。

当你可以快速地决定每个结构的目标时,在对象和数组之间选择会简单得多。数组和书籍存储信息的方式相差无几,而对象则和报纸存储信息的方式差不多。

让我们来看看!

对象和数组

数组:数据的顺序是最重要的

这是超短篇小说的章节,以数组的形式。

JavaScript

var book = ['foreword', 'boyWhoLived', 'vanishingGlass', 'lettersFromNoOne', 'afterword'];

1
var book = ['foreword', 'boyWhoLived', 'vanishingGlass', 'lettersFromNoOne', 'afterword'];

好吧,我承认,这是《哈利波特》系列的第一本的前三章。这是数组的可视化的形式:

美高梅棋牌 1当顺序成为组织信息的最重要的因素时你应该使用数组。没有人(我希望)这样看《哈利波特》的章节标题,“嗯…,那章看起来很有趣,让我跳到那!”章节的顺序告诉你下一章是什么。

当你从数组中检索信息时,你使用每个元素的下标。数组是从零开始索引的,这意味着从 0 开始计数而不是 1。

如果你想要访问下标为 0 的书籍数组,你要用:

JavaScript

books[0]

1
books[0]

然后你会得到:

JavaScript

美高梅游戏网站,'foreword'

1
'foreword'

如果你想得到这本书第三章的章节标题,你要用:

JavaScript

books[2]

1
books[2]

你会基于书的章节顺序来读下一章,而不是基于书的章节标题。

学习要点:

对象:数据标签是最重要的

报纸可能看起来是这样的,以对象的形式。

JavaScript

var newspaper= { sports: 'ARod Hits Home Run', business: 'GE Stock Dips Again', movies: 'Superman Is A Flop' }

1
2
3
4
5
var newspaper= {
  sports: 'ARod Hits Home Run',
  business: 'GE Stock Dips Again',
  movies: 'Superman Is A Flop'
}

下面是以可视化的形式来看同样的数据。

美高梅棋牌 2当你要基于数据标签来组织数据时,对象是最好的。当你看报纸时,你可能不会从前往后一页页地读。你会基于新闻标题来跳过特定的部分。无论在报纸的哪个地方,你都可以快速的跳过并且有合适的上下文。这和书不一样,书的章节顺序很重要。

对象通过键/值对来组织数据。看起来像这样:

JavaScript

key: value

1
key: value

如果你想要进入报纸的商业部分,你会使用这样的

JavaScript

newspaper[‘business’]

1
newspaper[‘business’]

或者:

JavaScript

newspaper.business

1
newspaper.business

这回返回美高梅棋牌, ‘GE Stock Dips Again’。所以,通过数据的标签(键)来访问数据是最简单的,你想要把数据存在对象里。

1.Object 类型

结合对象和数组

目前为止,我们只是在数组和对象中保存了 strings,你也可以保存其他类型的数据,比如 numbers 和 booleans,同时:

  1. 对象内的数组
  2. 数组中的对象
  3. 数组中的数组
  4. 对象中的对象

现在开始变复杂了。但是,你几乎只需要两种以扩展方式的组合来存储你的数据。当你一星期后回顾代码也想要理解。

让我们再看下书的例子。如果我们想要保存每章的页数会怎样呢?用对象来填满我们的数组可能是最好的。像这样:

JavaScript

美高梅游戏官网娱乐,var book =[ [‘foreword’, 14], [‘boywholived’, 18] ]

1
2
3
4
var book =[
  [‘foreword’, 14],
  [‘boywholived’, 18]
]

JavaScript

var book = [ {name:'foreword', pageCount: 14}, {name:'boyWhoLived', pageCount: 18}, {name:'vanishingGlass', pageCount: 13}, {name:'lettersFromNoOne', pageCount: 17}, {name:'afterword', pageCount: 19} ];

1
2
3
4
5
6
7
var book = [
  {name:'foreword', pageCount: 14},
  {name:'boyWhoLived', pageCount: 18},
  {name:'vanishingGlass', pageCount: 13},
  {name:'lettersFromNoOne', pageCount: 17},
  {name:'afterword', pageCount: 19}
];

我们维护了每章的顺序,现在我们可以叫出每章的特定的属性。所以,如果我们想要知道第二张的页数,我们可以用:

JavaScript

book[1][‘pageCount’]

1
book[1][‘pageCount’]

这会返回一个 18 的

现在假设你想知道你当地报纸每个栏目的顶级作者的排名,基于他们的资历。你可以在报纸对象中用一个数组来表达,像这样:

JavaScript

var newspaper= { sports: 'ARod Hits Home Run', sportsWriters: ['Miramon Nuevo', 'Rick Reilly', 'Woddy Paige'], business: 'GE Stock Dips Again', businessWriters: ['Adam Smith', 'Albert Humphrey', 'Charles Handy'], movies: 'Superman Is A Flop', moviesWriters: ['Rogert Ebert', 'Andrew Sarris', 'Wesley Morris'] }

1
2
3
4
5
6
7
8
var newspaper= {
  sports: 'ARod Hits Home Run',
  sportsWriters: ['Miramon Nuevo', 'Rick Reilly', 'Woddy Paige'],
  business: 'GE Stock Dips Again',
  businessWriters: ['Adam Smith', 'Albert Humphrey', 'Charles Handy'],
  movies: 'Superman Is A Flop',
  moviesWriters: ['Rogert Ebert', 'Andrew Sarris', 'Wesley Morris']
}

一个数组用来存储作者很合适,因为顺序很重要。你知道每个数组中靠前的作者排名更高。下标为 0 的作者是排名最高的。

你可以通过创建对象来优化报纸对象。比如,一个包含标题和作者列表的体育对象。但我会让你来尝试!

1 赞 2 收藏 评论

美高梅棋牌 3

2.Array 类型

3.对象中的方法

 

什么是对象,其实就是一种类型,即引用类型。而对象的值就是引用类型的实例。在ECMAScript 中引用类型是一种数据结构,用于将数据和功能组织在一起。它也常被称做为类,但ECMAScript 中却没有这种东西。虽然ECMAScript 是一门面向对象的语言,却不具备传统面向对象语言所支持的类和接口等基本结构。

 

一.Object类型

到目前为止,我们使用的引用类型最多的可能就是Object 类型了。虽然Object 的实例不具备多少功能,但对于在应用程序中的存储和传输数据而言,它确实是非常理想的选择。创建Object 类型有两种。一种是使用new 运算符,一种是字面量表示法。

 

1.使用new 运算符创建Object

 

var box = new Object(); //new 方式

box.name = 'Jack'; //创建属性字段

box.age = 28; //创建属性字段

 

2.new 关键字可以省略

 

var box = Object(); //省略了new 关键字

 

3.使用字面量方式创建Object

 

var box = { //字面量方式

name : 'Jack', //创建属性字段

age : 28

};

 

4.属性字段也可以使用字符串

 

var box = {

'name' : 'Jack', //也可以用字符串形式

'age' : 28

};

 

5.使用字面量及传统复制方式

 

var box = {}; //字面量方式声明空的对象

box.name = 'Jack'; //点符号给属性复制

box.age = 28;

 

6.两种属性输出方式

 

alert(box.age); //点表示法输出

alert(box['age']); //中括号表示法输出,注意引号

 

PS:在使用字面量声明Object 对象时,不会调用Object()构造函数(Firefox 除外)。

 

7.给对象创建方法

 

var box = {

    run : function () { //对象中的方法

        return '运行';

    }

}

alert(box.run()); //调用对象中的方法

 

8.使用delete 删除对象属性

 

delete box.name; //删除属性

 

在实际开发过程中,一般我们更加喜欢字面量的声明方式。因为它清晰,语法代码少,

而且还给人一种封装的感觉。字面量也是向函数传递大量可选参数的首选方式。

 

function box(obj) { //参数是一个对象

if (obj.name != undefined) {

alert(obj.name);

} //判断属性是否存在

if (obj.age != undefined) {

alert(obj.age);

}

}

 

box({ //调用函数传递一个对象

name : 'Jack',

age : 28

});

 

二.Array类型

除了Object 类型之外,Array 类型是ECMAScript 最常用的类型。而且ECMAScript 中

的Array 类型和其他语言中的数组有着很大的区别。虽然数组都是有序排列,但ECMAScript

中的数组每个元素可以保存任何类型。ECMAScript 中数组的大小也是可以调整的。

创建Array 类型有两种方式:第一种是new 运算符,第二种是字面量。

 

1.使用new 关键字创建数组

var box = new Array(); //创建了一个数组

var box = new Array(10); //创建一个包含10 个元素的数组

var box = new Array('Jack',28,'teacher','USA'); //创建一个数组并分配好了元素

 

2.以上三种方法,可以省略new 关键字。

 

var box = Array(); //省略了new 关键字

 

3 使用字面量方式创建数组

 

var box = []; //创建一个空的数组

var box = ['Jack',28,'teacher','USA']; //创建包含元素的数组

var box = [1,2,]; //禁止这么做,IE 会识别3 个元素

var box = [,,,,,]; //同样,IE 的会有识别问题

PS:和Object 一样,字面量的写法不会调用Array()构造函数。(Firefox 除外)。

 

4.使用索引下标来读取数组的值

 

alert(box[2]); //获取第三个元素

box[2] = '学生'; //修改第三个元素

box[4] = '计算机编程'; //增加第五个元素

 

5.使用length 属性获取数组元素量

 

alert(box.length) //获取元素个数

box.length = 10; //强制元素个数

box[box.length] = 'JS 技术'; //通过length 给数组增加一个元素

 

6.创建一个稍微复杂一点的数组

 

var box = [

   { //第一个元素是一个对象

       name : 'Jack',

本文由美高梅游戏网站发布于美高梅游戏网站,转载请注明出处:JavaScript 对象和数组

关键词: