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 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
vue进行图片的预加载watch用法实例讲解
Feb 07 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 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
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
PHP n个不重复的随机数生成代码
2009/06/23 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
鼠标事件延时切换插件
2011/03/12 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
基于jquery完美拖拽,可返回拖动轨迹
2012/03/29 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
JavaScript语言对Unicode字符集的支持详解
2014/12/30 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
python中list常用操作实例详解
2015/06/03 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
Ajax主要包含了哪些技术
2014/06/12 面试题
理工类毕业自我鉴定
2014/02/20 职场文书
体育之星事迹材料
2014/05/11 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python