1. 首页
  2. 文章中心
  3. 笔记

数组方法总结

87 阅读 0 评论
我是靠谱客的博主 文静小蜜蜂，这篇文章主要介绍数组方法总结，现在分享给大家，希望可以做个参考。

1. push(element1, …, elementN)

作用：向数组的末尾添加一项或多项元素
返回值：新数组的长度
是否改变原数组：改变

复制代码
1
2
3
4
5
var ary = ['a','b','c'];
var res = ary.push('d','e'); 
console.log(ary);  // ["a", "b", "c", "d", "e"]
console.log(res);  // 5

2. unshift(element1, …, elementN)

作用：向数组的开头添加一或多项
返回值：新数组的长度
是否改变原数组：改变

复制代码
1
2
3
4
5
var ary = ['a','b','c'];
var res = ary.unshift('d','e');
console.log(ary);  // ["d", "e", "a", "b", "c"]
console.log(res);  // 5

3. pop()

作用：删除数组的最后一项
返回值：被删除的项
是否改变原数组：改变

复制代码
1
2
3
4
5
var ary = ['1','2','3'];
var res = ary.pop();
console.log(ary);  // ['1','2']
console.log(res);  // 3

4. shift()

作用：删除数组的首项
返回值：被删除的项
是否改变原数组：改变

复制代码
1
2
3
4
5
var ary = ['a','b','c'];
var res = ary.shift();
console.log(ary);  // ['b','c']
console.log(res);  // a

5. splice(index,howmany,item1,……,itemX)

作用：增删改
返回值：删除的项
是否改变原数组：改变

增加的功能：ary.splice(n,0,x，……,y);
从数组的索引n开始，删除0项,在索引n的前边增加新的项，第三个参数开始都是用来填补删除的项目位置的

复制代码
1
2
3
4
5
var ary = [1,2,3,4,5];
var res = ary.splice(1,0,6,7);
console.log(ary);  // [1, 6, 7, 2, 3, 4, 5]
console.log(res);  // [] 删除0项，返回一个空数组

删除的功能：ary.splice(n,m);
从数组的索引n开始，删除m项

复制代码
1
2
3
4
5
var ary = [1,2,3,4,5];
var res = ary.splice(1,2);
console.log(ary);  // [1，4，5]
console.log(res);  // [2，3]

修改的功能：ary.splice(n,m,x);
从数组的索引n开始，删除m项，把x添加到索引n前边

复制代码
1
2
3
4
5
var ary = [1,2,3,4,5];
var res = ary.splice(1,2,6,7);
console.log(ary);  // [1, 6, 7, 4, 5]
console.log(res);  // [2，3]

模拟 push(尾部添加) 和push二者返回值不同

复制代码
1
2
ary.splice(ary.length,0,新的项) // 因为splice是在索引前添加，所以第一个参数为ary.length

模拟 unshift(首项添加) 和unshilft二者返回值不同`

复制代码
1
2
ary.splice(0,0,新的项)

模拟 pop(尾部删除)

复制代码
1
2
ary.splice(arr.length-1,1);

模拟 shift(首项删除)

复制代码
1
2
ary.splice(0,1)

此外splice其他用法

复制代码
1
2
3
ary.splice(n)  // 表示从索引n开始删除到末尾
ary.splice(0)  // 删除整个数组 有克隆数组的效果，利用返回值

6. slice([begin[, end]])

作用：截取数组(复制数组) ，包括begin，不包括end
返回值：返回一个新数组
是否改变原数组：不改变

复制代码
1
2
3
4
5
6
7
8
9
10
var ary = [1,2,3,4,5];
var res = ary.slice(1,3);
var res2 = ary.slice(-3,-1)
console.log(ary);  // [1,2,3,4,5]
console.log(res);  // [2,3]
console.log(res2)  //[3,4] slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项

slice(n) //从索引n开始复制到最后一项
slice()、 slice(0)  //复制整个数组

7. join([separator])

作用：用指定的分隔符将数组每一项拼接为字符串
返回值：拼接好的字符串
是否改变原数组：不改变

复制代码
1
2
3
4
5
var ary = [1,2,3,4,5];
var res = ary.join('-');
console.log(ary);  // [1, 2, 3, 4, 5]
console.log(res);  // 1-2-3-4-5

8. concat(value1[, value2[, …[, valueN]]])

作用：用于连接两个或多个数组
返回值：返回连接后的新数组
是否改变原数组：不改变

复制代码
1
2
3
4
5
6
7
8
9
10
11
var ary = [1,2,3,4,5];
var res = ary.concat(6,7);
var res2 = ary.concat(6,[7,8]);
var res3 = ary.concat(6,[7,[8,9]]);
var res4 = ary.concat();
console.log(ary);  // [1, 2, 3, 4, 5]
console.log(res);  // [1, 2, 3, 4, 5, 6, 7]
console.log(res2); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(res3)  // [1, 2, 3, 4, 5, 6, 7, [8,9]]  concat() 如果操作的参数是数组，那么添加的是数组中的元素，而不是数组。 如果是二维(或以上)数组，concat只能'拆开'一层数组
console.log(res4) // [1, 2, 3, 4, 5]  如果concat()没有参数或者参数是空数组也可以达到克隆数组的目的

9. sort([compareFunction])

作用：对数组的元素进行排序
返回值：排好序的原数组
是否改变原数组：改变

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var ary = [1,5,7,9,12,24,56,87,92];
var ary2 = [1,5,7,9,12,24,56,87,92];
var ary3 = [1,5,7,9,12,24,56,87,92];
var res = ary.sort();
var res2 = ary2.sort(function(a,b){
    return a-b;
})
var res3 = ary3.sort(function(a,b){
    return b-a;
})
// sort的参数函数总的形参a,b就是数组排序时候的相邻比较的两项
console.log(res);  // [1, 12, 24, 5, 56, 7, 87, 9, 92]
console.log(res2); // [1, 5, 7, 9, 12, 24, 56, 87, 92]
console.log(res3); // [92, 87, 56, 24, 12, 9, 7, 5, 1]

10. reverse()

作用：倒序数组
返回值：倒序后的原数组
是否改变原数组：改变

复制代码
1
2
3
4
5
var ary = [1,2,3,4,5];
var res = ary.reverse();
console.log(ary);  // [5, 4, 3, 2, 1]
console.log(res);  // [5, 4, 3, 2, 1]

11. indexOf(searchElement[, fromIndex])

作用：查找指定元素的位置
返回值：返回第一次查到的索引，未找到返回-1
是否改变原数组： 不改变

复制代码
1
2
3
4
5
6
7
8
var ary = [1,2,3,4,5]
var res = ary.indexOf(3);
console.log(ary);  // [1,2,3,4,5]
console.log(res);  // 2
var ary = ['a','b','c','d','c'];
var res = ary.indexOf('c',3);
console.log(res) // 4

12. lastIndexOf(searchElement[, fromIndex])

作用：查找指定元素最后出现的位置
返回值：返回查到的元素的索引，未找到返回-1
是否改变原数组：不改变

复制代码
1
2
3
4
5
6
var ary = ['a','b','c','d','c'];
var res = ary.lastIndexOf('c',3);
var res2 = ary.lastIndexOf('c',1);
console.log(res); // 2
console.log(res2); // -1

13. forEach(callback(currentValue [, index [, array]])[, thisArg])

作用：循环遍历数组每一项
返回值：无
是否改变原数组： 不改变

复制代码
1
2
3
4
5
6
7
8
9
10
11
var ary = ['a','b','c']
var res = ary.forEach(function(item,index,ary){
    console.log(item,index,ary);
/*  a 0 ["a", "b", "c"]
    b 1 ["a", "b", "c"]
    c 2 ["a", "b", "c"]
*/  
    return item;
})
console.log(res)  // undefined  无返回值

14. map(callback(currentValue [, index [, array]])[, thisArg])

作用：数组中的元素为原始数组元素调用函数处理后的值
返回值：新数组
是否改变原数组：不改变

复制代码
1
2
3
4
5
6
var ary = ['a','b','c']
var res = ary.map(function(item,index,ary){
    return item+1;
})
console.log(res)  // ["a1", "b1", "c1"]

15. filter(callback(element[, index[, array]])[, thisArg])

作用：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
返回值：新数组
是否改变原数组：不改变

复制代码
1
2
3
4
5
6
var ary = [1,2,3,4,5,6]
var res = ary.filter(function(item){
    return item<3;
})
console.log(res)  // [1,2]

16. every(callback(element[, index[, array]])[, thisArg])

作用：检测数组所有元素是否都符合指定条件
返回值：布尔值
是否改变原数组： 不改变

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
var ary = [1,2,3,4,5,6]
var res = ary.every(function(item){
    return item<3;
})
var res2 = ary.every(function(item){
    return item<7;
})
console.log(res)  // false;
console.log(res2)  // true;
// 1 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
// 2 如果所有元素都满足条件，则返回 true。

17. some(callback(element[, index[, array]])[, thisArg])

作用：检测数组中的元素是否满足指定条件
返回值：布尔值
是否改变原数组：不改变

复制代码
1
2
3
4
5
6
7
8
var ary = [1,2,3,4,5,6]
var res = ary.some(function(item){
    return item<3;
})
console.log(res)  // true;
// 1 如果有一个元素满足条件，则表达式返回 true , 剩余的元素不会再执行检测。
// 2 如果没有满足条件的元素，则返回 false。

18. reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

作用：用于求和，去重等功能
返回值：函数累计处理的结果
是否改变原数组：不改变

复制代码
1
2
3
4
5
6
var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); // 求和，10
console.log( mul ); // 求乘积，24

19. find(callback[, thisArg])

作用：返回数组中满足提供的测试函数的第一个元素的值
返回值：直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined
是否改变原数组：不改变

复制代码
1
2
3
4
5
6
7
let test = [1, 2, 3, 4, 5];
let a = test.find(item => item > 3);
console.log(a); // 4

let b = test.find(item => item == 0);
console.log(b); // undefined

20. findIndex(callback[, thisArg])

作用：方法返回数组中满足提供的测试函数的第一个元素的索引
返回值：找到就返回元素的位置，找不到就返回-1：
是否改变原数组：不改变

复制代码
1
2
3
4
5
6
7
8
9
10
11
const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
var ret1 = arr1.findIndex((value, index, arr) => {
  return value > 4
})

var ret2 = arr1.findIndex((value, index, arr) => {
  return value > 14
})
console.log(ret1);  // 4
console.log(ret2);  // -1

21. includes(valueToFind[, fromIndex])

作用：方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false
返回值：如果包含则返回 true，否则返回false
是否改变原数组：不改变

复制代码
1
2
3
4
5
6
7
8
9
10
let array1 = [1, 2, 3];
let re1 = array1.includes(2);
console.log(re1);  // true
console.log(array1);  // [1, 2, 3]

let array2 = ['cat', 'dog', 'bat'];
let re2 = array2.includes('cat');
console.log(re2);  // true
console.log(array2);  // ['cat', 'dog', 'bat']

最后

以上就是文静小蜜蜂最近收集整理的关于数组方法总结的全部内容，更多相关数组方法总结内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(58)

相关文章

js数组的13个题第一题：第二题第三题第四题第五题第六题第七题第八题第九题第十题第十一题第十二题第十三题
js数组的13个题第一题：第二题第三题第四题第五题第六题第七题第八题第九题第十题第十一题第十二题第十三题
由一道题看push方法的实现原理
由一道题看push方法的实现原理
深入理解JavaScript类数组
深入理解JavaScript类数组
前端常见题汇总
前端常见题汇总
数组方法总结
数组方法总结
php查找某个值是否存在于多维数组中
php查找某个值是否存在于多维数组中
深入理解Javascript实现数组去重
深入理解Javascript实现数组去重
《深入理解JavaScript》——1.15　数组
《深入理解JavaScript》——1.15　数组

评论列表共有 0 条评论

立即
投稿
返回
顶部