javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript数组

JavaScript数组及常见操作方法小结

作者:小飞侠v科比

这篇文章主要介绍了JavaScript数组及常见操作方法,结合实例形式总结分析了JavaScript数组的基本获取、添加、删除、排序、翻转等相关操作技巧,需要的朋友可以参考下

本文实例讲述了JavaScript数组及常见操作方法。分享给大家供大家参考,具体如下:

数组及操作方法

数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的。

定义数组的方法

//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];

操作数组中数据的方法

1、获取数组的长度:aList.length;

var aList = [1,2,3,4];
alert(aList.length); // 弹出4

2、用下标操作数组的某个数据:aList[0];

var aList = [1,2,3,4];
alert(aList[0]); // 弹出1

3、join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-4

4、push() 和 pop() 从数组最后增加成员或删除成员

var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,4

5、unshift()和 shift() 从数组前面增加成员或删除成员

var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,4

6、reverse() 将数组反转

var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,1

7、indexOf() 返回数组中元素第一次出现的索引值

var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));

8、splice() 在数组中增加或删除成员

var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始,删除1个元素,然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4

多维数组

多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //弹出2;

JavaScript 数组操作方法小结

ECMAScript为操作已经包含在数组中的项提供了很多方法。这里本人总结一下自己对这些方法的理解,如此之多的方法中,我首先已是否会改变原数组做为分类标准,逐个解释一下每一个方法。

一、不会改变原数组

1. concat()

使用方法:array.concat(array2,array3,...,arrayX)
返回值: 返回一个新的数组

concat()方法用于连接两个或多个数组。该方法不会改变现有的数组,仅会返回被连接数组的一个副本。
在没有传递参数的情况下,它只是复制当前数组并返回副本;如果传递的值不是数组,这些值就会简单地添加到结果数组的末尾。

var arr1 = [1,2,3];
var arr2 = arr1.concat(4,[5,6]);

console.log(arr1);  // [ 1, 2, 3 ]
console.log(arr2);  // [ 1, 2, 3, 4, 5, 6 ]

2. join()

使用方法:array.join(separator)
返回值: 返回一个字符串

join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的,默认使用','号分割,不改变原数组。

var arr1 = [1,2,3];
var arr2 = arr1.join();

console.log(arr1);  // [ 1, 2, 3 ]
console.log(arr2);  // 1,2,3

之前接触过一个功能是需要生成多个连续的*,一开始是直接使用for循环可以做到,后面了解了join()方法后,发现其实一句话就可以弄好了。

var arr3 = "";
for(let i = 0; i < 15; i ++) {
    arr3 = arr3 + "*";
}
console.log(arr3);  // ***************

var arr4 = new Array(16).join("*");
console.log(arr4);  // ***************

3. slice()

使用方法:array.slice(start, end)
返回值: 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素

slice()接受一或两个参数,即要返回项的起始和结束位置。
在只有一个参数的情况下,slice()方法返回从该参数指定位置到当前数组末尾的所有项;
如果有两个参数,改方法返回起始和结束位置之间的项——但不包括结束位置的项。
如果参数为负数,规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1);
var arr3 = arr1.slice(2,4);
var arr4 = arr1.slice(-4,-2);  // 等价于 arr1.slice(2,4);

console.log(arr1);  // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr2);  // [ 2, 3, 4, 5, 6 ]
console.log(arr3);  // [ 3, 4 ]
console.log(arr4);  // [ 3, 4 ]

对于伪数组转换为标准数据就用到了这个方法
Array.prototype.slice.call(arguments)

4. some()

使用方法:array.some(function(currentValue,index,arr),thisValue)
返回值: 布尔值

或 ==> some()对数组中的每一项运行给定的函数,如果该函数对任一项返回true,剩余的元素不会再执行检测;如果没有满足条件的元素,则返回false。

function compare(item, index, arr){
    return item > 10;
}

[2, 5, 8, 1, 4].some(compare);  // false
[20, 5, 8, 1, 4].some(compare);  // true

