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

打印结果如下:

相关推荐
慧一居士30 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead32 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina7 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路8 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_8 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js