常用属性
-
Array.length:返回数组的大小
常用方法
-
Array.pop():删除并返回数组的最后一个元素
-
Array.push():向数组的结尾添加元素
-
Array.shift():将元素移除数组
-
Array.unshift():向数组头部添加元素
-
Array.join():将数组元素连接起来以构成一个字符串
-
Array.concat():连接数组
-
Array.reverse():将数组进行反转
-
Array.sort():将数组进行排序
-
Array.slice():返回数组的一部分
-
Array.splice():插入,删除或替换数组中的元素
-
Array.toString():将数组转换为一个字符串
-
Array.find():返回通过函数内判断的数组的第一个元素的值
-
Array.findIndex():返回通过函数内判断的第一个数组下标
-
Array.map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
-
Array.forEach():对数组中的每一项运行给定函数,这个方法没有返回值
-
Array.filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组
-
Array.some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true
-
Array.every():对数组中的每一项运行给定函数,如果该函数对每一项都返回ture,则返回true
-
Array.isArray():判断是否是数组
-
Array.reduce():迭代数组的所有项,然后构建一个最终返回的值,从数组的第一项开始,遍历数组的每一项到最后
-
Array.reduceRight():迭代数组的所有项,然后构建一个最终返回的值,从数组的最后一项开始,向前遍历到第一项
实例讲解
1. Array.length属性
//1:数组的定义
var colors0=new Array(); //创建数组
var colors1=new Array(20); //创建数组并指定长度
var colors2=new Array('red','blue','green');//定义数组并赋值
var colors3=[];//字面量定义空数组
console.log(colors0.length);//0
console.log(colors1.length);//20
console.log(colors2.length);//3
//2:数组的访问和修改
console.log(colors2[0]);//访问数组 red
colors2[1]='小明'; //修改数组下标中的值
console.log(colors2[1]);
//3.遍历数组
for(var i=0;i<colors2.length;i++){
console.log(colors2[i]);//red,小明,green
}
2. 栈方法push()和pop()
var colors=new Array(); //创建数组
var count=colors.push('red','green')//向数组的结尾添加元素
console.log(colors); //red,green
count=colors.push('black');
console.log(colors); //red,green,black
var item=colors.pop();//移除数组的最后一项
console.log(item); //black
3. 队列方法shift()和unshift()
var colors=new Array();//创建数组
var count=colors.push('red','green'); //推入两项
console.log(count);//2
count=colors.push('black'); //推入另一项
console.log(count);//3
var item=colors.shift();//取得第一项
console.log(item); //red
console.log(colors.length);//2
var color=new Array(); //创建数组
var c=color.unshift('red','green');//推入两项
console.log(c);//2
c=color.unshift('black');
console.log(c);//3
var i=color.pop();
console.log(i);//green
console.log(color.length);//2
4. 重排序方法sort()和reverse()
//reverse()方法和sort()方法
//1:测试reverse()方法
var values1=[1,2,3,4,5];
values1.reverse(); //将数组进行反转
console.log(values1);//5,4,3,2,1
//2:测试sort()方法
var values2=[0,1,5,10,15];
values2.sort();//将数组进行排序,比较ASCII编码
console.log(values2);//0,1,10,15,5
//3:sort()方法接受函数实现升序
function descArray(a,b){
if(a<b){
return -1;
}else if(a>b){
return 1;
}else{
return 0
}
}
var item=[0,1,3,2,4];
item.sort(descArray);
console.log(item); //0,1,2,3,4
//4:sort()方法接受函数实现降序
function ascArray(a,b){
if(a<b){
return 1;
}else if(a>b){
return -1;
}else{
return 0;
}
}
var items=[10,1,2,4,6,5,7];
items.sort(ascArray);
console.log(items);//10,7,6,5,4,2,1
5. 操作方法slice()、splice()、concat()
//1:测试操作方法concat()
var colors1=['red','blue','green'];
var colors2=colors1.concat('yellow',['black','brown']);
console.log(colors1); //red,blue,green
console.log(colors2); //red,blue,green,yellow,black,brown
//2:测试操作方法slice(startIndex,[endIndex]);
var colors3=['red','green','blue','yellow','purple'];
var colors4=colors3.slice(1);
var colors5=colors3.slice(1,4);
console.log(colors4); //green,blue,yellow,purple
console.log(colors5); //green,blue,yellow
//3:测试splice()方法
//(1):测试splice()删除方法
//参数:要删除第一项的位置,删除的项数
var item=['red','blue','green'];
var removed=item.splice(0,1);
console.log(removed);//red
console.log(item);//blue,green
//(2):测试splice()添加方法
//参数:起始位置,0(要删除的项数),要插入的项
removed=item.splice(1,0,'yellow','orange');
console.log(removed);//返回一个空的数组,因为移除的项为0
console.log(item); //blue,yellow,orange,green
//(3):测试splice()修改方法
//参数:起始位置,删除的项数,插入的任一项
removed=item.splice(1,1,'red','purple');
console.log(removed);//yellow
console.log(item);//blue,red,purple,orange,green
使用slice()方法,如果传入一个参数,则从开始下标到截取到数组的结尾,如果传入两个参数,则从开始下标到结束下标。
使用splice()方法,插入的项是从移除的下标那项开始添加。
6. 转换方法toString()和join()
var colors=['red','green','blue'];//创建一个包含三个字符串的数组
//1:测试toString()方法
console.log(colors.toString()); //red,green,blue
//2:测试join()方法
var item=['red','blue','green'];
console.log(item.join('|'));//red|blue|green
console.log(item.join('||'));//red||blue||,green
7. 迭代方法some()、filter()、map()、forEach()、every()、find()、findIndex()
//迭代方法:every(),filter(),forEach(),map(),some(),find(),findIndex()
//传递参数,数组项的值,数组中的位置,数组对象本身
var numbers=[1,2,3,4,5,4,3,2,1];
//1:测试erery()函数
var everyResult=numbers.every(function(item,index,array){
return item>2;
});
console.log(everyResult);//false
//2:测试some()函数
var someResult=numbers.some(function(item,index,array){
return item>2;
});
console.log(someResult);//true
//3:测试filter()函数
var filterResult=numbers.filter(function(item,index,array){
return item>2;
});
console.log(filterResult);//3,4,5,4,3
//4:测试map()函数
var mapResult=numbers.map(function(item,index,array){
return item*2;
});
console.log(mapResult);//2,4,6,8,10,8,6,4,2
var mapResult1=numbers.map(function(item,index,array){
if(item>2){
return item
}
});
console.log(mapResult1);//[undefined, undefined, 3, 4, 5, 4, 3, undefined, undefined]
//5:测试forEach()函数
numbers.forEach(function(item,index,array){
//执行某些操作
console.log(item);//1,2,3,4,4,3,2,1
})
//6: 测试find()函数
var findResult=numbers.find((item,index)=>{
return item>1
})
console.log(findResult);//2
//7: 测试findIndex()函数
var findIndexResult=numbers.findIndex((item,index)=>{
return item>1
})
console.log(findIndexResult);//1
在这些方法中,最相似的是every()和some(),它们都有用于查询数组中的项是否满足某个条件,对于every()来说,传入的函数必须对每一项都返回true,这个方法才会返回true,否则,它就会返回false,而some()方法只要传入的函数对数组中的某一项返回true,它就会返回true。
8. 归并方法reduce()和reduceRight()
//归并方法:reduce()和reduceRight()
//传递参数:前一个值,当前值,项的索引,数组对象
var array=[1,2,3,4,5]
//1:测试reduce()方法
var sum1=array.reduce(function(prev,cur,index,array){
return prev+cur;
});
console.log(sum1);//15
//2:测试reduceRight()方法
var sum2=array.reduceRight(function(prev,cur,index,array){
return prev+cur;
});
console.log(sum2);//15
reduce按属性分组
let obj = [
{name: 'Alice', job: 'Data Analyst', country: 'AU'},
{name: 'Bob', job: 'Pilot', country: 'US'},
{name: 'Lewis', job: 'Pilot', country: 'US'},
{name: 'Karen', job: 'Software Eng', country: 'CA'},
{name: 'Jona', job: 'Painter', country: 'CA'},
{name: 'Jeremy', job: 'Artist', country: 'SP'},
]
let ppl = obj.reduce((group, curP) => {
let newkey = curP['country']
if(!group[newkey]){
group[newkey]=[]
}
group[newkey].push(curP)
return group
}, [])
reduce扁平数组
let flattened = [[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce(
(singleArr, nextArray) => singleArr.concat(nextArray), [])
// 结果:[3, 4, 5, 2, 5, 3, 4, 5, 6]
使用reduce()还是reduceRight(),主要取决于要从哪头开始遍历数组。除此之外,它们完全相同。