ES6 数组 常用Api

Posted 2021-06-24 花心的射手座

1.合并多个数组 

array.concat(array1, array2,...arrayN); 

const array = [1,2].concat([\'a\', \'b\'], [\'name\']);
// [1, 2, "a", "b", "name"]

备注：结构后的...arrayN 只能放在最后不然会报错

2.过滤 数组中指定条件的值并返回新的数组  

array.filter(callback[, thisArg]);

// callback定义如下，三个参数： element:当前元素值；index：当前元素下标； array:当前数组
function callback(element, index, array) {
  // callback函数必须返回true或者false，返回true保留该元素，false则不保留。
  return true || false;
}
const filtered = [1, 2, 3].filter(element => element > 1);
// filtered: [2, 3];
 

备注:过滤后的是新数组， es6箭头函数 高效使用。

3.检测数组中的每一个元素是否都通过了callback测试，全部通过返回true，否则返回false。

 array.every(callback[, thisArg]);

// callback定义如下： element:当前元素值；index：当前元素下标； array:当前数组
function callback(element, index, array) {
  // callback函数必须返回true或者false告知every是否通过测试
  return true || false;
}

 // 控制是否销毁定时器

  const stopTimer = result.every(item => (

   item.documentStatus !== 1

  ))

 // 如果都已经购买完成 停止计时器

  if (stopTimer) {

  this.stopSetInterval()

  }

备注: 如遇到需求需要数组ids:\'1,2,3,4\'轮循请求接口，接口返回 true ,true ,flase,turs 每个id的状态，需要根据是否全部为true为条件 触发是否关闭轮询请求

4. 查找复合条件的第一个元素/返回通过callback函数测试的第一个元素，否则返回undefined，callback函数定义同上。

 

array.find(callback[, thisArg]);

const finded = [1, 2, 3].find(element => element > 1);
// finded: 2

备注:如果你需要找到一个元素的位置或者一个元素是否存在于数组中，使用Array.prototype.indexOf() 或 Array.prototype.includes()。

5.数组中找符合条件的第一个索引值（index）

 

array.findIndex(callback[, thisArg]);

const findIndex = [1, 2, 3].findIndex(element => element > 1);
// findIndex: 1

备注：返回通过callback函数测试的第一个元素的索引，否则返回-1，callback函数定义同上

 

6.返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。searchElement：要查找的元素；fromIndex：开始查找的索引位置。

array.indexOf(searchElement[, fromIndex = 0])

[2, 9, 7, 8, 9].indexOf(9);
// 1

7.数组通过指定连接符拆分成String

array.join(separator=\',\')

[1, 2, 3].join(\';\');
// "1;2;3"

8.返回一个新数组，新数组中的每个元素都是调用callback函数后返回的结果。注意：如果没有return值，则新数组会插入一个undefined值。

array.map由于不具有过滤的功能，因此array调用map函数时，如果array中的数据并不是每一个都会return，则必须先filter，然后再map，即map调用时必须是对数组中的每一个元素都有效。

const maped = [{name: \'aa\', age: 18}, {name: \'bb\', age: 20}].map(item => item.name + \'c\');
// maped: [\'aac\', \'bbc\'];

9.将数组中元素的位置颠倒。

array.reverse();

[\'one\', \'two\', \'three\'].reverse();
// [\'three\', \'two\', \'one\']，原数组被翻转

10.对数组中的元素进行排序，compareFunction不存在时，元素按照转换为的字符串的诸个字符的Unicode位点进行排序，慎用！请使用时一定要加compareFunction函数，而且该排序是不稳定的。

array.sort([compareFunction]);

[1, 8, 5].sort((a, b) => {
  return a-b; // 从小到大排序
});
// [1, 5, 8]

11.判断数组中是否包含可以通过callback测试的元素，与every不同的是，这里只要某一个元素通过测试，即返回true。callback定义同上。

array.some(callback[, thisArg]);

[2, 5, 8, 1, 4].some(item => item > 6);
// true

12.返回一个新数组，包含原数组从begin 到 end(不包含end)索引位置的所有元素。

array.slice(begin, end)

const newArray = [\'zero\', \'one\', \'two\', \'three\'].slice(1, 3);
// newArray: [\'one\', \'two\'];

13.通过删除现有元素和/或添加新元素来更改一个数组的内容。start:指定修改的开始位置；deleteCount：从 start位置开始要删除的元素个数；item...：要添加进数组的元素,从start 位置开始。！！！！强大的输出处理 返回值为被操作的值。

返回值是由被删除的元素组成的一个数组。如果只删除了一个元素，则返回只包含一个元素的数组。如果没有删除元素，则返回空数组。

如果 deleteCount 大于start 之后的元素的总数，则从 start 后面的元素都将被删除（含第 start 位）。

const myFish = [\'angel\', \'clown\', \'mandarin\', \'sturgeon\'];
 
const deleted = myFish.splice(2, 0, \'drum\'); // 在索引为2的位置插入\'drum\'
// myFish 变为 ["angel", "clown", "drum", "mandarin", "sturgeon"]，deleted为[]