首页 > web前端 > js教程 > 探索 JavaScript 中的数组和对象

探索 JavaScript 中的数组和对象

Barbara Streisand
发布: 2024-12-21 10:02:09
原创
356 人浏览过

Exploring Arrays and Objects in JavaScript

第 6 天:探索 JavaScript 中的数组和对象

日期:2024 年 12 月 13 日

欢迎来到 JavaScript 之旅的第六天!今天,我们深入研究 JavaScript 中的两个基本数据结构:数组对象。这些结构构成了现代 Web 开发中数据操作的支柱。通过掌握数组和对象,您将解锁有效存储、访问和转换数据的强大方法。


1.什么是数组?

数组是存储在连续内存位置的项目(称为元素)的集合。在 JavaScript 中,数组用途广泛,可以保存混合数据类型。

创建数组

1

2

3

4

5

6

7

8

9

10

// Empty array

let emptyArray = [];

 

// Array with initial elements

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

 

// Mixed data types

let mixedArray = [42, "Hello", true];

console.log(mixedArray); // Output: [42, "Hello", true]

登录后复制
登录后复制

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); // Adds 4 to the end

console.log(numbers); // Output: [1, 2, 3, 4]

 

numbers.pop(); // Removes the last element

console.log(numbers); // Output: [1, 2, 3]

 

numbers.unshift(0); // Adds 0 to the beginning

console.log(numbers); // Output: [0, 1, 2, 3]

 

numbers.shift(); // Removes the first element

console.log(numbers); // Output: [1, 2, 3]

登录后复制
登录后复制

3.常用数组方法

map:转换数组中的每个元素。

1

2

3

let nums = [1, 2, 3, 4];

let squares = nums.map(num => num * num);

console.log(squares); // Output: [1, 4, 9, 16]

登录后复制
登录后复制

filter:根据条件过滤元素。

1

2

3

let ages = [12, 18, 22, 16];

let adults = ages.filter(age => age >= 18);

console.log(adults); // Output: [18, 22]

登录后复制
登录后复制

reduce:将数组缩减为单个值。

1

2

3

let numbers = [1, 2, 3, 4];

let sum = numbers.reduce((acc, curr) => acc + curr, 0);

console.log(sum); // Output: 10

登录后复制

4.什么是对象?

对象是属性的集合,其中每个属性都是一个键值对。对象非常适合表示具有属性的现实世界实体。

创建对象

1

2

3

4

5

6

7

let person = {

  name: "Arjun",

  age: 22,

  isStudent: true,

};

console.log(person.name); // Output: Arjun

console.log(person["age"]); // Output: 22

登录后复制

5.操纵对象

添加和更新属性

1

2

3

4

5

6

let car = {

  brand: "Tesla",

};

car.model = "Model 3"; // Adding a new property

car.brand = "Ford";    // Updating a property

console.log(car); // Output: { brand: "Ford", model: "Model 3" }

登录后复制

删除属性

1

2

delete car.model;

console.log(car); // Output: { brand: "Ford" }

登录后复制

6.常见对象方法

迭代对象

  • Object.keys:返回键数组。
  • Object.values:返回值数组。
  • Object.entries:返回键值对数组。

示例:

1

2

3

4

5

6

7

8

9

10

// Empty array

let emptyArray = [];

 

// Array with initial elements

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits); // Output: ["Apple", "Banana", "Cherry"]

 

// Mixed data types

let mixedArray = [42, "Hello", true];

console.log(mixedArray); // Output: [42, "Hello", true]

登录后复制
登录后复制

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); // Adds 4 to the end

console.log(numbers); // Output: [1, 2, 3, 4]

 

numbers.pop(); // Removes the last element

console.log(numbers); // Output: [1, 2, 3]

 

numbers.unshift(0); // Adds 0 to the beginning

console.log(numbers); // Output: [0, 1, 2, 3]

 

numbers.shift(); // Removes the first element

console.log(numbers); // Output: [1, 2, 3]

登录后复制
登录后复制

示例 1:使用数组的待办事项列表

1

2

3

let nums = [1, 2, 3, 4];

let squares = nums.map(num => num * num);

console.log(squares); // Output: [1, 4, 9, 16]

登录后复制
登录后复制

示例 2:使用对象表示人

1

2

3

let ages = [12, 18, 22, 16];

let adults = ages.filter(age => age >= 18);

console.log(adults); // Output: [18, 22]

登录后复制
登录后复制

示例 3:组合数组和对象

  • 9.要点
  • 数组
  • :用于有序集合;利用映射、过滤和归约等方法进行强大的转换。
  • 对象
  • :用于具有键值对的结构化数据;掌握 Object.keys 和 Object.values 等方法。

组合能力:混合数组和对象来建模和操作复杂数据。

  1. 第六天练习
  2. 创建您最喜欢的电影的数组并动态添加/删除项目。

创建一个对象来表示一本书,具有标题、作者和年份等属性。添加记录书籍详细信息的方法。

对数字数组使用映射和过滤器来获取偶数的平方。

后续步骤

第 7 天,我们将重点关注事件和 DOM——为您的 Web 应用程序带来交互性。明天见!

以上是探索 JavaScript 中的数组和对象的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板