js数组的基本使用总结


Posted in Javascript onJanuary 18, 2021

前言

数组是一种特殊对象。js中并没有真正的数组,只是用对象模拟数组。

js数组的基本使用总结

查看对象属性的方法在数组身上也同样适用。值得注意的是:数组的下标类型为字符串,并不是数字。

典型数组和js数组区别

类似c/c++的典型数组特征如下:

  • 元素的数据类型相同
  • 使用连续的内存存储
  • 通过数字下标获取元素

 js的数组

  • 元素的数据类型可以不同
  • 内存不一定是连续的(对象是随机存储的)
  • 不能通过数字下标访问,而是通过字符串下标进行访问。(这意味着数组可以有任何key)

js数组的基本使用总结 

上图说明的是最后一点:数组可以有任何key,想证明数组的下标为字符串,用 Object.keys(arr)

创建数组

创建数组有两种方式,分别是:

let arr=[1,2,3]
 let arr=new Array(1,2,3)

字符串转化为数组 split() Array.from()

js数组的基本使用总结 

可以用这两种方法将字符串转化为字符串数组。

伪数组

没有数组共有属性的数组就是伪数组(伪数组的原型链中并没有数组的原型)

js数组的基本使用总结

伪数组中并没有push,pop等方法(通过 console.dir(divList) 可看出),我们可以通过 Array.from() 来转化

js数组的基本使用总结

转化之后就可以成功的push啦

合并两个数组

  • concat()

此方法不会改变原数组

let arr1=[1,2,3]
 let arr2=[4,5,6]
 arr1.concat(arr2)//[1,2,3,4,5,6]
 arr1//[1,2,3]
 arr2//[4,5,6]

截取数组

  • slice()

此方法不会改变原数组

let arr=[1,2,3,4,5,6]
arr.slice(3) //[4,5,6]
arr//[1,2,3,4,5,6]

删数组元素

删头部元素: arr.shift() arr会被修改,并返回被删元素

let arr=[1,2,3,4,5,6]
 arr.shift()//1
 arr//[2, 3, 4, 5, 6]

删尾部元素: arr.pop() arr会被修改,并返回被删元素

let arr=[1,2,3,4,5,6]
 arr.shift()//6
 arr//[1, 2, 3, 4, 5]

删中间:

arr.splice(index,1) //删除index的第一个元素,返回被删元素 arr.splice(index,1,'x') //在删除位置添加'x' ,返回被删元素 arr.splice(index,1,'x','y') //在删除位置添加'x'和'y',返回被删元素

let arr=[1,2,3,4,5,6,7,8,9]
 //删除元素4
 arr.splice(3,1)//4
 arr//[1, 2, 3, 5, 6, 7, 8, 9]
 
 let arr=[1, 2, 3, 5, 6, 7, 8, 9]
 //删除下标3并添加3.5和4
 arr.splice(2,1,3.5,4)//3
 arr//[1, 2, 3.5, 4, 6, 7, 8, 9]

查看数组元素

查看属性

  • Object.keys(arr)
  • Object.values(arr)
let arr=[1,2,3,4,5]
arr.x='xxx'
Object.keys(arr)//["0", "1", "2", "3", "4", "x"]
Object.values(arr)// [1, 2, 3, 4, 5, "xxx"]

for in 循环

js数组的基本使用总结

查看只含数字的元素

for循环

js数组的基本使用总结

forEach循环

js数组的基本使用总结

查看某个元素是否在数组里

arr.indexOf(item) 存在则返回数组索引,否则返回-1

let arr=[1,2,3,4,5,6]
arr.indexOf(2)//1
arr.indexOf(7)//0

使用条件查找元素

//查找第一个为偶数的元素
let arr=[1,2,3,4,5,6]
arr.find(item=>item%2===0)//2

//查找第一个为偶数的下标
let arr=[1,2,3,4,5,6]
arr.findIndex(item=>item%2===0)//1

增加数组中的元素

在尾部添加: arr.push(item1,item2)

let arr=[3,4,5,6]
 arr.push(7,8,9)
 arr//[3,4,5,6,7,8,9]

头部添加: arr.unshift(item1,item2)

let arr=[3,4,5,6]
 arr.unshift(1,2,3)
 arr//[1, 2, 3, 3, 4, 5, 6]

在中间添加: arr.splice(index,0,'x')

let arr=[1,2,3,4,5,6,7]
 //在下标为2的位置添加3.33,3.44
 arr.splice(2,0,3.33,3.44)//[1, 2, 3.33, 3.44, 3, 4, 5, 6, 7]

总结

到此这篇关于js数组的基本使用总结的文章就介绍到这了,更多相关js数组使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 jQuery
深入解析koa之异步回调处理
Jun 17 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
vue3.0 加载json的方法(非ajax)
Oct 26 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 #Javascript
js加减乘除精确运算方法实例代码
Jan 17 #Javascript
Angular处理未可知异常错误的方法详解
Jan 17 #Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 #Javascript
vue element el-transfer增加拖拽功能
Jan 15 #Vue.js
关于uniApp editor微信滑动问题
Jan 15 #Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 #Javascript
You might like
一个简易需要注册的留言版程序
2006/10/09 PHP
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
Laravel框架在本地虚拟机快速安装的方法详解
2018/06/11 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
JQuery Dialog对话框 不能通过Esc关闭的原因分析及解决办法
2017/01/18 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
js面向对象编程总结
2017/02/16 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
二维码图片生成器QRCode.js简单介绍
2017/08/18 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
js里面的变量范围分享
2020/07/18 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python多进程并发(multiprocessing)用法实例详解
2015/06/02 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
python多进程实现文件下载传输功能
2018/07/28 Python
python实现贪吃蛇小游戏
2020/03/21 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
在keras中实现查看其训练loss值
2020/06/16 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
大三学生英语考试作弊检讨书
2015/01/01 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers