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 }
]
*/

打印结果如下:

相关推荐
程序员小白条几秒前
我的第二份实习,学校附近,但是干前端!
java·开发语言·前端·数据结构·算法·职场和发展
编程大全几秒前
2025年前端面试题
前端
萌萌哒草头将军12 分钟前
🔥🔥🔥 NuxtLabs 宣布加入了 Vercel !
前端·javascript·vue.js
LuciferHuang8 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing8 小时前
前端实习总结——案例与大纲
前端·javascript
天天进步20158 小时前
前端工程化:Webpack从入门到精通
前端·webpack·node.js
姑苏洛言9 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手9 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言9 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen10 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang