数组的常用操作方法总结

346 阅读6分钟

1. Array.toString()

将数组转化成字符串,每一项元素用逗号隔开;

var arr=[1,2,'a',3,4];
console.log(arr.toString());
console.log(typeof arr);
console.log(typeof arr.toString());

结果:

2. Array.join()

将数组中的所有元素转化为字符串并拼接在一起,返回最后生成的字符串括号内为拼接符,默认为逗号。

var arr=[1,2,'a',3,4];
console.log(arr.join());
console.log(typeof arr);
console.log( arr.join(''));
console.log(arr.join(' '));
console.log(arr.join('@'));

结果:

小结:

var arr=[1,2,'a',3,4];
let arr1 = arr.toString();
let arr2 = arr.join();
console.log(arr1 === arr2);

结果:

  • Array.join()和Array.toString()都是将数组转化为字符串并且拼接起来了,默认情况下,字符串中的字符都是用逗号‘,’隔开,返回值均为字符串;Array.join()和Array.toString()这两个方法均不会改变原数组Array
  • 两者的不同之处:Array.join()方法可以有参数,这个参数的作用是作为【拼接符】,将字符串联起来,但是Array.toString()则不会有参数并且返回值只能用‘,’隔开;

3.String.split()

将字符串转化为数组括号内的参数为分隔符,当分隔符为空字符串时,以字间距分隔。也可以某一个字符作为分隔符,将得到的数组的长度-1=该字符在字符串中出现的次数。【将字符串进行分割,并返回一个新数组】

var str = 'abcahjd';
console.log(str.split());
console.log(str.split('') instanceof Array );
console.log(str.split(''));
console.log(str.split('a'));

结果:

4.Array.reverse()和Array.sort()

上面两个数组操作方法均会改变原数组

Array.reverse()

数组的反转,会改变原数组

var arr=[1,2,'a',3,4];
var arr1 = arr.reverse()
console.log(arr);
console.log(arr1);

结果:

Array.sort()数组排序

Array.sort(function (a,b) { return a-b; }); Array.sort(function (a,b) { return b-a; });

该方法需要参数为一个函数,函数中a,b代表数组中相邻的元素

return a-b;(从小到大)

return b-a;(从大到小)

var arr=[1,2,9,3,6,0,20];
var arr1 = arr.sort(function (a,b) {
    return a-b;
});
console.log(arr);
console.log(arr1);

结果:

var arr=[1,2,9,3,6,0,20];
var arr1 = arr.sort(function (a,b) {
    return b-a;
});
console.log(arr);
console.log(arr1);

结果:

5.Array.concat()

数组的拼接 不会改变原数组,但会返回一个新数组

var arr=[1,2,9,3,6,0,20];
var arrStr = ['a','b','c']
var newArr = arr.concat(arrStr);
console.log(arr);
console.log(arrStr);
console.log(newArr);

结果:

可拼接单个元素,也可拼接整个数组

var arr=[1,2,9,3,6,0,20];
var newArr = arr.concat('a','b','c');
console.log(arr);
console.log(newArr);

结果:

6.Array.indexOf()和Array.lastIndexOf()

Array.indexOf();从前往后找 Array.lastIndexOf();从后往前找

通过元素找对应的下标可传两个参数

  • 两个方法查找的结果返回的都是元素对应的下标

  • 两个方法都可以有两个参数

    • 第一个参数:需要查找的元素
    • 第二个参数:起始下标(从某个下标开始找)
  • 找不到则返回-1【既要找的元素在该数组中不存在】

 var arr=[1,2,9,3,6,0,20];

 console.log(arr.indexOf(0));

 console.log(arr.indexOf(2, 2));

结果:

es6中数组查找方法用:


var arr=[1,2,9,3,6,0,20];
console.log(arr.indexOf(0));
console.log(arr.indexOf(2, 2));
console.log(arr.includes(0));
console.log(arr.includes(2, 2));

结果:

7.Array.slice()和Array.splice()

Array.slice()

数组的截取方法返回新的数组,可传两个参数;注意:不会改变原来数组;传入的参数都是代表元素的下标

第一个参数a:起始下标 【包含】

第二个参数b:结束下标 【不包含】【结束位置的索引(但不包含该索引位置的元素)】

截取的新数组的长度:b-a