5. every()

使用方法:array.every(function(currentValue,index,arr),thisValue)
返回值: 布尔值

和 ==> every()对数组中的每一项运行给定的函数,如果该函数对每一项返回true,剩余的元素不会再执行检测;如果其中有一个没有满足条件的元素,则返回false。

function compare(item, index, arr){
    return item > 10;
}

[20, 50, 80, 11, 40].every(compare);  // true
[20, 50, 80, 10, 40].every(compare);  // false

5. filter()

使用方法:array.filter(function(currentValue,index,arr), thisValue)
返回值: 返回数组

filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
对数组的每一项都运行给定的函数,返回结果为true的项组成的数组。

function filterArr(item, index, arr){
    return item > 4;
}

[2, 5, 8, 1, 4].filter(filterArr);  // [5,8]

6. find() —— ES6新增的方法

使用方法:array.find(function(currentValue, index, arr),thisValue)
返回值: 返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回 undefined

find()方法传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。

filter()和find()方法的区别:

filter()方法是对数组的每一项都进行检查,最后返回结果为true的数组;而find()方法当找到符合的元素时,立刻返回该元素,之后的元素不再进行检查;
filter()方法如果没有找到符合的元素返回空的数组;而find()方法没有找到符合的元素则返回undefined

function filterArr(item, index, arr){
    return item > 4;
}

[2, 5, 8, 1, 4].filter(filterArr);  // [5,8]
[2, 5, 8, 1, 4].find(filterArr); // 5

function findArr(item, index, arr){
    return item > 10;
}

[2, 5, 8, 1, 4].filter(findArr);  // []
[2, 5, 8, 1, 4].find(findArr); // undefined

7. map()

使用方法:array.map(function(currentValue,index,arr), thisValue)
返回值: 返回数组

map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

function mapArr(item, index, arr){
    return item * 4;
}

[2, 5, 8, 1, 4].map(mapArr);  // [8,20,32,4,16]

经常笔试和面试都会考到的一道题 ——实现一个map数组方法,以下是本人自己写的一个方法

var arr = [2, 4, 8, 6, 1];

Array.prototype.myMap = function (fn, thisValue) {
    var arr = this,
        len = arr.length,
        tmp = 0,
        result = [];
    thisValue = thisValue || null;
    for (var i = 0; i < len; i++) {
        var item = arr[i],
            index = i;
        tmp = fn.call(thisValue, item, index, arr);
        result.push(tmp);
    }
    return result
}

function mapArr(item, index, arr) {
    return item * 4;
}
arr.myMap(mapArr)   // [8, 16, 32, 24, 4]

8. forEach()

使用方法:array.forEach(function(currentValue, index, arr), thisValue)
返回值: undefined

forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。这个方法没有返回值。
本质上与使用for循环迭代数组一样。

var items = [1, 2, 4, 7, 3];
var copy = [];

items.forEach(function(item,index){
  copy.push(item*index);
})

console.log(items);  // [ 1, 2, 4, 7, 3 ]
console.log(copy);  // [ 0, 2, 8, 21, 12 ]

9. reduce() 与 reduceRight()

使用方法:array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
返回值: 返回计算结果

参数 描述
function(total,currentValue, index,arr) 必需。用于执行每个数组元素的函数。
initialValue 可选。传递给函数的初始值

函数参数

参数 描述
total 必需。初始值, 或者计算结束后的返回值。
currentValue 必需。当前元素
currentIndex 可选。当前元素的索引
arr 可选。当前元素所属的数组对象。

这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。其中,reduce()方法中数组的第一项开始,逐个遍历到最后;而reduceRight()则从数组的最后一项开始,向前遍历到第一项。

如果没有设置initialValue,total的值为数组第一项,currentValue为数组第二项。
如果设置了initialValue,则total的值就是initialValue,currentValue为数组第一项。

var numbers = [65, 44, 12, 4];
 
