js 数组方法总结

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

1. push()

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

- 改变原数组:是

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

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

打印结果如下:

d1510a8873fe4f808b7997697fe6834d.png

2. pop()

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

 - 改变原数组:是

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

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

打印结果如下:

10fbe87a17054443bed8ec8c4b498f7e.png

3. shift()

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

- 改变原数组:是

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

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

打印结果如下:

5c844e0652c945b1b5605d67c1a650fc.png

在 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]

打印结果如下:

45ed3522753a4c1db91020eeb7cbd49c.png

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]

打印结果如下:

2c1c8986af1f45209090afa87542a1aa.png

在 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]

打印结果如下:

17a29f2a05fa467e8c3d56d915037c82.png

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

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

打印结果如下:

78924265cd974b99b9a8d95cf8901539.png