Heim > Web-Frontend > js-Tutorial > Hauptteil

javascript数组操作方法总结一览(附示例)

不言
Freigeben: 2018-10-24 10:38:39
nach vorne
1837 人浏览过

本篇文章给大家带来的内容是关于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 ]
Nach dem Login kopieren

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
Nach dem Login kopieren
之前接触过一个功能是需要生成多个连续的*,一开始是直接使用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);  // ***************
Nach dem Login kopieren

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 ]
Nach dem Login kopieren
对于伪数组转换为标准数据就用到了这个方法
    Array.prototype.slice.call(arguments)
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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]
Nach dem Login kopieren

6. 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]
Nach dem Login kopieren
经常笔试和面试都会考到的一道题 ——实现一个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]
Nach dem Login kopieren

6.     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 ]
Nach dem Login kopieren

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

二、会改变原数组

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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 ]
Nach dem Login kopieren

6. reverse()

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

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

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

7. fill()

使用方法: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 ]
Nach dem Login kopieren

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开始删除两项,同时插入三项
Nach dem Login kopieren

以上是javascript数组操作方法总结一览(附示例)的详细内容。更多信息请关注PHP中文网其他相关文章!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!