javaScript 中数组的操作

2009-07-07 3 条评论 6,981 次阅读 被赞了 0 次
本文发布于：2009-07-07，最后更新于：2023-03-01，如果内容失效请留言告知。
目录
[隐藏]

1、length

计算数组的长度

1
2
var arr = ["aaa","bbb"];
alert(arr.length);

2、索引

通过索引获取对应值，同时也可以改变索引对应的值

1
2
3
4
var arr = ["aaa","bbb"];
alert(arr[0]);//弹出aaa
arr[0] = "111";
alert(arr[0]);//弹出111

3、indexOf 和 lastIndexOf

返回某个指定的字符串值在字符串中首次出现的位置。若元素不存在返回-1

1
2
3
4
var arr = ["aaa","bbb",111, 'bbb', 'ccc'];
alert(arr.indexOf("aaa");//弹出0
alert(arr.indexOf("aaa", 1)); // 从第二各元素开始搜索，弹出 -1
alert(arr.indexOf("111"); // 弹出-1,"111"与111是不同的元素

lastIndexOf 的功能为返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

1
2
alert(arr.lastIndexOf("bbb")); // 3
alert(arr.lastIndexOf("bbb", 1)); // 1

4、slice

接受一个或两个参数，参数对应的是要返回项的起始位置和结束位置，若只有一个参数，该方法返回从参数指定位置到数组结尾的所有项，如果有两个参数则返回起始位置到结束位置之间的项但不包括结束位置项，返回的结果是一个新的数组，原数组不变

1
2
3
var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
alert(arr.slice(0, 3)); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']
alert(arr.slice(3)); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

5、push

向数组末尾添加若干元素，返回添加元素后数组的长度

1
2
var arr = [1,2];
alert(arr.push('a','b'));//返回数组的长度4

6、pop

删除数组末尾最后一个元素，返回被删除的元素，若数组为空则返回undefined

1
2
3
4
var arr = [1,2,3];
alert(arr.pop());//返回被删除的元素3
var arr1 = [];
alert(arr1.pop());//返回undefined

7、unshift

在数组头部添加若干元素，返回添加元素后数组的长度

1
2
var arr = [1,2,3];
alert(arr.unshift("a","b"));//返回数组的长度5

8、shift

删除数组头部的第一个元素，并返回被删除的元素，若数组为空则返回undefined

1
2
var arr = [1,2,3];
alert(arr.shift());//返回头部被删除的项1

9、sort

对数组进行排序，返回排序以后的数组，默认把所有元素转化为字符之后再进行排序，排序以后会改变原数组

1
2
var arr = ["3","2",11];
alert(arr.sort());//返回11,2,3

可以通过一个自定义的比较函数来进行排序，比较函数接收两个参数，如果第一个参数应该位于第二个参数之前应该返回负数，如果第一个参数应该位于第二个参数之后应该返回正数，若相等返回0，排序之后会改变原数组

1
2
3
4
5
function compare(val1,val2){
    return val1-val2;
}
var arr = [3,2,9,4];
alert(arr.sort(compare));//返回2,3,4,9

10、reverse

对数组中的数据进行反转，返回反转后的数组

1
2
var arr = ["333","222"];
alert(arr.reverse());

11、splice

从指定位置删除若干元素，然后再从该位置添加若干元素，结果返回被删除的元素，第一个参数表示起始删除的位置，第二个参数表示要删除元素的个数，之后的元素表示要添加的元素

1
2
3
4
5
var arr = ["a","b","c"];
alert(arr.splice(1,2,"d","e"));//从位置1开始删除2个元素,在1位置添加"d","e"两个元素，返回"b","c"
alert(arr);//arr数组变为a,d,e
alert(arr.splice(0,3)); //从位置0开始，删除3个元素，返回"a","d","e"
alert(arr);  //arr数组为空

12、concat

把当前数组与另一个数组连接起来，并返回新的元素，原来的数组不被改变，concat 可以接收任意个元素和数组，并把数组拆开放入新的数组中。

1
2
3
var arr = ["a","b","c"];
alert(arr.concat([1,2,3]));  //数组arr不变，返回["a","b","c",1,2,3]
alert(arr.concat([1,2,[3,4]]));  //返回["a","b","c",1,2,3,4]

13、join

将数组中的每一个元素用指定的字符串连接起来，返回字符串。

1
2
var arr = ["a","b","c"];
alert(arr.join(","));//返回a,b,c

14、map

对数组中的每一项运行函数，返回函数运行结果组成的数组，函数的参数是一个函数，而该函数接收三个参数：数组当前值，数组索引、数组

1
2
3
4
5
var arr = [1,2,3,-1];
alert(arr.map(function(x) {
      return x * x;
}
)); //返回1,4,9,1

15、reduce 和 reduceRight

从数组的第一项开始，逐个遍历到最后，函数接受两个参数，一个是在数组上调用的函数和归并的初始值（可选），而调用数组的函数接受四个参数：前一个值、当前值、当前值索引、当前数组，第一次调用时，前一个值是数组第一项，当前值是数组第二项

1
2
3
4
5
var arr = [1,2,3,-1];
var result = arr.reduce(function(prev,cur,index,array){
     return prev+cur
})
alert(result);//返回5

reduceRight 方法的功能及参数和 reduce 是一样的，不同的是 reduceRight 从数组的末尾项开始，逐个向前遍历。

16、filter

对数组中的每一项运行函数，返回该函数返回 true 的元素组成的数组

1
2
3
4
5
6
7
8
9
var arr = [1,-3,2,-4,-6];
var newArr = arr.filter(function(x){
    if(x>=0){
        return true;
    }else{
        return false;
    }
})
alert(newArr)//返回1,2

17、toString

该方法返回由数组中每个值的字符串以逗号分隔而拼接的字符串，数组的每一项调用的是 toString。

1
2
var arr = [1,2];
alert(arr.toString()); //返回1,2

18、valueOf

调用该方法返回的依旧是数组。

1
2
3
var arr = [1,2];
alert(arr.valueOf()); //alert返回的都是字符串，故返回1,2，而arr.valueOf()是数组
alert(arr.valueOf() instanceof Array); //返回true

19、toLocaleString

该方法返回一个数组值以逗号分隔的字符串，与toString不同的是数组的每一项调用的是toLocaleString

1
2
var arr = [1,2];
alert(arr.toLocaleString());//返回1,2

20、some

测试数组中的元素是否通过由提供的函数实现的测试。只要有一个元素执行结果为 true，则返回 true。

1
2
3
var arr = [2, 5, 8, 1, 4];
arr.some(item => item === 3); // false
arr.some(item => item > 3); // true

21、every

测试数组中的全部元素是否均可通过由提供的函数实现的测试。只有所有元素执行结果都为 true，才返回 true。

1
2
3
var arr = [2, 5, 8, 1, 4];
arr.every(item => item > 3); // false
arr.every(item => item > 0); // true

22、forEach

与 map 和 every 一样，遍历一个数组，但无返回值。

1
2
var arr = [1 ,3];
arr.forEach(item => console.log(item)); // 1 3

23、Array.from()

用于将两类对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象（包括ES6新增的数据结构 Set和 Map ）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 将 dom 对象集合转换为数组
const divs = document.querySelectorAll('div');
console.log(Array.from(divs));
 
// 将 arguments 对象转换为数组
function test() {
    const args = Array.from(arguments);
    console.log(args);
}
test(1, 2, 3);
 
// 将字符串转换为数组，统计其长度(以便正确处理各种Unicode字符)
function countSymbols(string) {
    return Array.from(string).length;
}

24、Array.of()

用于将一组值，转换为数组。

1
2
3
4
Array.of(3); // [3]
Array.of(1, 2, 3) // [1, 2, 3]
Array.of(null); // [null]
Array.of(); // []

25、Array.isArray

判断传入参数是否为数组。ES6 新增。

1
2
3
4
5
6
Array.isArray([]); // true
Array.isArray(null); // false
// 类数组对象也不是数组，返回 false
Array.isArray(document.querySelectorAll('div')); // false
// 类数组转换为数组
Array.isArray(Array.of(document.querySelectorAll('div'))); // true

26、copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。ES6 新增。

1
2
3
4
Array.prototype.copyWithin(target, start = 0, end = this.length)
 
// 示例
[1, 2, 3, 4, 5].copyWithin(0, 2, 4); // [3, 4, 5, 4, 5]

27、find() 和 findIndex()

find 用于找出第一个符合条件的数组成员。它的参数是一个回调函数。

1
[1, 2, 3].find((n) => n > 1); // 2

findIndex 方法的用法与 find 方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回 -1。

1
[1, 2, 3].findIndex((n) => n > 1); // 1

28、fill()

使用给定值填充一个数组。ES6 新增。

1
2
3
4
[1, 2, 3].fill(8); // [8, 8, 8]
 
// 指定起始和结束位置
[1, 2, 3].fill(7, 1, 2); // [1, 7, 3]

29、entries()，keys() 和 values()

ES6 提供三个新的方法: entries()、keys()和 values() ——用于遍历数组。可以用 for...of 循环进行遍历，唯一的区别是 keys()是对键名的遍历、values() 是对键值的遍历，entries() 是对键值对的遍历。ES6 新增。

1
2
3
4
5
const a = [1, 2, 3];
 
for (let index of a.keys()) {
    console.log(index); // 0, 1, 2
}

30、includes()

返回一个布尔值，表示某个数组是否包含给定的值，与字符串的 includes 方法类似。ES6 新增。

1
2
3
4
5
6
[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true
 
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

31、扩展运算符(…)

将一个数组转为用逗号分隔的参数序列。ES6 新增。

1
2
3
4
5
6
7
8
const a = [1,2,3];
const b = [...a];
console.log(b); // [1, 2, 3]
 
// 用于参数，可序列化为多个参数
Math.max(...[14, 3, 77]);
// 相当于
Math.max(14, 3, 77);

32、Array.prototype.flat(depth?)

按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

1
2
3
4
5
6
7
8
9
const arr1 = [0, 1, 2, [3, 4]];
 
console.log(arr1.flat());
// Expected output: Array [0, 1, 2, 3, 4]
 
const arr2 = [0, 1, 2, [[[3, 4]]]];
 
console.log(arr2.flat(2));
// Expected output: Array [0, 1, 2, Array [3, 4]]

33、Array.prototype.flatMap()

首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。

1
2
3
4
const arr1 = [1, 2, [3], [4, 5], 6, []];
 
arr1.flatMap(num => num);
// Array [1, 2, 3, 4, 5, 6]

34、findLast()

返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined。

1
[5, 12, 50, 130, 44].findLast(d => d > 30); // 130

35、findLastIndex()

返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。

1
[5, 12, 50, 130, 44].findLastIndex(d => d > 30); // 3

更多参考

  • http://es6.ruanyifeng.com/#docs/array
  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

相关文章:

Default Thumbnailjavascript 数组的深度复制 Default ThumbnailJavaScript 事件机制详细解读(摘) Default ThumbnailJavaScript 流行代码风格参考指南[摘] Default Thumbnail前端 javascript 实现文件下载 Default ThumbnailJavaScript 中的异步编程方式与实践 Default ThumbnailjavaScript 中的函数柯里化(Currying)简述 Default ThumbnailJavascript Promise 异步编程模式 确保前端 JavaScript 浮点数精度的四则运算方法 Default Thumbnail什么是 QUnit ：Javascript 单元测试框架 QUnitjs 简介 Default ThumbnailJSHint：在 Eclipse 和 sublime 中配置与使用 javascript 语法风格检测工具 Default Thumbnailjavascript 代码校验器 eslint: 在 sublime text 编辑器中安装和配置 eslint Default Thumbnail使用 JSDoc 与 docstrap 生成 JavaScript 项目 API 文档
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
  1. kamen说道：
    2023年03月1日 5:44 下午
    Google Chrome 110.0.0.0 Google Chrome 110.0.0.0 Windows 10 x64 Edition Windows 10 x64 Edition

    21点的例子没改成every :razz:

    回复
    1. 任侠说道：
      2023年03月1日 6:28 下午
      Microsoft Edge 110.0.1587.50 Microsoft Edge 110.0.1587.50 Windows 10 x64 Edition Windows 10 x64 Edition

      已更新。去看 MDN 吧

      回复
  2. Ashishao说道：
    2018年05月18日 4:23 下午
    Google Chrome 55.0.2883.87 Google Chrome 55.0.2883.87 Windows 10 x64 Edition Windows 10 x64 Edition

    第五个 push 应该返回 长度是 4 不是 2

    回复
    1. 任侠说道：
      2018年05月19日 11:04 上午
      Google Chrome 66.0.3359.139 Google Chrome 66.0.3359.139 Windows 10 x64 Edition Windows 10 x64 Edition

      感谢，已更正

      回复

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code