JS篇(Array、Object)

简介: JS篇(Array、Object)

在JavaScript中,数组(Array)和对象(Object)是两种非常基础且强大的数据类型,它们用于存储和操作数据集合。下面我将通过几个代码示例来展示它们的基本用法和高级特性,每个示例将尽量简洁且直接指向主题。

数组(Array)

基本操作

// 创建一个数组
let fruits = ['Apple', 'Banana', 'Cherry'];

// 访问数组元素
console.log(fruits[0]); // 输出: Apple

// 添加元素到数组末尾
fruits.push('Date');

// 删除并返回数组的最后一个元素
let lastFruit = fruits.pop();
console.log(lastFruit); // 输出: Date

// 在数组指定位置添加元素
fruits.splice(1, 0, 'Orange'); // 从索引1开始,删除0个元素,并添加'Orange'

// 遍历数组
fruits.forEach(function(fruit) {
   
    console.log(fruit);
});

// 使用map方法转换数组
let capitalizedFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(capitalizedFruits); // 输出: ['APPLE', 'ORANGE', 'BANANA', 'CHERRY']

数组去重

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

对象(Object)

基本操作

// 创建一个对象
let person = {
   
    firstName: 'John',
    lastName: 'Doe',
    age: 30,
    greet: function() {
   
        console.log(`Hello, my name is ${
     this.firstName} ${
     this.lastName}.`);
    }
};

// 访问对象属性
console.log(person.firstName); // 输出: John

// 修改对象属性
person.age = 31;

// 调用对象方法
person.greet(); // 输出: Hello, my name is John Doe.

// 使用ES6属性简写
let age = 25;
let profile = {
   
    name: 'Jane',
    age // 等同于 age: age
};
console.log(profile); // 输出: { name: 'Jane', age: 25 }

对象遍历

// 使用for...in循环遍历对象属性
for (let key in person) {
   
    if (person.hasOwnProperty(key)) {
   
        console.log(`${
     key}: ${
     person[key]}`);
    }
}

// 使用Object.keys()获取对象所有键的数组
let keys = Object.keys(person);
keys.forEach(key => {
   
    console.log(`${
     key}: ${
     person[key]}`);
});

// 使用Object.values()获取对象所有值的数组
let values = Object.values(person);
values.forEach(value => {
   
    console.log(value);
});

// 使用Object.entries()获取对象所有键值对的数组
let entries = Object.entries(person);
entries.forEach(([key, value]) => {
   
    console.log(`${
     key}: ${
     value}`);
});

总结

JavaScript中的数组和对象提供了丰富的内置方法和属性,允许开发者以灵活的方式处理数据集合。数组主要用于存储和操作有序的数据列表,而对象则更适合存储和操作具有命名属性的数据集合。通过上面的示例,我们学习了数组和对象的基本操作、遍历方法,以及如何处理一些常见的任务,如数组去重和对象属性的动态访问与修改。这些基础知识是深入JavaScript编程的关键。

目录
相关文章
|
5天前
|
存储 JavaScript 前端开发
JavaScript Array
【10月更文挑战第06天】
32 15
|
6天前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
14 3
|
23天前
|
JavaScript 前端开发
JavaScript Array map() 方法
JavaScript Array map() 方法
|
2月前
|
JavaScript 算法 前端开发
JS算法必备之Array常用操作方法
这篇文章详细介绍了JavaScript中数组的创建、检测、转换、排序、操作方法以及迭代方法等,提供了数组操作的全面指南。
JS算法必备之Array常用操作方法
|
2天前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
2月前
|
JavaScript 前端开发 开发者
|
2月前
|
存储 关系型数据库 MySQL
|
2月前
|
JavaScript 前端开发 开发者
Vue.js 响应式变革来袭!结合热点技术,探索从 Object.defineProperty 到 Proxy 的奇妙之旅,触动你的心
【8月更文挑战第30天】在 Vue.js 中,响应式系统自动追踪并更新数据变化,极大提升了开发体验。早期通过 `Object.defineProperty` 实现,但存在对新旧属性处理及数组操作的局限。Vue 3.0 引入了 `Proxy`,克服了上述限制,提供了更强大的功能和更好的性能。实践中,可根据项目需求选择合适的技术方案,并优化数据操作,利用懒加载等方式提升性能。
34 0
|
3月前
|
JavaScript API 索引
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
JS【详解】Set 集合 (含 Set 集合和 Array 数组的区别,Set 的 API,Set 与 Array 的性能对比,Set 的应用场景)
51 0
|
3月前
|
JSON JavaScript API
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
JS【详解】Map (含Map 和 Object 的区别,Map 的常用 API,Map与Object 的性能对比,Map 的应用场景和不适合的使用场景)
58 0