JavaScript 中 Array 的常用方法总结（二）

Admin
Admin
Admin
52
文章
6
评论
更多
 2018年3月29日09:00:10 评论 8,312 5177字阅读17分15秒

在 ECMAScript 中最常用的类型之一就是 Array 类型，Array 类型的方法也有很多，所以在这篇文章中，我们主要来梳理一下 Array 类型的一些内置方法。

一、栈方法

栈是一种 LIFO 后进先出的数据结构，也就是最新添加的项最早被移除。使用 push() 和 pop() 方法可以实现类似栈的行为
1、push()
接收任意数量的参数，逐个将其添加至数组末尾，返回修改后的数组的长度

  1. var arrs = ["1","2"];
  2. var arr = arrs.push("red","blue");
  3. console.log(arrs);      // ["1","2","red","blue"]
  4. console.log(arr);        // 4

2、pop()
移除数组中的最后一项，返回移除的项

  1. var arr = ["red","blue"];
  2. var item = arr.pop();
  3. console.log(item);            // blue
  4. console.log(arr.length);    // 1

二、队列方法

队列数据结构的访问规则是 FIFO 先进先出结构，队列在列表的末端添加项，从列表的前端移除项，使用 push() 和 shift() 方法可以实现类似队列的行为
1、shift()
移除数组中的第一项，返回移除的项

  1. var arr = ["red","blue"];
  2. var item = arr.shift();
  3. console.log(item);          // red
  4. console.log(arr.length);    // 1

2、unshift()
在数组的前端添加任意个项，返回新数组的长度

  1. var arrs = ["1","2"];
  2. var arr = arrs.push("red","blue");
  3. console.log(arrs);      // ["red","blue","1","2"]
  4. console.log(arr);       // 4

三、重排序方法

1、reverse()
反转数组项的顺序

  1. var arr = [1,2,3,4,5];
  2. arr.reverse();
  3. console.log(arr);           // [5,4,3,2,1]

2、sort()
按照升序排列数组项，但是它在实现排序时会调用每个数组项的 toString() 方法，去比较字符串，所以会出现如下情况

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

为了在使用 sort() 方法时返回正确的排序，我们需要给 sort() 传入一个比较函数，该比较函数传入两个参数

  1. /*降序*/
  2. function compare(value1,value2){
  3.     return value2 - value1;
  4. }
  5. var arr = [0,10,5,1,15];
  6. arr.sort(compare);
  7. console.log(arr);           // [15,10,5,1,0]
  9. /*升序*/
  10. function compare(value1,value2){
  11.     return value1 - value2;
  12. }
  13. var arr = [0,10,5,1,15];
  14. arr.sort(compare);
  15. console.log(arr);           // [0,1,5,10,15]

四、操作方法

数组的连接
1、concat()
Array.concat() 方法会先创建当前数组的一个副本，然后将接收到的参数添加到这个副本的末尾并返回副本

  1. var a = [1,2,3];
  2. var b = a.concat('a','b',['c','d','e']);
  3. console.log(a);             // [1,2,3]
  4. console.log(b);             // [1,2,3,"a","b","c","d","e"]

2、join()
Array.join()方法将数组中的所有元素都转化为字符串并连接起来，返回最后生成的字符串。可以指定一个可选的字符串在生成的字符串中分隔数组的各个元素，如不指定，默认用逗号隔开

  1. var arr = [1,2,3,4];
  2. console.log(arr.join())          // 1,2,3,4
  3. console.log(arr.join("/"))      // 1/2/3/4

数组的截取
1、slice()
接受一个或两个参数，要返回的起始位置到结束位置但不包括结束位置项，如果只写一个参数则截取数组到最后，可以接收负数作为参数

  1. var arr = ["red","green","blue"];
  2. var removed1 = arr.slice(0,1);  // 从下标0开始截取到下标为1
  3. var removed2 = arr.slice(-1);   // 截取倒数第一项
  4. var removed3 = arr.slice(1);    // 截取从下标1开始到最后
  5. console.log(arr);                      // ["red","green","blue"]
  6. console.log(removed1);          // ["red"]
  7. console.log(removed2);          // ["blue"]
  8. console.log(removed3);          // ["green","blue"]

2、splice()
最多可以接收三个参数，分别为起始位置，要删除的项目数，要插入的任意数量的项，同个这三个参数是否传入可以实现删除、插入、替换

  1. var arr = ["red","green","blue"];
  2. var removed = arr.splice(1);    // 删除从下标1开始到最后
  3. console.log(arr);                     // ["red"]
  4. console.log(removed);           // ["green", "blue"]
  6. var arr = ["red","green","blue"];
  7. var removed = arr.splice(0,1);  // 从下标0开始删除1个(第一个参数为要删除第一项的位置，第二个参数为要删除的项数)
  8. console.log(arr);                     // ["green", "blue"]
  9. console.log(removed);           // ["red"]
  11. var arr = ["red","green","blue"];
  12. removed = arr.splice(1,0,"yellow","orange");    // 从下标1开始插入2个元素
  13. console.log(arr);                                     // ["red","green","blue","yellow","orange"]
  14. console.log(removed);                           // []
  16. var arr = ["red","green","blue"];
  17. removed = arr.splice(1,2,"yellow","orange");   // 从下标1开始删除2个元素，然后再添加2个元素
  18. console.log(arr);                                     // ["red","yellow","orange"]
  19. console.log(removed);                           // ["green","blue"]

