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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 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 stripos()函数及注意事项的分析
2013/06/08 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
jquery 手势密码插件
2017/03/17 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
详解Python编程中time模块的使用
2015/11/20 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
python opencv摄像头的简单应用
2019/06/06 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python如何实现数据的线性拟合
2019/07/19 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2020/03/11 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
关于python 跨域处理方式详解
2020/03/28 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
争论的故事教学反思
2014/02/06 职场文书
学校运动会广播稿100条
2014/09/14 职场文书
防灾减灾标语
2014/10/07 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
从零开始在Centos7上部署SpringBoot项目
2022/04/07 Servers