数组是js中最常用到的数据集合,其内置的方法也很多,熟练掌握这些方法,可以有效的提高我们的工作效率,也对我们的代码质量有很大影响。
如果还有漏网之鱼,欢迎留言补充哈。

一、创建数组

1、使用数组字面量方法

var arr1 = [];     // 创建一个数组
var arr2 = [20];   // 创建一个包含1项数据为20的数组
var arr3 = ['lily','lucy','Tom'];  // 创建一个包含3个字符串的数组

2、使用Array构造函数

无参构造

var arr1 = new Array();   // 创建一个空数组

带参构造

如果只传一个数值参数,则表示创建一个初始长度为指定数组的空数组

var arr2 = new Array(10);     // 创建一个包含10项的数组

如果传入一个非数值的参数或者参数大于1,则表示创建一个包含指定元素的数组

var arr3 = new Array('lily','lucy','Tom');     // 创建一个包含3个字符串的数组

3、Array.of方法创建数组(es6新增)
Array.of()方法会创建一个包含所有传入参数的数组,而不管参数的数量与类型

let arr1 = Array.of(1,2);
console.log(arr1.length);   // 2let arr2 = Array.of(3);
console.log(arr2.length);   // 1
console.log(arr2[0]);   // 3

4、Array.from方法创建数组(es6新增)
在js中将非数组对象转换为真正的数组是非常麻烦的。在es6中,将可迭代对象或者类数组对象作为第一个参数传入,Array.from()就能返回一个数组

function arga(...args){  // ...args剩余参数数组,由传递给函数的实际参数提供let arg = Array.from(args);console.log(arg);
}arga(arr1,26,from);     // [arr1,26,from]

二、数组方法

数组原型方法主要有以下这些:

  • join():用指定的分隔符将数组每一项拼接为字符串
  • push():向数组的末尾添加新元素
  • pop():删除数组的最后一项
  • unshift():向数组首位添加新元素
  • shift():删除数组的第一项
  • slice():按照条件查找出其中的部分元素
  • splice():对数组进行增删改
  • filter():过滤功能
  • concat():用于连接两个或多个数组
  • indexOf():检测当前值在数组中第一次出现的位置索引
  • lastIndexOf():检测当前值在数组中最后一次出现的位置索引
  • every():判断数组中每一项都是否满足条件
  • some():判断数组中是否存在满足条件的项
  • includes():判断一个数组是否包含一个指定的值
  • sort():对数组的元素进行排序
  • reverse():对数组进行倒序
  • forEach():es5及以下循环遍历数组每一项
  • map():es6循环遍历数组每一项
  • find():返回匹配的项
  • findIndex():返回匹配位置的索引
  • reduce():从数组的第一项开始遍历到最后一项,返回一个最终的值
  • reduceRight():从数组的最后一项开始遍历到第一项,返回一个最终的值
  • toLocaleString()、toString():将数组转换为字符串
  • entries()、keys()、values():遍历数组
  • 欢迎补充…

各个方法的基本功能详解

1、join()
join()方法用于把数组中的所有元素转换一个字符串,默认使用逗号作为分隔符

var arr1 = [1,2,3];
console.log(arr1.join());   // 1,2,3
console.log(arr.join('-'));   // 1-2-3
console.log(arr);   // [1,2,3](原数组不变)

2、push()和pop()

push()方法从数组末尾向数组添加元素,可以添加一个或多个元素,并返回新的长度
pop()方法用于删除数组的最后一个元素并返回删除的元素

var arr1 = ['lily','lucy','Tom'];
var count = arr1.push('Jack','Sean');
console.log(count);   // 5
console.log(arr1);   // ['lily','lucy','Tom','Jack','Sean']var item = arr1.pop();
console.log(item);   // Sean
console.log(arr1);   // ['lily','lucy','Tom','Jack']

3、unshift()和shift()

unshift()方法可向数组的开头添加一个或更多元素,并返回新的长度
shift()方法用于把数组的第一个元素从其中删除,并返回第一个元素的值

