JS数组常用方法笔记

刘启春
Web技术

Array 对象用于在单个的变量中存储多个值。数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。

JS 数组实现了多种数据结构，它还具有栈和队列的功能。使用 pop、push 方式对数组尾部操作实现栈操作，使用 shift 和 push 实现队列操作。

创建一个数组

//1
var arr = ["data1", "data2", "data3"];

//2
var arr = new Array(); //arr为一个空数组
var arr = new Array("data1", "data2", "data3");

创建数组时避免 new Array()，没有必要使用 JavaScript 的内建数组构造器 new Array()。请使用 [] 取而代之！

基本操作

var d = arr[0]; //获取一个元素
arr[0] = "data"; //修改元素
var len = arr.length; //获取数组长度

数组与对象的区别

  • 在 JavaScript 中，数组使用数字索引。
  • 在 JavaScript 中，对象使用命名索引。
  • 数组是特殊类型的对象，具有数字索引。

伪数组是什么？伪数组是一个对象，只有有数组的"形", 不具有数组的常用方法（如 map，filter，forEach，push 等），未实现遍历接口(iterable)，forEach、map、filter、因此增强 for 不能遍历。

//伪数组
var arr = { 0: "data1", 1: "data2", 2: "data2", length: 3 };

常用方法

  • concat() 连接两个或更多的数组，并返回结果。
var arr1 = [1, 2, 3];
var arr2 = [4, 5];
var arr3 = arr1.concat(arr2); //
//arr3 = [1, 2, 3, 4, 5]
  • join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var arr = [1, 2, 3];
var str = arr.join("-");
//str = 1-2-3
  • pop() 删除并返回数组的最后一个元素
var arr = [1, 2, 3];
var val = arr.pop();
//val = 3;
  • push() 向数组的末尾添加一个或更多元素，并返回新的长度。
var arr = [1, 2, 3];
var len = arr.push(4);
//len = 4
  • reverse() 颠倒数组中元素的顺序。
var arr = [1, 2, 3];
arr.reverse();
//after: arr=[3,2,1]
  • shift() 删除并返回数组的第一个元素
var arr = [1, 2, 3];
var val = arr.shift();
//val = 1
  • slice() 从某个已有的数组返回选定的元素
var arr = [1, 2, 3, 4, 5, 6];
var arr2 = arr.slice(2, 4); //slice(fromIdx,toIdx)
//arr2 = [3,4]

  • sort() 对数组的元素进行排序

  • unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

var arr = [1, 2, 3];
var len = arr.unshift(0);
//len=4

遍历

可以遍历伪数组。

1.for 循环

for (var i = 0; i < arr.length; i++) {
  //arr[i]
}

2.forEach 循环

遍历时元素只读，修改元素无效。

//org_arr为原数组，org_arr=arr
arr.forEach((item, index, org_arr) => {
  //TODO
});

arr.forEach(function (item, index, org_arr) {
  //TODO
});

3.map

遍历过程中可以修改元素。

arr.map((item, index, org_arr) => {
  //TODO
  return item;
});

arr.map(function (item, index, org_arr) {
  //TODO
  return item;
});

4.增强 for

for (var item of arr) {
  console.log(item);
}

5.filter

用于过滤数组中的元素，filter 的回调函数返回值是 boolean，决定当前元素是否被加入到新的数组中。

遍历过程中不能改变原数组元素。

//newArr和arr是两个不同的数组
var newArr = arr.filter((item) => {
  return true / false;
});

var newArr = arr.filter((item) => item > 3);

var newArr = arr.filter(function (item) {
  return true / false;
});

6.every

判断数组元素是否都满足某个条件，每一项的回掉函数返回 true，则 every 函数返回 true，否则返回 false。

var arr = [1, 2, 3, 4, 5, 6];
var boo = arr.every((item, index, arr) => item > 3);
var boo = arr.every(function (item, index, org_arr) {
  return item > 3;
});
//boo = false

7.some

判断数组元素是否存在某一个元素满足条件，若有一个满足条件则 some 返回 true，若都不满足则返回 false。

var arr = [1, 2, 3, 4, 5, 6];
var boo = arr.some((item, index, org_arr) => {
  return item > 3;
});
var boo = arr.some((item, index, org_arr) => item > 3);
var boo = arr.some(function (item, index, org_arr) {
  return item > 3;
});
//boo = true

8.reduce

从左向右累加值。

var arr = [1, 2, 3, 4, 5, 6];
//preVal为之前的值，curVal为当前被加的值
var sum = arr.reduce((preVal, curVal) => {
  return preVal + curVal;
});
//No1: preVal=1,curVal=2
//No2: preVal=3,curVal=3
//No3: preVal=6,curVal=4
//No4:...
//sum=21

9.reduceRight

从右往左累加。使用同上。

10.find

在数组中查找满足条件的第一个元素并返回。

var itm = arr.find((item) => {
  return boo_express;
});
var itm = arr.find(function (item) {
  return true / false;
});

11.findIndex

在数组中查找满足条件的第一个元素的索引值并返回。

var idx = arr.findIndex((item) => {
  return item === 3;
});
var idx = arr.findIndex(function (item) {
  return item === 3;
});

（完）