JavaScript------数组

目录

一、简介

1、什么是数组？

2、创建数组

3、数组的数据类型

4、向数组中添加元素

5、读取数组中的元素

6、实例属性：length

二、遍历数组

方式一：for循环

方式二：for...of

三、数组方法（常用）

Array.isArray()

.push(value1，value2...)

.pop()

.unshift(value1，value2...)

.shift()

.splice(startIndex，number，value)

.reverse()

数组去重方法

.at(index)

.concat(arr1, arr2, ...)

.indexOf(value, index)

.lastIndexOf(value, index)

.join("str")

.slice(startIndex，endIndex)

---

一、简介

1、什么是数组？

1. 数组是一种复合数据类型，在数组可以存储多个不同类型的数据。
2. 数组中存储的是有序的数据，数组中的每个数据都有一个唯一的索引。
3. 数组可以通过索引来操作获取数据。
4. 数组中存储的数据叫做元素。
5. 数组的索引（index）是一组大于0的整数。

2、创建数组

方式一：通过Array()来创建数组

const arr = new Array()

方式二：通过[]来创建数组

const arr = []

3、数组的数据类型

数组的数据类型是对象

const arr = [1, 2, 3, 4, 5] console.log(typeof arr)  // object

4、向数组中添加元素

语法：数组[索引] = 元素

5、读取数组中的元素

语法：数组[索引]

PS：如果读取了一个不存在的元素，不会报错而是返回undefined

6、实例属性：length

作用：获取数组的长度。获取的实际值就是数组的最大索引 + 1

向数组最后添加元素：数组[数组.length] = 元素

const arr = [1, 2, 3, 4, 5] arr[arr.length] = 6console.log(arr)    // [1, 2, 3, 4, 5, 6]

数组的length是可以修改的：

const arr = [1, 2, 3, 4, 5, 6, 7]arr.length = 5
console.log(arr)     // [1, 2, 3, 4, 5]arr.length = 10
console.log(arr)     // [1, 2, 3, 4, 5, 6, 7, empty*3]

二、遍历数组

简单理解，就是获取到数组中的每一个元素

方式一：for循环

arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]// 正序遍历
for(let i=0; i<arr.length; i++){console.log(arr[i])
}// 倒序遍历
for (let i = arr.length - 1; i >= 0; i--) {console.log(arr[i])
}

方式二：for...of

语法：

for(变量 of 可迭代的对象){语句...
}

执行流程： for-of的循环体会执行多次，数组中有几个元素就会执行几次，每次执行时都会将一个元素赋值给变量value。value可以替换成其他单词。

const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]for(let value of arr){console.log(value)
}// 孙悟空
// 猪八戒
// 沙和尚
// 唐僧

三、数组方法（常用）

方法查询：Array - JavaScript | MDN (mozilla.org)

------------------------------------------ 静态方法----------------------------------------------

Array.isArray()

作用：用来检查一个对象是否是数组。静态方法。

console.log(Array.isArray({ name: "孙悟空" }))   // falseconsole.log(Array.isArray([1, 2, 3]))   // true

------------------------------------------ 实例方法（破坏性方法）----------------------------------------------

【破坏性方法，会影响原数组，在原数组上修改】

.push(value1，value2...)

作用：向数组的末尾添加一个或多个元素，并返回新的长度

参数：value=添加的元素

返回值：新的数组，新的长度

let arr = ["孙悟空", "猪八戒", "沙和尚"]
let result = arr.push("唐僧", "白骨精")
console.log(arr)   // ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]
console.log(result)  // 5  

.pop()

作用：删除并返回数组的最后一个元素

参数：无

返回值：数组的最后一个元素

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "白骨精"]
let result = arr.pop()
console.log(arr)   // ["孙悟空", "猪八戒", "沙和尚", "唐僧"]
console.log(result)  // 白骨精

.unshift(value1，value2...)

作用：向数组的开头添加一个或多个元素，并返回新的长度

参数：value=添加的元素

返回值：新的数组，新的长度

let arr = ["孙悟空", "猪八戒", "沙和尚"]result = arr.unshift("牛魔王")console.log(arr)   // ["牛魔王","孙悟空", "猪八戒", "沙和尚"]console.log(result)  // 4

.shift()

作用：删除并返回数组的第一个元素

参数：无

返回值：数组的第一一个元素

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]result = arr.shift()  console.log(arr)    // ["猪八戒", "沙和尚", "唐僧"]console.log(result)   //  孙悟空

.splice(startIndex，number，value)

作用：可以删除、插入、替换数组中的元素

参数：startIndex=删除的起始位置， number=删除的元素数量，value=要插入的元素（插在被删除的元素原来的地方）。当number=0时，表示在startIndex之前插入value，且若startIndex>=arr.length，value都会在数组最后插入，不会补充empty占位