var arr1 = ['lily','lucy','Tom'];
var count = arr1.unshift('Jack','Sean');
console.log(count);   // 5
console.log(arr1);   // ['Jack','Sean','lily','lucy','Tom']var item = arr1.shift();
console.log(item);   // Jack
console.log(arr1);   // [''Sean','lily','lucy','Tom']

4、sort()
用于对数组的元素进行排序。排序顺序可以是字母或数字,并按升序或降序,默认排序顺序为按字母升序

var arr1 = ['a','d','c','b'];
console.log(arr1.sort());   // ['a','b','c','d']function compare(value1,value2){if(value1 < value2){return -1;}else if(value1 > value2){return 1;}else{return 0;}
}var arr2 = [13,24,51,3];
console.log(arr2.sort(compare));   // [3,13,24,51]// 如果需要通过比较函数产生降序排序的结果,只要交后比较函数返回的值即可

5、reverse()
用于颠倒数组中元素的顺序,原数组改变

var arr1 = [13,24,51,3];
console.log(arr1.reverse());   // [3,51,24,13]
console.log(arr1);   // [3,51,24,13](原数组改变)

6、concat()
用于连接两个或多个数组,该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本

var arr1 = [1,3,5,7];
var arrCopy = arr1.concat(9,[11,13]);
console.log(arrCopy);   // [1,3,5,7,9,11,13]
console.log(arr1);   // [1,3,5,7](原数组未被修改)

7、slice()
返回从原数组中指定开始下标到结束下标之间的项组成的新数组,可以接受一或两个参数,即要返回项的起始和结束位置(不包括结束位置的项)

 用法:array.slice(start,end)解释:该方法是对数组进行部分截取,并返回一个数组副本;参数start是截取的开始数组索引,end参数等于你要取的最后一个字符的位置值加上1(可选)
var arr1 = [1,3,5,7,9,11];
var arrCopy = arr1.slice(1);
var arrCopy2 = arr1.slice(1,4);
var arrCopy3 = arr1.slice(1,-2);   // 相当于arr1.slice(1,4);
var arrCopy4 = arr1.slice(-4,-1);   // 相当于arr1.slice(2,5);
console.log(arr1);   // [1,3,5,7,9,11](原数组没变)
console.log(arrCopy);   // [3,5,7,9,11]
console.log(arrCopy2);   // [3,5,7]
console.log(arrCopy3);   // [3,5,7]
console.log(arrCopy4);   // [5,7,9]//如果不传入参数二,那么将从参数一的索引位置开始截取,一直到数组尾
var a=[1,2,3,4,5,6];
var b=a.slice(0,3);    //[1,2,3]
var c=a.slice(3);       //[4,5,6]//如果两个参数中的任何一个是负数,array.length会和它们相加,试图让它们成为非负数,举例说明:
//当只传入一个参数,且是负数时,length会与参数相加,然后再截取
var a=[1,2,3,4,5,6];
var b=a.slice(-1);    //[6]//当只传入一个参数,是负数时,并且参数的绝对值大于数组length时,会截取整个数组
var a=[1,2,3,4,5,6];
var b=a.slice(-6);    //[1,2,3,4,5,6]
var c=a.slice(-8);    //[1,2,3,4,5,6]//当传入两个参数一正一负时,length也会先于负数相加后,再截取
var a=[1,2,3,4,5,6];
var b=a.slice(2,-3);    //[3]//当传入一个参数,大于length时,将返回一个空数组
var a=[1,2,3,4,5,6];
var b=a.slice(6);  //[]

8、splice()
可以实现删除、插入和替换

用法:array.splice(start,deleteCount,item...)
解释:splice方法从array中移除一个或多个数组,并用新的item替换它们。参数start是从数组array中移除元素的开始位置。参数deleteCount是要移除的元素的个数。如果有额外的参数,那么item会插入到被移除元素的位置上。它返回一个包含被移除元素的数组。
//替换
var a=['a','b','c'];
var b=a.splice(1,1,'e','f');    //a=['a','e','f','c'],b=['b']//删除
var arr1 = [1,3,5,7,9,11];
var arrRemoved = arr1.splice(0,2);
console.log(arr1);   // [5,7,9,11]
console.log(arrRemoved);   // [1,3]// 添加元素
var arr1 = [22,3,31,12];
arr1.splice(1,0,12,35);
console.log(arr1);   // [22,12,35,3,31,12]

