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]
目录
相关文章
|
1月前
|
JavaScript
js 解析 byte数组 成字符串
js 解析 byte数组 成字符串
51 5
|
2天前
|
JavaScript 前端开发 索引
探索JavaScript数组:基础
探索JavaScript数组:基础
|
1天前
|
JavaScript 前端开发 索引
JS 删除数组元素( 5种方法 )
JS 删除数组元素( 5种方法 )
|
3天前
|
JavaScript 前端开发
如何在JS中声明一个数组
如何在JS中声明一个数组
8 0
|
8天前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
15 3
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-数组的遍历
关于JavaScript数组遍历基础知识的文章。
32 2
JavaScript基础知识-数组的遍历
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-数组的练习
关于JavaScript基础知识中数组操作的练习,主要介绍了如何从一个包含Person对象的数组中过滤出成年人(年龄达到18岁及以上)并将他们放入一个新的数组中。
28 1
JavaScript基础知识-数组的练习
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-数组的常用方法
关于JavaScript基础知识-数组的常用方法。
18 1
JavaScript基础知识-数组的常用方法
|
1月前
|
JavaScript 前端开发 索引
JavaScript基础知识-数组基于索引访问
关于JavaScript数组基于索引访问的基础知识介绍。
17 1
JavaScript基础知识-数组基于索引访问
|
1月前
|
JavaScript 前端开发
JavaScript基础知识-数组的定义方式
本文介绍了JavaScript中数组的多种定义方式。
17 1
JavaScript基础知识-数组的定义方式

热门文章

最新文章