js 数组各种常见的操作

JavaScript 中的数组提供了多种操作方法，以下是一些常见的数组操作示例：

1创建数组
javascript
   const numbers = [1, 2, 3, 4, 5];
2访问数组元素
javascript
   console.log(numbers[0]); // 输出: 1
3修改数组元素
javascript
   numbers[0] = 10;
4数组长度
javascript
   console.log(numbers.length); // 输出: 5
5添加元素
push: 在数组末尾添加元素
javascript
     numbers.push(6); // 数组现在是 [10, 2, 3, 4, 5, 6]
unshift: 在数组开头添加元素
javascript
     numbers.unshift(0); // 数组现在是 [0, 10, 2, 3, 4, 5, 6]
6删除元素
pop: 移除并返回数组的最后一个元素
javascript
     console.log(numbers.pop()); // 输出: 6, 数组现在是 [0, 10, 2, 3, 4, 5]
shift: 移除并返回数组的第一个元素
javascript
     console.log(numbers.shift()); // 输出: 0, 数组现在是 [10, 2, 3, 4, 5]
7数组拼接
concat: 合并多个数组，不改变原数组
javascript
     const moreNumbers = [7, 8, 9];
     const combined = numbers.concat(moreNumbers); // [10, 2, 3, 4, 5, 7, 8, 9]
8数组截取
slice: 获取数组的一部分浅拷贝
javascript
     const sliceOfNumbers = numbers.slice(1, 3); // [10, 2]
9遍历数组
forEach: 遍历数组并执行回调函数
javascript
     numbers.forEach((num) => console.log(num));
for...of 循环
javascript
     for (const num of numbers) {
       console.log(num);
     }
10查找元素
indexOf: 查找元素索引，如果不存在则返回 -1
javascript
      const index = numbers.indexOf(5); // 输出: 4
11排序
sort: 对数组进行排序
javascript
      numbers.sort((a, b) => a - b); // 升序排序
12过滤元素
filter: 创建一个新数组，包含所有通过测试的元素
javascript
      const evenNumbers = numbers.filter((num) => num % 2 === 0);
13映射元素
map: 创建一个新数组，每个元素都是原始数组元素经过函数处理的结果
javascript
      const squaredNumbers = numbers.map((num) => num * num);
14减少数组到单个值
reduce: 将数组元素逐步减少到一个单一的累积值
javascript
      const sum = numbers.reduce((total, num) => total + num, 0); // 数组元素之和

======下面还有一些js数组的高级用法

15 reduceRight
作用: 类似于 reduce，但反向遍历数组。
示例:
javascript
     const sum = [0, 1, 2, 3].reduceRight((accumulator, currentValue) => accumulator + currentValue, 0);
     // sum 现在是 6，计算过程是从右到左累加。
16 every
作用: 检查数组中的所有元素是否都满足某个条件。
示例:
javascript
     const allPositive = [2, 4, 6].every((value) => value > 0);
     // allPositive 是 true，因为所有元素都大于0。
17 some
作用: 检查数组中是否存在至少一个元素满足某个条件。
示例:
javascript
     const hasNegative = [2, 4, -1].some((value) => value < 0);
     // hasNegative 是 true，因为存在负数。
18 find
作用: 返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
示例:
javascript
     const foundValue = [1, 2, 3, 4].find((element) => element > 2);
     // foundValue 是 3，第一个大于2的元素。
19 findIndex
作用: 返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。
示例:
javascript
     const indexFound = ['apple', 'banana', 'cherry'].findIndex((fruit) => fruit === 'banana');
     // indexFound 是 1，'banana' 的索引位置。
20 fill
作用: 用一个固定值填充数组中的一段或全部。
示例:
javascript
     const filledArray = new Array(5).fill(0);
     // filledArray 现在是 [0, 0, 0, 0, 0]
21 copyWithin
作用: 浅复制数组的一部分到同一数组中的另一个位置，并返回该数组。
示例:
javascript
     const array = [1, 2, 3, 4, 5];
     const copiedArray = array.copyWithin(1, 3);
     // copiedArray 现在是 [1, 4, 5, 4, 5]，从索引3开始的元素被复制到了索引1的位置。

//----------js 集合对象 find查找
 this.personInfos = [{
      id: 3,
      name: "qq",
      age: 10,
      email: "11.qq.com",
    }, {
      id: 4,
      name: "ww",
      age: 11,
      email: "22.qq.com",
    }, {
      id: 5,
      name: "ee",
      age: 13,
      email: "33.qq.com",
    }]

//如果有就返回查找的对象
    let findresult = this.personInfos.find((c: { id: number; }) => c.id == 0);
//如果有就返回查找的对象
    let findone = this.personInfos.some((c: { name: string; }) => c.name == "jason")
    if (findone) {
      this.messageService.add({ severity: 'error', summary: 'nonono', detail: 'jason 已近存在不要重复输入' });return
    }

 

数组开头插入案例

  this.personInfos = [{
      id: 3,
      name: "qq",
      age: 10,
      email: "11.qq.com",
    }, {
      id: 4,
      name: "ww",
      age: 11,
      email: "22.qq.com",
    }, {
      id: 5,
      name: "ee",
      age: 13,
      email: "33.qq.com",
    }]
    this.cardatas = [
      {
        id: 1,
        name: 'BMW',
        brand: 'wqwqwwq',
        description: 'BMW'
      },
      {
        id: 2,
        name: 'Sun7',
        brand: '小米',
        description: '小米'
      }];
  }
  ngOnInit(): void {
    this.personInfos.unshift({id: 1111,
      name: "eew",
      age: 13,
      email: "33.qq.com",})

  }