史上最全JavaScript数组方法
2024-04-30 14:57:26
一、以下是不改变数组本身的方法
1.concat()用于合并两个或多个数组
const a = ['你是','什么']
const b = ['牛马']
const c = a.concat(b)
const d = b.concat(a);
console.log(c);
console.log(d);
console.log(a);
console.log(b);
输出结果：
2.slice(start,end)用于返回从start开始(包括)，到end(不包括)之间的元素组成的数组
注意1：该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 splice()方法。
const a = ['我的','老婆','是','薇尔利特']
const b = a.slice(3,4)
console.log(b);
console.log(a);
输出结果：
注意2：a !== a.slice()
const a = ['我的','老婆','是','薇尔利特']
console.log(a.slice());
console.log(a === a.slice());
输出结果：
注意3：
- 如果是负数，则表示从数组尾部开始算起（-1指最后一个元素，-2 指倒数第二个元素，以此类推）。
- 如果 start 为负，将它作为 length + start处理，此处 length 为数组的长度，比如a.slice(-3,3)，相当于a.slice(1,3)。
- 如果 end 为负，就将它作为 length + end 处理，此处 length 为数组的长度，比如a.slice(1,-1)，相当于a.slice(1,3)。
const a = ['我的','老婆','是','薇尔利特']
console.log(a.slice(-3,3))
console.log(a.slice(1,-1));
console.log(a.slice(-3,3) === a.slice(1,-1))
输出结果：
二、以下是改变数组本身的方法
1, splice()实现数组的增，删，改（增可以理解为不删再增，改可以理解为删了再增）
(1) 删除功能，第一个参数为第一项位置，第二个参数为要删除几个；array.splice(index,insertValue)。
const a = ['Saber','间桐樱','伊莉雅','凌']
array.splice(index,num)
a.splice(3,1)
console.log(a);
输出结果：
(2) 插入功能，第一个参数（插入位置），第二个参数（0，删除0个的意思），第三个参数（插入的项）;array.splice(index，insertValue)
const a = ['Saber','间桐樱','伊莉雅','凌']
a.splice(1,0,'弓兵');
console.log(a);
输出结果：
(3)替换功能，第一个参数（起始位置），第二个参数（删除的项），第三个参数（插入任意数量的项）；array.splice(index,num,insertValue)
const a = ['Saber','间桐樱','伊莉雅','凌']
a.splice(3,3,'我');
console.log(a);
输出结果：
2,push(),该方法可以向数组的末尾添加一个或多个元素，并返回新的长度
const a = ['Saber','间桐樱','伊莉雅','凌']
a.push('我')
console.log(a);
输出结果：
3,unshif(),该方法可以向数组的开头添加一个或多个元素，并返回新的长度
const a = ['Saber','间桐樱','伊莉雅','凌']
a.unshift('我')
console.log(a);
输出结果：
4,pop(),该方法从数组的最后删除一个元素，返回值是最后一个元素
const a = ['Saber','间桐樱','伊莉雅','凌']
a.pop()
console.log(a);
输出结果：
5,shift(),该方法从数组的头部删除一个元素，返回值是第一个元素
const a = ['Saber','间桐樱','伊莉雅','凌']
a.shift()
console.log(a);
输出结果：
6,sort(),该方法对数组进行排序，默认进行升序排列，可以传递函数类型的参数决定排序的方式
比较函数应该具有两个参数 a 和 b，其返回值如下：
- 若 a 小于 b，即 a - b 小于零，则返回一个小于零的值，数组将按照升序排列。
- 若 a 等于 b，则返回 0。
- 若 a 大于 b, 即 a - b 大于零，则返回一个大于零的值，数组将按照降序排列。
const a = [18,19,22,21,18,16]
a.sort((a,b) => a - b )
console.log(a);const b = [18,19,22,21,18,16]
b.sort((a,b) => b - a )
console.log(b);
输出结果：
7,reverse(),该方法翻转数组
const a = ['Saber','间桐樱','伊莉雅','凌']
a.reverse()
console.log(a);
输出结果：
8,reduce()该方法接收一个函数作为累加器，数组中的每个值(从左到右)开始缩减，最终计算为一个值
const a = [18,19,22,21,18,16]
const total = a.reduce((sumSofar,item) => sumSofar + item,0)
console.log(a);
console.log(total);
输出结果：
二、循环遍历相关方法
1,forEach(item,index) 遍历数组的每个元素，参数为一个函数，参数函数的两个参数为数组项相应的索引
const a = ['Saber','间桐樱','伊莉雅','凌']
a.forEach((item,index)=>{console.log(item);
console.log(index);
})
输出结果：
2,map((item,index)=>{}) 遍历数组的每一个元素，参数为一个函数，参数函数的两个参数为数组项和对应的索引，根据参数函数的执行结果，把这些结果组成一个新数组返回
const a = ['Saber','间桐樱','伊莉雅','凌']
const b = a.map((item,index) => '我的老婆是' + item)
console.log(b);
输出结果：
3,some((item,index)=>{}) 循环数组，对每一项执行参数函数中的条件，有条件的项返回true，不再继续遍历；如果全部便利完还没有找到符合项则返回false
检测数组中有没有我的老婆伊莉雅
const a = ['Saber','间桐樱','伊莉雅','凌']
const b = a.some((item,index) => item === '伊莉雅')
console.log(b);
输出结果：
4,indexOf() 查找某个元素的索引值，若有重复的，则返回第一个查到的索引值；若不存在，则返回-1（常用于检测数组中是否含有某个元素）
const a = ['Saber','间桐樱','伊莉雅','凌']
console.log(a.indexOf('伊莉雅'));
console.log(a.indexOf('我'));
输出结果：
5,every((item)=>{}) 根据条件判断数组中的数据是否全部满足条件，若满足则返回true，否则就返回false
const a = [1,2,8,3,4,5,6,7]
console.log(a.every(item => item < 9))
console.log(a.every(item => item > 9))
输出结果：
6,filter((item，index)=>{}) 过滤数组，返回值是满足条件的数组，包含两个参数，item是当前元素，index是当前元素的索引
const a = ['Saber','间桐樱','伊莉雅','凌']
console.log(a.filter((item,index) => item === 'Saber' || item === '伊莉雅'));
输出结果：
7,find((item,index)=>{}) ,找到一个符合条件的数组成员
const a = ['Saber','间桐樱','伊莉雅','凌']
console.log(a.find((item,index) => item === 'Saber'));
输出结果：
8,findIndex((item,index)=>{}),找到一个符合条件的数组成员的索引
const a = ['Saber','间桐樱','伊莉雅','凌']
console.log(a.findIndex((item,index) => item === 'Saber'));
输出结果：
史上最全JavaScript数组方法相关推荐
- 史上最全JavaScript数组去重的十种方法（推荐）
一.前言: 我们在实际工作中,或者在面试找工作时,都会用到或者被问到一个问题,那就是"数组如何去重".是的,这个问题有很多种解决方案,看看下面的十种方式吧! 二.数组去重方式大汇总 ...
- 史上最全JavaScript数组对象详解（二）
JavaScript数组对象详解(二) 上一篇博客我们讲到了JavaScript数组对象的创建,访问和属性,接下来一篇博客主要讲一下JavaScript数组对象的方法及使用.说到数组的方法,主要分为两 ...
- 呕心沥血集齐史上最全 JavaScript最实用工具函数大全，建议收藏！
为元素添加on方法 Element.prototype.on = Element.prototype.addEventListener; NodeList.prototype.on = functio ...
- Github教程】史上最全github使用方法：github入门到精通
[Github教程]史上最全github使用方法:github入门到精通 [初识Github] 首先让我们大家一起喊一句"Hello Github".YEAH!就是这样. Git是 ...
- 史上最全js数组，字符串方法汇总
目录 一.数组 (1)for..in一般用于遍历对象的属性 (2)for..of (3)Object.keys() (4)Object.values() (5)Object.entries() (6) ...
- 史上最全 JS 数组常用方法总结.
文章目录 js数组常用方法总结 判断是否为数组: Array.isArray() 1.0 数组新增or删除相关方法 push() 方法 末尾添加 unshift() 方法 开头添加 shift() 方 ...
- 【Mood 16 】史上最全github使用方法：github入门到精通
[初识Github] 首先让我们大家一起喊一句"Hello Github".YEAH!就是这样. Git 是一个分布式的版本控制系统,最初由Linus Torvalds编写,用作L ...
- 【Github教程】史上最全github使用方法：github入门到精通（转自eoeandroid.com）
本文来源:http://www.eoeandroid.com/thread-274556-1-1.html 另附经典教程网址 :http://wuyuans.com/2012/05/github-si ...
- 史上最全docker安装方法！
2017年2月8日,docker更新到1.13.1(更新日志),此后又分为了docker CE(社区版)和docker EE(商业版). 此处只分享docker CE安装方法,商业版多了容器资源监控和 ...
最新文章
- linux新手程序,linux新手需要掌握的入门级命令
- 关于KernelFaultCheck启动项
- UNIX 动态库和静态库
- 90.bower解决js的依赖管理
- java treeset subset_Java中TreeSet的详细用法
- 现在学习前端开发还有前景吗，自学该怎么入手，谁有详细的学习计划？
- 为什么PHP能够受到大家追捧和喜爱，又为什么饱受嘲讽？
- matlab2c使用c++实现matlab函数系列教程-real函数
- UFLDL机器学习 Andrew Ng-Deep Learning课程
- Java第十九天（字节流和字符流转换、打印流、Properties类）
- 图片php木马制作教程,图片木马制作大法
- 简单flash播放器代码
- Spring Boot的启动流程
- 使用 软考免费真题app刷题库 手机小程序版
- 手动 php-mysql_win7下手动配置apache+php+mysql记
- 升级最快双核 小米1S手机开箱多图赏析
- 通过身份证号码得到性别和出生日期
- 绿色制造工厂对企业的好处
- ubuntu中创建新用户并添加管理员权限
- 【使用python和flask建个人博客】给网站增加关键字、说明以及增加京备案号和公安局备案号
热门文章
- 02——HTML基础标签学习
- 我们用计算机玩反恐精英,我的电脑玩反恐精英ol很卡。集成显卡,CPU占用50多,为什么?...
- Python协程理解、基于爬虫举例
- Win10系统安装MySQL
- 关于usb host和device 相关内容网址
- 3gpp协议_NSA组网下SN add/release/delete流程协议学习
- A Detailed Investigation and Analysis of Using Machine Learning Techniques for Intrusion Detection译一
- Spring 异步@Async注解用法 Spring @Async注解用法总结 Spring @Async基本用法示例
- 奈雪收购乐乐茶，茶饮品牌开启整合之路
- 安卓逆向 -- POST数据解密