开启辅助访问
帐号登录 |立即注册

JS数组方法详解

 
map、filter、reduce
JS 数组方法map、filter和reduce容易混淆,这些都是转换数组或返回聚合值的有用方法。

map:返回一个数组,其中每个元素都使用指定函数进行过转换
const arr = [1, 2, 3, 4, 5, 6];
const mapped = arr.map(el => el + 20);
console.log(mapped);
// [21, 22, 23, 24, 25, 26]

filter:返回一个数组,只有当指定函数返回 true 时,相应的元素才会被包含在这个数组中
const arr = [1, 2, 3, 4, 5, 6];
const filtered = arr.filter(el => el === 2 || el === 4);
console.log(filtered);
// [2, 4]

reduce:按函数中指定的值累加
const arr = [1, 2, 3, 4, 5, 6];
const reduced = arr.reduce((total, current) => total + current);
console.log(reduced);
// 21

find, findIndex, indexOf
find:返回与指定条件匹配的第一个实例,如果查到不会继续查找其他匹配的实例
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const found = arr.find(el => el > 5);
console.log(found);
// 6

注意,虽然5之后的所有元素都满足条件,但是 find 只返回第一个匹配的元素。当咱们发现匹配项并想中断for循环,在这种情况下,find 就可以派上用场了。

findIndex:这与find几乎完全相同,但不是返回第一个匹配元素,而是返回第一个匹配元素的索引
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.findIndex(el => el === 'Frank');
console.log(foundIndex);
// 1

indexOf:与findIndex几乎完全相同,但它不是将函数作为参数,而是采用一个简单的值。 当你需要更简单的逻辑并且不需要使用函数来检查是否存在匹配时,可以使用此方法
const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
const foundIndex = arr.indexOf('Frank');
console.log(foundIndex);
// 1

push, pop, shift, unshift
push:这是一个相对简单的方法,它将一个项添加到数组的末尾。它就地修改数组,函数本身会返回添加到数组中的项
let arr = [1, 2, 3, 4];
const pushed = arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]
console.log(pushed); // 5

pop:这将从数组中删除最后一项。同样,它在适当的位置修改数组,函数本身返回从数组中删除的项
let arr = [1, 2, 3, 4];
const popped = arr.pop();
console.log(arr); // [1, 2, 3]
console.log(popped);// 4

shift:从数组中删除第一项。同样,它在适当的位置修改数组。函数本身返回从数组中删除的项
let arr = [1, 2, 3, 4];
const shifted = arr.shift();
console.log(arr); // [2, 3, 4]
console.log(shifted); // 1

unshift:将一个或多个元素添加到数组的开头。同样,它在适当的位置修改数组。与许多其他方法不同,函数本身返回数组的新长度
let arr = [1, 2, 3, 4];
const unshifted = arr.unshift(5, 6, 7);
console.log(arr); // [5, 6, 7, 1, 2, 3, 4]
console.log(unshifted); // 7

splice, slice
splice:通过删除或替换现有元素和/或添加新元素来更改数组的内容,此方法会修改了数组本身
下面的代码示例的意思是:在数组的位置 1 上删除 0 个元素,并插入 b。
let arr = ['a', 'c', 'd', 'e'];
arr.splice(1, 0, 'b')
console.log(arr);//a,b,c,d,e


slice:从指定的起始位置和指定的结束位置之前返回数组的浅拷贝。 如果未指定结束位置,则返回数组的其余部分。 重要的是,此方法不会修改数组,而是返回所需的子集
let arr = ['a', 'b', 'c', 'd', 'e'];
const sliced = arr.slice(2, 4);
console.log(sliced);
// ['c', 'd']
console.log(arr);
// ['a', 'b', 'c', 'd', 'e']

sort
sort:根据提供的函数对数组进行排序。这个方法就地修改数组。如果函数返回负数或 0,则顺序保持不变。如果返回正数,则交换元素顺序
let arr = [1, 7, 3, -1, 5, 7, 2];
const sorter = (firstEl, secondEl) => firstEl - secondEl;
arr.sort(sorter);
console.log(arr); // [-1, 1, 2, 3, 5, 7, 7]
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。