JavaScript数组与对象的基本操作

JavaScript 数组的基本操作

创建数组

在 JavaScript 中，创建数组有两种常见的方式：使用数组字面量和 new Array() 构造函数。

使用数组字面量：数组字面量是一种简洁的创建数组的方式，使用方括号 [] 来定义数组。例如：
```
let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits); // 输出: ['apple', 'banana', 'cherry']
```
数组字面量可以在创建数组时同时初始化数组元素。数组元素可以是任何数据类型，包括数字、字符串、布尔值、对象甚至其他数组。例如：
```
let mixedArray = [10, 'hello', true, {name: 'John'}, [1, 2, 3]];
console.log(mixedArray); 
```
使用 new Array() 构造函数： new Array() 构造函数也可以用来创建数组。如果只传递一个参数，且该参数是数字类型，那么它会创建一个指定长度的空数组。例如：
```
let emptyArray = new Array(5);
console.log(emptyArray.length); // 输出: 5
console.log(emptyArray); // 输出: [empty × 5]
```
如果传递多个参数，它会创建一个包含这些参数作为元素的数组。例如：
```
let numbers = new Array(1, 2, 3);
console.log(numbers); // 输出: [1, 2, 3]
```
不过，通常建议使用数组字面量，因为它更简洁，而且在大多数情况下性能更好。

访问数组元素

数组元素可以通过索引来访问，数组的索引从 0 开始。例如：

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[0]); // 输出: 'apple'
console.log(fruits[1]); // 输出: 'banana'
console.log(fruits[2]); // 输出: 'cherry'

如果访问一个不存在的索引，JavaScript 不会报错，而是返回 undefined。例如：

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits[3]); // 输出: undefined

修改数组元素

可以通过索引来修改数组中的元素。例如：

let fruits = ['apple', 'banana', 'cherry'];
fruits[1] = 'orange';
console.log(fruits); // 输出: ['apple', 'orange', 'cherry']

数组长度

可以通过 length 属性获取数组的长度。例如：

let fruits = ['apple', 'banana', 'cherry'];
console.log(fruits.length); // 输出: 3

length 属性是可写的。如果设置 length 属性的值小于当前数组的长度，数组会被截断。例如：

let fruits = ['apple', 'banana', 'cherry'];
fruits.length = 2;
console.log(fruits); // 输出: ['apple', 'banana']

如果设置 length 属性的值大于当前数组的长度，数组会增加长度，新增的元素为 undefined。例如：

let fruits = ['apple', 'banana', 'cherry'];
fruits.length = 5;
console.log(fruits); // 输出: ['apple', 'banana', 'cherry', undefined, undefined]

添加和删除数组元素

1. 在数组末尾添加元素

可以使用 push() 方法在数组末尾添加一个或多个元素。push() 方法会修改原数组，并返回新的数组长度。例如：

let fruits = ['apple', 'banana'];
let newLength = fruits.push('cherry');
console.log(fruits); // 输出: ['apple', 'banana', 'cherry']
console.log(newLength); // 输出: 3

2. 在数组开头添加元素

unshift() 方法用于在数组开头添加一个或多个元素。它也会修改原数组，并返回新的数组长度。例如：

let fruits = ['banana', 'cherry'];
let newLength = fruits.unshift('apple');
console.log(fruits); // 输出: ['apple', 'banana', 'cherry']
console.log(newLength); // 输出: 3

3. 删除数组末尾的元素

pop() 方法用于删除数组的最后一个元素，并返回被删除的元素。它会修改原数组。例如：

let fruits = ['apple', 'banana', 'cherry'];
let removed = fruits.pop();
console.log(fruits); // 输出: ['apple', 'banana']
console.log(removed); // 输出: 'cherry'

4. 删除数组开头的元素

shift() 方法用于删除数组的第一个元素，并返回被删除的元素。它会修改原数组。例如：

let fruits = ['apple', 'banana', 'cherry'];
let removed = fruits.shift();
console.log(fruits); // 输出: ['banana', 'cherry']
console.log(removed); // 输出: 'apple'

5. 删除和插入数组元素（通用方法）

splice() 方法是一个非常强大的方法，可以用于删除、插入和替换数组元素。它会修改原数组。

删除元素： splice(start, deleteCount)，start 是开始删除的索引位置，deleteCount 是要删除的元素个数。例如：

let fruits = ['apple', 'banana', 'cherry', 'date'];
let removed = fruits.splice(1, 2);
console.log(fruits); // 输出: ['apple', 'date']
console.log(removed); // 输出: ['banana', 'cherry']

