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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
javascript克隆对象深度介绍
Nov 20 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
理解AngularJs指令
Dec 10 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
利用JQuery直接调用asp.net后台的简单方法
Oct 27 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
Vue——前端生成二维码的示例
Dec 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
桌面中心(四)数据显示
2006/10/09 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
srcElement表格样式
2006/09/03 Javascript
FLASH 广告之外的链接
2008/12/16 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
基于jQuery的history历史记录插件
2010/12/11 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
Vue程序调试的方法
2019/06/17 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
python能在浏览器能运行吗
2020/06/17 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
指针和引用有什么区别
2013/01/13 面试题
人力资源部经理岗位职责规定
2014/02/23 职场文书
商业房地产广告语
2014/03/13 职场文书
售后求职信范文
2014/03/15 职场文书
开业庆典致辞
2015/08/01 职场文书
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript