数组及数组方法
一、 什么是数组？
数组对象是使用单独的变量名来存储一系列的值。
创建一个数组，有三种方法。
下面的代码定义了一个名为 myCars的数组对象：
1: 常规方式:
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");
3: 字面:
var myCars=["Saab","Volvo","BMW"];
访问数组
通过指定数组名以及索引号码，你可以访问某个特定的元素。
以下实例可以访问myCars数组的第一个值：
var name=myCars[0];
以下实例修改了数组 myCars 的第一个元素:
myCars[0]="Opel";
在一个数组中可以有不同的对象
所有的JavaScript变量都是对象。数组元素是对象。函数是对象。
因此，你可以在数组中有不同的变量类型。
你可以在一个数组中包含对象元素、函数、数组：
myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;
二、 数组属性
属性 描述
constructor 返回创建数组对象的原型函数。
length 设置或返回数组元素的个数。
prototype 允许你向数组对象添加属性或方法。
prototype 属性使您有能力向对象添加属性和方法。
当构建一个属性，所有的数组将被设置属性，它是默认值。
在构建一个方法时，所有的数组都可以使用该方法。
注意： Array.prototype 单独不能引用数组, Array() 对象可以。
注意： 在JavaScript对象中，Prototype是一个全局属性。
事例：
<p id="demo">点击按钮创建数组，并调用新建的 ucase() 方法, 最后显示结果。</p>
<button onclick="myFunction()">点我</button>
<script>
Array.prototype.myUcase=function(){
for (i=0;i<this.length;i++) {
this[i]=this[i].toUpperCase();
}
}
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.myUcase();
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
三、 数组方法
|
方法
|
描述
|
|
concat()
|
连接两个或更多的数组，并返回结果。
|
|
copyWithin()
|
从数组的指定位置拷贝元素到数组的另一个指定位置中。
|
|
entries()
|
返回数组的可迭代对象。
|
|
every()
|
检测数值元素的每个元素是否都符合条件。
|
|
fill()
|
使用一个固定值来填充数组。
|
|
filter()
|
检测数值元素，并返回符合条件所有元素的数组。
|
|
find()
|
返回符合传入测试（函数）条件的数组元素。
|
|
findIndex()
|
返回符合传入测试（函数）条件的数组元素索引。
|
|
forEach()
|
数组每个元素都执行一次回调函数。
|
|
from()
|
通过给定的对象中创建一个数组。
|
|
includes()
|
判断一个数组是否包含一个指定的值。
|
|
indexOf()
|
搜索数组中的元素，并返回它所在的位置。
|
|
isArray()
|
判断对象是否为数组。
|
|
join()
|
把数组的所有元素放入一个字符串。
|
|
keys()
|
返回数组的可迭代对象，包含原始数组的键(key)。
|
|
lastIndexOf()
|
返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
|
|
map()
|
通过指定函数处理数组的每个元素，并返回处理后的数组。
|
|
pop()
|
删除数组的最后一个元素并返回删除的元素。
|
|
push()
|
向数组的末尾添加一个或更多元素，并返回新的长度。
|
|
reduce()[rɪˈdu:s]
|
将数组元素计算为一个值（从左到右）。
|
|
reduceRight()
|
将数组元素计算为一个值（从右到左）。
|
|
reverse()
|
反转数组的元素顺序。
|
|
shift()
|
删除并返回数组的第一个元素。
|
|
slice()
|
选取数组的的一部分，并返回一个新数组。
|
|
some()[sʌm]
|
检测数组元素中是否有元素符合指定条件。
|
|
sort()
|
对数组的元素进行排序。
|
|
splice()
|
从数组中添加或删除元素。
|
|
toString()
|
把数组转换为字符串，并返回结果。
|
|
unshift()
|
向数组的开头添加一个或更多元素，并返回新的长度。
|
|
valueOf()
|
返回数组对象的原始值。
|
1. concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
合并三个数组的值：
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
2. toString() 方法可把数组转换为字符串，并返回结果。
注意： 数组中的元素之间用逗号分隔。
将数组转换为字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.toString();
3. splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。
数组中添加新元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Apple,Mango
如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。
事例：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.splice(2,2);//（-2，0）会倒着数
console.log(a); //结果：["Apple", "Mango"]
返回值a是删除内容建立的新数组。
4. slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
注意： slice() 方法不会改变原始数组。
在数组中读取元素：
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1,3);
citrus 结果输出:
Orange,Lemon
5. sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字，并按升序或降序。
默认排序顺序为按字母升序。
注意：当数字是按字母顺序排列时"40"将排在"5"前面。
使用数字排序，你必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
这些说起来可能很难理解，你可以通过本页底部实例进一步了解它。
注意： 这种方法会改变原始数组！
语法
arr.sort([compareFunction])
参数
compareFunction 可选
用来指定按某种顺序进行排列的函数。如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
firstEl
第一个用于比较的元素。
secondEl
第二个用于比较的元素。
返回值
排序后的数组。请注意，数组已原地排序，并且不进行复制。
实例
数组排序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits 输出结果：
Apple,Banana,Mango,Orange
数字排序（数字和升序）：
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b});
fruits输出结果：
1,5,10,25,40,100
数字排序 (字母和降序):
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();
fruits.reverse();
fruits输出结果：
Orange,Mango,Banana,Apple
6. reverse() 方法用于颠倒数组中元素的顺序。
颠倒数组中元素的顺序：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();
fruits 结果输出：
Mango,Apple,Orange,Banana
7. shift() 方法
用于把数组的第一个元素从其中删除，并返回第一个元素的值。
注意： 此方法改变数组的长度！
提示: 移除数组末尾的元素可以使用 pop() 方法。
从数组中移除元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift()
fruits结果输出:
Orange,Apple,Mango
8. pop() 方法
用于删除数组的最后一个元素并返回删除的元素。
注意：此方法改变数组的长度！
提示： 移除数组第一个元素，请使用 shift() 方法。
移除最后一个数组元素
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
fruits 结果输出：
Banana,Orange,Apple
9. map() 方法
map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
语法：
array.map(function(currentValue,index,arr), thisValue)
currentValue 必须。当前元素的值（哪个数组调用map方法，这个参数就是它的元素值！）
index 可选。当前元素的索引值（哪个数组调用map方法，这个参数就是它的元素索引！）
arr 可选。当前元素属于的数组对象（哪个数组调用map方法，这个参数就是数组本身！）
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。
返回值： 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
返回一个数组，数组中元素为原始数组的平方根:
var numbers = [4, 9, 16, 25];
function myFunction() {
x = document.getElementById("demo")
x.innerHTML = numbers.map(Math.sqrt);
}
输出结果为:
2,3,4,5
以下代码使用一个包含对象的数组来重新创建一个格式化后的数组。
var kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}];
var reformattedArray = kvArray.map(function(obj) {
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});
// reformattedArray 数组为： [{1: 10}, {2: 20}, {3: 30}],
// kvArray 数组未被修改:
// [{key: 1, value: 10},
// {key: 2, value: 20},
// {key: 3, value: 30}]
10. forEach() 方法
forEach()用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
语法
array.forEach(function(currentValue, index, arr), thisValue)
参数 描述
currentValue 必需。当前元素
index 可选。当前元素的索引值。
arr 可选。当前元素所属的数组对象。
thisValue 可选。传递给函数的值一般用 "this" 值。如果这个参数为空， "undefined" 会传递给 "this" 值
列出数组的每个元素：
<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");
var numbers = [4, 9, 16, 25];
function myFunction(item, index) {
demoP.innerHTML = demoP.innerHTML + "index[" + index + "]: " + item + "<br>";
}
</script>
输出结果：
index[0]: 4
index[1]: 9
index[2]: 16
index[3]: 25
注意： 没有办法中止或者跳出 forEach() 循环，除了抛出一个异常。如果你需要这样使用的话，此时使用forEach() 方法是不合理的。
若需要提前终止循环，可以使用：
ü 简单循环
ü for...of 循环
ü Array.prototype.every()
ü Array.prototype.some()
ü Array.prototype.find()
ü Array.prototype.findIndex()
这些数组方法可以对数组元素判断，以便确定是否需要继续遍历：every()，some()，find()，findIndex()
11. reduce() 方法
接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数 描述
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。
initialValue 可选。传递给函数的初始值
计算数组元素相加后的总和：
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}
输出结果：
125
12. indexOf() 方法
indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回 -1。
查找数组中的 "Apple" 元素：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");
a 结果输出：
2
语法
array.indexOf(item,start)
参数值
参数 描述
item 必须。查找的元素。
start 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
13. join() 方法
join()方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的。
把数组中的所有元素转换为一个字符串：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
energy输出结果：
Banana,Orange,Apple,Mango
使用不同的分隔符：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");
energy 结果输出：
Banana and Orange and Apple and Mango
14. filter() 方法
创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
参数 描述
currentValue 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。
回数组 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
输出结果为:
32,33,40
15. every() 方法
every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。
every() 方法使用指定函数检测数组中的所有元素：
如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。
检测数组 ages 的所有元素是否都大于等于 18 :
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.every(checkAdult);
}
输出结果为:
false
16. copyWithin() 方法
用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
语法
array.copyWithin(target, start, end)
参数
参数 描述
target 必需。复制到指定目标索引位置。
start 可选。元素复制的起始位置。可为负值，从最后一位倒着数，负几就是倒着数到第几位。
end 可选。停止复制的索引位置 (默认为 array.length，因为最后一位索引不复制)。如果为负值，表示倒数（意思就是-1不复制最后一个数，-2不复制最后两个数）。
复制数组的前面两个元素到后面两个元素上：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.copyWithin(2, 0);
fruits 输出结果：
Banana,Orange,Banana,Orange
17. isArray() 方法用于判断一个对象是否为数组。
如果对象是数组返回 true，否则返回 false。
判断对象是否为数组：
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
x.innerHTML = Array.isArray(fruits);
}
18. push() 向数组的末尾添加一个或更多元素，并返回新的长度。
举例——数组去重：
var qc=[1,2,1,1,2,3,4,5,6,7,3,4,5,5];
var arr=[];
for (var i = 0; i < qc.length; i++) {
if (arr.indexOf(qc[i])==-1) {
arr.push(qc[i]);
}
}
知识拓展：
1. map（）方法
通常情况下，map 方法中的 callback 函数（回调函数）只需要接受一个参数，就是正在被遍历的数组元素本身。但这并不意味着 map 只给 callback 传了一个参数。这个思维惯性可能会让我们犯一个很容易犯的错误。
// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]
// 通常使用parseInt时,只需要传递一个参数.
// 但实际上,parseInt可以有两个参数.第二个参数是进制数.
// 可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素,
// 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,
// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.
function returnInt(element) {
return parseInt(element, 10);
}
['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 意料之中的结果
// 也可以使用简单的箭头函数，结果同上
['1', '2', '3'].map( str => parseInt(str) );
// 一个更简单的方式:
['1', '2', '3'].map(Number); // [1, 2, 3]
// 与`parseInt` 不同，下面的结果会返回浮点数或指数:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
