第 6 天:探索 JavaScript 中的数组和对象
日期:2024 年 12 月 13 日
欢迎来到 JavaScript 之旅的第六天!今天,我们深入研究 JavaScript 中的两个基本数据结构:数组 和 对象。这些结构构成了现代 Web 开发中数据操作的支柱。通过掌握数组和对象,您将解锁有效存储、访问和转换数据的强大方法。
1.什么是数组?
数组是存储在连续内存位置的项目(称为元素)的集合。在 JavaScript 中,数组用途广泛,可以保存混合数据类型。
创建数组
1 2 3 4 5 6 7 8 9 10 | let emptyArray = [];
let fruits = [ "Apple" , "Banana" , "Cherry" ];
console.log(fruits);
let mixedArray = [42, "Hello" , true];
console.log(mixedArray);
|
登录后复制
登录后复制
2.操作数组
添加和删除元素
-
push:将元素添加到末尾。
-
pop:删除最后一个元素。
-
unshift:将元素添加到开头。
-
shift:删除第一个元素。
示例:
1 2 3 4 5 6 7 8 9 10 11 12 | let numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers);
numbers.pop();
console.log(numbers);
numbers.unshift(0);
console.log(numbers);
numbers.shift();
console.log(numbers);
|
登录后复制
登录后复制
3.常用数组方法
map:转换数组中的每个元素。
1 2 3 | let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares);
|
登录后复制
登录后复制
filter:根据条件过滤元素。
1 2 3 | let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults);
|
登录后复制
登录后复制
reduce:将数组缩减为单个值。
1 2 3 | let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum);
|
登录后复制
4.什么是对象?
对象是属性的集合,其中每个属性都是一个键值对。对象非常适合表示具有属性的现实世界实体。
创建对象
1 2 3 4 5 6 7 | let person = {
name: "Arjun" ,
age: 22,
isStudent: true,
};
console.log(person.name);
console.log(person[ "age" ]);
|
登录后复制
5.操纵对象
添加和更新属性
1 2 3 4 5 6 | let car = {
brand: "Tesla" ,
};
car.model = "Model 3" ;
car.brand = "Ford" ;
console.log(car);
|
登录后复制
删除属性
1 2 | delete car.model;
console.log(car);
|
登录后复制
6.常见对象方法
迭代对象
-
Object.keys:返回键数组。
-
Object.values:返回值数组。
-
Object.entries:返回键值对数组。
示例:
1 2 3 4 5 6 7 8 9 10 | let emptyArray = [];
let fruits = [ "Apple" , "Banana" , "Cherry" ];
console.log(fruits);
let mixedArray = [42, "Hello" , true];
console.log(mixedArray);
|
登录后复制
登录后复制
7.数组与对象
功能
数组
对象
标题>
Feature |
Arrays |
Objects |
Storage |
Ordered collection of items. |
Unordered collection of key-value pairs. |
Access |
Index-based (arr[0]). |
Key-based (obj.key). |
Best Use Case |
List of related items. |
Grouping attributes of an entity. |
存储
已订购的物品集合。
键值对的无序集合。
访问
基于索引(arr[0])。
基于键(obj.key)。
最佳用例
相关项目列表。
对实体的属性进行分组。
表>
8.现实世界的例子
1 2 3 4 5 6 7 8 9 10 11 12 | let numbers = [1, 2, 3];
numbers.push(4);
console.log(numbers);
numbers.pop();
console.log(numbers);
numbers.unshift(0);
console.log(numbers);
numbers.shift();
console.log(numbers);
|
登录后复制
登录后复制
示例 1:使用数组的待办事项列表
1 2 3 | let nums = [1, 2, 3, 4];
let squares = nums.map(num => num * num);
console.log(squares);
|
登录后复制
登录后复制
示例 2:使用对象表示人
1 2 3 | let ages = [12, 18, 22, 16];
let adults = ages.filter(age => age >= 18);
console.log(adults);
|
登录后复制
登录后复制
示例 3:组合数组和对象
-
9.要点
-
数组
:用于有序集合;利用映射、过滤和归约等方法进行强大的转换。
-
对象
:用于具有键值对的结构化数据;掌握 Object.keys 和 Object.values 等方法。
组合能力:混合数组和对象来建模和操作复杂数据。
-
第六天练习-
-
创建您最喜欢的电影的数组并动态添加/删除项目。
创建一个对象来表示一本书,具有标题、作者和年份等属性。添加记录书籍详细信息的方法。
对数字数组使用映射和过滤器来获取偶数的平方。
后续步骤
在
第 7 天,我们将重点关注事件和 DOM——为您的 Web 应用程序带来交互性。明天见!
以上是探索 JavaScript 中的数组和对象的详细内容。更多信息请关注PHP中文网其他相关文章!