JS数组方法总结

1.改变原数组的方法

1. unshift方法，指定元素添加到数组的开头，返回值：数组的新长度

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// Expected output: 5

console.log(array1);
// Expected output: Array [4, 5, 1, 2, 3]

2. push() 方法，指定元素添加到数组的末尾。返回值：新的数组长度

const animals = ['pigs', 'goats', 'sheep'];

const count = animals.push('cows');
console.log(count);
// Expected output: 4
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows"]

animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]

3.  pop() 方法。数组中删除最后一个元素，返回值：返回删除的元素。

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// Expected output: "tomato"

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();

console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage"]

4. shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

const array1 = [1, 2, 3];

const firstElement = array1.shift();

console.log(array1);
// Expected output: Array [2, 3]

console.log(firstElement);
// Expected output: 1

5. reverse() 方法反转数组中的元素，并返回同一数组的引用。

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// Expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// Expected output: "reversed:" Array ["three", "two", "one"]

// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// Expected output: "array1:" Array ["three", "two", "one"]

如果你希望 reverse() 不改变原始数组，但返回一个浅拷贝数组，就像其他数组方法（例如 map()）一样，使用 toReversed() 方法。或者，你可以在调用 reverse() 之前做一个浅拷贝，使用展开语法或 Array.from()。

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
//  ["one", "two", "three"]

const reversed = [...array1].reverse();
console.log('reversed:', reversed);
//  ["three", "two", "one"]


console.log('array1:', array1);
//未改变原数组 [ 'one', 'two', 'three' ]

6. splice() 方法通过移除或者替换已存在的元素和/或添加新元素就地改变一个数组的内容。返回值：一个包含了删除的元素的数组。

splice(start, deleteCount, item1, item2, itemN)

7. sort() 方法就地对数组的元素进行排序，并返回对相同数组的引用

const items = [
    { name: "Edward", value: 21 },
    { name: "Sharpe", value: 37 },
    { name: "And", value: 45 },
    { name: "The", value: -12 },
    { name: "Magnetic", value: 13 },
    { name: "Zeros", value: 37 },
];

// 根据 value 排序
items.sort((a, b) => a.value - b.value);
console.log("🚀 ~ items:", items)


[
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 13 },
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'Zeros', value: 37 },
  { name: 'And', value: 45 }
]

2.未改变原数组的方法

 1.slice() 返回一个新的数组，包头不包尾

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

2.some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。

const array = [1, 2, 3, 4, 5];

// Checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// Expected output: true

3. map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

const arr1 = [{
    name: '张三',
    age: 18
},
{
    name: '李四',
    age: 20
}]
const newArr1 = arr1.map(item => (item.age))
console.log(newArr1)
//  [ 18, 20 ]


const newArr2 = arr1.map(item => {
    return {
        ...item,
        gender: '女'
    }
})
console.log(newArr2)
// [
//     { name: '张三', age: 18, gender: '女' },
//     { name: '李四', age: 20, gender: '女' }
// ]
const newArr3 = arr1.map(item => {
    return {
        label: item.name,
        value: item.age
    }
})
console.log(newArr3)
// [ { label: '张三', value: 18 }, { label: '李四', value: 20 } ]

4. indexOf() 方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// Expected output: 1

// Start from index 2
console.log(beasts.indexOf('bison', 2));
// Expected output: 4

console.log(beasts.indexOf('giraffe'));
// Expected output: -1