⭐️ 有关JavaScript的学习总结

数组（Array） {#%E6%95%B0%E7%BB%84%EF%BC%88array%EF%BC%89}

>简介 {#%3E%E7%AE%80%E4%BB%8B}

数组也是一种复合数据类型，在数组可以存储多个不同类型的数据。

数组中存储的是有序的数据，数组中的每个数据都有一个唯一的索引，可以通过索引来操作获取数据。

数组中存储的数据叫做元素，索引(index)是一组大于 0 的数。

length是用来获取数组的长度。

- 创建数组
    通过Array()来创建数组，也可以通过[]来创建数组

    const arr = new Array()



`
`
* 
  向数组中添加元素
  语法：
  数组[索引] = 元素



  arr[0] = 10
  arr[1] = 22
  arr[2] = 44
  arr[3] = 88
  arr[4] = 99
  // arr[100] = 99  // 使用数组时，应该避免非连续数组，因为它性能不好
  const arr2 = [1, 2, 3, 4, 5] // 数组字面量




* 
  读取数组中的元素
  语法：
  数组[索引]
  - 如果读取了一个不存在的元素，不好报错而是返回undefined



  console.log(typeof arr) // object





* `
  `length
  `
  ``
  `
  * 
    获取数组的长度，实际值就是数组的最大索引 + 1
    console.log(arr)





  * 
    向数组最后添加元素：==> 数组[数组.length] = 元素
    arr[arr.length] = 55
    arr[arr.length] = 99






  * `
    `

    `length是可以修改的
    arr.length = 5 //改大会让数组变大多出很多空元素，改小则会减少多出的元素`

>遍历数组 {#%3E%E9%81%8D%E5%8E%86%E6%95%B0%E7%BB%84}

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

// 任何类型的值都可以成为数组中的元素
let arr = [1, "hello", true, null, { name: "孙悟空" }, () => {}]

// 创建数组时尽量要确保数组中存储的数据的类型是相同
arr = \["孙悟空", "猪八戒", "沙和尚"\]


// console.log(arr\[0\])
// console.log(arr\[1\])
// console.log(arr\[2\])


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])
}`

/* 
    定义一个Person类，类中有两个属性name和age,然后创建几个Person对象，
    将其添加到一个数组中,遍历数组，并打印未成年人的信息
*/

class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}


const personArr = [
    new Person("孙悟空", 18),
    new Person("沙和尚", 38),
    new Person("红孩儿", 8),
]


for(let i=0; i<personArr.length; i++){
    if(personArr[i].age < 18){
        console.log(personArr[i])
    }
}

>for-of语句 {#%3Efor-of%E8%AF%AD%E5%8F%A5}

for-of 可以用来遍历迭代对象

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

执行流程：
for-of的循环体会执行多次，数组中有几个元素就会执行几次，
每次执行时都会将一个元素赋值给变量


const arr = \["孙悟空", "猪八戒", "沙和尚", "唐僧"\]


for(let value of arr){
console.log(value)
}

`for(let value of "welcome"){
console.log(value)
}`

>数组的方法 {#%3E%E6%95%B0%E7%BB%84%E7%9A%84%E6%96%B9%E6%B3%95}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

/*
    Array.isArray()
        - 用来检查一个对象是否是数组    
*/
 console.log(Array.isArray({ name: "孙悟空" })) // false
 console.log(Array.isArray([1, 2, 3])) // true

/\*
at()
- 可以根据索引获取数组中的指定元素
- at可以接收负索引作为参数
\*/
const arr = \["孙悟空", "猪八戒", "沙和尚", "唐僧"\]
console.log(arr.at(-2))
console.log(arr\[arr.length - 2\])


/\*
concat()
- 用来连接两个或多个数组
- 非破坏性方法，不会影响原数组，而是返回一个新的数组
\*/


const arr2 = \["白骨精", "蜘蛛精", "玉兔精"\]


let result = arr.concat(arr2, \["牛魔王","铁扇公主"\])


console.log(result)


/\*
indexOf()
- 获取元素在数组中第一次出现的索引
- 参数：
1. 要查询的元素
2. 查询的其实位置


    lastIndexOf()
        - 获取元素在数组中最后一次出现的位置

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




\*/


let result = arr.indexOf("沙和尚", 3)
result = arr.lastIndexOf("沙和尚", 3)
result = arr.indexOf("白骨精")


/\*
join()
- 将一个数组中的元素连接为一个字符串
- \["孙悟空", "猪八戒", "沙和尚", "唐僧", "沙和尚"\] -\> "孙悟空,猪八戒,沙和尚,唐僧,沙和尚"
- 参数：
指定一个字符串作为连接符
\*/
result = arr.join()
result = arr.join("@-@")
result = arr.join("")


/\*
slice()
- 用来截取数组（非破坏性方法）

- 参数：
1. 截取的起始位置（包括该位置）
2. 截取的结束位置（不包括该位置）

- 第二个参数可以省略不写，如果省略则会一直截取到最后
- 索引可以是负值


            如果将两个参数全都省略，则可以对数组进行浅拷贝（浅复制）




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

`result = arr.slice()`

>数组的复制 {#%3E%E6%95%B0%E7%BB%84%E7%9A%84%E5%A4%8D%E5%88%B6}

const arr = ["孙悟空", "猪八戒", "沙和尚"]
// const arr2 = arr  // 不是复制
// arr2[0] = "唐僧" // 如此修改，在此打印时会显示["唐僧", "猪八戒", "沙和尚"]，且全局更改

// 如何去复制一个对象 复制必须要产生新的对象
// 当调用slice时，会产生一个新的数组对象，从而完成对数组的复制
const arr3 = arr.slice()


// console.log(arr === arr2)
// console.log(arr2)


arr3\[0\] = "唐僧"

`console.log(arr) // 输出：["孙悟空", "猪八戒", "沙和尚"]
console.log(arr3) // 输出：["唐僧", "猪八戒", "沙和尚"]`

/* 
    浅拷贝（shallow copy）
        - 通常对对象的拷贝都是浅拷贝
        - 浅拷贝顾名思义，只对对象的浅层进行复制（只复制一层）
        - 如果对象中存储的数据是原始值，那么拷贝的深浅是不重要
        - 浅拷贝只会对对象本身进行复制，不会复制对象中的属性（或元素）
*/

// 创建一个数组
const arr = [{name:"孙悟空"}, {name:"猪八戒"}] // 数组里的元素为对象
const arr2 = arr.slice() // 浅拷贝
console.log(arr)

/*
    深拷贝（deep copy）
        - 深拷贝指不仅复制对象本身，还复制对象中的属性和元素
        - 因为性能问题，通常情况不太使用深拷贝
*/

const arr3 = structuredClone(arr) // 专门用来深拷贝的方法
console.log(arr3)