面试前后将有关数组的所有方法进行了一个总结，希望能帮到大家。

一、什么是数组？

数组是一种特殊的变量，它能够一次存放一个以上的值。

如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW"; 

不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？

解决方法就是数组！

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

二、创建数组两种方式

1.使用Array构造函数创建数组对象

代码如下（示例）：

//使用new Array() 创建数组
var arr1 = new Array();     // 空数组
var arr2 = new Array('苹果', '橘子', '香蕉', '桃子');      //含有4个元素

2.使用“[ ]” 字面量来创建数组

代码如下（示例）：

var arr1 = [];      //空数组
var arr2 = ['苹果', '橘子', '香蕉', '桃子'];     //含有4个元素

三、数组方法

1.创建数组

  var fruits = ['Apple', 'Banana', 'Orange'];console.log(fruits.length);     //3

2. 数组转化为字符串

• 数组名.toString()
• 数组名.join('*') ，它的行为类似 toString()，但是您还可以规定分隔符

  var arr3 = ['a', 'b', 'c', 'a', 'b'];console.log(arr3.toString());  //a,b,c,a,bconsole.log(arr3.join('*'));  //a*b*c*a*b

3.添加元素到数组的末尾    数组名.push(元素);

 // 数组名.push(元素);var newLength = fruits.push('Mago');console.log(fruits);      //['Apple', 'Banana', 'Orange', 'Mago']console.log(newLength);   //4

4.删除数组末尾的元素   数组名.pop();

var last = fruits.pop();
console.log(fruits);      //['Apple', 'Banana', 'Orange']
console.log(last);       //Mago

5.删除原数组第一项，并返回删除元素的值   数组名.shift()

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var box = fruits.shift();
console.log(box)             //  Banana
console.log(fruits)       // ['Orange', 'Apple', 'Mango']

6.unshift:将参数添加到原数组开头，并返回数组的长度

var arr = ["Lily","lucy","Tom"];
var count = arr.unshift("Jack","Sean");
console.log(count); // 5
console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]

7.找出某个元素在数组中的索引          数组名.indexOf(元素);

  var fruits = ['Apple', 'Banana', 'Orange'];var pos = fruits.indexOf('Banana');console.log(pos);      //1//如果有重复var age = [12, 23, 18, 12, 20];console.log(age.indexOf(12));    //0console.log(age.lastIndexOf(12));   //3

8.数组名.splice()   向数组添加新元素，并返回包含已删除元素（如果有）的数组。

示例一：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");//原数组：
//Banana,Orange,Apple,Mango//新数组：
//Banana,Orange,Lemon,Kiwi,Apple,Mango

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

示例二：

var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']
var n = 2;
var remove = vegetables.splice(n, 2);
console.log(vegetables);         //  ['Cabbage', 'Turnip']
console.log(remove);          //['Radish', 'Carrot']

(通俗理解，，2为删除几个，  n为从第几个索引号开始)

9.将数组中元素的位置颠倒，并返回该数组。该方法会改变原数组   数组名.reverse()

var fruits = ['Apple', 'Banana', 'Orange'];
var newFruits = fruits.push('Mago');
var newFruits = fruits.reverse();
console.log(newFruits);    // ['Mago', 'Orange', 'Banana', 'Apple']

10.排序   数组.sort()

默认地，sort()函数按照字符串顺序对值进行排序。

该函数很适合字符串（"Apple" 会排在 "Banana" 之前）。

var fruits = ['Apple', 'Banana', 'Orange'];
var newFruits = fruits.push('Mago');
var paixu = fruits.sort();
console.log(paixu);    //['Apple', 'Banana', 'Mago', 'Orange']

不过，如果数字按照字符串来排序，则 "25" 大于 "100"，因为 "2" 大于 "1"。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

 var num1 = [1, 2, 5, 35, 10];var paixu1 = num1.sort();console.log(paixu1);   //[1, 10, 2, 35, 5]

解决办法：通过一个比值函数来修正此问题

  //升序排序num1.sort(function (a, b) {return a - b;})console.log(num1);      //[1, 2, 5, 10, 35]

11.concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

  var array1 = ['a', 'b', 'c'];var array2 = ['d', 'e', 'f'];var array3 = array1.concat(array2);console.log(array3);    //['a', 'b', 'c', 'd', 'e', 'f']

12.slice() 方法，用数组的某个片段切出新数组。

返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变

   var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];console.log(animals.slice(2));    //['camel', 'duck', 'elephant']console.log(animals.slice(2, 4));    //['camel', 'duck']

13.reduce()接受一个回调函数作为参数，回调函数参数(prev,next,index,currenArr)

1.perv代表上一次调用回调时的返回值，或者初始值init。
2.next代表当前正在处理的数组元素.
3.index代表当前执行元素的下标.
4.currentArr代表当前循环的数组元素

let arr=[1,2,3,4];let reslut=arr.reduce((prev,next)=>{return prev+next
})
console.log(reslut)   //10

init初始值，相当于给数组第一位添加了个默认值.

let arr=[1,2,3,4];let reslut=arr.reduce((prev,next)=>{return prev+next
},10)
console.log(reslut)  //20

14.every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr1 = arr.every(function(x) {
return x < 10;
});
console.log(arr1); //truevar arr2 = arr.every(function(x) {
return x < 3;
});
console.log(arr2); // false

15.some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
return x < 3;
});
console.log(arr2); //truevar arr3 = arr.some(function(x) {
return x < 1;
});
console.log(arr3); // false

16.map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

