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

网络编程 2021-07-04 15:02www.168986.cn编程入门

这篇文章主要介绍了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 pare(item, index, arr){
    return item > 10;
}

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

5. every()

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

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

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

[20, 50, 80, 11, 40].every(pare);  // true
[20, 50, 80, 10, 40].every(pare);  // 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代码运行工具：测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》

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

上一篇：详解如何在Javascript和Sass之间共享变量下一篇：mpvue微信小程序的接口请求fly全局拦截代码实例

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

数组及操作方法

JavaScript 数组操作方法小结

1. concat()

2. join()

3. slice()

4. some()

5. every()

5. filter()

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

7. map()

8. forEach()

9. reduce() 与 reduceRight()

10. indexOf() 和 lastIndexOf()

1. push()

2. pop()

3. unshift()

4. shift()

5. sort()

6. reverse()

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

8. splice()

9. copyWithin()

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

数组及操作方法

JavaScript 数组操作方法小结

1. concat()

2. join()

3. slice()

4. some()

5. every()

5. filter()

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

7. map()

8. forEach()

9. reduce() 与 reduceRight()

10. indexOf() 和 lastIndexOf()

1. push()

2. pop()

3. unshift()

4. shift()

5. sort()

6. reverse()

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

8. splice()

9. copyWithin()

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设