function getSum(total,currentValue, index,arr) {
    return total + currentValue;
}

var res = numbers.reduce(getSum);

console.log(numbers);  // [ 65, 44, 12, 4 ]
console.log(res);  //  125

var numbers = [65, 44, 12, 4];
 
function getSum(total,currentValue, index,arr) {
    return total + currentValue;
}

var res = numbers.reduce(getSum, 10);  // 初始值设置为10,所以最终结果也相应的加10

console.log(res);  //  135

具体reduce()方法用得好是能起到很大的作用的,对于批量修改从后台获取的数据十分有用,可以参考JS进阶篇--JS数组reduce()方法详解及高级技巧

10. indexOf() 和 lastIndexOf()

使用方法:array.indexOf(item,start)
返回值: 元素在数组中的位置,如果没与搜索到则返回 -1

indexOf() 和 lastIndexOf() 方法都接收两个参数:要查找的项和(可选)查找起点位置的索引。
其中,indexOf()方法从数组开头开始向后查找;lastIndexOf() 方法从数组末尾开始向前查找。

var n = [1,2,3,4,5,4,3,2,1];

console.log(n.indexOf(4));  // 3
console.log(n.lastIndexOf(4));  // 5

console.log(n.indexOf(4,4));  // 5
console.log(n.lastIndexOf(4,4));  // 3

indexOf()可以使用在数组去重中,如下:

var n = [1, 2, 3, 4, 5, 4, 3, 2, 1];
function fn(arr) {
    var result = [],
        len = arr.length;
    for (var i = 0; i < len; i++) {
        var item = arr[i];
        if (result.indexOf(item) < 0) {
            result.push(item);
        }
   }
    return result;
}
console.log(fn(n));  // [1, 2, 3, 4, 5]

二、会改变原数组

1. push()

使用方法:array.push(item1, item2, ..., itemX)
返回值: 返回新数组的长度

push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

var arr= [65, 44, 12, 4];
var arr1 = arr.push(2,5);

console.log(arr); // [ 65, 44, 12, 4, 2, 5 ]
console.log(arr1); // 6

2. pop()

使用方法:array.pop()
返回值: 数组原来的最后一个元素的值(移除的元素)

pop()方法用于删除并返回数组的最后一个元素。返回最后一个元素,会改变原数组。

var arr = [65, 44, 12, 4];
var arr1 = arr.pop();

console.log(arr); // [ 65, 44, 12 ]
console.log(arr1); //  4

3. unshift()

使用方法:array.unshift(item1,item2, ..., itemX)
返回值: 返回新数组的长度

unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。返回新长度,改变原数组。

var arr = [65, 44, 12, 4];
var arr1 = arr.unshift(1);

console.log(arr); // [ 1, 65, 44, 12, 4 ]
console.log(arr1); //  5

4. shift()

使用方法:array.shift()
返回值: 数组原来的第一个元素的值(移除的元素)

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。返回第一个元素,改变原数组。

var arr = [65, 44, 12, 4];
var arr1 = arr.shift();

console.log(arr); // [ 44, 12, 4 ]
console.log(arr1); //   65

5. sort()

使用方法:array.sort(sortfunction)
返回值: 返回排序后的数组(默认升序)

sort() 法用于对数组的元素进行排序。
排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
P.S 由于排序是按照 Unicode code 位置排序,所以在排序数字的时候,会出现"10"在"5"的前面,所以使用数字排序,你必须通过一个函数作为参数来调用。

var values = [0, 1, 5, 10, 15];
values.sort();
console.log(values);  // [ 0, 1, 10, 15, 5 ]

values.sort(function(a, b){
  return a - b;
})
console.log(values);  //  [0, 1, 5, 10, 15 ]

6. reverse()

使用方法:array.reverse()
返回值: 返回颠倒后的数组

reverse() 方法用于颠倒数组中元素的顺序。返回的是颠倒后的数组,会改变原数组。

