数组与对象的元素添加

news/2025/2/24 9:29:48

一、向数组添加元素

1. push () 方法

push() 方法用于在数组的末尾添加一个或多个元素,并返回数组的新长度。它直接修改原数组。

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

 

2. unshift () 方法

unshift() 方法与 push() 相反,它是在数组的开头添加一个或多个元素,并返回数组的新长度,同样会修改原数组。

javascript">let numbers = [1, 2, 3];
let newLength = numbers.unshift(0);
console.log(numbers); // 输出: [0, 1, 2, 3]
console.log(newLength); // 输出: 4

 

3. splice () 方法

splice() 方法功能更为强大,它可以用于在数组中添加、删除或替换元素。向数组添加元素时,需要传递至少两个参数:第一个参数是要插入元素的位置,第二个参数是 0(表示不删除任何元素,只进行添加操作),后续参数就是要添加的元素。

javascript">let animals = ['dog', 'cat'];
animals.splice(1, 0, 'bird');
console.log(animals); // 输出: ['dog', 'bird', 'cat']

4. concat () 方法

concat() 方法用于合并两个或多个数组,它会返回一个新数组,而不修改原数组。如果要将新元素添加到数组末尾,可以将新元素以数组形式作为参数传入。

javascript">let colors = ['red', 'blue'];
let newColors = colors.concat(['green']);
console.log(colors); // 输出: ['red', 'blue']
console.log(newColors); // 输出: ['red', 'blue', 'green']

二、向对象添加属性(对象元素添加本质是添加属性)

1. 点表示法

使用点表示法可以直接向对象添加新属性。

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

 

2. 方括号表示法

方括号表示法更为灵活,尤其适用于属性名是变量的情况。

javascript">let person = { name: 'John' };
let newProperty = 'age';
person[newProperty] = 30;
console.log(person); // 输出: { name: 'John', age: 30 }


3. Object.assign () 方法

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,它也可以用于向对象添加新属性。不过需要注意的是,它会直接修改目标对象,并返回目标对象。

javascript">let person = { name: 'John' };
let newAttributes = { age: 30, city: 'New York' };
Object.assign(person, newAttributes);
console.log(person); // 输出: { name: 'John', age: 30, city: 'New York' }

三、实际应用场景

数组添加元素的应用

在构建动态列表时,比如一个待办事项列表,用户每添加一个新的待办事项,就可以使用 push() 方法将新事项添加到存储待办事项的数组中。又或者在分页加载数据时,将新获取的数据通过 concat() 方法添加到已有的数据数组中,实现数据的动态更新。

对象添加属性的应用

在用户信息管理系统中,当获取到用户的新信息,如用户的邮箱、电话号码等,就可以使用点表示法或方括号表示法向存储用户信息的对象中添加新属性,从而完整地记录用户信息。


http://www.niftyadmin.cn/n/5864181.html

相关文章

Flutter: TextEditingValue的实现

文章目录 TextEditingValue一、fromJSON二、text、selection、composing、empty三、isComposingRangeValid四、replaced TextEditingValue /// The current text, selection, and composing state for editing a run of text. immutable class TextEditingValue {const TextEd…

C++——模版(二)

前言 我们前面讲过模版的一,不知道大家还有没有所印象,如果大家不太能回忆起来可以再去前面看一下,那通过我们讲解了几个容器之后,相信大家现在应该已经对模版很熟悉了,那模版还剩下一些其他的内容我们就在这里进行讲…

vllm部署LLM(qwen2.5,llama,deepseek)

目录 环境 qwen2.5-1.5b-instruct 模型下载 vllm 安装 验证安装 vllm 启动 查看当前模型列表 OpenAI Completions API(文本生成) OpenAI Chat Completions API(chat 对话) vllm 进程查看,kill llama3 deep…

2025年- G15-Lc89-383.赎金记录-java版

1.题目描述 给定两个字符串 ransomNote 和 magazine,如果 ransomNote 可以通过使用 magazine 中的字母构造出来,返回 true,否则返回 false。 magazine 中的每个字母只能使用一次。 示例 1: 输入:ransomNote “a”, …

Element UI日期选择器默认显示1970年解决方案

目录 问题背景 问题根源 1. 数据绑定类型错误 2. 初始化逻辑错误 解决方案 核心思路 步骤 1:正确初始化日期对象 步骤 2:处理数据交互 步骤 3:处理年份切换事件 完整代码示例 注意事项 1. 时区问题 2. 格式化绑定值 常见问题 1. 为什…

C++之旅-C++11的深度剖析(1)

目录 前言/背景 1.C11的发展历史 2.列表初始化 2.1 C98传统的{} 2.2 C11中的{} 2.3 C11中的std::initializer_list 3.右值引用 3.1 左值和右值 3.2 左值引用和右值引用 3.3 引用延长生命周期 3.4 左值和右值的参数匹配 结束语 前言/背景 随着现代软件开发的快速发展…

改进A*算法并用于城市无人机路径规划

独家原创!改进A*算法进行城市无人机路径规划,考虑碰撞,飞行高度等优化启发式搜索。所有指标超过A*和A算法!附有完整的文档说明 算法设计、毕业设计、期刊专利!感兴趣可以联系我。 🏆代码获取方式1&#xff…

UE_C++ —— Logging in Unreal

目录 一,UE_LOG Log Verbosity Console Commands Logging Fundamental Data Types Define Your Own Log Category 二,UE_LOGFMT On-screen debug messages 日志是一种非常实用的调试工具,可以详细说明代码当前的执行逻辑;可…