数组是我们在js中常常要用到的,但是你真的熟悉数组的方法吗?今天我就总结一下Array对象具有哪些方法。
声明数组:
var list = new Array()
list[0] = 0;
list[1] = 1;
list[2] = 2;
或者这样声明:var list = [0,1,2]
或者var d = Array.of(1,2,3); console.log(d) [1,2,3]
(1)基本的数组方法:
unshift:向数组开头增加一项 ,返回值是数组的新长度 , 直接在原数组上操作的,不生成新数组
push:向数组的末尾增加一项 ,返回值是数组的新长度 , 直接在原数组上操作的,不生成新数组
shift : 删除数组开头项 ,返回被删除的项 ,直接在原数组上操作的,不生成新数组
pop : 删除数组的末尾项, 返回被删除的项 ,直接在原数组上操作的,不生成新数组
includes [1,2,3].includes(2);//true [1,2,3].includes(4);//false
indexof
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1
// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4
console.log(beasts.indexOf('giraffe'));
// expected output: -1
splice(2,3) :从下标为2(包含2)的项开始切取3项;如果只传一个参数那就是切到最后
splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,... (切除并插值)
直接在原数组上操作的,返回值是切下的元素新组成的数组
var a = [1,2,3,4,5,6,7,8]; var a = [1,2,3,4,5,6,7,8]; var a = [1,2,3,4,5,6,7,8];
var b = a.splice(2,3); var b = a.splice(2,3,9,10); var b = a.splice(2);
console.log(a) [1,2,6,7,8] console.log(a) [1,2,9,10,6,7,8] console.log(a) [1,2]
console.log(b) [3,4,5] console.log(b) [3,4,5] console.log(b) [3,4,5,6,7,8]
slice (2,4):从下标为2(包含2)的项开始切,直到下标为4停止(不包含4),如果只传一个参数那就是切到最后
原数组不变,返回值是切下的元素新组成的数组
var a = [1,2,3,4,5,6,7,8]; var a = [1,2,3,4,5,6,7,8];
var b = a.slice(2,4); var b = a.slice(2);
console.log(a) [1,2,3,4,5,6,7,8] console.log(a) [1,2,3,4,5,6,7,8]
console.log(b) [3,4] console.log(b) [3,4,5,6,7,8]
concat:把一个数组和另一个数组拼接在一起 返回拼接好的数组 原数组不变,返回新的数组
var a = [1,2,3,4,5,6,7,8];
var b = [9,10,11];
var c = a.concat(b);
console.log(a) [1,2,3,4,5,6,7,8]
console.log(b) [9,10,11]
console.log(c) [1,2,3,4,5,6,7,8,9,10,11]
join: 把数组中的每一项 按照指定的分隔符拼接成字符串
原数组不变,返回新的数组
var a = [1,2,3,4,5,6,7,8]; var a = [1,2,3,4,5,6,7,8];
var c = a.join(''); var c = a.join('|');
console.log(a) [1,2,3,4,5,6,7,8] console.log(a) [1,2,3,4,5,6,7,8]
console.log(c) 12345678 console.log(c) 1|2|3|4|5|6|7|8
reverse:将数组反序
原数组改变,返回新的数组就是反序后的数组
var a = [1,2,3,4,5];
var b = a.reverse();
console.log(a) [5,4,3,2,1]
console.log(b) [5,4,3,2,1]
toString: 可把数组转换为字符串,并返回结果
var a = [1,2,3,4,5];
var b = a.toString();
console.log(a) [1,2,3,4,5]
console.log(b) 1,2,3,4,5
sort(orderfunction):方法将数组中的元素排序并返回排序后的数组
原数组也改变,返回重新排序后的新数组
var a = [9,2,4,3,5,8,7,6];
var c = a.sort();
console.log(a) [2, 3, 4, 5, 6, 7, 8, 9]
console.log(c) [2, 3, 4, 5, 6, 7, 8, 9]
当不带参数时,默认按照顺序排序,也就是从小到大。当然,也可以直接给sort加一个比较函数比较
var arr = [1,4,7];
arr.sort();
console.log(arr);//[1,4,7]
arr.sort(function(a,b){
returna-b;//从小到大
});
console.log(arr);//[1,4,7]
arr.sort(function(a,b){
returnb-a;//从大到小
});
console.log(arr);//[7,4,1]
varnum =newArray('one','three','Six','Five');
num.sort();//区分大小写排序
console.log(num);// ["Five", "Six", "one", "three"]
num.sort(function(s,t){
vara = s.toLowerCase();
varb = t.toLowerCase();
if(a
if(a>b) return 1;
return0;
});
console.log(num);// ["Five", "one", "Six", "three"]
2)ECMAScript5中的数组方法
这一类数组方法大多数有统一大致的规则。它们都不会修改原始数组。
大多数方法的第一个参数接收一个函数,并且对数组的每个元素(或一些元素)调用一次该函数。
如果是稀疏数组,对不存在的元素不调用传递的函数;
在大多数情况下,调用的这个函数一般使用三个参数:数组元素、元素的索引、数组本身。通常后两个参数也不需要填写进去。
除了这里第一个参数(函数)之外,还有第二个参数(它是可选的),如果第二个参数存在,则调用的函数将被看做是第二个参数的方法。
也就是说,在调用函数时传递进去的第二个参数作为它的this关键字的值来使用。
1.forEach()
这个方法从头至尾遍历数组,为每个数组调用指定的函数。
var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value){//只使用了第一个参数(函数),调用的函数也只使用了第一个参数数组元素
sum += value;
});
console.log(sum); //15
console.log(data); // [1, 2, 3, 4, 5]
var data = [1,2,3,4,5];
var sum = 0;
data.forEach(function(value,item,data){//调用的函数具有了三个参数
data[item] = value*value;//取平方
});
console.log(data); // [1, 4, 9, 16, 25]
2.map()
这个方法将调用的数组中每个元素传递给指定的函数,并返回一个数组,它包含这个函数的返回值。
var data = [1,2,3,4,5];
var data1 = data.map(function(value){
return++ value;
});
console.log(data); // [1, 2, 3, 4, 5]
console.log(data1); // [2, 3, 4, 5, 6]
3.filter()
这个方法返回的数组元素是调用的数组的一个子集。传递的函数是用来逻辑判定的,该函数返回true或false。
如果返回值是true或者能转化为true的值,那么传递给判定函数的元素就是这个子集的成员,它将被添加到一个作为返回值的数组中。
var data = [1,2,3,4,5];
var data1 = data.filter(function(value){
returnvalue <= 3;
});
vardata2 = data.filter(function(value){
returnvalue > 3;
});
console.log(data); // [1, 2, 3, 4, 5]
console.log(data1); // [1,2,3]
console.log(data2); // [4,5]
4.every()和some()
顾名思义,every()就是数组中所以元素都满足函数指定的条件时 返回true; some()就是某一项满足时就返回 true
var data = [1,2,3,4,5];
var data1 = data.every(function(value){
returnvalue < 4;
});
var data2 = data.some(function(value){
returnvalue >4;
});
console.log(data); // [1, 2, 3, 4, 5]
console.log(data1); // false
console.log(data2); // true
5.reduce()和reduceRight()
这两个方法使用指定的函数将数组元素进行组合,生成单个值。
reduce()有两个参数。第一个是执行化简操作的函数,就是说用某种方法把两个值化简为一个值,并返回化简后的值。
第二个参数可选,用来传递给第一个参数函数作为初始值。如果第二个参数没有,则初始值就使用数组的第一个元素值。
var data = [1,2,3,4,5];
var sum = data.reduce(function(a,b){
returna+b;
});
varsum1 = data.reduce(function(a,b){
returna+b;
},5);
var min = data.reduce(function(a,b){
return(a
});
console.log(data); // [1, 2, 3, 4, 5]
console.log(sum); // 15
console.log(sum1); // 20
console.log(min);// 1
sum中没有第二个参数,所以初始值为第一个数组元素,第一步1+2=3,第二步3+3=6... 最后得15
sum1中有第二个参数,所以初始值为5,第一步5+1=6,第二步6+2=8... 最后得20
reduceRight()和reduce()差不多,不同的是它按照数组索引从高到低(从右到左)处理数组,而不是正常的从低到高。
var data = ['a','b','c'];
var str = data.reduce(function(x,y){//顺序
returnx+y;
});
var str1 = data.reduceRight(function(x,y){//逆序
returnx+y;
});
console.log(data); // [1, 2, 3]
console.log(str); //"abc"
console.log(str1); //"cba"
6.indexOf()和lastIndexOf()
这个方法搜索整个数组中具有给定值的元素,返回找到的元素的索引(找到了一个就退出了),没有找到则返回-1.
一个从头至尾,一个从尾至头
var data = ['a','b','a','c','a'];
console.log(data.indexOf('a')); //0
console.log(data.indexOf('d')); //-1
console.log(data.lastIndexOf('a')); //4
console.log(data.lastIndexOf('a',-2)); //2 从倒数第二个开始
console.log(data.lastIndexOf('a',1)); //0 从顺序第二个往前
7.数组类型 isArray()
判断一个对象是不是数组
console.log(Array.isArray([])); //true
console.log(Array.isArray({})); //false
//模拟上边的
varisArray1 = Function.isArray||function(o){
returntypeofo ==="object"&&
Object.prototype.toString.call(o) ==="[object Array]";
};
console.log(isArray1([])); //true
console.log(isArray1({})); //false
8.数组includes()
判断数组是否包含某个元素,如果包含则返回true,不包含返回false
var a = [9,2,4,3,5,6,7,8];
var c = a.includes(3);
console.log(a) [9,2,4,3,5,6,7,8]
console.log(c) true
9.数组find()
Array.find(function(v,i,arr),thisArgs}
数组实例的find方法,用于找出第一个符合条件的数组成员。它的参数是一个回调函数,所有数组成员依次执行该回调函数,直到找出第一个返回值为true的成员,然后返回该成员。如果没有符合条件的成员,则返回undefined。
v:数组值
i:索引
arr:当前数组
thisArgs:fn函数中this指向
var re = [1,2,3,4].find(function(v,i,arr){
console.log(arr); //[1,2,3,4]
console.log(this); //{this: 'this'}
returnv>=2;
},{this:'this'})
console.log(re); //2
var re2 = [1,2,3,4].find(function(v,i,arr){
console.log(this); //{0: "_", 1: "t", 2: "h", 3: "i", 4: "s", length: 5}
returnv>=10;
},'_this')
console.log(re2); //undefined
Object
obj= {
"aa" : 123,
"bb" : 564,
"cc" : 989
}
var keysArr = Object.keys(obj) //返回一个包含对象key值的数组
console.log(keysArr) // ['aa' , 'bb' ,'cc']