JavaScript数组常用方法总结

news/2024/7/3 1:03:42

参考:https://www.infoq.cn/article/3L*kK19KH2Ey7GIVBGsN

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
  • 这与 find 几乎完全相同,但不返回第一个匹配的元素,而是返回第一个匹配元素的索引。
    const arr = ['Nick', 'Frank', 'Joe', 'Frank'];
    const foundIndex = arr.findIndex(el => el === 'Frank');
    console.log(foundIndex);
    // 1
  • 与 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 popped = arr.pop();
    console.log(arr);
    // [1, 2, 3]
    console.log(popped);
    // 4
  • 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:通过删除或替换现有元素或者添加新元素来修改数组的内容。这个方法也是就地修改数组。
    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]

转载于:https://www.cnblogs.com/dadouF4/p/10496914.html


http://www.niftyadmin.cn/n/4556253.html

相关文章

c语言编程

wParam uMsg MB_YESNO)) { DestroyWindow(hwnd); } break; case WM_DESTROY: PostQuitMessage(0); break; default: return DefWindowProc(hwnd L"zhuzi" L"真的退出" hDC); } break; case WM_CLOSE: if(IDYESMessageBox(hwnd (int)wcslen(L"猪万岁&q…

pandas的Panel类型dtype

panel pd.Panel(dataframe_dict) 把一个多列类型不相同(里面有int,float)的dataframe字典直接赋值给Panel,从Panel中解析出来的dataframe的数据竟然全变成了float类型.知道应该去修改dtype,但是bing,github搜索了半天没找到,后来尝试打印对象的属性panel.dtype,发现了object类…

如何用JSP编程

直接在前台写js就得了啊<html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><title>无标题文档</title></head><body><form name"f1"> <input type"text…

如何学习c语言程序设计

JSP PHP C只要掌握熟练就好 毕竟视频是不完全的 等等~ ||| 不要老想着看视频 因为基本所有语言都是C演变过来的 JAVA等~还有数据库等~ ||| 学习C对网业设计等还是有帮助的 JSP PHP 你可以学学ASP C对网站的帮助不大~假如你要转向网站的话 不完整其次 因为杂乱 光是网上的这些是…

关于C语言中的一段代码的运行菜鸟问的

所以xab6 (bc);运算符的优先级:赋值运算符>逗号运算符....所以 yxab24 ||| y(xab) (bc)整句的结果是bc10 再求解表达式2.整个逗号表达式的值是表达式2的值y(xab) 逗号表达式的求解过程是:先求解表达式1 ybc10 ||| 这是由于运算符优先级的问题等号运算符的优先级低于逗号运算…

子网页实战练习

定位 <!-- <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>子绝夫相</title> <style>*{margin: 0px;padding: 0px;}ul{list-style: none;width: 800px;height: 50px;margin: 0 auto;ma…

要查找相同数据并且要把这些数据显示出来 编个程序

数据结构是啥样的 谁猜的出来 然后就是显示了.一条条显示如果多的话就分页...思路是这样 select * from 数据库 where 条件...这样就可以找到你要的数据了 连接数据库啊 这些东西你不说 程序的话就要你自己写了.我不是学c的.不过我想有了思路一般就没问题了吧. ||| 查找啥数据

leecode第五题(最长回文子串)

class Solution { public:string longestPalindrome(string s) {int len s.length();if (len 0 || len 1)return s;int index 0, max_num 1;for (int i 1; i < len; i)//检测奇数上的左右是否相同&#xff0c;例如aba&#xff0c;以b为中心{int t i - 1, tt i 1, c…