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 相关文章推荐
javascript forEach通用循环遍历方法
Oct 11 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
详解ES6中的Map与Set集合
Mar 22 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
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
URL Rewrite的设置方法
2007/01/02 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
一些易混淆且不常用的属性,希望有用
2007/01/29 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
javascript常用的方法整理
2015/08/20 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
[42:24]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第三场 11.27
2020/12/01 DOTA
python自定义异常实例详解
2017/07/11 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python 识别12306图片验证码物品的实现示例
2020/01/20 Python
简单了解Java Netty Reactor三种线程模型
2020/04/26 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
表决心的诗句大全
2014/03/11 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
新郎结婚保证书
2015/02/26 职场文书
企业催款函范本
2015/06/24 职场文书
2015年教师节主持词
2015/07/03 职场文书
MongoDB数据库之添删改查
2022/04/26 MongoDB