JavaScript(四)——数组

创建数组

数组由方括号构成，其中包含用逗号分隔的元素列表。

1. 假设我们想在一个数组中存储一个购物清单 - 我们会做一些像下面这样的事情。 在您的控制台中输入以下行：

let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
shopping;

2. 在这种情况下，数组中的每个项目都是一个字符串，但请记住，您可以将任何类型的元素存储在数组中 - 字符串，数字，对象，另一个变量，甚至另一个数组。 您也可以混合和匹配项目类型 - 它们并不都是数字，字符串等。尝试下面这些：

let sequence = [1, 1, 2, 3, 5, 8, 13];
let random = ['tree', 795, [0, 1, 2]];

---

访问和修改数组元素

可以使用括号表示法访问数组中的元素，与 检索特定字符串字符 的方法相同。

1. 在您的控制台中输入以下内容：

shopping[0];
// returns "bread"

2. 您还可以简单地为单个数组元素提供新值来修改数组中的元素。 例如：

// should return 7
shopping[0] = 'tahini';
shopping;
// shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ]

3. 请注意，数组中包含数组的话称之为多维数组。 您可以通过将两组方括号链接在一起来访问数组内的另一个数组。

random[2][2];

---

获取数组长度

你可以通过使用 length 属性获取数组的长度（数组中有多少项元素），这与查找字符串的长度（以字符为单位）完全相同 。 尝试以下代码：

sequence.length;
// should return 7

虽然 length 属性也有其他用途，但最常用于循环（循环遍历数组中的所有项）。 例如：

let sequence = [1, 1, 2, 3, 5, 8, 13];
for (let i = 0; i < sequence.length; i++) {
  console.log(sequence[i]);
}

---

数组方法

数组字符串转换

通常，您会看到一个包含在一个长长的字符串中的原始数据，您可能希望将有用的项目分成更有用的表单，然后对它们进行处理，例如将它们显示在数据表中。 为此，我们可以使用 split() 方法。 在其最简单的形式中，这需要一个参数，您要将字符串分隔的字符，并返回分隔符之间的子串，作为数组中的项。

1. 首先，在控制台中创建一个字符串：

let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';

2. 现在我们用每个逗号分隔它：

let myArray = myData.split(',');
myArray;

3. 最后，尝试找到新数组的长度，并从中检索一些项目：

myArray.length;
myArray[0]; // the first item in the array
myArray[1]; // the second item in the array
myArray[myArray.length-1]; // the last item in the array

4. 您也可以使用 join() 方法进行相反的操作。 尝试以下：

let myNewString = myArray.join(',');
myNewString;

5. 将数组转换为字符串的另一种方法是使用 toString() 方法。 toString() 可以比 join() 更简单，因为它不需要一个参数，但更有限制。 使用 join() 可以指定不同的分隔符（尝试使用与逗号不同的字符运行步骤4）。

let dogNames = ["Rocket","Flash","Bella","Slugger"];
dogNames.toString(); //Rocket,Flash,Bella,Slugger

添加和删除数组项

1. 先在控制台中创建数组：

let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];

首先，要在数组末尾添加或删除一个项目，我们可以使用 push() 和 pop()。

2. 让我们先使用 push() —— 注意，你需要添加一个或多个要添加到数组末尾的元素。 尝试下面的代码：

myArray.push('Cardiff');
myArray;
myArray.push('Bradford', 'Brighton');
myArray;

3. 当方法调用完成时，将返回数组的新长度。 如果要将新数组长度存储在变量中。例如：

var newLength = myArray.push('Bristol');
myArray;
newLength;

4. 从数组中删除最后一个元素的话直接使用 pop() 就可以。 例如：

myArray.pop();

5. 当方法调用完成时，将返回已删除的项目。 你也可以这样做：

let removedItem = myArray.pop();
myArray;
removedItem;

unshift() 和 shift() 从功能上与 push() 和 pop() 完全相同，只是它们分别作用于数组的开始，而不是结尾。

---

前 5 个搜索

在这个例子中，我们将展示一种更简单的使用方法 - 在这里我们给你一个假的搜索网站，一个搜索框。 这个想法是，当在搜索框中输入时，列表中会显示5个先前的搜索字词。 当列表项目数量超过 5 时，每当新项目被添加到顶部时，最后一个项目开始被删除，因此总是显示5个以前的搜索字词。

var list = document.querySelector('.output ul');
var searchInput = document.querySelector('.output input');
var searchBtn = document.querySelector('.output button');

list.innerHTML = '';

var myHistory = [];

searchBtn.onclick = function() {
  // 如果搜索框不为空，我们则将搜索词添加到开头
  if (searchInput.value !== '') {
    // number 1
    myHistory.unshift(searchInput.value);
    // 清空显示的搜索关键词列表，防止显示
    // 每次输入搜索词都会重新生成显示的内容
    list.innerHTML = '';

    // 通过循环遍历，显示所有的搜索关键词
    for (var i = 0; i < myHistory.length; i++) {
      var itemText = myHistory[i];
      var listItem = document.createElement('li');
      listItem.textContent = itemText;
      list.appendChild(listItem);
    }

    // 如果数组的长度大于 5，那么便移除旧的搜索关键词
    if (myHistory.length >= 5) {
      // number 2
      myHistory.pop();
    }

    // 清空并聚焦到搜索框，准备下一次的搜索
    searchInput.value = '';
    searchInput.focus();
  }
}

更详细的内容可以看这篇文章。