当前位置:首页 > JavaScript

js实现列表修改

2026-03-16 07:33:20JavaScript

修改数组元素

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

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

使用splice方法

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

js实现列表修改

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]

修改对象数组属性

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

js实现列表修改

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方法实现非破坏性修改:

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

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

相关文章

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js 实现继承

js 实现继承

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

js实现目录

js实现目录

实现目录的基本思路 在JavaScript中实现目录功能通常涉及以下几个核心步骤:解析文档中的标题元素(如h1-h6),动态生成目录结构,并添加交互逻辑(如点击跳转)。以下是具体实现方法: 解析标题…

js 实现滚动

js 实现滚动

实现滚动的方法 使用 window.scrollTo() window.scrollTo() 方法可以滚动到文档中的特定位置。可以指定 x 和 y 坐标,或者使用平滑滚动的选项。 // 滚动到指定位…

js实现下拉刷新

js实现下拉刷新

监听触摸事件 通过监听 touchstart、touchmove 和 touchend 事件来检测用户下拉手势。记录触摸起始位置和移动距离。 let startY = 0; let curr…

vue列表怎么实现

vue列表怎么实现

Vue 列表实现方法 使用 v-for 指令 Vue 中列表渲染主要通过 v-for 指令实现,可以遍历数组或对象。 <template> <ul> <li…