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 相关文章推荐
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
Jun 08 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
处理canvas绘制图片模糊问题
May 11 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
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php的一个简单加密解密代码
2014/01/14 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
javascript相等运算符与等同运算符详细介绍
2013/11/09 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
浅谈JS继承_寄生式继承 & 寄生组合式继承
2016/08/16 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
js实现贪吃蛇小游戏
2019/10/29 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
Python比较两个图片相似度的方法
2015/03/13 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
Python日志模块logging基本用法分析
2018/08/23 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
先进工作者个人总结
2015/02/15 职场文书
解约证明模板
2015/06/19 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Python编程源码报错解决方法总结经验分享
2021/10/05 Python
Nginx速查手册及常见问题
2022/04/07 Servers
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android