网页编程轻松学
JavaScript操作数组
数组是多个变量的集合,其中每个子变量称为数组元素,可以通过数组索引来读写子变量的值。数组是非常常用的多变量组织方式,在JavaScript中使用Array内置对象及其属性方法来操作。
1. JavaScript的内置对象Array及其创建:
JavaScript中创建数组对象Array一般有三种方式:
var arrayname = new Array();
var arrayname = new Array(arraysize);
var arrayname = new Array(element0,element1,…elementN);
还有一种更常用的方法,就是用方括号[]来实例化一个数组。示例:
var arrayname = ["January","February","March","April"];
JavaScript中,不同数组元素通过下标加以区别,一个数组元素由数组名、一对方括号[]和这对括号中的下标组合起来表示。对于数组对象arrayname,包含数组元素arrayname[0]、arrayname[1]、arrayname[2]、......、arrayname[arraysize-1]。下标是从0开始的,下标是按顺序排列的数字,这种数组也被称为索引数组。
JavaScript数组的长度可以自由扩展,即使使用长度值创建的数组,也是可变的。如果数组中某个小于长度的元素未定义,那么就会为该元素自动赋给undefined值,而当undefined值转换成字符串时,自动转换成null。
2.数组的赋值与取值:
使用数组元素类似于使用普通变量,不过要使用其索引。示例:
var classmates = new Array[4];
classmates[0]="Tom";
classmates[1]="Jone";
classmates[3]=classmates[1];
JavaScript允许new Array创建对象时直接给出数组元素的值,此时数组长度就是括号中给出的数组元素的个数。示例:
classmates = new Array["Tom","Jone","Sam","Marry"];
如果在new Array时没有任何数组元素,数组长度为0。因为JavaScript有自动扩展功能,空数组也可以赋值,而没有赋值过的元素被初始化为null。如:
classmates = new Array();
classmates[8]="Peter";
3.多维数组:
JavaScript不能直接声明多维数组,但可以通过数组嵌套来实现多维数组。示例:
var twoDarray = new Array(new Array("one","two"),new Array("three","four"));
要检索多维数组的元素,可以在顶层数组的名称之后使用多个数组访问运算符“[]”:
document.write(twoDArray[0][0]);
也可以使用循环语句遍历多维数组,例如:
var outlength=twoDArray.length;
for (var i=0;i<outlength;i++) {
var inlength=twoDArray[i].length;
for (var j=0;j<inlength;j++) {
document.write(twoDArray[i][j]+"<br />");
}
}
4.数组元素的遍历:
虽然可以在for循环中使用索引值来遍历数组元素,但更正规的做法是使用for...in方式来实现数组遍历。格式为:
for (variable in array_name) 循环体语句;
其中,variable将遍历数组中的每个索引,其执行过程为:
①variable被赋值为数组的第1个下标索引(通常是0);
②如果variable值是一个有效的下标索引(小于数组长度),就执行步骤③,否则退出循环。
③执行循环语句;
④variable变量被赋值为数组的下一个下标索引,转去执行步骤②进行循环判断。
注意,数组下标是字符串类型的,使用时往往需要使用parseInt函数。
5.Array对象的常用方法:
Array对象有length属性,用于表示数组的长度,而包含的大量方法则用于数组的各种操作。
1)isArray(obj)方法:判断参数是否一个数组
这是Array类型的一个静态方法。示例:
var a = [1,2,3];
console.log(typeof a); //'object'
console.log(Array.isArray(a)); //true
2)indexOf(item,start)方法:使用全等运算符搜索数组中的项,并返回该项的索引位置
示例1:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.indexOf("Apple")); //2
示例2:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
console.log(fruits.indexOf("Apple",4)); //6
3)lastIndexOf(item,start)方法:使用全等运算符搜索数组中的项(从最后1项向前搜索),并返回匹配项的索引
示例:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
console.log(fruits.lastIndexOf("Apple",4)); //2
4)reverse()方法:反转数组元素的位置
5)sort(sortfunction)方法:对数组进行原地排序,不生成副本
调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,即按照字符编码的顺序进行排序。示例1:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); //['Apple','Banana','Mango','Orange']
如果想按照其他标准进行排序,就需要提供比较函数sortfunction,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。示例2:
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b}); //[1,5,10,25,40,100]
points.sort(function(a,b){return b-a}); //[100,40,25,10,5,1]
6)forEach(function(currentValue, index, arr), thisValue)方法:对数组中的每一项执行函数
其中,必需参数currentValue为当前元素,可选参数index为当前元素的索引值,可选参数arr为当前元素所属的数组对象;thisValue为可选参数,一般用 "this" 值。示例:
var numbers = [65, 44, 12, 4], sum=0;
numbers.forEach(
function addNumber(value) { sum += value; }
); // 输出33
此方法不对未初始化的值进行操作。示例2:
const arraySparse = [1,3,,7];
let numCallbackRuns = 0;
arraySparse.forEach(function(element){
console.log(element); // 依次输出1,3,7
numCallbackRuns++;
});
console.log("numCallbackRuns: ", numCallbackRuns); // 输出3
示例3:
var arr = [8, 10, 13, 10, 8, 1, 5];
function logger(element, index, array) {
console.log("index " + index + " is " + element);
}
arr.forEach(logger);
7)push(newelement1,newelement2,....,newelementX)方法:把1个或更多个元素添加到数组的末尾并返回数组的新长度
8)pop()方法:删除并返回数组的最后一个元素,如果数组已空返回undefined值
9)shift()方法:删除并返回数组的第1个元素,如果数组已空返回undefined值
10)unshift(newelement1,newelement2,....,newelementX)方法:数组的开头添加一个或更多元素,并返回新的长度
11)splice(index,howmany,item1,.....,itemX)方法:向数组中添加元素或者从数组中移除元素,改变原数组也返回新数组
其中,必需参数index为添加/删除项目的位置,使用负数可从数组结尾处规定位置;必需参数howmany为要删除的项目数量,为0则不会删除项目;可选参数item1, ..., itemX 为向数组添加的新项目。
示例1:
var arr = ['George','John','Thomas','James','Adrew','Martin'];
arr.splice(2,0,"William"); // ['George','John','William','Thomas','James','Adrew','Martin']
示例2:
var arr = ['George','John','Thomas','James','Adrew','Martin'];
arr.splice(2,1,"William"); // ['George','John','William','James','Adrew','Martin']
示例3:
var arr = ['George','John','Thomas','James','Adrew','Martin'];
arr.splice(2,3,"William") // ['George','John','William','Martin']
12)slice(start,end)方法:截取数组中的一个片断并作为新数组返回,不改变原数组
其中,必需参数start 为开始选取的位置,如果为负值则从数组尾部开始算起;可选参数end为结束选取的位置,不指定时到数组结束,为负值时从数组尾部开始算起。
示例1:
var arr = ['George','John','Thomas'];
console.log(arr.slice(1)); // ['John','Thomas']
示例2:
var arr = ['George','John','Thomas','James','Adrew','Martin'];
console.log(arr.slice(2,4)); // ['Thomas','James']
13)concat(arrayX,arrayX,......,arrayX)方法:连接两个或多个数组形成新数组,不改变原数组
示例1:
var a = [1,2,3];
document.write(a.concat(4,5)); // [1,2,3,4,5]
示例2:
var arr = ['George','John','Thomas'];
var arr2 = ['James','Adrew','Martin'];
var arr3 = ['William','Franklin'];
document.write(arr.concat(arr2,arr3))
14)every(function(currentValue,index,arr), thisValue)方法:使用指定函数检测数组所有元素是否都符合指定条件
如果数组中检测到有一个元素不满足,则整个表达式返回false,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回true。
此方法不会对空数组进行检测,也不会改变原始数组。示例:
function checkAdult(age) {
return age >=18;
}
var ages = [32, 33, 12, 40];
console.log(ages.every(checkAdult));
15)some(function(currentValue,index,arr),thisValue)方法:使用指定函数检测数组是否有元素符合指定条件
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。
此方法不会对空数组进行检测,也不会改变原始数组。示例:
console.log(ages.some(checkAdult));
16)filter(function(currentValue,index,arr), thisValue)方法:使用指定函数检测数组的每一项,并构造1个包括符合条件元素的新数组
此方法不会对空数组进行检测,也不会改变原始数组。示例:
console.log(ages.filter(checkAdult)); // [32, 33, 40]
17)map(function(currentValue,index,arr), thisValue)方法:使用指定函数对数组中的每一项执行操作并按顺序构造1个新数组
此方法不会对空数组进行检测,也不会改变原始数组。示例:
var numbers = [4, 9, 16, 25];
console.log(numbers.map(Math.sqrt));
18)reduce(function(total, currentValue, currentIndex, arr), initialValue)方法:从左到右使用指定函数对数组中元素缩减,最终得到一个值
其中,必需参数total为初始值或者计算结束后的返回值;必需参数currentValue为当前元素;可选参数currentIndex为当前索引;可选参数arr为当前元素所属的数组对象;可选参数initialValue为传递给函数的初始值。
示例1:
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
console.log(numbers.reduce(getSum)); // 求和125
示例2:
var numbers = [15.5, 2.3, 1.1, 4.7];
function getSum(total, num) {
return total + Math.round(num);
}
console.log(numbers.reduce(getSum, 0)); // 四舍五入后求和
19)reduceRight(function(total, currentValue, currentIndex, arr), initialValue)方法:从右到左使用指定函数对数组中元素缩减,最终得到一个值
示例:
var numbers = [2, 45, 30, 100];
function getSum(total, num) {
return total - num;
}
console.log(numbers.reduceRight(getSum));
20)join(separator)方法:使用分隔符把数组中的所有元素连接成一个字符串
其中separator为分隔符,缺省时默认使用逗号。示例:
var arr = ['George','John','Thomas'];
document.write(arr.join("."));nbsp; // 'George.John.Thomas'
21)toString()方法:返回一个字符串,该字符串包含数组中所有元素,各个元素间用逗号分隔
22)toLocaleString()方法:返回一个字符串,表示指定数组中的元素,各个元素间用逗号分隔
Array可以使用Array.prototype.xxx = function() {}的方式扩展方法。
6.Array对象的静态属性:
Array对象的静态属性常用于数组的排序中,包括:
CASEINSENSITIVE:在排序方法中,此常数指定不区分大小写的排序
DESCENDING:在排序方法中,此常数指定降序排序
NUMERIC:在排序方法中,此常数指定数字排序
RETURNINDEXEDARRAY:指定排序返回索引数组作为调用sort()或sortOn()方法的结果
UNIQUESORT:在排序方法中,此常数指定唯一的排序要求
7.ES6改进的Array功能:
1)Array.of(element1,element2,....,elementX)方法:无论传入多少参数,也无论什么类型,总会创建一个包含所有参数的数组
示例:
let items=Array.of(1, 2);
2)Array.from(object, mapFunction, thisValue)方法:可以接受可迭代对象或类数组对象作为第一个参数,最终返回一个数组
其中,必需参数object为要转换为数组的对象;可选参数mapFunction为数组中每个元素要调用的函数;可选参数thisValue为映射函数(mapFunction)中的this对象。
示例:
var arr = Array.from([1, 2, 3], x => x * 10);
3)find(function(currentValue, index, arr),thisValue)方法和findIndex(function(currentValue, index, arr), thisValue)方法:用于根据某个条件在数组中查找匹配元素
两个函数都接受两个参数,一个是回调函数,另一个是可选参数,用于指定回调函数中的this的值。执行回调函数时,传入的参数为数组中每个元素和该元素的索引及数组本身。如果回调函数返回true,两个方法就会停止搜索数组的剩余部分。两个函数的差别是,find()方法返回查找到的值,而findIndex()方法返回查找到的索引。
示例:
let numbers=[25, 30, 35, 40, 45];
console.log(numbers.find(n=>n>33)); // 35
console.log(numbers.findIndex(n=>n>33)); // 2
4)fill(value, start, end)方法:用指定的值填充一至多个数组元素
示例:
let numbers=[1, 2, 3, 4];
numbers.fill(1);
console.log(numbers.toString()); // 1,1,1,1
此方法还有两个可选参数,第二个参数表示开始填充的索引,第三个参数表示填充的结束索引。如果开始索引和结束索引为负值,这些值会与数组的length属性相加作为索引值。
5)copyWithin(target, start, end)方法:用于从数组中复制元素的值
其中,必需参数target为要复制到指定目标的索引位置;可选参数start为元素复制的起始位置;可选参数end为停止复制的索引位置,默认为array.length,为负值则表示从后数。 要传入两个参数,一个是开始填充值的索引位置,另一个是开始复制值的索引位置。示例:
let numbers=[1, 2, 3, 4];
numbers.copyWithin(2, 0); //从数组的索引2开始粘贴,从数组的索引0开始复制值
console.log(numbers.toString()); // 1,2,1,2
默认情况下,copyWithin()方法会一直复制直到数组末尾,可以提供可选的第三个参数来限制重写元素的数量。示例:
let numbers=[1, 2, 3, 4];
numbers.copyWithin(2, 0, 1);
console.log(numbers.toString()); // 1,2,1,4
copyWithin()方法也接受负值索引。
6)entries()方法:返回一个数组的迭代对象,该对象包含数组的键值对(key/value)
7)keys()方法:返回一个包含数组键的迭代对象
8)获取数组中最大值及最小值方法:
Math.max.apply(null, a)
Math.min.apply(null, a)
也可以为Array增加max及min方法。如:
Array.prototype.max = function(){
return Math.max.apply({},this)
}
Array.prototype.min = function(){
return Math.min.apply({},this)
}
然后就可以直接使用:
[1,2,3].max() // => 3
[1,2,3].min() // => 1
9)数组的解构:
解构是ES6新增加的功能,可以把对象和数组的数据解构打散,从更小的部分中获取需要的信息,这里只介绍比较简单的数组解构。
数组解构中,通过值在数组中的位置进行选取,且可以存储在任意变量中,未显式声明的元素都会直接被忽略。示例:
let colors=['red', 'green', 'blue'];
let [firstColor, secondColor]=colors;
代码中,从数组中解构出两个值,并分别存储在两个变量中。也可以直接省略元素,只为感兴趣的元素提供变量名。示例:
let [,, thirdColor]=colors;
数组解构也可以用于赋值,且不需要用小括号包裹表达式:
let colors=['red', 'green', 'blue'];
let firstColor='black', secondColor='purple';
[firstColor, secondColor]=colors;
数组解构也可以使用默认值:
let [firstColor, secondColor='green']=colors;
数组解构中可以使用不定元素,通过...语法将数组中的其余元素赋值给一个变量:
let [firstColor, ...restColor]=colors;
可以通过不定元素的语法来实现数组复制功能:
let [...clonedColor]=colors;
数组解构也可以用于嵌套数组中。
10)数组解构用于交换两个变量的值:
ES5中交换两个变量的值要引入第三个临时变量。ES6中,可以直接交换:
let a=1, b=2;
[a, b]=[b, a];
8.复合数组:
复合数组,也称为关联数组、hash数组或映射。复合数组使用key而不是数字索引值来组织存储。每个key都是一个唯一的字符串,与一个值相关联并用于访问该值,而值可以是字符串、数字、Array、Object等任意数据类型。复合数组是key/value对的无序集合。
有关复合数组的内容可参考网页。
9.定型数组:
定型数组是ES6新增的数组类型。JavaScript中,数字是以64位浮点数格式存储的,并按需转换为32位整数,算术运算很慢。因此,ES6提出定型数组来提供更高性能的算术运算。
有关定型数组的内容可参考网页。
1. JavaScript的内置对象Array及其创建:
JavaScript中创建数组对象Array一般有三种方式:
var arrayname = new Array();
var arrayname = new Array(arraysize);
var arrayname = new Array(element0,element1,…elementN);
还有一种更常用的方法,就是用方括号[]来实例化一个数组。示例:
var arrayname = ["January","February","March","April"];
JavaScript中,不同数组元素通过下标加以区别,一个数组元素由数组名、一对方括号[]和这对括号中的下标组合起来表示。对于数组对象arrayname,包含数组元素arrayname[0]、arrayname[1]、arrayname[2]、......、arrayname[arraysize-1]。下标是从0开始的,下标是按顺序排列的数字,这种数组也被称为索引数组。
JavaScript数组的长度可以自由扩展,即使使用长度值创建的数组,也是可变的。如果数组中某个小于长度的元素未定义,那么就会为该元素自动赋给undefined值,而当undefined值转换成字符串时,自动转换成null。
2.数组的赋值与取值:
使用数组元素类似于使用普通变量,不过要使用其索引。示例:
var classmates = new Array[4];
classmates[0]="Tom";
classmates[1]="Jone";
classmates[3]=classmates[1];
JavaScript允许new Array创建对象时直接给出数组元素的值,此时数组长度就是括号中给出的数组元素的个数。示例:
classmates = new Array["Tom","Jone","Sam","Marry"];
如果在new Array时没有任何数组元素,数组长度为0。因为JavaScript有自动扩展功能,空数组也可以赋值,而没有赋值过的元素被初始化为null。如:
classmates = new Array();
classmates[8]="Peter";
3.多维数组:
JavaScript不能直接声明多维数组,但可以通过数组嵌套来实现多维数组。示例:
var twoDarray = new Array(new Array("one","two"),new Array("three","four"));
要检索多维数组的元素,可以在顶层数组的名称之后使用多个数组访问运算符“[]”:
document.write(twoDArray[0][0]);
也可以使用循环语句遍历多维数组,例如:
var outlength=twoDArray.length;
for (var i=0;i<outlength;i++) {
var inlength=twoDArray[i].length;
for (var j=0;j<inlength;j++) {
document.write(twoDArray[i][j]+"<br />");
}
}
4.数组元素的遍历:
虽然可以在for循环中使用索引值来遍历数组元素,但更正规的做法是使用for...in方式来实现数组遍历。格式为:
for (variable in array_name) 循环体语句;
其中,variable将遍历数组中的每个索引,其执行过程为:
①variable被赋值为数组的第1个下标索引(通常是0);
②如果variable值是一个有效的下标索引(小于数组长度),就执行步骤③,否则退出循环。
③执行循环语句;
④variable变量被赋值为数组的下一个下标索引,转去执行步骤②进行循环判断。
注意,数组下标是字符串类型的,使用时往往需要使用parseInt函数。
5.Array对象的常用方法:
Array对象有length属性,用于表示数组的长度,而包含的大量方法则用于数组的各种操作。
1)isArray(obj)方法:判断参数是否一个数组
这是Array类型的一个静态方法。示例:
var a = [1,2,3];
console.log(typeof a); //'object'
console.log(Array.isArray(a)); //true
2)indexOf(item,start)方法:使用全等运算符搜索数组中的项,并返回该项的索引位置
示例1:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.indexOf("Apple")); //2
示例2:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
console.log(fruits.indexOf("Apple",4)); //6
3)lastIndexOf(item,start)方法:使用全等运算符搜索数组中的项(从最后1项向前搜索),并返回匹配项的索引
示例:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
console.log(fruits.lastIndexOf("Apple",4)); //2
4)reverse()方法:反转数组元素的位置
5)sort(sortfunction)方法:对数组进行原地排序,不生成副本
调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,即按照字符编码的顺序进行排序。示例1:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort(); //['Apple','Banana','Mango','Orange']
如果想按照其他标准进行排序,就需要提供比较函数sortfunction,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。示例2:
var points = [40,100,1,5,25,10];
points.sort(function(a,b){return a-b}); //[1,5,10,25,40,100]
points.sort(function(a,b){return b-a}); //[100,40,25,10,5,1]
6)forEach(function(currentValue, index, arr), thisValue)方法:对数组中的每一项执行函数
其中,必需参数currentValue为当前元素,可选参数index为当前元素的索引值,可选参数arr为当前元素所属的数组对象;thisValue为可选参数,一般用 "this" 值。示例:
var numbers = [65, 44, 12, 4], sum=0;
numbers.forEach(
function addNumber(value) { sum += value; }
); // 输出33
此方法不对未初始化的值进行操作。示例2:
const arraySparse = [1,3,,7];
let numCallbackRuns = 0;
arraySparse.forEach(function(element){
console.log(element); // 依次输出1,3,7
numCallbackRuns++;
});
console.log("numCallbackRuns: ", numCallbackRuns); // 输出3
示例3:
var arr = [8, 10, 13, 10, 8, 1, 5];
function logger(element, index, array) {
console.log("index " + index + " is " + element);
}
arr.forEach(logger);
7)push(newelement1,newelement2,....,newelementX)方法:把1个或更多个元素添加到数组的末尾并返回数组的新长度
8)pop()方法:删除并返回数组的最后一个元素,如果数组已空返回undefined值
9)shift()方法:删除并返回数组的第1个元素,如果数组已空返回undefined值
10)unshift(newelement1,newelement2,....,newelementX)方法:数组的开头添加一个或更多元素,并返回新的长度
11)splice(index,howmany,item1,.....,itemX)方法:向数组中添加元素或者从数组中移除元素,改变原数组也返回新数组
其中,必需参数index为添加/删除项目的位置,使用负数可从数组结尾处规定位置;必需参数howmany为要删除的项目数量,为0则不会删除项目;可选参数item1, ..., itemX 为向数组添加的新项目。
示例1:
var arr = ['George','John','Thomas','James','Adrew','Martin'];
arr.splice(2,0,"William"); // ['George','John','William','Thomas','James','Adrew','Martin']
示例2:
var arr = ['George','John','Thomas','James','Adrew','Martin'];
arr.splice(2,1,"William"); // ['George','John','William','James','Adrew','Martin']
示例3:
var arr = ['George','John','Thomas','James','Adrew','Martin'];
arr.splice(2,3,"William") // ['George','John','William','Martin']
12)slice(start,end)方法:截取数组中的一个片断并作为新数组返回,不改变原数组
其中,必需参数start 为开始选取的位置,如果为负值则从数组尾部开始算起;可选参数end为结束选取的位置,不指定时到数组结束,为负值时从数组尾部开始算起。
示例1:
var arr = ['George','John','Thomas'];
console.log(arr.slice(1)); // ['John','Thomas']
示例2:
var arr = ['George','John','Thomas','James','Adrew','Martin'];
console.log(arr.slice(2,4)); // ['Thomas','James']
13)concat(arrayX,arrayX,......,arrayX)方法:连接两个或多个数组形成新数组,不改变原数组
示例1:
var a = [1,2,3];
document.write(a.concat(4,5)); // [1,2,3,4,5]
示例2:
var arr = ['George','John','Thomas'];
var arr2 = ['James','Adrew','Martin'];
var arr3 = ['William','Franklin'];
document.write(arr.concat(arr2,arr3))
14)every(function(currentValue,index,arr), thisValue)方法:使用指定函数检测数组所有元素是否都符合指定条件
如果数组中检测到有一个元素不满足,则整个表达式返回false,且剩余的元素不会再进行检测。如果所有元素都满足条件,则返回true。
此方法不会对空数组进行检测,也不会改变原始数组。示例:
function checkAdult(age) {
return age >=18;
}
var ages = [32, 33, 12, 40];
console.log(ages.every(checkAdult));
15)some(function(currentValue,index,arr),thisValue)方法:使用指定函数检测数组是否有元素符合指定条件
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素,则返回false。
此方法不会对空数组进行检测,也不会改变原始数组。示例:
console.log(ages.some(checkAdult));
16)filter(function(currentValue,index,arr), thisValue)方法:使用指定函数检测数组的每一项,并构造1个包括符合条件元素的新数组
此方法不会对空数组进行检测,也不会改变原始数组。示例:
console.log(ages.filter(checkAdult)); // [32, 33, 40]
17)map(function(currentValue,index,arr), thisValue)方法:使用指定函数对数组中的每一项执行操作并按顺序构造1个新数组
此方法不会对空数组进行检测,也不会改变原始数组。示例:
var numbers = [4, 9, 16, 25];
console.log(numbers.map(Math.sqrt));
18)reduce(function(total, currentValue, currentIndex, arr), initialValue)方法:从左到右使用指定函数对数组中元素缩减,最终得到一个值
其中,必需参数total为初始值或者计算结束后的返回值;必需参数currentValue为当前元素;可选参数currentIndex为当前索引;可选参数arr为当前元素所属的数组对象;可选参数initialValue为传递给函数的初始值。
示例1:
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
console.log(numbers.reduce(getSum)); // 求和125
示例2:
var numbers = [15.5, 2.3, 1.1, 4.7];
function getSum(total, num) {
return total + Math.round(num);
}
console.log(numbers.reduce(getSum, 0)); // 四舍五入后求和
19)reduceRight(function(total, currentValue, currentIndex, arr), initialValue)方法:从右到左使用指定函数对数组中元素缩减,最终得到一个值
示例:
var numbers = [2, 45, 30, 100];
function getSum(total, num) {
return total - num;
}
console.log(numbers.reduceRight(getSum));
20)join(separator)方法:使用分隔符把数组中的所有元素连接成一个字符串
其中separator为分隔符,缺省时默认使用逗号。示例:
var arr = ['George','John','Thomas'];
document.write(arr.join("."));nbsp; // 'George.John.Thomas'
21)toString()方法:返回一个字符串,该字符串包含数组中所有元素,各个元素间用逗号分隔
22)toLocaleString()方法:返回一个字符串,表示指定数组中的元素,各个元素间用逗号分隔
Array可以使用Array.prototype.xxx = function() {}的方式扩展方法。
6.Array对象的静态属性:
Array对象的静态属性常用于数组的排序中,包括:
CASEINSENSITIVE:在排序方法中,此常数指定不区分大小写的排序
DESCENDING:在排序方法中,此常数指定降序排序
NUMERIC:在排序方法中,此常数指定数字排序
RETURNINDEXEDARRAY:指定排序返回索引数组作为调用sort()或sortOn()方法的结果
UNIQUESORT:在排序方法中,此常数指定唯一的排序要求
7.ES6改进的Array功能:
1)Array.of(element1,element2,....,elementX)方法:无论传入多少参数,也无论什么类型,总会创建一个包含所有参数的数组
示例:
let items=Array.of(1, 2);
2)Array.from(object, mapFunction, thisValue)方法:可以接受可迭代对象或类数组对象作为第一个参数,最终返回一个数组
其中,必需参数object为要转换为数组的对象;可选参数mapFunction为数组中每个元素要调用的函数;可选参数thisValue为映射函数(mapFunction)中的this对象。
示例:
var arr = Array.from([1, 2, 3], x => x * 10);
3)find(function(currentValue, index, arr),thisValue)方法和findIndex(function(currentValue, index, arr), thisValue)方法:用于根据某个条件在数组中查找匹配元素
两个函数都接受两个参数,一个是回调函数,另一个是可选参数,用于指定回调函数中的this的值。执行回调函数时,传入的参数为数组中每个元素和该元素的索引及数组本身。如果回调函数返回true,两个方法就会停止搜索数组的剩余部分。两个函数的差别是,find()方法返回查找到的值,而findIndex()方法返回查找到的索引。
示例:
let numbers=[25, 30, 35, 40, 45];
console.log(numbers.find(n=>n>33)); // 35
console.log(numbers.findIndex(n=>n>33)); // 2
4)fill(value, start, end)方法:用指定的值填充一至多个数组元素
示例:
let numbers=[1, 2, 3, 4];
numbers.fill(1);
console.log(numbers.toString()); // 1,1,1,1
此方法还有两个可选参数,第二个参数表示开始填充的索引,第三个参数表示填充的结束索引。如果开始索引和结束索引为负值,这些值会与数组的length属性相加作为索引值。
5)copyWithin(target, start, end)方法:用于从数组中复制元素的值
其中,必需参数target为要复制到指定目标的索引位置;可选参数start为元素复制的起始位置;可选参数end为停止复制的索引位置,默认为array.length,为负值则表示从后数。 要传入两个参数,一个是开始填充值的索引位置,另一个是开始复制值的索引位置。示例:
let numbers=[1, 2, 3, 4];
numbers.copyWithin(2, 0); //从数组的索引2开始粘贴,从数组的索引0开始复制值
console.log(numbers.toString()); // 1,2,1,2
默认情况下,copyWithin()方法会一直复制直到数组末尾,可以提供可选的第三个参数来限制重写元素的数量。示例:
let numbers=[1, 2, 3, 4];
numbers.copyWithin(2, 0, 1);
console.log(numbers.toString()); // 1,2,1,4
copyWithin()方法也接受负值索引。
6)entries()方法:返回一个数组的迭代对象,该对象包含数组的键值对(key/value)
7)keys()方法:返回一个包含数组键的迭代对象
8)获取数组中最大值及最小值方法:
Math.max.apply(null, a)
Math.min.apply(null, a)
也可以为Array增加max及min方法。如:
Array.prototype.max = function(){
return Math.max.apply({},this)
}
Array.prototype.min = function(){
return Math.min.apply({},this)
}
然后就可以直接使用:
[1,2,3].max() // => 3
[1,2,3].min() // => 1
9)数组的解构:
解构是ES6新增加的功能,可以把对象和数组的数据解构打散,从更小的部分中获取需要的信息,这里只介绍比较简单的数组解构。
数组解构中,通过值在数组中的位置进行选取,且可以存储在任意变量中,未显式声明的元素都会直接被忽略。示例:
let colors=['red', 'green', 'blue'];
let [firstColor, secondColor]=colors;
代码中,从数组中解构出两个值,并分别存储在两个变量中。也可以直接省略元素,只为感兴趣的元素提供变量名。示例:
let [,, thirdColor]=colors;
数组解构也可以用于赋值,且不需要用小括号包裹表达式:
let colors=['red', 'green', 'blue'];
let firstColor='black', secondColor='purple';
[firstColor, secondColor]=colors;
数组解构也可以使用默认值:
let [firstColor, secondColor='green']=colors;
数组解构中可以使用不定元素,通过...语法将数组中的其余元素赋值给一个变量:
let [firstColor, ...restColor]=colors;
可以通过不定元素的语法来实现数组复制功能:
let [...clonedColor]=colors;
数组解构也可以用于嵌套数组中。
10)数组解构用于交换两个变量的值:
ES5中交换两个变量的值要引入第三个临时变量。ES6中,可以直接交换:
let a=1, b=2;
[a, b]=[b, a];
8.复合数组:
复合数组,也称为关联数组、hash数组或映射。复合数组使用key而不是数字索引值来组织存储。每个key都是一个唯一的字符串,与一个值相关联并用于访问该值,而值可以是字符串、数字、Array、Object等任意数据类型。复合数组是key/value对的无序集合。
有关复合数组的内容可参考网页。
9.定型数组:
定型数组是ES6新增的数组类型。JavaScript中,数字是以64位浮点数格式存储的,并按需转换为32位整数,算术运算很慢。因此,ES6提出定型数组来提供更高性能的算术运算。
有关定型数组的内容可参考网页。