回调函数的语法如下：

function callbackfn (value, index, array);

回调函数的参数说明如下：

• value：数组元素的值。

• index：数组元素的数字索引。

• array：包含该元素的数组对象。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

17.filter()创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

示例一：找出大于17的元素

const array = [14, 17, 18, 32, 33, 16, 40];
const newArr = array.filter(num => num > 17)
console.log(newArr);//打印 [18,32,33,40]

示例二：去除数组中 大于 20 的数

    var numbers = [25, 45, 5, 15];function filter(arr) {var arr1 = [];for (var i = 0; i < arr.length; i++) {if (arr[i] < 20) {// arr1[arr1.length] = arr[i];// 数组尾部追加元素arr1.push(arr[i]);}}return arr1;}console.log(filter(numbers));  //[5, 15]

18.数组的去重

代码逻辑：

['a','b','c','a','b']

1. 声明一个新的数组

2. 遍历老数组

3. 老数组的元素，判断在数组中是否存在

4. 不存在则追加到新数组

 function unique(arr) {var arr1 = [];if (arr instanceof Array) {for (var i = 0; i < arr.length; i++) {//获取元素的索引号  var index = arr1.indexOf(arr[i]);//不存在, 是 -1if (index == -1) {arr1.push(arr[i]);}}} else {alert('传入的不是数组');}return arr1;}console.log(unique(['a', 'b', 'c', 'a', 'b']));   //['a', 'b', 'c']

✨原创不易，还希望各位大佬支持一下

JS操作数组方法大全--你了解多少？相关推荐

1. js刷新页面方法大全

   js刷新页面方法大全js刷新页面方法大全作者: 字体:[[url=]增加[/url] [url=]减小[/url]] 类型:转载 时间:2008-05-10我要评论本文介绍下,用js刷新当前页面的几种 ...

2. php json方法,PHP操作JSON方法大全

   这次给大家带来PHP操作JSON方法大全,PHP操作JSON的注意事项有哪些,下面就是实战案例,一起来看一下. 首先定义一个数组,然后遍历数据表,把相应的数据放到数组中,最后通过json_encode ...

3. JS常用属性方法大全

   JS常用属性方法大全 1.输出语句:document.write(""); 2.JS中的注释为: 3.传统的HTML文档顺序是:document->html->(hea ...

4. js检测字符串方法大全

   js检测字符串方法大全 <script> /* function obj$(id)                      根据id得到对象 function val$(id)      ...

5. js 操作cookies 方法

   js 操作cookies 方法var str=""; //JS操作cookies方法! //Expires 设置Cookie的有效期限 //Domain 添加域名限制 //Path ...

6. 常用js的数组方法和对象方法

   js常用的数组方法和对象方法 常用js的数组方法和对象方法 数组的方法 对象的方法 常用js的数组方法和对象方法 从此以后也要写博客辣,用来记录常见的问题和碰到的新问题.最近记忆力越来越差了. 数组的 ...

7. js数组的增删改查方法、js截取数组方法

   增加的方法: 1.push()方法向数组中末尾添加一个元素,原数组改变. 2.unshift()方法向数组中开始元素添加一个元素,原数组改变. 3.splice()方法:可以添加.删除元素.也可以截取 ...

8. 【POI操作word方法大全示例】

   POI操作word方法大全示例总结 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 POI操作word方法大全示例总结 使用场景 一.poi是什么? 二.使用示例 1.代码 ...

9. 前后端交互必备之js数组方法大全

   CSDN写作新手,写的不妥之处,请大佬纠正且多多包涵. 文章目录 数组简介 一.js数组方法 二.js数组方法的使用 1.基础方法 2.进阶方法 数组简介 数组,就是将多个元素(通常是同一类型)按一定 ...

最新文章

1. Hermite插值是牛顿插值的极限情形
2. 郭振宇计算机领域,数学实验教学中心简介
3. About Instruments
4. 计算两个日期相差几年几个月
5. 域名反向解析在自建邮件群发服务器中的应用
6. Git撤销修改场景及对应指令（checkout、reset、revert）详解
7. Linux Rsync 服务配置
8. 【LeetCode笔记】剑指 Offer 47. 礼物的最大价值（Java、动态规划）
9. Windows平台内核级文件访问
10. Linux shell命令提示符
11. Unicode Tips
12. python笔记2-冒泡排序
13. jsqlparser解析SQL工具类
14. MTK功能机RF射频参数计算与配置
15. Linux用户管理：新建用户组和新建用户
16. Win7升级Win10系统提示错误0x80070057的解决方法
17. 23上教资开始注册！详细报名流程看这一篇就够了！（建议收藏）
18. 怎么查看建筑图纸？有什么技巧吗？
19. 时空大数据与智慧城市
20. mysql注入扫描网站漏洞工具_sql注入点扫描工具下载-PHP+MYSQL网站注入扫描工具免费版 - 维维软件园...

热门文章

1. Android4.3以上的手机,大屏才够爽 六款4.3寸以上屏幕手机推荐
2. python爬虫股票指数变化_python爬虫中抓取指数的实例讲解
3. 辨析：交换机中继器集线器放大器路由器网桥网关
4. 基于PHP的汉语转拼音类
5. oracle的exists用法总结
6. 关于Flash无法正常加载的解决方案
7. pytorch创建模型并训练（初探文本分类问题）
8. Python turtle 绘制抛物线
9. JZOJ5407. 【NOIP2017提高A组集训10.21】Deep
10. java中dateFormat是什么_Java中的DateFormat用法举例