js 数组方法总结

++在 JavaScript 中,数组有许多内置的方法,可以用于操作和处理数组。以下是一些常用的数组方法及其特点:++

  1. push()
  • 用途:向数组末尾添加一个或多个元素

  • 改变原数组:是

  • 返回值:返回数组的新长度

javascript 复制代码
let arr = [1, 2, 3];
arr.push(4); // 输出: 4
console.log(arr)  // 输出: [1, 2, 3, 4]

打印结果如下:

  1. pop()
  • 用途:删除数组末尾的元素

  • 改变原数组:是

  • 返回值:返回被删除的元素

javascript 复制代码
let arr = [1, 2, 3];
let last = arr.pop(); 
console.log("arr", arr)   // 输出: [1, 2]
console.log("last", last) // 输出: 3

打印结果如下:

  1. shift()
  • 用途:删除数组开头的元素

  • 改变原数组:是

  • 返回值:返回被删除的元素

javascript 复制代码
let arr = [1, 2, 3]; 
let first = arr.shift(); 
console.log("arr", arr)     // 输出: [2, 3]
console.log("first", first) // 输出: 1

打印结果如下:

在 JavaScript 中,可以使用 map 方法来遍历一个数组并生成一个包含 id 值的新数组。示例代码:

javascript 复制代码
// 假设原始数组如下
const originalArray = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
];

// 使用 map 方法生成一个新数组,只包含 id 值
const idArray = originalArray.map(item => item.id);

console.log(idArray); // 输出: [1, 2, 3]

打印结果如下:

filter():不会改变原数组
map():不改变原数组,返回新数组
filter() + map(): 只包含满足条件的id值的新数组

javascript 复制代码
// 假设原始数组如下
const originalArray = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 },
    { id: 4, name: 'David', age: 20 }
];

// 使用 filter 方法筛选出年龄大于 25 的元素,然后使用 map 方法提取 id 值
const idArray = originalArray
    .filter(item => item.age > 25) // 筛选条件
    .map(item => item.id); // 提取 id 值

console.log(idArray); // 输出: [2, 3]

打印结果如下:

在 JavaScript 中,如果你想遍历一个数组并生成一个新数组,其中包含另一个数组的索引值,可以使用 map 方法结合 indexOf 方法来实现。以下是一个示例代码:

javascript 复制代码
// 假设原始数组和索引数组如下
const originalArray = ['Alice', 'Bob', 'Charlie'];
const idArray = ['Bob', 'Alice'];

// 使用 map 方法生成一个新数组,包含 idArray 中元素在 originalArray 的索引
const indexArray = idArray.map(id => originalArray.indexOf(id));

console.log(indexArray); // 输出: [1, 0]

打印结果如下:

给满足条件的对象数组中添加属性

javascript 复制代码
// 假设原始数组如下
const originalArray = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 },
    { id: 3, name: 'Charlie', age: 35 },
    { id: 4, name: 'David', age: 20 }
];


//  方式一:遍历数组,给年龄大于 25 的对象添加新属性 isAdult
originalArray.forEach(item => {
    if (item.age > 25) {
        item.isAdult = true; // 添加新属性
    } else {
        item.isAdult = false; // 也可以添加其他值
    }
});
console.log(originalArray);
/*
输出:
[
    { id: 1, name: 'Alice', age: 25, isAdult: false },
    { id: 2, name: 'Bob', age: 30, isAdult: true },
    { id: 3, name: 'Charlie', age: 35, isAdult: true },
    { id: 4, name: 'David', age: 20, isAdult: false }
]
*/

// 方式二
const updatedArray = originalArray.map(item => {
    if (item.age > 25) {
        return { ...item, isAdult: true }; // 添加新属性并返回新对象
    } else {
        return { ...item, isAdult: false }; // 添加新属性并返回新对象
    }
});
console.log(updatedArray); 
/*
输出:
[
    { id: 1, name: 'Alice', age: 25, isAdult: false },
    { id: 2, name: 'Bob', age: 30, isAdult: true },
    { id: 3, name: 'Charlie', age: 35, isAdult: true },
    { id: 4, name: 'David', age: 20, isAdult: false }
]
*/

打印结果如下:

相关推荐
前端 贾公子5 分钟前
tailwind ( uni ) === 自定义主题
前端
独立开阀者_FwtCoder13 分钟前
大制作!在线 CSS 动效 编辑神器!太炫酷了!
前端·javascript·github
白白李媛媛15 分钟前
vue3中实现echarts打印功能
前端·vue.js·echarts
一只卡比兽15 分钟前
全栈Node.js开发:集成第三方AI提供商Token的完整指南
javascript
尘心cx16 分钟前
前端-HTML-day2
前端·html
歘chua18 分钟前
组件封装:封装一个可复用的crud界面的思路
前端
徐小夕19 分钟前
牛!用vue3实现的多维表格编辑器,小白也能轻松构建复杂数据报表!
前端·javascript·vue.js
程十六20 分钟前
工匠指南:从 Vue 3 源码中学习高质量代码的艺术
javascript·vue.js
爱编程的喵21 分钟前
CSS动画实战:从零打造一个超萌的小球亲亲动画
前端·css
zmirror22 分钟前
Webpack5 多页面实践
前端