JavaScript（7）：Array数组对象

JavaScript 数组用于在单一变量中存储多个值。

一、什么是数组？

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

二、创建数组

使用数组文本是创建 JavaScript 数组最简单的方法。

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

空格和折行并不重要。声明可横跨多行：

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

请不要最后一个元素之后写逗号（比如 "BMW",），可能存在跨浏览器兼容性问题。

使用 JavaScript 关键词 new 创建数组

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

以上两个例子效果完全一样。无需使用 new Array()。出于简洁、可读性和执行速度的考虑，请使用第一种方法或使用 [] 取而代之！

下面两条不同的语句创建了名为 points 的新的空数组：

var points = new Array();         // 差
var points = [];                  // 优

下面两条不同的语句创建包含六个数字的新数组：

var points = new Array(40, 100, 1, 5, 25, 10); // 差
var points = [40, 100, 1, 5, 25, 10];          // 优

三、访问数组元素

我们通过引用索引号（下标号）来引用某个数组元素。[0] 是数组中的第一个元素。[1] 是第二个。数组索引从 0 开始。

var name = cars[0];//访问 cars 中的首个元素的值：

在 JavaScript 中，数组只能使用数字索引。

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length 返回 3
var y = person[0];              // person[0] 返回 "Bill"

警告！ 假如您使用命名索引，JavaScript 会把数组重定义为标准对象。

四、改变数组元素

这条语句修改了 cars 中第一个元素的值：

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

五、访问完整数组

可通过引用数组名来访问完整数组：

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

六、数组元素可以是对象

JavaScript 变量可以是对象。数组是特殊类型的对象，可以在相同数组中存放不同类型的变量。

您可以在数组中保存对象、保存函数和保存数组等：

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

七、数组属性

1、length 属性：数组的长度（数组元素的数目）。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;

length 属性始终大于最高数组索引（下标）。

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];//访问最后一个数组元素

2、遍历数组元素

遍历数组的最安全方法是使用 "for" 循环：

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

您也可以使用 Array.foreach() 函数：

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

3、数组和对象的区别

在 JavaScript 中，数组使用数字索引。

在 JavaScript 中，对象使用命名索引。

数组是特殊类型的对象，具有数字索引。

何时使用数组，何时使用对象？

• JavaScript 不支持关联数组
• 如果希望元素名为字符串（文本）则应该使用对象。
• 如果希望元素名为数字则应该使用数组。

八、数组方法

1、toString(),join() 把数组转换为字符串

toString() :把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();//Banana,Orange,Apple,Mango

join() 方法:也可将所有数组元素结合为一个字符串它的行为类似 toString()，但是您还可以规定分隔符：

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");//Banana * Orange * Apple * Mango

2、push:添加数组元素

push() 方法（在数组结尾处）向数组添加一个新的元素，push() 方法返回新数组的长度：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x =  fruits.push("Kiwi");   //  x 的值是 5

也可以使用 length 属性向数组添加新元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // 向 fruits 添加一个新元素 (Lemon)

警告！添加最高索引的元素可在数组中创建未定义的“洞”。

3、pop:删除最后一个元素

pop() 方法从数组中删除最后一个元素，pop() 方法返回“被弹出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();    // 从 fruits 删除最后一个元素（"Mango"） x 的值是 "Mango"

4、shift() ：位移元素，删除首个数组元素

位移与弹出等同，但处理首个元素而不是最后一个。返回被“位移出”的字符串：

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // 从 fruits 删除第一个元素 "Banana"，/返回 "Banana"

5、unshift() 方法：（在开头）向数组添加新元素

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：unshift() 方法返回新数组的长度。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon，返回 5

6、delete 删除元素

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

7、splice：拼接数组

splice() 方法可用于向数组添加新项：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

• 第一个参数（2）：应添加新元素的位置（拼接）。
• 第二个参数（0：应删除多少元素。
• 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。
• splice() 方法返回一个包含已删除项的数组：

splice() 来删除元素

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

8、concat() ：合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组，concat() 方法不会更改现有数组。它总是返回一个新数组。

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

concat() 方法可以使用任意数量的数组参数：

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

concat() 方法也可以将值作为参数：

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);

9、slice() ：裁剪数组

slice() 方法用数组的某个片段切出新数组。slice() 方法创建新数组，它不会从源数组中删除任何元素。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1); //从数组元素 1 （"Orange"）开始切出一段数组

slice() 可接受两个参数，比如 (1, 3)。该方法会从开始参数选取元素，直到结束参数（不包括）为止。

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1, 3);

九、数组排序

1、sort()：数组排序

sort() 方法以字母顺序对数组进行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序

2、reverse() ：反转数组

reverse() 方法反转数组中的元素。

您可以使用它以降序对数组进行排序：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();            // 对 fruits 中的元素进行排序
fruits.reverse();         // 反转元素顺序

3、数字排序

默认地，sort() 函数按照字符串顺序对值进行排序。该函数很适合字符串（"Apple" 会排在 "Banana" 之前）。

不过，如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比较函数来修正此问题：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

使用相同的技巧对数组进行降序排序：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});

4、比较函数

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

您可以使用下面的代码片段来测试数值和字母排序：

<button onclick="myFunction1()">以字母顺序排序</button>
<button onclick="myFunction2()">以数字顺序排序</button>

<p id="demo"></p>

<script>
var points = [40, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = points;

function myFunction1() {
        points.sort();
        document.getElementById("demo").innerHTML  = points;
}
function myFunction2() {
        points.sort(function(a, b){return  a - b});
        document.getElementById("demo").innerHTML = points;
}
</script>

以随机顺序排序数组

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return 0.5 - Math.random()});

查找最高（或最低）的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

升序排序：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});

// 现在 points[0] 包含最低值
// 而 points[points.length-1] 包含最高值

降序排序：

var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return b - a});

// 现在 points[0] 包含最高值
// 而 points[points.length-1] 包含最低值

如果您仅仅需要找到最高或最低值，对整个数组进行排序是效率极低的方法。

对数组使用 Math.max()、Math.min()

您可以使用 Math.max.apply 来查找数组中的最高值：

function myArrayMax(arr) {
    return Math.max.apply(null, arr);
}

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

4、对象数组排序

JavaScript 数组经常会包含对象：

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];

即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。

解决方法是通过比较函数来对比属性值：

cars.sort(function(a, b){return a.year - b.year});

比较字符串属性会稍复杂：

cars.sort(function(a, b){
      var x = a.type.toLowerCase();
      var y = b.type.toLowerCase();
      if (x < y) {return -1;}
      if (x > y) {return 1;}
      return 0;
});

十、数组迭代

1、forEach()：为每个数组元素调用一次函数（回调函数）。

该函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

2、map()：通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。map() 方法不会更改原始数组。

请注意，该函数有 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子将每个数组值乘以2：

var numbers1 = [45, 4, 9, 16, 25];
var numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

3、filter()：创建一个包含通过测试的数组元素的新数组。

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子用值大于 18 的元素创建一个新数组：

var numbers = [45, 4, 9, 16, 25];
var over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

4、reduce()：在每个数组元素上运行函数，以生成（减少它）单个值。

reduce() 方法在数组中从左到右工作。另请参见 reduceRight（）。reduce() 方法不会减少原始数组。

请注意此函数接受 4 个参数：

• 总数（初始值/先前返回的值）
• 项目值
• 项目索引
• 数组本身

这个例子确定数组中所有数字的总和：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

reduce() 方法能够接受一个初始值：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

亲自试一试

5、reduceRight()：在每个数组元素上运行函数，以生成（减少它）单个值。

reduceRight() 方法在数组中从左到右工作。另请参见 reduce（）。reduceRight() 方法不会减少原始数组。

请注意此函数接受 4 个参数：

• 总数（初始值/先前返回的值）
• 项目值
• 项目索引
• 数组本身

这个例子确定数组中所有数字的总和：

var numbers1 = [45, 4, 9, 16, 25];
var sum = numbers1.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

6、every()：检查所有数组值是否通过测试。

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子检查所有数组值是否大于 18：

var numbers = [45, 4, 9, 16, 25];
var allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

7、some()：检查某些数组值是否通过了测试。

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子检查某些数组值是否大于 18：

var numbers = [45, 4, 9, 16, 25];
var someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

亲自试一试

8、indexOf()：在数组中搜索元素值并返回其位置。

array.indexOf(item, start)

• item：必需。要检索的项目。
• start：可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

如果未找到项目，Array.indexOf() 返回 -1。

如果项目多次出现，则返回第一次出现的位置。

注释：第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

检索数组中的项目 "Apple"：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");

亲自试一试

9、lastIndexOf()：从数组结尾开始搜索。

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

array.lastIndexOf(item, start)

• item:必需。要检索的项目。
• start:可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。

检索数组中的项目 "Apple"：

var fruits = ["Apple", "Orange", "Apple", "Mango"];
var a = fruits.lastIndexOf("Apple");

10、find()：返回通过测试函数的第一个数组元素的值。

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子查找（返回）大于 18 的第一个元素的值：

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

11、findIndex()：返回通过测试函数的第一个数组元素的索引

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

这个例子查找大于 18 的第一个元素的索引：

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

亲自试一试

十一、其他技巧：

1、判断数组中是否有重复项

方法一：

// 验证重复元素，有重复返回true；否则返回false
function isRepeat(arr) {
  var hash = {};
  for(var i in arr) {
    if(hash[arr[i]]) {
      return true;
    }
    // 不存在该元素，则赋值为true，可以赋任意值，相应的修改if判断条件即可
    hash[arr[i]] = true;
  }
  return false;
}