前端JS入门-数组/对象

// 创建一个混合数据类型的 `mixedData` 数组
var mixedData = ["abcd", 1, true, undefined, null, "all the things"];

但是，混合类型的数组通常作用不大。在大部分情况下，你需要在数组中使用相同类型的元素。

你甚至可以在数组中存储数组，创建嵌套数组！

// 用三个数组创建 `arraysInArrays` 数组
var arraysInArrays = [[1, 2, 3], ["Julia", "James"], [true, false, true, false]];

嵌套数组难以读懂，所以经常写成一行，在每个逗号后面加个换行符：

var arraysInArrays = [
  [1, 2, 3], 
  ["Julia", "James"], 
  [true, false, true, false]
];

要注意的一点是，如果你想访问不存在的索引处的元素，系统将返回 undefined。

数组属性和方法

JavaScript 提供了大量用于修改数组和访问数组中的值的内置方法，请参阅 MDN 文档。

Array.length，返回数组中的元素个数。

push()，向数组的末尾处添加元素。此外，该方法在添加元素后返回数组的长度。

pop()，删除数组末尾的元素。对于该方法，你不需要传递值；相反，方法将始终删除数组末尾的最后一个元素。此外，方法会返回你已经删除的元素，以防你需要使用该元素。

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])：

可以指定索引位置以添加新的元素，以及指定要删除的元素数量（如果有）。

• start，指定修改的开始位置（从 0 计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从 -1 计数）；如果负数的绝对值大于数组的长度，则表示开始位置为第 0 位。
• deleteCount(可选)，整数，表示要移除的数组元素的个数。如果 deleteCount 是 0，则不移除元素。这种情况下，至少应添加一个新元素。如果 deleteCount 大于start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。如果 deleteCount 被省略，则其相当于(arr.length - start)。
• item1, item2, ... （可选），要添加进数组的元素,从 start 位置开始。如果不指定，则 splice() 将只删除数组元素。
• 返回值，由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb'); // 不删除，在 0 后面插入
// inserts at 1st index position
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']

months.splice(4, 1, 'May');
// replaces 1 element at 4th index
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']

splice() 是非常强大的方法，使你能够以多种方式操纵数组。用一行代码就能完成各种添加或删除元素的操作。请参阅 MDN 文档 查看多个示例代码段列表。

join()，将数组转换为字符串。

var turnMeIntoAString = ["U", "d", "a", "c", "i", "t", "y"];
undefined
turnMeIntoAString.join("");
"Udacity"

数组循环

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

// 变量 `i` 用来遍历数组中的每个元素
for (var i = 0; i < donuts.length; i++) {
    donuts[i] += " hole";
    donuts[i] = donuts[i].toUpperCase();
}
// 输出：donuts 数组：["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]

数组具有各种方法，可以帮助你循环访问一组数据并执行操作。你可以在此处查看 MDN 文档数组方法列表，需要知道的几个重要方法是 forEach() 和 map() 方法。

forEach() 循环

该方法也可以循环访问数组，并使用内嵌函数表达式操作数组中的每个元素。

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

donuts.forEach(function(donut) {
  donut += " hole";
  donut = donut.toUpperCase();
  console.log(donut);
});
/**
输出：
JELLY DONUT HOLE
CHOCOLATE DONUT HOLE
GLAZED DONUT HOLE
*/

注意，forEach() 方法不需要明确指定索引就能循环访问数组。在上述示例中，donut 对应的是数组本身的元素。这与 for 或 while 循环有所不同，它们使用索引来访问数组中的每个元素：

for (var i = 0; i < donuts.length; i++) {
  donuts[i] += " hole";
  donuts[i] = donuts[i].toUpperCase();
  console.log(donuts[i]);
}

Map

如果你想获取修改原始数组后的新数组，则 forEach() 不能使用。forEach() 始终返回 undefined。但是，使用强大的 map() 方法可以轻松地通过现有数组创建一个新的数组。

通过 map() 方法，你可以对数组中的每个元素执行某种操作，然后返回新的数组。

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

var improvedDonuts = donuts.map(function(donut) {
  donut += " hole";
  donut = donut.toUpperCase();
  return donut;
});
/**
donuts 数组：["jelly donut", "chocolate donut", "glazed donut"]
improvedDonuts 数组：["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]
*/

在上述示例中，我们使用了函数表达式来将该函数传递给 map()。该函数具有一个参数，即 donut，对应的是 donuts 数组中的每个元素。你不再需要循环访问索引。map() 可以帮助你实现这一操作。

在此循环中，外侧的循环会访问每行内容，内部循环访问每列内容。

对象

对象是 JavaScript 中极其强大的特性，它允许将相关的数据段和功能，封装到一个容器中。数组是 JavaScript 中的特殊类型的对象，数组具有 length 等属性以及 push、pop、sort 和 reverse 等方法，所以数组能高效处理处理结构化的组织数据。我们可以将与特定事物相关联的所有数据和功能组织并封装到对象中。

typeof 运算符，返回后面的数据类型的名称。

typeof "hello" // 返回 "string"
typeof true // 返回 "boolean"
typeof [1, 2, 3] // 返回 "object"（数组是一种对象类型）
typeof function hello() { } // 返回 "function"

定义对象的一种方法是创建变量，并将这样一对空的大括号赋给变量。然而空对象没有意义，对象具有属性，并且能做一些事情，要添加这些信息，可以为每个数据段定义键值对。对象能做的事情称为方法，方法是与对象关联的函数。

对象字面值记法

var sister = {
  name: "Sarah", 
  age: 23,
  parents: [ "alice", "andy" ],
  siblings: ["julia"],
  favoriteColor: "purple",
  pets: true
};

在构建对象字面值时需要注意几个重要事项：

• “键”（表示属性或方法名称）和它的“值”用冒号隔开了
• 键值对用逗号隔开
• 整个对象包含在花括号 { } 里。

和在字典中查找单词的定义一样，通过键值对中的键可以查找关于对象的信息。下面这几个示例展示了可以如何使用你所创建的对象获取我姐姐父母的信息。

// 两种等价的方法来使用 key(键) 来返回它的 value(值)
sister["parents"] // 返回 [ "alice", "andy" ]
sister.parents // 仍然返回 ["alice", "andy"]

sister["parents"] 叫做括号记法（因为使用了括号！），sister.parents 叫做点记法（因为使用了点！）。

定义对象方法的语法和定义对象属性的语法几乎一样，唯一的区别是该键值对中的值将为函数。

var sister = {
  name: "Sarah",
  age: 23,
  parents: [ "alice", "andy" ],
  siblings: ["julia"],
  favoriteColor: "purple",
  pets: true,
  paintPicture: function() { return "Sarah paints!"; }
};

sister.paintPicture();

定义对象属性时，键的命名规则：

• 不能将数字用作对象属性名称的开头
• 避免使用空格或连字符（如果是多个单词构成的属性采用驼峰式大小写形式）。