数组
一、 什么是数组?
数组对象是使用单独的变量名来存储一系列的值。
在一个数组中可以有不同的对象
所有的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]);
}
}