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]
目录
相关文章
|
2月前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
44 2
|
2月前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
37 3
|
2月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
49 4
|
2月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
52 1
|
2月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
32 5
|
2月前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
21 3
|
2月前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
76 1
|
2月前
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
31 0
|
2月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
35 3
|
3月前
|
JavaScript 前端开发
js删除数组最后一个元素
js删除数组最后一个元素