var arr=[1,2,9,3,6,0,20];
console.log(arr.slice(2));
console.log(arr.slice(2, 5));
console.log(arr);

结果:

Array.splice()具有删除,插入,替换的功能

1、删除的功能

splice(index,count),会改变原数组

参数:

index:开始位置的索引

count:要删除元素的个数

返回:返回的是包含被删除元素的数组对象

var arr=[1,2,9,3,6,0,20];
console.log(arr.splice(1, 2));
console.log(arr.splice(2,5));
console.log(arr);

结果:

2、插入功能

splice(index,0,插入的项)

参数

index:插入元素的索引值

0:要想具备插入功能,第二个参数必须是0

插入的项:插入的元素【可以是数组,多个元素】

var arr=[1,2,9,3,6,0,20];
console.log(arr.splice(2, 0, '张三','a','b'));
console.log(arr);

var arr=[1,2,9,3,6,0,20];
console.log(arr.splice(2, 0, ['张三','a','b']));
console.log(arr);

小结:

  • 第二个参数一旦不是0的时候,就具备了删除元素的功能;
  • 当第二个参数为0的时候,是将index这一项的元素向后移动一个位置,将插入项插入到index这个位置上
  • 插入的项是可以为数组,多个元素等
  • 插入功能没有返回值,返回结果是[]

3、替换功能

splice(index,num,value)

参数:

index:开始的索引位置

num:删除项的数(如果num为0,就是插入功能;这里num不要为0)

value:插入的值

返回:返回的是包含被删除的元素的数组对象

var arr=[1,2,9,3,6,0,20];
console.log(arr.splice(2, 1, ['张三','a','b']));
console.log(arr);

结果:

var arr=[1,2,9,3,6,0,20];
console.log(arr.splice(2, 2, ['张三','a','b']));
console.log(arr);

小结:

  • 有返回值,返回值是被删除的数组元素
  • 替换功能的时候,num不能为0,当num为0的时候是插入功能
  • value的值可以为数组,多个元素等

添加元素的方法

1、Array.push(元素)

向数组的最后一项添加元素,改变原来的数组,返回值为添加元素后的数组长度

var arr=[1,2,9,3,6,0,20];
console.log(arr.push('a'));
console.log(arr);

2、Array.unshift(元素)

向数组的第一项添加元素,会改变原来的数组,返回值为添加元素后的数组长度

var arr=[1,2,9,3,6,0,20];
console.log(arr.unshift('a'));
console.log(arr);

数组的遍历方法

1、Array.forEach

array.forEach(function(currentValue , index , arr){

//do something

}, thisValue)

currentValue : 必需。当前元素

index: 可选。当前元素的索引值。

arr : 可选。当前元素所属的数组对象。

thisValue: 可选。传递给函数的值一般用 "this" 值。如果这个参数为空, "undefined" 会传递给 "this" 值

var Arr = [1,4,7,10];
Arr.forEach(function(currentValue, index, arr){
    console.log(index+"--"+currentValue+"--"+(arr === Arr));
})

2、for in 和 for of

1、for in

for in 可以用来遍历数组,但是会有以下几个问题

  1.index索引为字符串型数字,不能直接进行几何运算

  2.遍历顺序有可能不是按照实际数组的内部顺序

  3.使用for in会遍历数组所有的可枚举属性,例如下面例子上的原型方法method和name属性都会被遍历出来

Array.prototype.method  = function(){
    console.log(this.length)
}

var myArray = [1,2,3,4,5]

myArray.name = "数组"

  for (var key in myArray) {
     console.log(key)
 }

for in 遍历的是数组的索引(即键名),for of遍历的是value值

for-in本身遍历的是属性名,而数组本身是一个对象,属性名即下标,所以输出的都是下标

小结:

  • 数组用for of遍历
  • 对象用for in遍历
  • for in 遍历定义属性,for of不会
var arr = ['nick','freddy','mike','james'];
arr.name = "数组";
 
for(var i in arr){
    console.log(i+': '+arr[i]);    
}
console.log('-----------分割线-----------');
for(var item of arr){    
    console.log(item);
}

输入结果:

给数组添加一个自定义属性name,并且赋值"数组"。然后进行遍历输出的,会发现新定义的属性也被for in输出来了,而for of并不会对name进行输出。