9、forEach()

forEach方法中的function回调有三个参数:
第一个参数是遍历的数组内容,
第二个参数是对应的数组索引,
第三个参数是数组本身
var arr = [1,2,3,4];
var sum =0;
arr.forEach(function(value,index,array){array[index] == value; //结果为truesum+=value; });console.log(sum); //结果为 10

10、map()
返回一个新数组,会按照原始数组元素顺序依次处理元素

let array = [1, 2, 3, 4, 5];let newArray = array.map((item) => {return item * item;
})console.log(newArray)  // [1, 4, 9, 16, 25]

11、every()
判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true

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

12、some()
判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true

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

13、includes()
es7新增,用来判断一个数组、字符串是否包含一个指定的值,使用===运算符来进行值比较,如果是返回true,否则false,参数有两个,第一个是(必填)需要查找的元素值,第二个是(可选)开始查找元素的位置

var arr1 = [22,3,31,12,58];
var includes = arr1.includes(31);
console.log(includes);   // truevar includes2 = arr1.includes(31,3);   // 从索引3开始查找31是否存在
console.log(includes2);   // false

14、reduce()和reduceRight()
都会实现迭代数组的所有项(即累加器),然后构建一个最终返回的值

reduce()方法从数组的第一项开始,逐个遍历到最后reduceRight()方法从数组的最后一项开始。向前遍历到第一项4个参数:前一个值、当前值、项的索引和数组对象
var arr1 = [1,2,3,4,5];
var sum = arr1.reduce((prev,cur,index,array) => {return prev + cur;
},10);   // 数组一开始加了一个初始值10,可以不设默认0
console.log(sum);   // 25

15、toLocaleString()和toString()
都是将数组转换为字符串

var arr1 = [22,3,31,12];
let str = arr1.toLocaleString();
var str2 = arr1.toString();console.log(str);   // 22,3,31,12
console.log(str2);   // 22,3,31,12

16、find()和findIndex()

都接受两个参数:一个回调函数,一个可选值用于指定回调函数内部的this

该回调函数可接受3个参数:数组的某个元素、该元素对应的索引位置、数组本身,在回调函数第一次返回true时停止查找。

二者的区别是:find()方法返回匹配的值,而findIndex()方法返回匹配位置的索引

let arr = [1,2,3,4,5];
let num = arr.find(item => item > 1);
console.log(num) // 2let arr = [1,2,3,4,5];
let num = arr.findIndex(item => item > 1);
console.log(num) // 1

17、entries()、keys()和values()

es6新增
entries()、keys()和values()--用于遍历数组。它们都返回一个遍历器对象,可以用for...of循环进行遍历区别是keys()是对键名的遍历、values()是对键值的遍历、entries()是对键值对的遍历
for(let index of [a,b].keys()){console.log(index);
}
// 0
// 1for(let elem of [a,b].values()){console.log(elem);
}
// a
// bfor(let [index,elem] of [a,b].entries()){console.log(index,elem);
}
// 0 'a'
// 1 'b'

如果不使用for…of循环,可以手动调用遍历器对象的next方法,进行遍历

let arr1 = [a,b,c];
let entries = arrr1.entries();
console.log(entries.next().value);   // [0,a]
console.log(entries.next().value);   // [1,b]
console.log(entries.next().value);   // [2,c]

18、indexOf()

 indexof方法可以在字符串和数组上使用。indexOf() 方法可返回某个指定的字符串值在字符串、数组中首次出现的位置。
    arr = ['mfg', '2017', '2016'];console.log(arr.indexOf('mfg')); // 0console.log(arr.indexOf('m')); // -1console.log(arr.indexOf('2017'));// 1console.log(arr.indexOf(2017)); // -1,这里不会做隐式类型转换

