javascript中数组的介绍

简介: javascript中数组的介绍

基础篇



js中数组的创建


// 字面量创建一个数组 里面的数据可以是字符串
let listArray1 = [1,"1",[1,2,3],{name:"张三"}]
console.log(listArray1)
// 也可以使用new Array方法
let listArray2 = new Array()
console.log(listArray2)
// 转化数组
let listArray3 = "小明的小张的"
// Array.from这个方法是可以把我们的数据转化成数组 如果说我们的数据是中文组成的话那么生成的数组是以一个字分割的数组
console.log(Array.from(listArray3))
// split以数据中的某个节点进行切割 以下是以“的”来切割的
console.log(listArray3.split("的"))


js中数组的访问


首先 数组中所有元素对应的索引值都是数值型 并且是从0开始 如下图标识

fdc46a9ce5b94371906ee367def48e6c.png


其实js中也可以自定义索引的值 例如下

let listArray = []
listArray["username"] = "admin"
listArray["password"] = "123456"


77ff0dd62fb44aa7a3056a0191efb2f4.png


我们可以看到自定义索引是设置成功了 但是是不是有一些奇怪之处呢?

js是不肯定这种自定义索引的所以这个数组连长度都没有

书归正传 通过索引值来访问数组的值

let listArray = [1,2,3,4,5,6]
// 访问数组第一个数值 数组的下标是从0开始的依次递增
console.log(listArray[0])
// 访问数组的最后一个元素
// 首先先使用length来获取数组的长度 由于数组的下标是从0开始的所以把数组的长度减一就是数组的最大索引 也就是最后一个元素的索引值
console.log(listArray[listArray.length-1])
//索引值是不可以使用-号的 如果使用负号的话会是unedfined
console.log(listArray[-1])


属性篇



length


let listArray = [1,2,3,4,5,6]
listArray.length
// 切记没有括号


constructor


/* 
    constructor 返回对创建此对象的数组函数的引用
*/
let listArray = [11,2,3,42,100,97,23,1,90,33]
// 升序
console.log(listArray.constructor)
// 切记没有括号


方法篇



基础方法篇


join

let listArray = [1,2,3,4,5,6]
// 根据逗号把每一个值用逗号来连接
console.log(listArray.join("-"))
// 输出结果1-2-3-4-5


delete

//使用delete运算符删除元素后会产生一个稀疏数组,数组的下标不会更改
var arr = [1,2,3,4,5,6];
delete arr[1];
console.log(arr)


push

// push是在数组最后的位置添加一个元素
let listArray = [1,2,3,4,5,6]
listArray.push(7)
console.log(listArray)
// 输出结果 1,2,3,4,5,6,7


pop

// pop是用来删除数组中的最后一个元素 如果说数组是空的话那么返回一个undefind
let listArray = [1,2,3,4,5,6]
let a = listArray.pop()
console.log(listArray)
// 输出 [1,2,3,4,5]
console.log(a)
// 输出 6


unshift

// unshift是用来向数组的开头添加一个或者多个元素
let listArray = [1,2,3,4,5,6]
let a = listArray.unshift(999,888)
console.log(listArray)
// 输出 [999,888,1,2,3,4,5]


shift

// shift是用来删除并返回数组的第一个元素 和 pop类似 pop是删除最后元素返回 shift是删除第一个元素返回
let listArray = [1,2,3,4,5,6]
let a = listArray.shift()
console.log(listArray)
// 输出 [2,3,4,5]
console.log(a)
// 输出 1


slice

// slice 从某个已有的数组返回选定的元素 slice第一个值是起始位置的索引 第二个值是结束位置的索引 包含第一索引
let listArray = [1,2,3,4,5,6]
let a = listArray.slice(0,3)
console.log(a)
// 输出 [1, 2, 3]


splice

// splice 删除元素 并向数组添加新元素
/* 
splice
第一个值是开始元素的索引值
第二个值是结束元素的索引值
然后删除第一个值到最后一个值中间的值 包含头不包含尾
第三个值就是我们添加的元素
*/
let listArray = [1,2,3,4,5,6]
listArray.splice(0,3,[2,3,4])
console.log(listArray)
// 输出 [[2,3,4]4,5,6]


concat

合并两个数组

/* 
    concat 合并两个数组的值 也可以合并多个数组的值
*/
let listArray = [1,2,3,4,5,6]
let listArray2 = [7,8,9]
let totalArray = listArray.concat(listArray2)
console.log(totalArray)
// 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9]


合并多个数组

/* 
    concat 合并两个数组的值 也可以合并多个数组的值
*/
let listArray = [1,2,3,4,5,6]
let listArray2 = [7,8,9]
let listArray3 = [10,11,12]
// 可以用这个方法以此类推
let totalArray = listArray.concat(listArray2.concat(listArray3))
console.log(totalArray)
// 输出 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]


reverse

/* 
    reverse 可以颠倒数组中元素排序的顺序
*/
let listArray = [1,2,3,4,5,6]
let listArray2 = [7,8,9]
let listArray3 = [10,11,12]
let totalArray = listArray.concat(listArray2.concat(listArray3))
console.log(totalArray.reverse())
// 输出 [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]


sort

/* 
    sort 可以对数组进行排序
*/
let listArray = [11,2,3,42,100,97,23,1,90,33]
// 升序
console.log(listArray.sort((a,b)=>{return a-b}))
// 输出[1, 2, 3, 11, 23, 33, 42, 90, 97, 100]
// 降序
console.log(listArray.sort((a,b)=>{return b-a}))
// 输出[100, 97, 90, 42, 33, 23, 11, 3, 2, 1]
目录
打赏
0
0
0
0
21
分享
相关文章
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
62 2
|
4月前
|
js删除数组中已知下标的元素
js删除数组中已知下标的元素
67 4
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
47 5
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
73 1
探索JavaScript数组:基础
探索JavaScript数组:基础
33 3
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
105 1
如何在JS中声明一个数组
如何在JS中声明一个数组
46 0
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
51 3

热门文章

最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    60
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    32
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    27
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    48
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    60
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    59
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    58
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等