数组的常用方法

改变原数组的方法

0. push

   • 用途：在数组末尾添加一个或多个元素，并返回新数组的长度。
   • 改变原数组：是。

   const array = [1, 2, 3];
   array.push(4);
   console.log(array); // [1, 2, 3, 4]
   

1. pop

   • 用途：移除数组的最后一个元素，并返回该元素。
   • 改变原数组：是。

   const array = [1, 2, 3];
   const lastElement = array.pop();
   console.log(array); // [1, 2, 3]
   console.log(lastElement); // 3
   

2. shift

   • 用途：移除数组的第一个元素，并返回该元素。
   • 改变原数组：是。

   const array = [1, 2, 3];
   const firstElement = array.shift();
   console.log(array); // [2, 3]
   console.log(firstElement); // 1
   

3. unshift

   • 用途：在数组的开头添加一个或多个元素，并返回新数组的长度。
   • 改变原数组：是。

   const array = [1, 2, 3];
   array.unshift(0);
   console.log(array); // [0, 1, 2, 3]
   

4. splice

   • 用途：通过删除或替换现有元素或添加新元素来修改数组内容，并返回被删除的元素。
   • 改变原数组：是。

   const array = [1, 2, 3, 4];
   const removedElements = array.splice(1, 2); // 从索引1开始删除2个元素
   console.log(array); // [1, 4]
   console.log(removedElements); // [2, 3]
   

5. sort

   • 用途：对数组元素进行排序，并返回该数组。
   • 改变原数组：是。

   const array = [3, 1, 4, 1, 5, 9];
   array.sort((a, b) => a - b);
   console.log(array); // [1, 1, 3, 4, 5, 9]
   

6. reverse

   • 用途：颠倒数组中元素的顺序，并返回该数组。
   • 改变原数组：是。

   const array = [1, 2, 3];
   array.reverse();
   console.log(array); // [3, 2, 1]
   

7. fill

   • 用途：用一个固定值填充数组中从起始索引到终止索引内的全部元素。
   • 改变原数组：是。

   const array = [1, 2, 3, 4];
   array.fill(0, 1, 3); // 从索引1到索引3（不包括索引3）填充为0
   console.log(array); // [1, 0, 0, 4]
   

8. copyWithin

   • 用途：在数组内部复制元素，并返回该数组，不会改变原数组的长度。
   • 改变原数组：是。

   const array = [1, 2, 3, 4, 5];
   array.copyWithin(0, 3, 4); // 从索引3到索引4（不包括索引4）复制到索引0开始的位置
   console.log(array); // [4, 2, 3, 4, 5]
   

不改变原数组的方法

0. concat

   • 用途：合并两个或多个数组，并返回一个新数组。
   • 改变原数组：否。

   const array1 = [1, 2, 3];
   const array2 = [4, 5, 6];
   const newArray = array1.concat(array2);
   console.log(array1); // [1, 2, 3]
   console.log(newArray); // [1, 2, 3, 4, 5, 6]
   

1. slice

   • 用途：返回数组中一部分的浅拷贝到一个新数组对象，选取从开始到结束（不包括结束）的元素。
   • 改变原数组：否。

   const array = [1, 2, 3, 4];
   const newArray = array.slice(1, 3); // 从索引1到索引3（不包括索引3）
   console.log(array); // [1, 2, 3, 4]
   console.log(newArray); // [2, 3]
   

2. map

   • 用途：创建一个新数组，其结果是该数组中的每个元素是回调函数的返回值。
   • 改变原数组：否。

   const array = [1, 2, 3];
   const newArray = array.map(x => x * 2);
   console.log(array); // [1, 2, 3]
   console.log(newArray); // [2, 4, 6]
   

3. filter

   • 用途：创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。
   • 改变原数组：否。

   const array = [1, 2, 3, 4];
   const newArray = array.filter(x => x > 2);
   console.log(array); // [1, 2, 3, 4]
   console.log(newArray); // [3, 4]
   

4. reduce

   • 用途：对数组中的每个元素执行一个由您提供的 reducer 函数（升序执行），将其结果汇总为单个返回值。
   • 改变原数组：否。

   const array = [1, 2, 3, 4];
   const sum = array.reduce((acc, x) => acc + x, 0);
   console.log(array); // [1, 2, 3, 4]
   console.log(sum); // 10
   

5. reduceRight

   • 用途：对数组中的每个元素执行一个由您提供的 reducer 函数（降序执行），将其结果汇总为单个返回值。
   • 改变原数组：否。

   const array = [1, 2, 3, 4];
   const sum = array.reduceRight((acc, x) => acc + x, 0);
   console.log(array); // [1, 2, 3, 4]
   console.log(sum); // 10
   

6. some

   • 用途：测试数组中的某些元素是否通过了由提供的函数实现的测试。
   • 改变原数组：否。

   const array = [1, 2, 3, 4];
   const hasGreaterThan2 = array.some(x => x > 2);
   console.log(array); // [1, 2, 3, 4]
   console.log(hasGreaterThan2); // true
   

7. every

   • 用途：测试数组中的所有元素是否都通过了由提供的函数实现的测试。
   • 改变原数组：否。

   const array = [1, 2, 3, 4];
   const allGreaterThan0 = array.every(x => x > 0);
   console.log(array); // [1, 2, 3, 4]
   console.log(allGreaterThan0); // true
   

8. find

   • 用途：返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
   • 改变原数组：否。

   const array = [1, 2, 3, 4];
   const found = array.find(x => x > 2);
   console.log(array); // [1, 2, 3, 4]
   console.log(found); // 3
   

9. findIndex

   • 用途：返回数组中满足提供的测试函数的第一个元素的索引。否则返回 -1。
   • 改变原数组：否。

   const array = [1, 2, 3, 4];
   const index = array.findIndex(x => x > 2);
   console.log(array); // [1, 2, 3, 4]
   console.log(index); // 2
   

总结

改变原数组的方法：

• push
• pop
• shift
• unshift
• splice
• sort
• reverse
• fill
• copyWithin

不改变原数组的方法：

• concat
• slice
• map
• filter
• reduce
• reduceRight
• some
• every
• find
• findIndex

数组遍历

1. for 循环

• 返回值：没有。
• 是否可以打断：可以（通过 break 或 return）。

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

for (let i = 0; i < array.length; i++) {
  if (array[i] === 3) {
    break; // 终止循环
  }
  console.log(array[i]);
}

2. for...of 循环

• 返回值：没有。
• 是否可以打断：可以（通过 break 或 return）。

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

for (const value of array) {
  if (value === 3) {
    break; // 终止循环
  }
  console.log(value);
}

3. forEach 方法

• 返回值：没有（返回 undefined）。
• 是否可以打断：不可以（只能通过抛出异常来中断）。

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

array.forEach(value => {
  console.log(value);
});

4. map 方法

• 返回值：返回一个新数组，新数组中的每个元素是回调函数的返回值。
• 是否可以打断：不可以（没有内置方式中断）。

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

const result = array.map(value => {
  return value * 2;
});

console.log(result); // [2, 4, 6, 8, 10]

5. filter 方法

• 返回值：返回一个新数组，包含通过测试的所有元素。
• 是否可以打断：不可以（没有内置方式中断）。

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

const result = array.filter(value => {
  return value > 2;
});

console.log(result); // [3, 4, 5]

6. some 方法

• 返回值：返回一个布尔值，表示是否至少有一个元素通过测试。
• 是否可以打断：会在找到第一个满足条件的元素时自动终止。

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

const result = array.some(value => {
  return value === 3;
});

console.log(result); // true

7. every 方法

• 返回值：返回一个布尔值，表示是否所有元素都通过测试。
• 是否可以打断：会在找到第一个不满足条件的元素时自动终止。

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

const result = array.every(value => {
  return value < 6;
});

console.log(result); // true

8. reduce 方法

• 返回值：返回累计处理后的单个值。
• 是否可以打断：不可以（没有内置方式中断）。

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

const result = array.reduce((accumulator, value) => {
  return accumulator + value;
}, 0);

console.log(result); // 15

9. reduceRight 方法

• 返回值：返回累计处理后的单个值，但从右到左对数组中的每个元素执行回调函数。
• 是否可以打断：不可以（没有内置方式中断）。

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

const result = array.reduceRight((accumulator, value) => {
  return accumulator + value;
}, 0);

console.log(result); // 15

总结

方法	返回值	是否可以打断
for	没有	可以
for...of	没有	可以
forEach	没有（undefined）	不可以（只能通过抛出异常中断）
map	新数组	不可以
filter	新数组	不可以
some	布尔值	会自动在满足条件时终止
every	布尔值	会自动在不满足条件时终止
reduce	累计处理后的单个值	不可以
reduceRight	累计处理后的单个值	不可以