js数组的基本使用总结

更新时间：2021年01月18日 09:26:44 作者：抓泥鳅

这篇文章主要给大家介绍了关于js数组的基本使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

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

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

典型数组和js数组区别

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

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

js的数组

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

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

创建数组

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

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

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

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

伪数组

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

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

转化之后就可以成功的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 循环

查看只含数字的元素

for循环

forEach循环

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

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数组使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

js实现拖动缓动效果
这篇文章主要为大家详细介绍了js实现拖动缓动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
今天小编就为大家分享一篇在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
小程序getLocation需要在app.json中声明permission字段
这篇文章主要介绍了小程序getLocation需要在app.json中声明permission字段，个别需要获取用户地理位置的在开发者工具调试时会出现getLocation需要在app.json中声明permission字段，下面我们就一起来解决一下
2019-04-04
原生js中运算符及流程控制示例详解
这篇文章主要给大家介绍了关于原生js中运算符及流程控制的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
JavaScript 在各个浏览器中执行的耐性
经常会遇到这样一个情况：浏览器弹出对话框，提示脚本运行时间过长，询问“停止”还是“继续”。那究竟各个浏览器是如何判断在什么时候才弹出此对话框呢？
2009-04-04
微信小程序实现顶部固定底部分页滚动效果
这篇文章主要介绍了微信小程序实现顶部固定底部分页滚动效果，本文大概给大家分享三种解决方案，每种方案给大家详细剖析通过代码解析哪种方案更适合，感兴趣的朋友跟随小编一起看看吧
2022-10-10
JavaScript高级程序设计事件学习笔记
JavaScript高级程序设计事件学习笔记，需要的朋友可以参考下。
2011-09-09
微信、QQ、微博、Safari中使用js唤起App
本篇文章主要介绍了js在微信、微博、QQ、Safari唤起App的解决方案，有这方面需要的朋友参考下吧。
2018-01-01
JS基于cookie实现来宾统计记录访客信息的方法
这篇文章主要介绍了JS基于cookie实现来宾统计记录访客信息的方法,通过javascript记录访客信息到cookie的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
对js eval()函数的一些见解
下面小编就为大家带来一篇对js eval()函数的一些见解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08