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动态增减控件的一些想法和小插件
Aug 01 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
AngularJs Scope详解及示例代码
Sep 01 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 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
合作指挥官:孟斯克
2020/03/16 星际争霸
php+oracle 分页类
2006/10/09 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
php实现只保留mysql中最新1000条记录
2015/06/18 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
简单的分页代码js实现
2016/05/17 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
python实现AHP算法的方法实例(层次分析法)
2020/09/09 Python
Python通过len函数返回对象长度
2020/10/22 Python
python 利用openpyxl读取Excel表格中指定的行或列教程
2021/02/06 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
两道JAVA笔试题
2016/09/14 面试题
销售工作人员的自我评价分享
2013/11/10 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
保护动物的标语
2014/06/11 职场文书
明星员工获奖感言
2014/08/14 职场文书
费用申请报告范文
2015/05/15 职场文书