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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
Mar 26 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
概述BootStrap中role="form"及role作用角色
Dec 08 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
单点登录 Ucenter示例分析
2013/10/29 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
轻松实现php文件上传功能
2017/02/17 PHP
PHP设计模式之装饰器模式定义与用法详解
2018/04/02 PHP
PHP用swoole+websocket和redis实现web一对一聊天
2019/11/05 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
2016/11/01 Javascript
bootstrap table实例详解
2017/01/06 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
[56:12]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第一场 6.3
2018/06/04 DOTA
Python中的并发编程实例
2014/07/07 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
pygame加载中文名mp3文件出现error
2017/03/31 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python关于倒排列的知识点总结
2020/10/13 Python
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
劳资专员岗位职责
2013/12/27 职场文书
文字自荐书范文
2014/02/10 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书