返回值：返回被删除的元素

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]let result = arr.splice(1, 3)
console.log(result)  //  ["猪八戒", "沙和尚", "唐僧"]
console.log(arr)   // ["孙悟空"]result = arr.splice(1, 1, "牛魔王", "铁扇公主", "红孩儿")
console.log(result)  //  猪八戒
console.log(arr)   // ["孙悟空",  "牛魔王", "铁扇公主", "红孩儿", "沙和尚", "唐僧"]result = arr.splice(1, 0, "牛魔王", "铁扇公主", "红孩儿")
console.log(arr)   //  ["孙悟空", "猪八戒",  "牛魔王", "铁扇公主", "红孩儿", "沙和尚", "唐僧"]

.reverse()

作用：反转数组

参数：无

返回值：新数组

let arr = ["a", "b", "c", "d"]arr.reverse()console.log(arr)  //  ["d", "c", "b", "a"]

数组去重方法

方法一：（在原数组操作）将第一个元素取出，从第二个位置开始依次向后比，不一样的元素留下，一样的元素删掉；将第二个元素取出，从第三个位置开始依次向后比，不一样的元素留下，一样的元素删掉.....重复以上操作

const arr = [1, 2, 1, 3, 2, 2, 4, 5, 5, 6, 7]// 版本一
// 分别获取数组中的元素
for (let i = 0; i < arr.length; i++) {// 获取当前值后边的所有值for (let j = i + 1; j < arr.length; j++) {// 判断两个数是否相等if (arr[i] === arr[j]) {// 出现了重复元素，删除后边的元素arr.splice(j, 1);j--;  // **重要**//当arr[i] 和 arr[j]相同时，它会自动的删除j位置的元素，//然后j+1位置的元素，会变成j位置的元素,而j位置已经比较过了，//不会重复比较，所以会出现漏比较的情况.//解决办法，当删除一个元素后，需要将该位置的元素在比较一遍}}
}console.log(arr)// 版本二
// 获取数组中的元素
for(let i=0; i<arr.length; i++){const index = arr.indexOf(arr[i], i+1)if(index !== -1){// 出现重复内容arr.splice(index, 1)i--}
}
console.log(arr)

方法二：（在新数组操作）

const newArr = []for(let ele of arr){if(newArr.indexOf(ele) === -1){newArr.push(ele)}
}console.log(newArr)

------------------------------------------ 实例方法（非破坏性方法）----------------------------------------------

【非破坏性方法，不会影响原数组，而是返回一个新的数组。】

.at(index)

作用：可以根据索引获取数组中的指定元素。可以接收负索引作为参数，表示从数组尾部开始获取。

参数：需要获取的元素的索引

返回值：需要获取的元素

const arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]console.log(arr.at(-2))   // 沙和尚console.log(arr[arr.length - 2])  // 沙和尚

.concat(arr1, arr2, ...)

作用：用来连接两个或多个数组。

参数：需要拼接的数组

返回值：连接的新数组

const arr2 = ["白骨精", "蜘蛛精", "玉兔精"]let result = arr.concat(arr2, ["牛魔王","铁扇公主"])console.log(result)  // ["白骨精", "蜘蛛精", "玉兔精", "牛魔王","铁扇公主"]

.indexOf(value, index)

作用：获取元素在数组中第一次出现的索引

参数：value=要查询的元素，index=查询的起始位置

返回值：找到了则返回元素的索引

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"]let result = arr.indexOf("沙和尚", 3)console.log(result)  // 2

.lastIndexOf(value, index)

作用：获取元素在数组中最后一次出现的位置

参数：value=要查询的元素，index=查询的起始位置（从数组尾部向前查询）

返回值：找到了则返回元素的索引，没有找到返回-1

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"]let result = arr.lastIndexOf("沙和尚", 3)console.log(result)   // 2

.join("str")

作用：将一个数组中的元素连接为一个字符串

参数：str=数组元素间进行连接的字符，如果不需要字符连接，str则为空串""

返回值：连接后的字符串

let arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"]result = arr.join("@-@")
console.log(result)   // 孙悟空@-@猪八戒@-@沙和尚@-@唐僧@-@沙和尚@-@result = arr.join("")
console.log(result)   // 孙悟空猪八戒沙和尚唐僧沙和尚

.slice(startIndex，endIndex)

作用：用来截取数组。

参数：startIndex=截取的起始位置（包括该位置），endIndex=截取的结束位置（不包括该位置）。第二个参数可以省略不写，如果省略则会一直截取到最后。索引可以是负值。如果将两个参数全都省略，则可以对数组进行浅拷贝（也称为浅复制，对象的复制见）

返回值：截取后的数组

arr = ["孙悟空", "猪八戒", "沙和尚", "唐僧"]result = arr.slice(0, 2)
console.log(result)    // ["孙悟空", "猪八戒"]result = arr.slice(1, 3)
console.log(result)    //  ["孙悟空", "猪八戒", "沙和尚"]result = arr.slice(1, -1)
console.log(result)   //  ["孙悟空", "猪八戒", "沙和尚"]