JS数组方法(最详细)相关推荐

  1. 22个超详细的 JS 数组方法

    22个超详细的 JS 数组方法 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工作效率,同时对我们的代码质量也是有很大影响. 一.创建数组 1.使用数组 ...

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

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

  3. 给数组倒序_22个超详细的 JS 数组方法

    作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...

  4. android给数组添加新元素_重磅!超详细的 JS 数组方法整理出来了

    作者:Yushiahttps://juejin.cn/post/6907109642917117965 数组是 js 中最常用到的数据集合,其内置的方法有很多,熟练掌握这些方法,可以有效的提高我们的工 ...

  5. js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...

    1.给对象添加属性:使用 object.prop 或object['prop']  给对象添加属性 let obj={};obj.name="zhangsan";obj[" ...

  6. JS的组成-JS数组方法-JS函数-系统化学习

    JS Day01 什么是js的组成? ECMAScript(es) 其实就是js的规范(规则) DOM 文档对象模型 div span BOM 浏览器对象模型 JS的使用方式 行内样式的书写(不经常使 ...

  7. JS数组方法中哪些会改变原数组,哪些不会?

    前言 作为一名前端开发人员,我们每天都会与数组打交道.JS 也提供了很多操作数组的原生 API 供我们调用.在这些方法里面,有的方法会改变原数组,有些不会改变原数组.别看这一点小小的区别,往往会造成巨 ...

  8. 几个关于js数组方法reduce的经典片段

    以下是个人在工作中收藏总结的一些关于javascript数组方法reduce的相关代码片段,后续遇到其他使用这个函数的场景,将会陆续添加,这里作为备忘. javascript数组那么多方法,为什么我要 ...

  9. 关于js数组方法的题目整理 6.24更新至题目5

    目录 题目一: 题目二  把问题1变回去 题目三 要求:1.给出一个名字找出数组中 与 '名字' 处于统一领导下的同事 2.给出一个名字找出数组中 与 '名字' 下的下属 题目四: 解法一: 解法二: ...

  10. JavaScript数组对象教程–如何使用JS数组方法创建,更新和遍历对象

    On average I work with JSON data 18 times a week. And I still need to google for specific ways to ma ...

最新文章

  1. 【图像处理】【计算机视觉】线性邻域滤波专场:方框滤波、均值滤波与高斯滤波...
  2. python 调用另一个py_跟我自学python 第9章 类(9.4.6 在一个模块中导入另一个模块)...
  3. 数据库-优化-Limit查询的优化
  4. 1021. 个位数统计 (15)
  5. 指针作为函数参数引用数组的任意元素
  6. 【C语言简单说】三:变量总结ASCII码扩展(5)
  7. c语言 spawn函数,我在electron程序中spawn了一个C语言程序作为子进程,我该如何与这个子进程通信?...
  8. kernal tch 下载 天正_tch kernal.arx
  9. 2017.3.12 lzy 测试
  10. 键盘迷情--Treo650 VS P50 【ZZ】
  11. 368计算机毕业设计
  12. macOS Monterey 12.0beta4黑苹果镜像虚拟机版本
  13. NTC热敏电阻温度计算以及C语言实现
  14. Windows蓝屏代码集合
  15. 《墨宝非宝经典作品合集(套装共10册)》墨宝非宝(作者)epub+mobi+azw3格式下载...
  16. 决策树剪枝python实现_决策树剪枝问题python代码
  17. 怎么抠图图片?抠图图片这样做就可以完成
  18. Spring系列:mysqlsqlserver对比
  19. 浅谈UML---协作图
  20. 基于微信药店药品商城小程序系统设计与实现 开题报告

热门文章

  1. jQuery 瀑布流插件
  2. 马蹄声袭来,犹见青衣织桃花伞,断送了情执
  3. 软件测试找游戏bug,游戏测试用例及游戏测试bug详解
  4. 区块链P2P网络详细讲解
  5. pragma HLS interface 端口综合
  6. HTTP hijack
  7. 视网膜屏 retina屏
  8. 用计算机求方差的教案,《用科学计算器计算方差》教案.doc
  9. VeryCD关闭音乐视频下载视频网站的正版化历程
  10. Notepad++的字体设置加Consolas和微软雅黑混合字体