JavaScript的数组常用方法
ztj100 2024-11-25 00:38 17 浏览 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)
相关推荐
- Vue 技术栈(全家桶)(vue technology)
-
Vue技术栈(全家桶)尚硅谷前端研究院第1章:Vue核心Vue简介官网英文官网:https://vuejs.org/中文官网:https://cn.vuejs.org/...
- vue 基础- nextTick 的使用场景(vue的nexttick这个方法有什么用)
-
前言《vue基础》系列是再次回炉vue记的笔记,除了官网那部分知识点外,还会加入自己的一些理解。(里面会有部分和官网相同的文案,有经验的同学择感兴趣的阅读)在开发时,是不是遇到过这样的场景,响应...
- vue3 组件初始化流程(vue组件初始化顺序)
-
学习完成响应式系统后,咋们来看看vue3组件的初始化流程既然是看vue组件的初始化流程,咋们先来创建基本的代码,跑跑流程(在app.vue中写入以下内容,来跑流程)...
- vue3优雅的设置element-plus的table自动滚动到底部
-
场景我是需要在table最后添加一行数据,然后把滚动条滚动到最后。查网上的解决方案都是读取html结构,暴力的去获取,虽能解决问题,但是不喜欢这种打补丁的解决方案,我想着官方应该有相关的定义,于是就去...
- Vue3为什么推荐使用ref而不是reactive
-
为什么推荐使用ref而不是reactivereactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代optionapi的data的替...
- 9、echarts 在 vue 中怎么引用?(必会)
-
首先我们初始化一个vue项目,执行vueinitwebpackechart,接着我们进入初始化的项目下。安装echarts,npminstallecharts-S//或...
- 无所不能,将 Vue 渲染到嵌入式液晶屏
-
该文章转载自公众号@前端时刻,https://mp.weixin.qq.com/s/WDHW36zhfNFVFVv4jO2vrA前言...
- vue-element-admin 增删改查(五)(vue-element-admin怎么用)
-
此篇幅比较长,涉及到的小知识点也比较多,一定要耐心看完,记住学东西没有耐心可不行!!!一、添加和修改注:添加和编辑用到了同一个组件,也就是此篇文章你能学会如何封装组件及引用组件;第二能学会async和...
- 最全的 Vue 面试题+详解答案(vue面试题知识点大全)
-
前言本文整理了...
- 基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
-
今天给大家分享的是Vue3聊天实例中的朋友圈的实现及登录验证和倒计时操作。先上效果图这个是最新开发的vue3.x网页端聊天项目中的朋友圈模块。用到了ElementPlus...
- 不来看看这些 VUE 的生命周期钩子函数?| 原力计划
-
作者|huangfuyk责编|王晓曼出品|CSDN博客VUE的生命周期钩子函数:就是指在一个组件从创建到销毁的过程自动执行的函数,包含组件的变化。可以分为:创建、挂载、更新、销毁四个模块...
- Vue3.5正式上线,父传子props用法更丝滑简洁
-
前言Vue3.5在2024-09-03正式上线,目前在Vue官网显最新版本已经是Vue3.5,其中主要包含了几个小改动,我留意到日常最常用的改动就是props了,肯定是用Vue3的人必用的,所以针对性...
- Vue 3 生命周期完整指南(vue生命周期及使用)
-
Vue2和Vue3中的生命周期钩子的工作方式非常相似,我们仍然可以访问相同的钩子,也希望将它们能用于相同的场景。...
- 救命!这 10 个 Vue3 技巧藏太深了!性能翻倍 + 摸鱼神器全揭秘
-
前端打工人集合!是不是经常遇到这些崩溃瞬间:Vue3项目越写越卡,组件通信像走迷宫,复杂逻辑写得脑壳疼?别慌!作为在一线摸爬滚打多年的老前端,今天直接甩出10个超实用的Vue3实战技巧,手把...
- 怎么在 vue 中使用 form 清除校验状态?
-
在Vue中使用表单验证时,经常需要清除表单的校验状态。下面我将介绍一些方法来清除表单的校验状态。1.使用this.$refs...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- Vue 技术栈(全家桶)(vue technology)
- vue 基础- nextTick 的使用场景(vue的nexttick这个方法有什么用)
- vue3 组件初始化流程(vue组件初始化顺序)
- vue3优雅的设置element-plus的table自动滚动到底部
- Vue3为什么推荐使用ref而不是reactive
- 9、echarts 在 vue 中怎么引用?(必会)
- 无所不能,将 Vue 渲染到嵌入式液晶屏
- vue-element-admin 增删改查(五)(vue-element-admin怎么用)
- 最全的 Vue 面试题+详解答案(vue面试题知识点大全)
- 基于 vue3.0 桌面端朋友圈/登录验证+60s倒计时
- 标签列表
-
- 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)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- 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)