分享20个Javascript中的数组方法，收藏_js20数据数组

什么是数组？与其他编程语言中的数组一样，Array对象允许在一个变量名称下存储多个项的集合，并且具有用于执行常见数组操作的成员。

声明数组

我们可以用两种不同的方式声明数组。

使用新阵列

使用new Array，我们可以指定希望存在于数组中的元素，如下所示：

const fruits = new Array('Apple', 'Banana');
console.log(fruits.length);

数组文字表示法

使用数组文本声明，我们指定数组将具有的值。如果我们不声明任何值，数组将为空。

// 'fruits' array created using array literal notation.
const fruits = ['Apple', 'Banana'];
console.log(fruits.length);

Javascript数组方法

下面是Array对象的方法列表及其说明。

1.forEach

forEach（）方法为每个数组元素执行一次提供的函数。

array.forEach(callback[, thisObject]);

forEach（）按索引升序为数组中的每个元素调用一次提供的callbackFn函数。对于已删除或未初始化的索引属性，不会调用它。

const array1 = ['a', 'b', 'c'];
 
array1.forEach(element => console.log(element));
 
// expected output: "a"
// expected output: "b"
// expected output: "c"

2.map

该Array.map（）方法允许您循环访问数组并使用回调函数修改其元素。然后将对数组的每个元素执行回调函数。

array.map(callback[, thisObject]);

let arr = [3, 4, 5, 6];
 
let modifiedArr = arr.map(function(element){
   return element *3;
});
 
console.log(modifiedArr); // [9, 12, 15, 18]

该Array.map（）方法通常用于对元素应用某些更改，无论是像上面的代码中那样乘以特定的数字，还是执行应用程序可能需要的任何其他操作。

3.concat

在JavaScript中，concat（）是一个字符串方法，用于将字符串连接在一起。concat（）方法将一个或多个字符串值附加到调用字符串，然后将连接结果作为新字符串返回。因为concat（）方法是String对象的方法，所以必须通过String类的特定实例调用它。

array.concat(value1, value2, ..., valueN);

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
 
console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

4.push

Javascript数组push（）方法将给定的元素追加到数组的最后，并返回新数组的长度。当您想在数组末尾添加元素时，请使用push（）。

array.push(element1, ..., elementN);

const countries = ["Nigeria", "Ghana", "Rwanda"];
 
countries.push("Kenya");
 
console.log(countries); // ["Nigeria","Ghana","Rwanda","Kenya"]

5.pop

pop（）方法从数组中移除最后一个元素，并将该值返回给调用方。如果对空数组调用pop（），它将返回undefined。

Array.prototype.shift（）的行为与pop（）类似，但应用于数组中的第一个元素。

array.pop();

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
 
console.log(plants.pop());
// expected output: "tomato"
 
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

6.splice

splice（）方法是一种通用方法，用于通过在数组的指定位置删除、替换或添加元素来更改数组的内容。本节将介绍如何使用此方法将元素添加到特定位置。

array.splice(index, howMany, [element1][, ..., elementN]);

const fruits = ["Banana", "Orange", "Apple", "Mango"];
 
fruits.splice(2, 0, "Lemon", "Kiwi"); //Banana,Orange,Lemon,Kiwi,Apple,Mango

7.slice

slice（）方法将数组的一部分的浅副本返回到从头到尾（不包括end）选择的新数组对象中，其中start和end表示该数组中项的索引。原始阵列不会被修改。

array.slice( begin [,end] );

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
 
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
 
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

8.shift

shift（）是一个内置的JavaScript函数，用于从数组中删除第一个元素。shift（）函数直接修改您正在使用的JavaScript数组。shift（）返回从数组中移除的项。

函数的作用是：删除索引位置0处的项，并将未来索引号处的值下移一位。

array.shift();

const array1 = [1, 2, 3];
 
const firstElement = array1.shift();
 
console.log(array1);
// expected output: Array [2, 3]
 
console.log(firstElement);
// expected output: 1

9.unshift

unshift（）方法将给定值插入到类似数组的对象的开头。

push（）的行为与unshift（）类似，但应用于数组的末尾。

array.unshift( element1, ..., elementN );

const array1 = [1, 2, 3];
 
console.log(array1.unshift(4, 5));
// expected output: 5
 
console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

10.join

JavaScript数组join（）是一个内置方法，它通过连接数组的所有元素来创建并返回新字符串。join（）方法将数组中的项连接到字符串中并返回该字符串。指定的分隔符将分隔元素数组。默认分隔符为逗号（，）。

array.join(separator);

const elements = ['Fire', 'Air', 'Water'];
 
console.log(elements.join());
// expected output: "Fire,Air,Water"
 
console.log(elements.join(''));
// expected output: "FireAirWater"
 
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

11.every

every（）方法测试数组中的所有元素是否通过所提供函数实现的测试。它返回一个布尔值。

array.every(callback[, thisObject]);

const isBelowThreshold = (currentValue) => currentValue < 40;
 
const array1 = [1, 30, 39, 29, 10, 13];
 
