js 数组方法总结

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

1. push()

- 用途：向数组末尾添加一个或多个元素

- 改变原数组：是

- 返回值：返回数组的新长度

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

打印结果如下：

2. pop()

- 用途：删除数组末尾的元素

- 改变原数组：是

- 返回值：返回被删除的元素

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

打印结果如下：

3. shift()

- 用途：删除数组开头的元素

- 改变原数组：是

- 返回值：返回被删除的元素

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

打印结果如下：

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

// 假设原始数组如下
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值的新数组

// 假设原始数组如下
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 方法来实现。以下是一个示例代码：

// 假设原始数组和索引数组如下
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]

打印结果如下：

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

// 假设原始数组如下
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 }
]
*/

打印结果如下：