跟着mdn学习Javascript之数组篇(一)

51 阅读4分钟

你知道Javascript中的数组方法总共有多少个吗?41个哦! 最近有点时间,就跟着mdn的api一个个复习了一下,真的是很惊艳!自己总结了一下,做个记录吧!

(一)查找包含类

1. Array.prototype.at(index):

返回值

返回指定索引index对应的的元素

参数说明

  • index:
    • index > 0,返回index处的元素
    • index < 0,返回index + array.length处的元素
    • index < -array.length 或者 index > array.length,返回undefined

2. Array.prototype.every(callbackFn):

是一个迭代方法

返回值

测试一个数组内的 所有元素 是否都通过制定callbackFn的测试,返回一个布尔值,如果callbackFn为每个数组元素返回true,则为true,否则为false

参数说明

  • callbackFn(element, index, array)
    • element: 当前正在处理的元素
    • index:当前正在处理的元素索引
    • array:调用了every()的数组本身
  • 说明
    • 仅针对已分配值得数组调用,不会为稀疏数组中的空槽调用
    • 有一个返回为false,立即返回,停止遍历数组

3. Array.prototype.some(callbackFn):

是一个迭代方法

返回值

测试数组中是否至少有一个元素通过callbackFn的测试。如果在数组中找到一个元素是的callbackFn返回为true,返回true,否则返回false,不会修改数组

参数说明

  • callbackFn(element, index, array)
    • element: 当前正在处理的元素
    • index:当前正在处理的元素索引
    • array:调用了every()的数组本身
  • 说明
    • 仅针对已分配值得数组调用,不会为稀疏数组中的空槽调用
    • 会遍历数组的所有元素

4. Array.prototype.find(callbackFn):

返回值

返回数组中满足callbackFn的第一个元素的值;否则返回undefined

说明

find()方法对数组每一个元素按升序(索引从小到大)执行callbackFn。匹配后返回该元素并停止遍历数组

参数说明

  • callbackFn(element, index, array)
    • element: 当前正在处理的元素
    • index:当前正在处理的元素索引
    • array:调用了every()的数组本身
const arr = [1, 2, 4, 3, 5, 4];
const found = arr.find(ele => ele > 2);
console.log(found);
// Expect output: 4

5. Array.prototype.findIndex(callbackFn):

返回值

返回数组中满足callbackFn的第一个元素的索引;没找到怎返回-1

说明

findLast()方法对数组每一个元素按升序(索引从小到大)执行callbackFn。匹配后返回该元素的索引并停止遍历数组

const arr = [1, 2, 4, 3, 5, 4];
const foundIdx = arr.findIndex(ele => ele > 2);
console.log(foundIdx);
// Expect output: 2

6. Array.prototype.findLast(callbackFn):

返回值

反向迭代数组,返回数组中满足callbackFn的第一个索引值最高的元素;否则返回undefined

说明

findLast()方法对数组每一个元素按降序(索引从大到小)执行callbackFn。匹配后返回该元素并停止遍历数组

const arr = [1, 2, 4, 3, 5, 4];
const foundLast = arr.findLast(ele => ele > 2);
console.log(foundLast);
// Expect output: 4

7. Array.prototype.findLastIndex(callbackFn):

返回值

反向迭代数组,返回数组中满足callbackFn的第一个索引值最高的索引;否则返回-1

说明

findLastIndex()方法对数组每一个元素按降序(索引从大到小)执行callbackFn。匹配后返回该元素的索引并停止遍历数组

const arr = [1, 2, 4, 3, 5, 4];
const foundLastIdx = arr.findLast(ele => ele > 2);
console.log(foundLastIdx);
// Expect output: 6

8. Array.prototype.indexOf(searchElement, fromIndx?):

返回值

返回数组第一次出现给定元素的索引;否则返回-1

参数说明

  • searchElment:
    • 数组中要查找的元素
  • fromIndex(可选)
    • 开始搜索的索引(从0开始),会转换为整数;起始位置包含fromIndex
    • fromIndex < 0,开始位置为fromIndex+array.lenght
    • fromIndex < -array.length or 省略了fromIndex, 将使用0,搜索整个数组
    • fromIndex > array.length,数组不会继续搜索并返回-1

说明

  • indexOf()使用严格相等(===),NaN === NaN永远为false,详细了解请点击链接严格相等
const arr = [1, 2, 4, 3, 5, 4];
console.log(arr.indexOf(2));
// Expect output: 1
console.log(arr.indexOf(6));
// Expect output: -1

9. Array.prototype.includes(searchElement, fromIndx?):

返回值

返回一个布尔值,判断一个数组是否包含一个指定的searchElement,如果包含则返回true,否则返回false

参数说明

  • searchElment:
    • 数组中要查找的元素
  • fromIndex(可选)
    • 开始搜索的索引(从0开始),会转换为整数;起始位置包含fromIndex
    • fromIndex < 0,开始位置为fromIndex+array.lenght
    • fromIndex < -array.length or 省略了fromIndex, 将使用0,搜索整个数组
    • fromIndex > array.length,数组不会继续搜索并返回-1

说明

  • includes()使用零值相等(===),+0等于-0,但false不被认为与0相同。NaN可以被正确搜索到。详细了解请点击链接零值相等
const arr = [1, NaN, 0, 2, 4, 3, 5, 4];
console.log(arr.includes(NaN));
// Expect output: true
console.log(arr.includes(-0));
// Expect output: true

10. Array.prototype.filter(callbackFn):

返回值

创建给定数组一部分的浅拷贝,包含通过callbackFn测试的所有元素;如果元素未通过测试,则返回一个空数组

参数说明

  • callbackFn(element, index, array):该函数可以更改数组
    • element: 当前正在处理的元素
    • index:当前正在处理的元素索引
    • array:调用了every()的数组本身

说明

  • 更改返回的数组
const arr = [1, 0, 2, 4, 3, 5, 4];
const filterResult1 = arr.filter(ele => ele > 2)
// filterResult1: [4, 3, 5, 4]

// 更改数组
const filterResult2 = arr.filter((ele, index, arr) => {
    arr[index]++;
    return ele > 3;
});
// arr: [2, 1, 3, 5, 4, 6, 5]
// filterResult2: [4, 5, 4]