当前位置:首页 > JavaScript

js实现列表修改

2026-03-16 07:33:20JavaScript

修改数组元素

使用索引直接赋值修改数组中的元素:

let arr = [1, 2, 3];
arr[1] = 4; // 修改第二个元素
console.log(arr); // [1, 4, 3]

使用splice方法

splice方法可以删除、替换或添加元素:

let fruits = ['apple', 'banana', 'cherry'];
// 从索引1开始删除1个元素并插入'orange'
fruits.splice(1, 1, 'orange'); 
console.log(fruits); // ['apple', 'orange', 'cherry']

使用map创建新数组

通过map方法返回新数组而不修改原数组:

let numbers = [1, 2, 3];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

修改对象数组属性

当数组元素是对象时,可以修改对象属性:

let users = [{name: 'Alice'}, {name: 'Bob'}];
users[1].name = 'Charlie';
console.log(users); // [{name: 'Alice'}, {name: 'Charlie'}]

使用fill方法批量修改

fill方法用静态值填充数组中指定范围的元素:

let arr = [1, 2, 3, 4];
arr.fill(0, 1, 3); // 从索引1到3填充0
console.log(arr); // [1, 0, 0, 4]

使用扩展运算符修改

结合扩展运算符和slice方法实现非破坏性修改:

js实现列表修改

let colors = ['red', 'green', 'blue'];
let newColors = [...colors.slice(0, 1), 'yellow', ...colors.slice(2)];
console.log(newColors); // ['red', 'yellow', 'blue']

标签: 列表js
分享给朋友:

相关文章

js实现继承

js实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例可以访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

h5 实现列表

h5 实现列表

列表实现方法 在HTML5中,可以通过多种方式实现列表,包括无序列表、有序列表和自定义列表。以下是具体的实现方法。 无序列表 无序列表使用<ul>标签,列表项使用<li>标签…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

vue实现功能列表

vue实现功能列表

Vue 实现功能列表的方法 在 Vue 中实现功能列表通常涉及数据绑定、列表渲染、事件处理和状态管理。以下是几种常见的方法: 数据驱动列表渲染 使用 v-for 指令可以轻松实现列表渲染。假设有一个…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…