插入元素： splice(start, 0, item1, item2, ...)，start 是插入的索引位置，0 表示不删除元素，后面跟着要插入的元素。例如：
```
let fruits = ['apple', 'date'];
fruits.splice(1, 0, 'banana', 'cherry');
console.log(fruits); // 输出: ['apple', 'banana', 'cherry', 'date']
```
替换元素： splice(start, deleteCount, item1, item2, ...)，start 是开始替换的索引位置，deleteCount 是要删除的元素个数，后面跟着要替换的元素。例如：
```
let fruits = ['apple', 'banana', 'cherry', 'date'];
fruits.splice(1, 2, 'grape', 'kiwi');
console.log(fruits); // 输出: ['apple', 'grape', 'kiwi', 'date']
```

数组遍历

在 JavaScript 中，有多种方式可以遍历数组。

1. `for` 循环

for 循环是最基本的遍历数组的方式。例如：

let fruits = ['apple', 'banana', 'cherry'];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// 输出:
// apple
// banana
// cherry

2. `for...of` 循环

for...of 循环是 ES6 引入的一种更简洁的遍历可迭代对象（包括数组）的方式。例如：

let fruits = ['apple', 'banana', 'cherry'];
for (let fruit of fruits) {
    console.log(fruit);
}
// 输出:
// apple
// banana
// cherry

for...of 循环直接迭代数组的元素，而不是索引。

3. `forEach()` 方法

forEach() 方法用于对数组的每个元素执行一次提供的函数。例如：

let fruits = ['apple', 'banana', 'cherry'];
fruits.forEach((fruit, index) => {
    console.log(`Index ${index}: ${fruit}`);
});
// 输出:
// Index 0: apple
// Index 1: banana
// Index 2: cherry

forEach() 方法接受一个回调函数作为参数，回调函数可以接受三个参数：当前元素、当前元素的索引和数组本身。

4. `map()` 方法

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。例如：

let numbers = [1, 2, 3];
let squaredNumbers = numbers.map((number) => number * number);
console.log(squaredNumbers); // 输出: [1, 4, 9]

map() 方法不会修改原数组，而是返回一个新数组。

5. `filter()` 方法

filter() 方法创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。例如：

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

filter() 方法同样不会修改原数组，而是返回一个符合条件的新数组。

6. `reduce()` 方法

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。例如，计算数组元素的总和：

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((acc, number) => acc + number, 0);
console.log(sum); // 输出: 15

reduce() 方法接受两个参数：reducer 函数和初始值。reducer 函数接受四个参数：累加器 acc、当前值 number、当前索引和数组本身。在这个例子中，初始值 0 作为累加器的初始值。

数组排序

JavaScript 提供了几种对数组进行排序的方法。

1. `sort()` 方法

sort() 方法对数组的元素进行排序，并返回排序后的数组。默认情况下，sort() 方法将元素转换为字符串，并根据字符串的 Unicode 码点进行排序。例如：

let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort();
console.log(numbers); // 输出: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

如果要按照数字大小进行排序，可以提供一个比较函数。比较函数接受两个参数 a 和 b，如果 a 应该在 b 之前，返回一个负数；如果 a 和 b 相等，返回 0；如果 a 应该在 b 之后，返回一个正数。例如：

let numbers = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5];
numbers.sort((a, b) => a - b);
console.log(numbers); // 输出: [1, 1, 2, 3, 3, 4, 5, 5, 5, 6, 9]

2. `reverse()` 方法

reverse() 方法用于颠倒数组中元素的顺序。例如：

let numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); // 输出: [5, 4, 3, 2, 1]

reverse() 方法会修改原数组。

JavaScript 对象的基本操作

创建对象

在 JavaScript 中，创建对象有几种常见的方式。

1. 使用对象字面量

对象字面量是一种简洁的创建对象的方式，使用花括号 {} 来定义对象。例如：

let person = {
    name: 'John',
    age: 30,
    profession: 'Engineer'
};
console.log(person);

对象字面量可以在创建对象时同时定义属性和方法。属性是对象的键值对，键通常是字符串，值可以是任何数据类型。例如：

let car = {
    brand: 'Toyota',
    model: 'Corolla',
    year: 2020,
    start: function() {
        console.log('The car has started.');
    }
};
car.start(); // 输出: The car has started.

2. 使用 `new Object()` 构造函数

new Object() 构造函数也可以用来创建对象。例如：

let person = new Object();
person.name = 'Jane';
person.age = 25;
console.log(person);

不过，通常建议使用对象字面量，因为它更简洁。

3. 使用构造函数

构造函数是一种特殊的函数，用于创建对象。构造函数的命名通常以大写字母开头。例如：

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
    };
}
let john = new Person('John', 30);
john.sayHello(); // 输出: Hello, my name is John and I'm 30 years old.

在构造函数内部，this 关键字指向新创建的对象。使用 new 关键字调用构造函数时，会创建一个新对象，并将构造函数的 this 绑定到该新对象上。

4. 使用 `Object.create()` 方法