五、位置方法

indexOf()、lastIndexOf()
indexOf() 与 lastIndexOf() 用于查找数组中是否有该元素，如果有则返回该元素的位置，否则返回-1。它们都接收两个参数:要查找的项和表示查找起点的位置的索引(第二个参数可选)

  1. var arr = [1,2,3,4,5,4,3,2,1];
  2. console.log(arr.indexOf(4));           // 3
  3. console.log(arr.lastIndexOf(4));     // 5
  4. console.log(arr.indexOf(4,4));       // 5
  5. console.log(arr.lastIndexOf(4,4)); // 3
  6. console.log(arr.indexOf(6));          // -1

六、迭代方法

ES5为数组定义了五个迭代方法，每个方法都接收两个参数：要在每一项上运行的函数和（可选的）运行该函数的作用域对象----影响 this 的值。传入这些方法中的函数会接收三个参数：数组项的值、该项在数组中的位置和数组对象本身。
1、every()
对数组中的每一项运行给定的函数，如果该函数对每一项都返回 true，则返回 true

  1. var numbers = [1,2,3,4,5,4,3,2,1];
  2. var everyResult = numbers.every(function(item,index,arry){
  3. 　　return (item>2);
  4. });
  5. console.log(everyResult);               // false

2、some()
对数组中每一项运行给定的函数，如果该函数对任一项返回 true，则返回 true

  1. 对数组中每一项运行给定的函数，如果该函数对任一项返回true，则返回true
  2. var numbers = [1,2,3,4,5,4,3,2,1];
  3. var someResult = numbers.some(function(item,index,arry){
  4. 　　return (item>2);
  5. });
  6. console.log(someResult);                // true

3、filter()
对数组中每一项运行给定的函数，返回该函数会返回 true 的项组成的数组

  1. var numbers = [1,2,3,4,5,4,3,2,1];
  2. var filterResult = numbers.filter(function(item,index,arry){
  3. 　　return (item>2);
  4. });
  5. console.log(filterResult);              // [3,4,5,4,3]

4、forEach()
对数组中的每一项运行给定的函数，没有返回值

  1. var numbers = [1,2,3,4,5,4,3,2,1];
  2. numbers.forEach(function(item,index,arry){
  3. 　　//用户操作
  4. });

5、map()
对数组中的每一项运行给定的函数，返回每次调用的结果组成的数组

  1. var numbers = [1,2,3,4,5,4,3,2,1];
  2. var mapResult = numbers.map(function(item,index,arry){
  3. 　　return item*2;
  4. });
  5. console.log(mapResult);                 // [2,4,6,8,10,8,6,4,2]

七、归并方法

ECMAScript5 新增两个归并方法 reduce() 和 reduceRight()，这两个方法都会迭代数组中的所有项，不同的是 reduce()方法从数组的第一项开始，reduceRight() 则从数组的最后一项开始，这两个方法都接收两个参数：一个在每一项上调用的函数，一个是作为归并基础的初始值（可选）

  1. var values = [1,2,3,4,5];
  2. var sum = value.reduce(function(prev,cur,inex,array){　　//参数说明：前一个值、当前值、项的索引、数组对象
  3.     return prev+cur;
  4. });
  5. console.log(sum);       // 15
  7. var sum2 = values.reduce(function(prev,cur,index,arry){
  8.    return prev+cur;
  9. },20);
  10. console.log(sum2);      // 35

博主只是一名前端的小白，只是把自己用到的知识分享一下，要是有什么不对的地方，欢迎大家提出~~

继续阅读
Admin
  • 本文由 发表于 2018年3月29日09:00:10
  • 除非特殊声明，本站文章均为原创，转载请务必保留本文链接
Vue 中计算属性和侦听器 前端开发

Vue 中计算属性和侦听器

在 Vue 中通常我们会在模板绑定表达式，模板是用来描述视图结构的。如果模板中的表达式存在过多的逻辑性语句，那么整个模板就会变得特别的臃肿，可读性和维护性将会降低，因此为了简化逻辑，我们可以使用计算属...
10月22日 10,132 评论
浅谈 JS 中的防抖和节流操作 前端开发

浅谈 JS 中的防抖和节流操作

一般在进行窗口的 resize、scroll 等输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用 debounce（防抖）和 thr...
10月14日 9,254 评论
JS中的「import」和「require 」的区别 前端开发

JS中的「import」和「require 」的区别

import 和 require 是 JS 模块化编程使用的，模块化是一种将系统分离成独立功能部分的方法，一个模块是为完成一个功能的一段程序或子程序，"模块"是系统中功能单一且可替换的部分。模块化思想...
10月12日 20,018 评论
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: