JavaScript中的数组方法总结+详解

##JavaScript中的数组方法总结+详解

用来总结和学习，便于自己查找

文章目录

              一、数组是什么?
              二、改变原数组的api方法？
          2.1 push（） 在末端添加
          2.2 pop（） 在末端删除
          2.3 unshift（）头部添加
          2.4 shift（） 在头部删除
          2.5 reverse（）反转数组
          2.6 sort（） 排序
          2.7 splice（） 截取数组

              三、不改变原数组的方法
          3.1 concat（） 合并数组
          3.2 slice（）截取数组的一部分数据
          3.3 indexOf 从左检查数组中有没有这个数值
          3.4 lastIndexOf 从右检查数组中有没有这个数值
              四、Es6新增的api方法？(不改变原数组)
          4.1 forEach() 用来循环遍历的 for
          4.2 map 映射数组的
          4.3 filter 过滤数组
          4.4 every 判断数组是不是满足所有条件
          4.5 some（） 数组中有没有满足条件的
          4.6 find（）用来获取数组中满足条件的第一个数据
          4.7 reduce（）叠加后的效果

              五、常用的和实战使用？

一、数组是什么

数组（Array）是编程中常用的一种数据结构用来存储多个元素（通常是相同类型的元素）,JavaScript 数组是可调整大小的，并且可以包含不同的数据类型,正常包含json。
数组可以容纳多个值，并通过索引（index）来访问这些值。
索引通常是从0开始的整数，表示数组中元素的位置。
重要的是知道数据结构这个词，面试可能问你数据结构常用的有什么数组就是一个。

二、改变原数组的api方法？

2.1 push()

push() 方法向数组末尾添加新项目，并返回新长度。count 所以是4，打印出来原数组也是会改变的。

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

2.2 pop（）

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

2.3 unshift（）

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.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

2.5 reverse（）和 toReversed（）

就地反转数组中的元素，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。换句话说，数组中的元素顺序将被翻转，变为与之前相反的方向。要在不改变原始数组的情况下反转数组中的元素，使用 toReversed()。

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"]
const items = [1, 2, 3];
console.log(items); // [1, 2, 3]

const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]

2.6 sort（）

对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]
March:
  M: 77
  a: 97
  r: 114
  c: 99
  h: 104
Jan:
  J: 74
  a: 97
  n: 110
Feb:
  F: 70
  e: 101
  b: 98
Dec:
  D: 68
  e: 101
  c: 99

排序的依据是从每个字符串的第一个字符开始进行比较，若第一个字符相同，则继续比较第二个字符，依此类推。所以按 Unicode 码点排序的过程如下：
Dec: ‘D’ 的 Unicode 码是 68
Feb: ‘F’ 的 Unicode 码是 70
Jan: ‘J’ 的 Unicode 码是 74
March: ‘M’ 的 Unicode 码是 77
排序结果就是 [“Dec”, “Feb”, “Jan”, “March”]。

2.6.1 哪里查询unicode码?

1、 unicode码在线查询地址
2、charCodeAt()
const char = 'A'; console.log(char.charCodeAt()); // 输出 65

2.7 splice（）

移除或者替换已存在的元素和/或添加新的元素，返回被删除的项目

1、在索引 1 处插入 'Feb'
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]
> 不删除任何元素（因为第二个参数为 0）

2、 在索引 3 处移除 1 个元素
> const myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"];
const removed = myFish.splice(3, 1);
>
3、从索引 0 处移除 2 个元素，并插入“parrot”、“anemone”和“blue”
const myFish = ["angel", "clown", "trumpet", "sturgeon"];
const removed = myFish.splice(0, 2, "parrot", "anemone", "blue");

// myFish 是 ["parrot", "anemone", "blue", "trumpet", "sturgeon"]
// removed 是 ["angel", "clown"]

 4、在索引 3 处移除 1 个元素
 const myFish = ["angel", "clown", "mandarin", "sturgeon"];
const removed = myFish.splice(2);

// myFish 是 ["angel", "clown"]
// removed 是 ["mandarin", "sturgeon"]

三、不改变原数组的方法

3.1 concat（）

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]

3.2 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"]

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

console.log(animals.slice(-2));
//表示从数组末尾倒数第二个元素开始提取
// Expected output: Array ["duck", "elephant"]

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

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

3.3 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));
//从索引 2 开始搜索 'bison'
所以第一次出现的bison是最后一个所以返回索引4
// Expected output: 4

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

3.4 lastIndexOf ()

返回数组中给定元素最后一次出现的索引，如果不存在则返回 -1。该方法从 fromIndex 开始向前搜索数组。`

const animals = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(animals.lastIndexOf('bison')); // 输出 4

const animals = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(animals.lastIndexOf('bison', 3)); // 输出 1
//从索引 3 处向前查找 'bison'，找到的最后一个 'bison' 出现在索引 1
const animals = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(animals.lastIndexOf('bison', -2)); // 输出 1
//从数组末尾向前数 2 个位置开始向前查找 'bison'，找到的最后一个 'bison' 出现在索引 1。

四、Es6新增的api方法？

4.1 forEach()

对数组的每个元素执行一次指定的函数，没有返回值（或者说返回 undefined）。

const array1 = ['a', 'b', 'c'];

array1.forEach((element) => console.log(element));

// Expected output: "a"
// Expected output: "b"
// Expected output: "c"
const array2 = ['one', 'two', 'three'];

array2.forEach(function(element, index, array) {
  console.log(`Element ${element} is at index ${index} in array ${array}`);
});

// 输出:
// Element one is at index 0 in array one,two,three
// Element two is at index 1 in array one,two,three
// Element three is at index 2 in array one,two,three

4.2 map()

创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数后返回的结果。

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

const doubled = numbers.map(function(num) {
  return num * 2;
});

console.log(doubled); // 输出 [2, 4, 6, 8, 10]

4.3 filter ()

筛选出符合特定条件的元素，并返回一个新的数组，而不改变原始数组。

const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(num => num % 2 === 0);

console.log(evenNumbers); // 输出: [2, 4, 6]

4.4 every ()

它的作用是帮助我们判断一个数组里的每个成员是否都符合某个条件，如果所有的数字都符合我们的规则（都是偶数,下面这个例子），那么 every 方法会返回 true；如果有任何一个数字不符合规则（不是偶数），它就会立即返回 false。

const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every(num => num % 2 === 0);

console.log(allEven); // Output: true

4.5 some()

判断数组中是否至少有一个元素满足指定的条件，如果对于任何一个元素，回调函数返回 true，则 some 方法立即返回 true。如果数组中所有元素都不满足条件，那么 some 方法最终返回 false。有一个就行返回true

const numbers = [1, 3, 5, 7, 8, 9];
const hasEvenNumber = numbers.some(num => num % 2 === 0);

console.log(hasEvenNumber); // Output: true

4.6 find()

查找满足条件的第一个元素，并返回该元素。如果没有找到符合条件的元素，则返回 undefined。

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const user = users.find(obj => obj.id === 2);

console.log(user); // Output: { id: 2, name: 'Bob' }

4.7 reduce()

从左到右对数组中的元素进行累积计算，最终返回一个值

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

const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // Output: 15
//再来个例子求平均值
const values = [10, 20, 30, 40, 50];

const average = values.reduce((accumulator, currentValue, currentIndex, array) => {
  accumulator.sum += currentValue;

  if (currentIndex === array.length - 1) {
    accumulator.average = accumulator.sum / array.length;
  }

  return accumulator;
}, { sum: 0, average: 0 }); // 这里传入了初始值对象 { sum: 0, average: 0 }

console.log(average.average); // 输出计算得到的平均值
//sum: 0, average: 0 这个就是默认的初始值
1、accumulator：
这是累加器，它累积回调函数每次执行时的返回值。它是 reduce() 方法中的第一个参数，也就是用来存储累加结果的变量或对象。
在第一次调用回调函数时，如果提供了 reduce() 的第二个参数作为初始值，则 accumulator 的初始值为这个参数；如果没有提供初始值，则 accumulator 的初始值为数组的第一个元素。
在每次迭代中，accumulator 的值会根据回调函数的返回值更新，传递给下一次回调函数调用。
2、currentValue：
当前的数组的值
3、currentIndex：
这是当前元素在数组中的索引。
在每次迭代时，reduce() 方法会将当前元素的索引传递给回调函数作为 currentIndex。
第一次调用回调函数时，如果提供了初始值，则 currentIndex 是 0；如果没有提供初始值，则 currentIndex 是 1。
4、array：
这是调用 reduce() 方法的数组本身。
在每次迭代时，reduce() 方法会将原始数组传递给回调函数作为 array 参数。
这个参数是可选的，如果你的回调函数不需要使用原始数组，则可以省略。
注意
如果没有初始值那么累加器的第一个就是数组的第一项，currentValue就是数组的第二项，currentIndex就是为1

五、常用的和实战使用

首先一个就是push方法，100%会使用但是一添加的不是简单的字符串，一般添加json这样的格式{name:“猪猪”，gender:“男”}，splice一般也会用到删除数据，array.splice(-1, 1);concat这个也会用到合并数组，indexOf这个用来查找也会用到，map这个也经常用到遍历，还有filter过滤也经常使用，还有find查找满足第一个条件的，最后一个reduce一般购物车会用到。