var values = [0, 1, 5, 10, 15];
values.reverse();
console.log(values);  // [ 15, 10, 5, 1, 0 ]

7. fill() —— ES6新增的方法

使用方法:array.fill(value, start, end)
返回值: 返回新的被替换的数组

fill()方法用于将一个固定值替换数组的元素。

参数 描述
value 必需。填充的值。
start 可选。开始填充位置。
end 可选。停止填充位置(不包含) (默认为 array.length)

var values = [0, 1, 5, 10, 15];
values.fill(2);
console.log(values);  // [ 2, 2, 2, 2, 2 ]

values = [0, 1, 5, 10, 15];
values.fill(2,3,4);
console.log(values);  // [ 0, 1, 5, 2, 15 ]

8. splice()

使用方法:array.splice(index,howmany,item1,.....,itemX)
返回值: 如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组

splice()有多种用法:

1、删除: 可以删除任意数量的项,只需要指定2个参数:要删除的第一项的位置和要删除的项数。

splice(0,2) // 会删除数组中前两项

2、插入: 可以向指定位置插入任意数量的项,只需提供3个参数:起始位置、0(要删除的项数)和要插入的项。如果要插入多个项,可以再传入第四、第五,以至任意多个项。

splice(2,0,1,4) // 会从数组位置2的地方插入1和4

3、替换: 可以向指定位置插入任意数量的项,且同时删除任意数量的项,只需提供3个参数:起始位置、要删除的项数和要插入的项。插入的项不必与删除的项数相等。

splice(2,3,1,4) // 会从数组位置2删除两项,然后再从位置2的地方插入1和4

// 删除
var values = [4,8,0,3,7];
var remove = values.splice(3,1);
console.log(values);  // [ 4, 8, 0, 7 ]
console.log(remove);  // [ 3 ]    删除第四项
// 插入
remove = values.splice(2,0,1,2);
console.log(values);  // [ 4, 8, 1, 2, 0, 7 ]
console.log(remove);  // []  从位置2开始插入两项,由于没有删除所有返回空函数
// 替换
remove = values.splice(2,2,6,9,10);
console.log(values);  // [ 4, 8, 6, 9, 10, 0, 7 ]
console.log(remove);  // [ 1, 2 ]  从位置2开始删除两项,同时插入三项

9. copyWithin()

—— ES6新增的方法

使用方法:array.copyWithin(target, start, end)
返回值: 返回新复制的数组

copyWithin()方法选择数组的某个下标,从该位置开始复制数组元素,默认从0开始复制。也可以指定要复制的元素范围。

var fruits = [1,2,3,4,5,6];
fruits.copyWithin(1);  // [ 1, 1, 2, 3, 4, 5 ]   从下标为1的元素开始,复制数组

fruits.copyWithin(3, 0, 3);  // [ 1, 2, 3, 1, 2, 3 ]  从下标为3的元素开始,复制数组坐标为0到2的数组

三、其他

1. form() —— ES6新增的方法

使用方法:Array.from(object, mapFunction, thisValue)
返回值: 数组对象

from() 方法用于字符串、拥有 length 属性的对象(伪数组)或可迭代的对象(Set/Map)来返回一个数组。

var myArr = Array.from("RUNOOB");
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
var s1 = Array.from(s);
var m1 = Array.from(m);

console.log(myArr);  // [ "R", "U", "N", "O", "O", "B" ]
console.log(s1);  // [ "A", "B", "C" ]
console.log(m1);  // [ [ 1, "x" ], [ 2, "y" ], [ 3, "z" ]]

对于伪数组转换为标准数据除了Array.prototype.slice.call(arguments),还可以使用以下方法:

function test(){
     var arg = Array.from(arguments);
     arg.push(5);
     console.log(arg);  // [ 1, 2, 3, 4, 5 ]
}
test(1,2,3,4);

还可以结合new Set()进行数组的去重

> function dedupe(array){
return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]

批量操作数组中的数据,需要用到循环语句

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:
阅读全文