JavaScript数组和对象基础个人学习笔记

零、简介

在 JavaScript 的学习与实践中，基础数据结构是构建复杂应用程序的基石，我们可以通过多种方式存储和访问数据。 这部分学习将更深入地了解数组、对象之间的差异，以及一些处理数据的方法。

一、数组

数组是一种有序的数据集合，它可以存储任意类型的数据，包括但不限于数字、字符串、布尔值、对象、函数，甚至可以是其他数组。数组使用方括号 [] 来定义，数组中的每个元素都有一个对应的索引，索引是从 0 开始的整数，通过索引可以访问和操作数组中的元素。

1、特点：

①元素类型可变：数组中的元素可以是不同的数据类型，并且可以随时改变元素的类型。

let array=[1,"hello",true,[1,2,false]];//一个存储了多种类型数据的数组
array[0]=true;//将第一个元素的类型从数字改为布尔值

②索引访问：在数组中，内部的每个元素都有一个与之对应的索引（index）。 索引既是该元素在数组中的位置，也是我们访问该元素的引用。 需要注意的是，JavaScript 数组的索引是从 0 开始的（这种从 0 开始的规则叫做 zero-indexed），即数组的第一个元素是在数组中的第 0 个位置，而不是第 1 个位置。 要从数组中获取一个元素，我们可以在数组字面量后面加一个用方括号括起来的索引。不过习惯上，我们会通过表示数组的变量名来访问，而不是直接通过字面量。 这种从数组中读取元素的方式叫做方括号表示法（bracket notation）。

let array=[1,2,3];
let a=array[0];//从数组中取出数据并将其赋值给另一个变量

③长度可变：数组的长度与数组能包含的数据类型一样，都是不固定的。 数组可以包含任意数量的元素，可以不限次数地往数组中添加元素或者从中移除元素。 总之，数组是可变的（mutable）。push()、pop()、shift()、unshift() 和 splice() 都是用于操作数组并能改变数组长度的重要方法。

push() 方法用于在数组的末尾添加一个或多个元素，并返回新的数组长度。

unshift() 方法用于在数组的开头添加一个或多个元素，并返回新的数组长度。数组中现有的元素会依次向后移动相应的位置。

pop() 方法用于移除数组的最后一个元素，并返回该元素。如果数组为空，则返回 undefined。

shift() 方法用于移除数组的第一个元素，并返回该元素。如果数组为空，则返回 undefined。执行该方法后，数组中剩余的元素会依次向前移动一个位置。

splice() 方法非常灵活，它可以用于从数组中添加或删除元素，还能同时进行替换操作。该方法会改变原数组，并返回一个包含被删除元素的数组。如果没有删除任何元素，则返回一个空数组。

slice() 方法用于从一个数组中提取出指定范围的元素，并返回一个新的数组，而不会对原数组进行修改。

const originalArray = [1, 2, 3];

// 1. push() 方法
// 语法: array.push(element1, ..., elementN);
// 示例
const pushArray = [...originalArray];
const newLength = pushArray.push(4, 5);
console.log("push() 方法操作后数组:", pushArray); // 输出: [1, 2, 3, 4, 5]
console.log("push() 方法返回的新数组长度:", newLength); // 输出: 5

// 2. unshift() 方法
// 语法: array.unshift(element1, ..., elementN);
// 示例
const unshiftArray = [...originalArray];
const newLength2 = unshiftArray.unshift(0, -1);
console.log("unshift() 方法操作后数组:", unshiftArray); // 输出: [0, -1, 1, 2, 3]
console.log("unshift() 方法返回的新数组长度:", newLength2); // 输出: 5

// 3. pop() 方法
// 语法: array.pop();
// 示例
const popArray = [...originalArray];
const removedElement = popArray.pop();
console.log("pop() 方法操作后数组:", popArray); // 输出: [1, 2]
console.log("pop() 方法移除的元素:", removedElement); // 输出: 3

// 4. shift() 方法
// 语法: array.shift();
// 示例
const shiftArray = [...originalArray];
const removedElement2 = shiftArray.shift();
console.log("shift() 方法操作后数组:", shiftArray); // 输出: [2, 3]
console.log("shift() 方法移除的元素:", removedElement2); // 输出: 1

// 5. splice() 方法
// 语法: array.splice(start, deleteCount, item1, item2, ...);
// 示例
const spliceArray = [...originalArray];
const removedElements = spliceArray.splice(1, 1, 4, 5);
console.log("splice() 方法操作后数组:", spliceArray); // 输出: [1, 4, 5, 3]
console.log("splice() 方法移除的元素:", removedElements); // 输出: [2]

// 6. slice() 方法
// 语法: array.slice([begin[, end]]);
// 示例
const sliceArray = [...originalArray];
const newArray = sliceArray.slice(1, 2);
console.log("slice() 方法操作后原数组:", sliceArray); // 输出: [1, 2, 3]  原数组未改变
console.log("slice() 方法提取的新数组:", newArray); // 输出: [2]

④可嵌套：数组的一个强大的特性是，它可以包含其他数组，甚至完全由其他数组组成。数组中的数组还可以再包含其他数组，即可以嵌套任意多层数组。 通过这种方式，数组可以很快成为非常复杂的数据结构，称为多维（multi-dimensional）数组，或嵌套（nested）数组。

// 第 1 层：最外层数组
const Array = [
    // 第 2 层：第一个子数组
    [
        // 第 3 层：子数组中的子数组
        [
            // 第 4 层：更深入的子数组
            [
                // 第 5 层：继续嵌套的子数组
                [
                    // 第 6 层：再次嵌套的子数组
                    [
                        // 第 7 层：又一层子数组
                        [
                            // 第 8 层：最内层数组，包含具体元素
                            1, 2, 3
                        ]
                    ]
                ]
            ]
        ]
    ]
];

// 访问第 8 层的元素
const element = Array[0][0][0][0][0][0][0][0];
console.log(element); 

2、操作：

①展开运算符：

展开运算符（Spread Operator）是 ES6（ECMAScript 2015）引入的一个强大特性，它允许你将一个数组 “展开” 为其单独的元素。展开运算符可以在多个场景中使用，比如在函数调用时传递数组元素作为单独的参数、合并多个数组、复制数组等。它提供了一种简洁且直观的方式来处理数组元素，避免了使用传统的循环或 apply 方法来实现类似功能。

语法：数组展开运算符使用三个连续的点（...）来表示，将其放在数组前面即可将数组展开。

let array1=[1,2,3,4,5,6];
let array2=[...array1,7,8,9,10];
console.log(array2);//array2的元素就是1,2,3,4,5,6,7,8,9,10

②元素索引查找方法：

由于数组随时都可以修改或发生 mutated，我们很难保证某个数据始终处于数组中的特定位置，甚至不能保证该元素是否还存在于该数组中。而indexOf()这个方法让我们可以方便地检查某个元素是否存在于数组中。 indexOf() 方法接受一个元素作为输入参数，并返回该元素在数组中的位置（索引）；若该元素不存在于数组中则返回 -1。

const numbers = [10, 20, 30, 20];
const firstIndex = numbers.indexOf(20);
const randomIndex = numbers.indexOf(40);
console.log(firstIndex); //结果是1
console.log(randomIndex);//结果是-1

二、对象

对象本质上是键值对的集合。 或者说，一系列被映射到唯一标识符的数据就是对象；习惯上，唯一标识符叫做属性（property）或者键（key）；数据叫做值（value）。

1、特点：

①键值对集合可变：对象以键值对的形式来组织数据，其中键（属性名）通常是字符串，而值可以是任意数据类型，像数字、字符串、布尔值、数组、函数，甚至还能是其他对象，并且可以随时改变元素的类型与值。

// 定义一个名为 Object 的常量对象
const Object = {
    // 定义属性 property1，其值为字符串 'value1'
    property1: 'value1',
    // 定义属性 property2，其值为数字 42
    property2: 42,
    // 定义属性 property3，其值为布尔值 true
    property3: true,
    // 定义属性 property4，其值为包含数字 1、2、3 的数组
    property4: [1, 2, 3],
    // 定义属性 property5，其值为一个嵌套对象
    property5: { 
        // 嵌套对象中的属性 subProperty，其值为字符串 'nested value'
        subProperty: 'nested value' 
    },
    // 定义属性 property6，其值为一个函数，这个函数就是对象的方法
    property6: function() {
        // 该方法返回字符串 'This is a method'
        return 'This is a method';
    }
};

②属性名访问：对象的属性名访问主要有点号（.）表示法、方括号（[]）表示法

点号表示法：当属性名是一个合法的标识符（由字母、数字、下划线或美元符号组成，且不能以数字开头），并且你能在代码中直接写出属性名时，适合使用点号表示法。

方括号表示法：适用于属性名包含特殊字符（如空格、连字符等）；属性名需要动态确定，通过变量或表达式来表示。

// 创建一个名为 person 的对象
const person = {
    // 定义属性 name，值为 'John'
    name: 'John',
    // 定义属性 'age - in - years'，值为 30，属性名包含特殊字符
    'age - in - years': 30
};

// 使用点号表示法访问 name 属性
console.log(person.name); 

// 使用方括号表示法访问包含特殊字符的 'age - in - years' 属性
console.log(person['age - in - years']); 

2、操作：

①删除操作符：

delete 是一个操作符，主要用于从对象中移除指定的属性。

delete object.property;
delete object['property'];

②检查特定属性存在性：

hasOwnProperty()可用于判断对象是否包含某个属性：

object.hasOwnProperty(prop);

如果对象 object 自身拥有名为 prop 的属性，则返回 true；若该属性是从原型链继承而来或者根本不存在，则返回 false。

而in 关键字用于判断一个属性是否存在于某个对象或其原型链：

prop in object;

如果属性 prop 存在于对象 object 或其原型链中，in 关键字返回 true；否则返回 false。

③遍历：

需要遍历一个对象中的所有键，可以使用 for...in 循环来做这件事。

for (variable in object) {
    // 执行语句
}

variable：在每次迭代中，会被赋值为对象的一个可枚举属性名（字符串类型）。
object：要遍历的对象。
 

④生成由对象的所有属性组成的数组：

Object.keys() 方法传入一个对象作为参数，来生成包含对象所有键的数组。 这个方法将对象作为参数并返回代表对象中每个属性的字符串数组。 需要注意的是，数组中元素的顺序是不确定的。

Object.keys(obj);