console.log(array1.every(isBelowThreshold));
// expected output: true

12.filter

filter（）方法创建给定数组的一部分的浅副本，过滤掉给定数组中通过所提供函数实现的测试的元素。

array.filter(callback[, thisObject]);

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
 
const result = words.filter(word => word.length > 6);
 
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

13.indexOf

indexOf（）方法返回给定元素在数组中的第一个索引，如果不存在，则返回-1。

array.indexOf(searchElement[, fromIndex]);

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
 
console.log(beasts.indexOf('bison'));
// expected output: 1
 
// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4
 
console.log(beasts.indexOf('giraffe'));
// expected output: -1

14.reduce

reduce（）方法对数组的每个元素执行用户提供的“reducer”回调函数，依次传入前一个元素计算的返回值。在数组的所有元素上运行reducer的最终结果是单个值。

array.reduce(callback[, initialValue]);

const array1 = [1, 2, 3, 4];
 
// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);
 
console.log(sumWithInitial)

15.reverse

reverse（）方法在原处反转数组并返回对同一数组的引用，第一个数组元素现在变为最后一个，最后一个数组元素变为第一个。换句话说，阵列中的元素顺序将转向与前述相反的方向。

array.reverse();

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]
 
const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]
 
// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// expected output: "array1:" Array ["three", "two", "one"]

16.sort

sort（）方法对数组中的元素进行排序，并返回对已排序的同一数组的引用。默认的排序顺序是升序，它是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列的基础上构建的。

array.sort( compareFunction );

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
 
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

17.toString

toString（）方法返回表示对象的字符串。

array.toString();

function Dog(name) {
  this.name = name;
}
 
const dog1 = new Dog('Gabby');
 
Dog.prototype.toString = function dogToString() {
  return `${this.name}`;
};
 
console.log(dog1.toString());
// expected output: "Gabby"

18.at

at（）方法接受一个整数值并返回该索引处的项，允许使用正整数和负整数。负整数从数组中的最后一项开始倒数。

array.at(index)

const array1 = [5, 12, 8, 130, 44];
 
let index = 2;
 
console.log(`Using an index of ${index} the item returned is ${array1.at(index)}`);
// expected output: "Using an index of 2 the item returned is 8"
 
index = -2;
 
console.log(`Using an index of ${index} item returned is ${array1.at(index)}`);
// expected output: "Using an index of -2 item returned is 130"

19.find

find（）方法返回所提供的数组中满足所提供的测试函数的第一个元素。如果没有值满足测试函数，则返回undefined。

array.find(function(currentValue, index, arr),thisValue)

const array1 = [5, 12, 8, 130, 44];
 
const found = array1.find(element => element > 10);
 
console.log(found);
// expected output: 12

20.some

some（）方法测试数组中是否至少有一个元素通过了所提供函数实现的测试。如果在数组中找到一个元素，所提供的函数为该元素返回true，则返回true;否则返回假。它不会修改数组。

array.some(callback[, thisObject]);

const array = [1, 2, 3, 4, 5];
 
// checks whether an element is even
const even = (element) => element % 2 === 0;
 
console.log(array.some(even));
// expected output: true

你学会了吗？如果对你有帮助，记得点赞支持！如果你正在学习JS或者已经在我们的三十天计划中完成了4个综合项目实战，那不妨可以听下这个课程体系，三十天计划群里还提供了算法、数组等知识体系！

前端工程师成长方法

更多完整 JavaScript 课程体系在我们的系统班里有完整的呈现，包含了 JavaScript 基础篇、重点、算法、原理、面试题、实战案例讲解！同时也为你提供了前端高级工程师成长体系！(详细看下图内容)

如果需要深度学习的同学可以联系助理老师了解详细的课程以及课程的报名方式！（不定期会推出活动，有大额优惠券推出，活动详情联系助理老师了解即可！）如果你才开始学习前端，那么可以先学习我们的三十天计划（零基础的同学报名系统班同学可以和老师沟通制定学习计划，可以得到更快的成长！）

为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30 天挑战学习计划》，内容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通

• PC 端项目开发（1 个）
• 移动 WebApp 开发（2 个）
• 多端响应式开发（1 个）

共 4 大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。

从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO 优化规范

从蓝湖 UI 设计稿 到 PC 端，移动端，多端响应式开发项目开发

• 真机调试，云服务部署上线；
• Linux 环境下 的 Nginx 部署，Nginx 性能优化；
• Gzip 压缩，HTTPS 加密协议，域名服务器备案，解析；
• 企业项目域名跳转的终极解决方案，多网站、多系统部署；
• 使用 使用 Git 在线项目部署；

这些内容在《30 天挑战学习计划》中每一个细节都有讲到，包含视频 + 图文教程 + 项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！

过程中【不涉及】任何费用和利益，非诚勿扰 。

如果你没有添加助理老师微信，可以添加下方微信，说明要参加 30 天挑战学习计划，来自CSDN！老师会邀请你进入学习，并给你发放相关资料。

30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程