Object.create() 方法创建一个新对象，使用现有的对象来提供新创建对象的 __proto__。例如：

let animal = {
    speak: function() {
        console.log('I can speak.');
    }
};
let dog = Object.create(animal);
dog.name = 'Buddy';
dog.speak(); // 输出: I can speak.

这里，dog 对象继承了 animal 对象的 speak 方法。

访问对象属性

可以使用点表示法或方括号表示法来访问对象的属性。

1. 点表示法

点表示法是最常用的访问对象属性的方式。例如：

let person = {
    name: 'John',
    age: 30
};
console.log(person.name); // 输出: 'John'
console.log(person.age); // 输出: 30

2. 方括号表示法

方括号表示法可以用于访问属性名包含特殊字符或变量的属性。例如：

let person = {
    'first - name': 'John',
    age: 30
};
console.log(person['first - name']); // 输出: 'John'

let propertyName = 'age';
console.log(person[propertyName]); // 输出: 30

修改对象属性

可以通过点表示法或方括号表示法来修改对象的属性。例如：

let person = {
    name: 'John',
    age: 30
};
person.age = 31;
console.log(person.age); // 输出: 31

person['name'] = 'Jane';
console.log(person.name); // 输出: 'Jane'

添加和删除对象属性

1. 添加属性

可以通过直接给对象添加新的属性来添加属性。例如：

let person = {
    name: 'John',
    age: 30
};
person.profession = 'Engineer';
console.log(person);

2. 删除属性

使用 delete 操作符可以删除对象的属性。例如：

let person = {
    name: 'John',
    age: 30,
    profession: 'Engineer'
};
delete person.profession;
console.log(person);

对象遍历

在 JavaScript 中，有多种方式可以遍历对象的属性。

1. `for...in` 循环

for...in 循环用于遍历对象的可枚举属性（包括从原型链继承的可枚举属性）。例如：

let person = {
    name: 'John',
    age: 30,
    profession: 'Engineer'
};
for (let property in person) {
    console.log(`${property}: ${person[property]}`);
}
// 输出:
// name: John
// age: 30
// profession: Engineer

2. `Object.keys()` 和 `Object.values()`

Object.keys() 方法返回一个由对象的自身可枚举属性名组成的数组。例如：

let person = {
    name: 'John',
    age: 30,
    profession: 'Engineer'
};
let keys = Object.keys(person);
console.log(keys); // 输出: ['name', 'age', 'profession']

Object.values() 方法返回一个由对象的自身可枚举属性值组成的数组。例如：

let person = {
    name: 'John',
    age: 30,
    profession: 'Engineer'
};
let values = Object.values(person);
console.log(values); // 输出: ['John', 30, 'Engineer']

3. `Object.entries()`

Object.entries() 方法返回一个由对象的自身可枚举属性键值对组成的数组。例如：

let person = {
    name: 'John',
    age: 30,
    profession: 'Engineer'
};
let entries = Object.entries(person);
console.log(entries); 
// 输出: [['name', 'John'], ['age', 30], ['profession', 'Engineer']]

可以使用 for...of 循环来遍历 Object.entries() 返回的数组：

let person = {
    name: 'John',
    age: 30,
    profession: 'Engineer'
};
for (let [key, value] of Object.entries(person)) {
    console.log(`${key}: ${value}`);
}
// 输出:
// name: John
// age: 30
// profession: Engineer

对象方法

JavaScript 的 Object 原型对象提供了一些有用的方法。

1. `Object.assign()`

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它返回目标对象。例如：

let target = { a: 1 };
let source1 = { b: 2 };
let source2 = { c: 3 };
Object.assign(target, source1, source2);
console.log(target); // 输出: { a: 1, b: 2, c: 3 }

2. `Object.freeze()`

Object.freeze() 方法冻结一个对象，冻结后的对象不能再添加新属性，不能修改已有属性的值，不能删除已有属性，也不能修改对象的原型。例如：

let obj = {
    name: 'John'
};
Object.freeze(obj);
obj.name = 'Jane'; // 尝试修改属性值
obj.age = 30; // 尝试添加新属性
delete obj.name; // 尝试删除属性
console.log(obj); // 输出: { name: 'John' }，修改、添加和删除操作都无效

3. `Object.seal()`

Object.seal() 方法封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置。当前属性的值仍然可以修改。例如：

let obj = {
    name: 'John'
};
Object.seal(obj);
obj.name = 'Jane'; // 可以修改属性值
obj.age = 30; // 尝试添加新属性无效
delete obj.name; // 尝试删除属性无效
console.log(obj); // 输出: { name: 'Jane' }

通过以上对 JavaScript 数组与对象基本操作的详细介绍，希望能帮助您更好地理解和运用这两种重要的数据结构。在实际开发中，根据具体需求合理选择和使用数组与对象的操作方法，能够提高代码的效率和可读性。