千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 28个Javascript数组方法汇总整理

28个Javascript数组方法汇总整理

来源:千锋教育
发布人:qyf
时间: 2023-01-17 17:00:00 1673946000

28个Javascript数组方法汇总整理

  01、Array.map()

  返回一个新数组,其中包含对该数组中每个元素调用提供的函数的结果。

  const list = [ , , , ];

  list.map((⚪️) => ); // [ , , , ]

  // Code

  const list = [1, 2, 3, 4];

  list.map((el) => el * 2); // [2, 4, 6, 8]

  02、Array.filter()

  返回一个新数组,其中包含通过所提供函数实现的测试的所有元素。

  const list = [ , , , ];

  list.filter((⚪️) => ⚪️ === ); // [ , ]

  // Code

  const list = [1, 2, 3, 4];

  list.filter((el) => el % 2 === 0); // [2, 4]

  03、Array.reduce()

  将数组减少为单个值。函数返回的值存储在累加器中(结果/总计)。

  const list = [ , , , , ];

  list.reduce((⬜️, ⚪️) => ⬜️ + ⚪️); // + + + +

  // OR

  const list = [1, 2, 3, 4, 5];

  list.reduce((total, item) => total + item, 0); // 15

  04、Array.reduceRight()

  对数组的每个元素执行一个你提供的reducer 函数,从而产生一个输出值(从右到左)。

  const list = [ , , , , ];

  list.reduceRight((⬜️, ⚪️) => ⬜️ + ⚪️); // + + + +

  // Code

  const list = [1, 2, 3, 4, 5];

  list.reduceRight((total, item) => total + item, 0); // 15

  05、Array.fill()

  用静态值填充数组中的元素。

  const list = [ , , , , ];

  list.fill( ); // [ , , , , ]

  // Code

  const list = [1, 2, 3, 4, 5];

  list.fill(0); // [0, 0, 0, 0, 0]

  06、Array.find()

  返回数组中满足提供的测试函数的第一个元素的值。否则返回未定义。

  const list = [ , , , , ];

  list.find((⚪️) => ⚪️ === ); //

  list.find((⚪️) => ⚪️ === ); // undefined

  // Code

  const list = [1, 2, 3, 4, 5];

  list.find((el) => el === 3); // 3

  list.find((el) => el === 6); // undefined

  07、Array.indexOf()

  返回可以在数组中找到给定元素的第一个索引,如果不存在则返回 -1。

  const list = [ , , , , ];

  list.indexOf( ); // 0

  list.indexOf( ); // -1

  // Code

  const list = [1, 2, 3, 4, 5];

  list.indexOf(3); // 2

  list.indexOf(6); // -1

  08、Array.lastIndexOf()

  返回可以在数组中找到给定元素的最后一个索引,如果不存在,则返回 -1。从 fromIndex 开始向后搜索数组。

  const list = [ , , , , ];

  list.lastIndexOf( ); // 3

  list.lastIndexOf( , 1); // 0

  // Code

  const list = [1, 2, 3, 4, 5];

  list.lastIndexOf(3); // 2

  list.lastIndexOf(3, 1); // -1

  09、Array.findIndex()

  返回数组中满足提供的测试函数的第一个元素的索引。否则,返回 -1。

  const list = [ , , , , ];

  list.findIndex((⚪️) => ⚪️ === ); // 0

  // You might be thinking how it's different from `indexOf`

  const array = [5, 12, 8, 130, 44];

  array.findIndex((element) => element > 13); // 3

  // OR

  const array = [{

  id:

  }, {

  id:

  }, {

  id:

  }];

  array.findIndex((element) => element.id === ); // 2

  10、Array.includes()

  如果给定元素存在于数组中,则返回 true。

  const list = [ , , , , ];

  list.includes( ); // true

  // Code

  const list = [1, 2, 3, 4, 5];

  list.includes(3); // true

  list.includes(6); // false

  11、Array.pop()

  从数组中删除最后一个元素并返回该元素。

  const list = [ , , , , ];

  list.pop(); //

  list; // [ , , , ]

  // Code

  const list = [1, 2, 3, 4, 5];

  list.pop(); // 5

  list; // [1, 2, 3, 4]

  12、Array.push()

  将新元素追加到数组的末尾,并返回新的长度。

  const list = [ , , , , ];

  list.push( ); // 5

  list; // [ , , , , , ]

  // Code

  const list = [1, 2, 3, 4, 5];

  list.push(6); // 6

  list; // [1, 2, 3, 4, 5, 6]

  13、Array.shift()

  从数组中删除第一个元素并返回该元素。

  const list = [ , , , , ];

  list.shift(); //

  list; // [ , , , ]

  // Code

  const list = [1, 2, 3, 4, 5];

  list.shift(); // 1

  list; // [2, 3, 4, 5]

  14、Array.unshift()

  将新元素添加到数组的开头,并返回新长度。

  const list = [ , , , , ];

  list.unshift( ); // 6

  list; // [ , , , , , ]

  // Code

  const list = [1, 2, 3, 4, 5];

  list.unshift(0); // 6

  list; // [0, 1, 2, 3, 4, 5]

  15、Array.splice()

  通过删除或替换现有元素和/或在适当位置添加新元素来更改数组的内容。

  const list = [ , , , , ];

  list.splice(1, 2); // [ , ]

  list; // [ , , ]

  // Code

  const list = [1, 2, 3, 4, 5];

  list.splice(1, 2); // [2, 3]

  list; // [1, 4, 5]

  16、Array.slice()

  将数组的一部分的浅拷贝返回到从开始到结束(不包括结束)选择的新数组对象中,原始数组不会被修改。

  const list = [ , , , , ];

  list.slice(1, 3); // [ , ]

  list; // [ , , , , ]

  // Code

  const list = [1, 2, 3, 4, 5];

  list.slice(1, 3); // [2, 3]

  list; // [1, 2, 3, 4, 5]

  17、Array.join()

  将数组的所有元素连接成一个字符串。

  const list = [ , , , , ];

  list.join('〰️'); // " 〰️ 〰️ 〰️ 〰️ "

  // Code

  const list = [1, 2, 3, 4, 5];

  list.join(', '); // "1, 2, 3, 4, 5"

  18、Array.reverse()

  反转数组中元素的顺序。

  const list = [ , , , , ];

  list.reverse(); // [ , , , , ]

  list; // [ , , , , ]

  // Code

  const list = [1, 2, 3, 4, 5];

  list.reverse(); // [5, 4, 3, 2, 1]

  list; // [5, 4, 3, 2, 1]

  19、Array.sort()

  对数组的元素进行就地排序并返回该数组。默认排序顺序是根据字符串 Unicode 代码点。

  const list = [ , , , , ];

  list.sort(); // [ , , , , ]

  // This make more sense

  const array = ['D', 'B', 'A', 'C'];

  array.sort(); // ['A', 'B', 'C', 'D']

  // OR

  const array = [4, 1, 3, 2, 10];

  array.sort(); // [1, 10, 2, 3, 4]

  array.sort((a, b) => a - b); // [1, 2, 3, 4, 10]

  20、Array.some()

  如果数组中至少有一个元素通过了提供的函数实现的测试,则返回 true。

  const list = [ , , , , ];

  list.some((⚪️) => ⚪️ === ); // true

  list.some((⚪️) => ⚪️ === ); // false

  // Code

  const list = [1, 2, 3, 4, 5];

  list.some((el) => el === 3); // true

  list.some((el) => el === 6); // false

  21、Array.every()

  如果数组中的所有元素都通过了提供的函数实现的测试,则返回 true。

  const list = [ , , , , ];

  list.every((⚪️) => ⚪️ === ); // false

  const list = [ , , , , ];

  list.every((⚪️) => ⚪️ === ); // true

  // Code

  const list = [1, 2, 3, 4, 5];

  list.every((el) => el === 3); // false

  const list = [2, 4, 6, 8, 10];

  list.every((el) => el%2 === 0); // true

  22、Array.from()

  从类数组或可迭代对象创建一个新数组。

  const list = ;

  Array.from(list); // [ , , , , ]

  const set = new Set([' ', ' ', ' ', ' ', ' ']);

  Array.from(set); // [ , , ]

  const range = (n) => Array.from({ length: n }, (_, i) => i + 1);

  console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

  23、Array.of()

  使用可变数量的参数创建一个新数组,而不管参数的数量或类型。

  const list = Array.of( , , , , );

  list; // [ , , , , ]

  // Code

  const list = Array.of(1, 2, 3, 4, 5);

  list; // [1, 2, 3, 4, 5]

  24、Array.isArray()

  如果给定值是一个数组,则返回 true。

  Array.isArray([ , , , , ]); // true

  Array.isArray( ); // false

  // Code

  Array.isArray([1, 2, 3, 4, 5]); // true

  Array.isArray(5); // false

  25、Array.at()

  返回指定索引处的值。

  const list = [ , , , , ];

  list.at(1); //

  // Return from last

  list.at(-1); //

  list.at(-2); //

  // Code

  const list = [1, 2, 3, 4, 5];

  list.at(1); // 2

  list.at(-1); // 5

  list.at(-2); // 4

  26、Array.copyWithin()

  复制数组中的数组元素。返回修改后的数组。

  const list = [ , , , , ];

  list.copyWithin(1, 3); // [ , , , , ]

  const list = [ , , , , ];

  list.copyWithin(0, 3, 4); // [ , , , , ]

  // Code

  const list = [1, 2, 3, 4, 5];

  list.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5]

  注意:第一个参数是开始复制元素的目标。第二个参数是开始复制元素的索引。第三个参数是停止复制元素的索引。

  27、Array.flat()

  返回一个新数组,其中所有子数组元素递归连接到指定深度。

  const list = [ , , [ , , ]];

  list.flat(Infinity); // [ , , , , ]

  // Code

  const list = [1, 2, [3, 4, [5, 6]]];

  list.flat(Infinity); // [1, 2, 3, 4, 5, 6]

  28、Array.flatMap()

  返回通过将给定的回调函数应用于数组的每个元素而形成的新数组,

  const list = [ , , [ , , ]];

  list.flatMap((⚪️) => [⚪️, ⚪️ + ⚪️ ]); // [ , , , , , , , , , ]

  // Code

  const list = [1, 2, 3];

  list.flatMap((el) => [el, el * el]); // [1, 1, 2, 4, 3, 9]

  总结

  以上就是我今天跟你分享的28个Javascript 数组方法,希望对你有帮助。如果你觉得有用的话,请记得点赞我,关注我,并将其分享给你身边的朋友,也许能够帮助到他。

  - End -

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT