JavaScript的数组常用方法
ztj100 2024-11-25 00:38 25 浏览 0 评论
●数组是一个复杂数据类型,我们在操作它的时候就不能再想基本数据类型一样操作了
●比如我们想改变一个数组
// 创建一个数组
var arr = [1, 2, 3]
// 我们想把数组变成只有 1 和 2
arr = [1, 2]
●这样肯定是不合理,因为这样不是在改变之前的数组
●相当于重新制作了一个数组给到 arr 这个变量了
●相当于把 arr 里面存储的地址给换了,也就是把存储空间换掉了,而不是在之前的空间里面修改
●所以我们就需要借助一些方法,在不改变存储空间的情况下,把存储空间里面的数据改变了
数组常用方法之 push
●作用:用来在数组的末尾追加元素
●语法: 数组.push(数据)
●返回值:添加数据以后, 数组最新的 长度
var arr = [1, 2, 3]
// 使用 push 方法追加一个元素在末尾
var res = arr.push(4)
//返回数组的长度
console.log(res); // 4
console.log(arr) // [1, 2, 3, 4]
数组常用方法之 pop
●作用:pop 是用来删除数组末尾的一个元素
●语法:数组.pop()
●返回值:被删除的数据
var arr = [1, 2, 3]
// 使用 pop 方法删除末尾的一个元素
var res = arr.pop()
// 返回被删除的元素
console.log(res); 3
console.log(arr) // [1, 2]
数组常用方法之 unshift
●作用:在数组的最前面添加元素
●语法:数组.unshift(数据)
●返回值:返回数组最新的长度
var arr = [1, 2, 3]
// 使用 unshift 方法想数组的最前面添加一个元素
var res = arr.unshift(9)
//返回数组最新的长度
console.log(res); // 4
console.log(arr) // [9, 1, 2, 3]
数组常用方法之 shift
●作用:删除数组最前面的一个元素
●语法:数组.shift()
●返回值:被删除的数据
var arr = [4, 5, 6]
// 使用 shift 方法删除数组最前面的一个元素
var res = arr.shift()
//返回被删除的数据
console.log(res); // 4
console.log(arr) // [5, 6]
数组常用方法之 splice
●作用: splice 是截取数组中的某些内容,按照数组的索引来截取
●语法: splice(从哪一个索引位置开始,截取多少个,替换的新元素)
○第三个参数可以不写
●返回值:返回一个新数组,数组内的值就是刚刚删除掉的值
●注意:该方法会改变原始数组
var arr = [1, 2, 3, 4, 5]
// 使用 splice 方法截取数组
var res = arr.splice(1, 2)
//返回一个新数组 元素就是截取出来的数据
console.log(res); //[2, 3]
console.log(arr) // [1, 4, 5]
○arr.splice(1, 2) 表示从索引 1 开始截取 2 个内容
○第三个参数没有写,就是没有新内容替换掉截取位置
var arr = [1, 2, 3, 4, 5]
// 使用 splice 方法截取数组
var res = arr.splice(1, 2, '我是新内容')
//返回的是一个新数组,里面的元素就是截取出来的元素
console.log(res); //[2, 3]
console.log(arr) // [1, '我是新内容', 4, 5]
○arr.splice(1, 2, '我是新内容') 表示从索引 1 开始截取 2 个内容
○然后用第三个参数把截取完空出来的位置填充
数组常用方法之 reverse
●作用:reverse 是用来反转数组使用的
●语法:数组.reverse()
●返回值:反转后的数组
var arr = [1, 2, 3]
// 使用 reverse 方法来反转数组
var res = arr.reverse()
console.log(res); //[3, 2, 1]
console.log(arr) // [3, 2, 1]
数组常用方法之 sort
●作用:sort 是用来给数组排序的
●简单用法语法:数组.sort()
●基础用法
var arr = [2, 3, 1, 4, 5, 18, 7, 32]
// 使用 sort 方法给数组排序
var res = arr.sort()
console.log(res);
console.log(arr) // [1, 18, 2, 3, 32, 4, 5, 7]
●升序和降序用法
○语法->升序:数组.sort(function (a, b) { return a - b })
○语法->降序:数组.sort(function (a, b) { return b - a })
●返回值:排序后的数组
var arr = [ 1, 23, 32, 20, 19, 10, 3, 5, 33 ]
console.log('原始数组 : ', arr)
// 升序排列
var res = arr.sort(function (a, b) { return a - b })
console.log('排序之后 : ', arr)
console.log('返回值 : ', res)
var arr = [ 1, 23, 32, 20, 19, 10, 3, 5, 33 ]
console.log('原始数组 : ', arr)
// 降序排列
var res = arr.sort(function (a, b) { return b - a })
console.log('排序之后 : ', arr)
console.log('返回值 : ', res)
数组常用方法之 concat
●作用:concat 是把多个数组进行拼接
●语法:数组.concat(数组)
●返回值:返回一个新数组
●和之前的方法有一些不一样的地方,就是 concat 不会改变原始数组,而是返回一个新的数组
var arr = [1, 2, 3]
// 使用 concat 方法拼接数组
var newArr = arr.concat([4, 5, 6])
console.log(arr) // [1, 2, 3]
console.log(newArr) // [1, 2, 3, 4, 5, 6]
○注意: concat 方法不会改变原始数组
数组常用方法之 join
●作用: 数组里面的每一项内容链接起来,变成一个字符串
●可以自己定义每一项之间链接的内容 join(要以什么内容链接)
●不会改变原始数组,而是把链接好的字符串返回
var arr = [1, 2, 3]
// 使用 join 链接数组
var str = arr.join('-')
console.log(arr) // [1, 2, 3]
console.log(str) // 1-2-3
○注意: join 方法不会改变原始数组,而是返回链接好的字符串
数组常用方法之 slice
●作用:slice 能够截取数组,并返回一个新的 数组不改变数组
●语法:数组.slice(下标开始值,下标结束值)
○注意:从下标开始值开始,保留到 下标结束值的前一个结束,如果没有下标结束值(也就是没有第二个参数),就保留到最后一个字符结束。
●返回值:返回一个新的 数组
var arr = [1, 2, 3, 8, 4, 9]
// 使用slice截取
var str = arr.slice(2, 4)
console.log(arr) // [1, 2, 3, 8, 4, 9]
console.log(str) //[3, 8]
数组常用方法之 indexOf
●语法: 数组名.indexOf(要查找的数据)
●语法二: 数组名.indexOf(要查的数据,索引)
○这个语法的意思是.要从指定的索引开始查找该数据,
○如果有就放回该数据在原数组中第一个出现的位置,如果没有就返回 -1
●作用: 从前往后在数组中查找该数据第一次出现的位置
●返回值: 如果该数组中有这个数据就返回这个数据第一个次出现的位置也就是索引,如果没有返回 -1
// indexOf() 方法
// 语法一:
var arr = [200, 300, 100, 200, 300, 200, 300]
var res = arr.indexOf(100)
console.log('原始数组:', arr);
console.log('返回值:', res);
// 语法二:
var arr = [200, 300, 100, 200, 300, 200, 300]
var res = arr.indexOf(300, 1)
console.log('原始数组:', arr);
console.log('返回值:', res);
数组常用方法之 lastIndexOf
●语法: 数组名.lastIndexOf(要查的数据)
●语法二: 数组名.lastIndexOf(要查找的数据,索引)
○这个语法的意思是.要从指定的索引开始查找该数据,
○如果有就放回该数据在原数组中第一个出现的位置,如果没有就返回 -1
●作用: 从后往前在数组中查找这个数据第一次出现的位置
●返回值: 如果该数组中有这个数据就返回这个数据第一个次出现的位置也就是索引,如果没有返回 -1
// lastIndexOf() 方法
// 语法一:
var arr = [200, 300, 100, 200, 300, 200, 300]
var res = arr.lastIndexOf(400)
console.log('原始数组:', arr);
console.log('返回值: ', res);
// 语法二:
var arr = [200, 300, 100, 200, 300, 200, 300]
var res = arr.lastIndexOf(200, 2)
console.log('原始数组:', arr);
console.log('返回值: ', res);
数组常用方法之 forEach
●作用:和 for 循环一个作用,就是用来遍历数组的
●语法:arr.forEach(function (item, index, arr) {})
○item 表示数组内的每一项
○index 表示数组内每一项的索引
○arr 表示原始数组
●返回值:没有返回值,是undefined
var arr = [100, 200, 300, 400, 500]
arr.forEach(function(item, index, arr) {
// 这个函数会根据数组内有多少成员执行多少回
console.log('我执行了')
console.log(item);
console.log(index);
console.log(arr);
console.log(item, ' ---- ', index, ' ---- ', arr)
})
○forEach() 的时候传递的那个函数,会根据数组的长度执行
○数组的长度是多少,这个函数就会执行多少回
数组常用方法之 map
●和 forEach 类似,只不过可以对数组中的每一项进行操作,返回一个新的数组
●语法:arr.map(function (item, index, arr) {})
●返回值:是一个新数组, 并且和原始数组长度一致
○新数组内每一个数据都是根据原始数组中每一个数据映射出来的
○映射条件以 return 的形式书写
var arr = [1, 2, 3]
// 使用 map 遍历数组
var newArr = arr.map(function(item, index, arr) {
// item 就是数组中的每一项
// index 就是数组的索引
// arr 就是原始数组
return item + 10
})
console.log(newArr) // [11, 12, 13]
数组常用方法之 filter
●作用:和 map 的使用方式类似,按照我们的条件来筛选数组
●语法:arr.filter(function (item, index, arr) {})
●返回值:把原始数组中满足条件的筛选出来,组成一个新的数组返回
var arr = [1, 2, 3]
// 使用 filter 过滤数组
var newArr = arr.filter(function(item, index, arr) {
// item 就是数组中的每一项
// index 就是数组的索引
// arr 就是原始数组
return item > 1
})
console.log(newArr) // [2, 3]
○我们设置的条件就是 > 1
○返回的新数组就会是原始数组中所有 > 1 的项
数组常用方法之 every
●作用:判断数组中是不是每一个数据都满足条件
●语法:arr.every(function (item, index, arr) {})
●返回值:一个布尔值
○如果数组中每一个都满足条件, 那么返回值 true
○只要数组中任何一个不满足条件, 那么返回 false
●判断条件以 return 的形式书写
var arr = [100, 200, 300, 400, 500]
console.log('原始数组 : ', arr)
var res = arr.every(function(item, index, srr) {
console.log(item)
console.log(index);
// 以 return 的形式书写 判断 条件
return item < 500
// return index > 6
})
console.log('返回值 : ', res) //false
数组常用方法之 some
●作用:判断数组中是不是有某一个满足条件
●语法:arr.some(function (item, index, arr) {})
●返回值:一个布尔值
○如果数组中有任何一个满足条件, 那么返回 true
○只有数组中所有的都不满足条件, 才会返回 false
var arr = [100, 200, 300, 400, 500]
console.log(arr)
var res = arr.some(function(item, index, arr) {
console.log(item);
console.log(index);
// 以 return 的形式书写 判断 条件
return item < 50
// return index > 6
})
console.log(res) //false
数组常用方法之 reduce
●作用:进行叠加累计,函数根据数组中的成员进行重复调用
●语法:arr.reduce(function (prev, item, index, arr) {}, 初始值)
○prev: 初始值 或 每一次叠加后的结果
○item: 每一项
○index: 索引
○arr: 原始数组
○初始值: 默认是数组索引 0 位置数据, 表示从什么位置开始叠加
●返回值:返回最终的结果
var arr = [100, 200, 300, 400, 500]
console.log(arr)
var res = arr.reduce(function a(prev, item, index, arr) {
console.log(prev);
console.log(item);
console.log(index);
// 以 return 的形式书写每次的叠加条件
return prev + item
}, 0)
console.log(res)
数组常用方法之 find
●作用:查找数组中某一个数据
●语法:arr.find(function (item, index, arr) {})
●返回值:数组中你查找到的该数据。
●查找条件以 return 的形式书写
var arr = [100, 200, 301, 400, 500]
console.log(arr)
// 我想找到原始数组中的哪一个 奇数
var res = arr.find(function(item, index, arr) {
console.log(item);
console.log(index);
// 以 return 的形式书写查找条件
return item % 2 === 1
})
console.log(res)
数组常用方法之 findIndex
●作用:查找数组中某一个数据
●语法:arr.findIndex(function (item, index, arr) {})
●返回值:数组中你查找到的该数据所在的索引位置。
●查找条件以 return 的形式书写
var arr = [100, 200, 301, 400, 500]
console.log(arr)
// 我想找到原始数组中的哪一个 奇数
var res = arr.find(function(item, index, arr) {
console.log(item);
console.log(index);
// 以 return 的形式书写查找条件
return item % 2 === 1
})
console.log(res)
相关推荐
- 这个 JavaScript Api 已被废弃!请慎用!
-
在开发过程中,我们可能会不自觉地使用一些已经被标记为废弃的JavaScriptAPI。这些...
- JavaScript中10个“过时”的API,你的代码里还在用吗?
-
JavaScript作为一门不断发展的语言,其API也在持续进化。新的、更安全、更高效的API不断涌现,而一些旧的API则因为各种原因(如安全问题、性能瓶颈、设计缺陷或有了更好的替代品)被标记为“废...
- 几大开源免费的 JavaScript 富文本编辑器测评
-
MarkDown编辑器用的时间长了,发现发现富文本编辑器用起来是真的舒服。...
- 比较好的网页里面的 html 编辑器 推荐
-
如果您正在寻找嵌入到网页中的HTML编辑器,以便用户可以直接在网页上编辑HTML内容,以下是几个备受推荐的:CKEditor:CKEditor是一个功能强大的、开源的富文本编辑器,可以嵌入到...
- Luckysheet 实现excel多人在线协同编辑
-
前言前些天看到Luckysheet支持协同编辑Excel,正符合我们协同项目的一部分,故而想进一步完善协同文章,但是遇到了一下困难,特此做声明哈,若侵权,请联系我删除文章!若侵犯版权、个人隐私,请联系...
- 从 Element UI 源码的构建流程来看前端 UI 库设计
-
作者:前端森林转发链接:https://mp.weixin.qq.com/s/ziDMLDJcvx07aM6xoEyWHQ引言...
- 手把手教你如何用 Decorator 装饰你的 Typescript?「实践」
-
作者:Nealyang转发连接:https://mp.weixin.qq.com/s/PFgc8xD7gT40-9qXNTpk7A...
- 推荐五个优秀的富文本编辑器
-
富文本编辑器是一种可嵌入浏览器网页中,所见即所得的文本编辑器。对于许多从事前端开发的小伙伴来说并不算陌生,它的应用场景非常广泛,平时发个评论、写篇博客文章等都能见到它的身影。...
- 基于vue + element的后台管理系统解决方案
-
作者:林鑫转发链接:https://github.com/lin-xin前言该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(WebManagementSystem)开发。基于v...
- 开源富文本编辑器Quill 2.0重磅发布
-
开源富文本编辑器Quill正式发布2.0版本。官方TypeScript声明...
- Python之Web开发框架学习 Django-表单处理
-
在Django中创建表单实际上类似于创建模型。同样,我们只需要从Django类继承,则类属性将是表单字段。让我们在myapp文件夹中添加一个forms.py文件以包含我们的应用程序表单。我们将创建一个...
- Django测试入门:打造坚实代码基础的钥匙
-
这一篇说一下django框架的自动化测试,...
- Django ORM vs SQLAlchemy:到底谁更香?从入门到上头的选择指南
-
阅读文章前辛苦您点下“关注”,方便讨论和分享,为了回馈您的支持,我将每日更新优质内容。...
- 超详细的Django 框架介绍,它来了!
-
时光荏苒,一晃小编的Tornado框架系列也结束了。这个框架虽然没有之前的FastAPI高流量,但是,它也是小编的心血呀。总共16篇博文,从入门到进阶,包含了框架的方方面面。虽然小编有些方面介绍得不是...
- 20《Nginx 入门教程》使用 Nginx 部署 Python 项目
-
今天的目标是完成一个PythonWeb项目的线上部署,我们使用最新的Django项目搭建一个简易的Web工程,然后基于Nginx服务部署该PythonWeb项目。1.前期准备...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)