JavaScript数组API自我学习（第二节）

赵锦漩
181 阅读3分钟

前言：我们前端开发的同学经常会使用到数组的API，但是有些API的参数和返回值我们真的很清楚么，甚至有些参数的灵活应用我们似乎也很少去总结，所以鄙人在上海疫情最严重的期间来小结一下。但是由于个人能力有限，对于有些理解不是很到位，甚至会理解错误，如有错误，请提出，在下谢谢各位江湖儿女啦！

1、entries()

  • entries()：返回一个新的Array Iterator独享，该对象包含数组中的每个索引的键值对。
  • 书写格式：arr.entries()
  • 返回值：一个新的Array迭代器对象，Array Iteratos是对象，它的原型上面有个next()方法，可用用于遍历迭代器取得原数组的 [key,value]。

image.png

const array1 = ['a', 'b', 'c'];
const iterator1 = array1.entries();
console.log(iterator1.next().value); // [0, "a"]
console.log(iterator1.next().value); // [1, "b"]

2、fill()

  • fill()：方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
  • 书写格式：arr.fill(value,start,end)
  • 参数：
    • value：用来填充的值，必传
    • start：用填充替换开始的位置索引，非必传
    • end：用填充替换结束的位置索引，非必传
  • 返回值：修改后的数组
const array1 = [1, 2, 3, 4];
console.log(array1.fill("****", 2, 4));  // [1, 2, "****", "****"]
console.log(array1.fill("****", 1));  // [1, "****", "****", "****"]
console.log(array1.fill("****"));  // ["****", "****", "****", "****"]

3、filter()

  • filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
  • 书写格式：arr.filter()
  • 返回值：一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); 　　　　　　　　//[1, 4, 7, 8, 9, 10]

var fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
function filterItems(query) {
  return fruits.filter(function(el) {
      return el.toLowerCase().indexOf(query.toLowerCase()) > -1;
  })
}
console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

4、find()

  • find()：方法返回数组中满足提供的测试函数的第一个元素的值。否则返回undefined。
  • 书写格式：arr.find()
  • 参数：函数（方法）
  • 返回值：数组中第一个满足所提供测试函数的元素的值，否则返回undefined。
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found); // 12

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
];

function isCherries(fruit) {
  return fruit.name === 'cherries';
}

console.log(inventory.find(isCherries)); // { name: 'cherries', quantity: 5 }

5、findIndex()

  • findIndex()：方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
  • 书写格式：arr.findIndex()
  • 参数：函数（方法）
  • 返回值：数组中通过提供测试函数的第一个元素的索引。否则，返回-1.
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber)); // 3

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1, not found
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

6、findLast()

  • findLast()：方法返回数组中满足提供的测试函数条件的最后一个元素的值。如果没有找到对应元素，则返回 undefined
  • 书写格式：arr.findLast()
  • 参数：函数（方法）
  • 返回值：数组中满足提供的测试函数索引最高的元素``(符合条件的最后一个)；如果没有元素匹配，返回undefined
const array1 = [5, 12, 50, 130, 44];
const found = array1.findLast((element) => element > 45);
console.log(found); // 130

const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'fish', quantity: 1},
  {name: 'cherries', quantity: 5}
];

function isNotEnough(item) {
  return item.quantity < 2;
}

console.log(inventory.findLast(isNotEnough)); // { name: "fish", quantity: 1 }

7、findLastIndex()

  • findLastIndex()：方法返回数组中满足提供的测试函数条件的最后一个元素的索引。若没有找到对应元素，则返回 -1。
  • 书写格式：arr.findLastIndex()
  • 参数：函数（方法）
  • 返回值：数组中通过测试的最后一个元素（最大的索引）。如果没有任何元素匹配，则返回 -1。
const array1 = [5, 12, 50, 130, 44];
const isLargeNumber = (element) => element > 45;
console.log(array1.findLastIndex(isLargeNumber)); // 3

function isPrime(element) {
  if (element % 2 === 0 || element < 2) {
    return false;
  }
  for (let factor = 3; factor <= Math.sqrt(element); factor += 2) {
    if (element % factor === 0) {
      return false;
    }
  }
  return true;
}

console.log([4, 6, 8, 12].findLast(isPrime)); // undefined, not found
console.log([4, 5, 7, 8, 9, 11, 12].findLast(isPrime)); // 11

8、flat()

  • flat()：
    • 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。
    • 方法会移除数组中的空项。
  • 书写格式：arr.flat(depth)
  • 参数：
    • depth:指定要提取嵌套数组的结构深度，默认值为 1;如果是Infinity，可展开任意深度的嵌套数组。
  • 返回值：一个包含将数组与子数组中所有元素的新数组
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat()); // [0, 1, 2, 3, 4]

const arr2 = [0, 1, 2, [[[3, 4]]]];
console.log(arr2.flat(2)); // [0, 1, 2, [3, 4]]

//使用 Infinity，可展开任意深度的嵌套数组
var arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

9、flatMap()

  • flatMap()：方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些。
  • 书写格式：arr.flatMap()
  • 参数：函数
  • 返回值：一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为 1。
const arr1 = [1, 2, [3], [4, 5], 6, []];
const flattened = arr1.flatMap(num => num);
console.log(flattened); // [1, 2, 3, 4, 5, 6]

10、from()

  • from()：方法对一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。
  • 书写格式：Array.from(arrayLike, mapFn)
  • 参数：
    • arrayLike：想要转换成数组的伪数组对象或可迭代对象。
    • mapFn：回调函数
  • 返回值：
console.log(Array.from('foo')); // ["f", "o", "o"]

console.log(Array.from([5, 2, 3], x => x + x)); // [10, 4, 6]

// 从set生成数组
const set = new Set(['foo', 'bar', 'baz', 'foo']);
Array.from(set);
// [ "foo", "bar", "baz" ]

// 从map生成数组
const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];
avatar
文章
阅读
粉丝