✊不积跬步，无以至千里；不积小流，无以成江海。

数组push、pop、shift、unshift

数组的 push、pop、shift 和 unshift 是 JavaScript 中常用的数组操作方法，用于在数组的开头或末尾进行添加或删除元素的操作。

push 方法用于在数组的末尾添加一个或多个元素，并返回修改后的数组的新长度。

var fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // 输出: ["apple", "banana", "orange"]

fruits.push("grape", "mango");
console.log(fruits); // 输出: ["apple", "banana", "orange", "grape", "mango"]

pop 方法用于从数组的末尾删除一个元素，并返回被删除的元素。

var fruits = ["apple", "banana", "orange"];
var lastFruit = fruits.pop();
console.log(lastFruit); // 输出: "orange"
console.log(fruits); // 输出: ["apple", "banana"]

shift 方法用于从数组的开头删除一个元素，并返回被删除的元素。

var fruits = ["apple", "banana", "orange"];
var firstFruit = fruits.shift();
console.log(firstFruit); // 输出: "apple"
console.log(fruits); // 输出: ["banana", "orange"]

unshift 方法用于在数组的开头添加一个或多个元素，并返回修改后的数组的新长度。

var fruits = ["banana", "orange"];
fruits.unshift("apple");
console.log(fruits); // 输出: ["apple", "banana", "orange"]

fruits.unshift("grape", "mango");
console.log(fruits); // 输出: ["grape", "mango", "apple", "banana", "orange"]

数组splice、concat、join

数组的 splice、concat 和 join 是 JavaScript 中常用的数组操作方法，用于对数组进行切割、合并和转换为字符串的操作。

splice 方法用于从数组中删除、替换或插入元素，并返回被删除的元素组成的新数组。 splice() 方法的第一个参数是开始位置，第二个参数是要插入或删除元素的数量。第三个参数是新元素，可以是字符串、数字、对象等。

var fruits = ["apple", "banana", "orange", "grape"];
var removed = fruits.splice(1, 2); // 从索引 1 开始删除 2 个元素
console.log(removed); // 输出: ["banana", "orange"]
console.log(fruits); // 输出: ["apple", "grape"]

fruits.splice(1, 0, "mango", "peach"); // 从索引 1 开始插入 "mango" 和 "peach"
console.log(fruits); // 输出: ["apple", "mango", "peach", "grape"]

fruits.splice(2, 1, "kiwi"); // 从索引 2 替换为 "kiwi"
console.log(fruits); // 输出: ["apple", "mango", "kiwi", "grape"]

concat 方法用于将多个数组或值合并成一个新数组，并返回该新数组。

var fruits1 = ["apple", "banana"];
var fruits2 = ["orange", "grape"];
var combined = fruits1.concat(fruits2);
console.log(combined); // 输出: ["apple", "banana", "orange", "grape"]

var numbers = [1, 2, 3];
var combined2 = fruits1.concat(numbers, fruits2);
console.log(combined2); // 输出: ["apple", "banana", 1, 2, 3, "orange", "grape"]

join 方法用于将数组中的所有元素转换为一个字符串，并使用指定的分隔符连接各个元素。

var fruits = ["apple", "banana", "orange"];
var result = fruits.join(", ");
console.log(result); // 输出: "apple, banana, orange"

var numbers = [1, 2, 3];
var result2 = numbers.join("-");
console.log(result2); // 输出: "1-2-3"

这些数组操作方法可以根据需要对数组进行切割、合并和转换操作。splice 可以从指定位置修改数组，concat 可以合并多个数组，join 可以将数组转换为字符串。

数组sort、reverse

在 JavaScript 中，sort() 和 reverse() 是数组的两个常用方法，用于对数组进行排序和反转。

sort() 方法用于按照指定的排序规则对数组进行排序。

reverse() 方法用于反转数组元素的顺序。

sort() 方法

sort() 方法的语法如下：

array.sort(compareFunction);

compareFunction 是一个可选参数，用于指定排序规则。如果不指定 compareFunction，则默认使用数字比较规则。

compareFunction 是一个函数，接受两个参数，分别是两个要比较的元素。函数的返回值决定了两个元素的排序顺序。

返回值为负数表示第一个元素小于第二个元素，返回值为零表示两个元素相等，返回值为正数表示第一个元素大于第二个元素。

以下是 sort() 方法的使用示例：

// 按照数字顺序排序
const numbers = [1, 5, 3, 2, 4];
numbers.sort();
console.log(numbers); // [1, 2, 3, 4, 5]

// 按照字符串顺序排序
const strings = ["apple", "banana", "orange", "grapes"];
strings.sort();
console.log(strings); // ["apple", "banana", "grapes", "orange"]

// 自定义排序规则
const fruits = ["apple", "banana", "orange", "grapes"];
fruits.sort((a, b) => a.length - b.length);
console.log(fruits); // ["grapes", "orange", "banana", "apple"]

reverse() 方法

reverse() 方法的语法如下：

array.reverse();

reverse() 方法不会返回任何值。

以下是 reverse() 方法的使用示例：

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

总结

sort() 和 reverse() 是 JavaScript 中数组排序和反转的两个常用方法。sort() 方法用于按照指定的排序规则对数组进行排序，reverse() 方法用于反转数组元素的顺序。

forEach、map、filter、reduce、every、some

在 JavaScript 中，forEach()、map()、filter()、reduce()、every()、和 some() 是数组的六个常用方法，用于迭代和操作数组。

forEach()

forEach() 方法迭代数组中的每个元素，并在每个元素上调用一个回调函数。回调函数将元素、元素的索引和数组本身作为参数。示例：

const fruits = ["apple", "banana", "orange"];

fruits.forEach((fruit, index, array) => {
  console.log(`${index}: ${fruit}`);
});

//输出
0: apple 
1: banana 
2: orange

//修改数组中的每个元素
const fruits = ["apple", "banana", "orange"];

fruits.forEach((fruit, index, array) => {
  fruit = fruit.toUpperCase();
});

console.log(fruits); // ["APPLE", "BANANA", "ORANGE"]

map()

map() 方法迭代数组中的每个元素，并创建一个新数组，其中包含回调函数对每个元素的调用结果。回调函数将元素、元素的索引和数组本身作为参数，并返回一个新值。示例：

const fruits = ["apple", "banana", "orange"];
const fruitLengths = fruits.map((fruit) => fruit.length);
console.log(fruitLengths); // [5, 6, 6]

filter()

filter() 方法迭代数组中的每个元素，并创建一个新数组，其中包含所有通过测试的元素。测试由回调函数定义，该回调函数将元素、元素的索引和数组本身作为参数，并返回一个布尔值。示例：

const fruits = ["apple", "banana", "orange"];
const evenLengthFruits = fruits.filter((fruit) => fruit.length % 2 === 0);
console.log(evenLengthFruits); // ["banana", "orange"]

reduce()

reduce() 方法迭代数组中的每个元素，并将它们减少为一个单一的值。累积值由回调函数定义，该回调函数将累积值、当前元素、元素的索引和数组本身作为参数，并返回一个新的累积值。示例：

const fruits = ["apple", "banana", "orange"];

//`accumulator` 是一个变量，用于在reduce()方法迭代数组中的每个元素时累积值。
//回调函数将 `accumulator` 变量的值加上当前元素的长度。
const totalFruitLength = fruits.reduce((accumulator, fruit) => {
  return accumulator + fruit.length;
}, 0);

console.log(totalFruitLength); // 17

every()

every() 方法迭代数组中的每个元素，并检查是否所有元素都通过测试。测试由回调函数定义，该回调函数将元素、元素的索引和数组本身作为参数，并返回一个布尔值。示例：

const fruits = ["apple", "banana", "orange"];
const allFruitsHaveEvenLength = fruits.every((fruit) => fruit.length % 2 === 0);
console.log(allFruitsHaveEvenLength); // false

some()

some() 方法迭代数组中的每个元素，并检查是否任何元素都通过测试。测试由回调函数定义，该回调函数将元素、元素的索引和数组本身作为参数，并返回一个布尔值。

const fruits = ["apple", "banana", "orange"];
const someFruitsHaveEvenLength = fruits.some((fruit) => fruit.length % 2 === 0);
console.log(someFruitsHaveEvenLength); // true

some & every区别，或or全。

类数组对象、数组转换、空数组

在 JavaScript 中，数组是对象。数组对象可以由 [] 字面量或 Array() 构造函数创建。

类数组对象

类数组对象是 JavaScript 中一种特殊的数组对象。它具有 length 属性，但不具有 push()、pop() 等数组方法。

类数组对象通常用于表示由 JavaScript 引擎内部创建的数组，例如 DOM 元素的 children 属性。

数组转换

可以将类数组对象转换为数组。可以使用以下两种方法之一进行转换：

使用 Array() 构造函数：

const fruits = [
  "apple",
  "banana",
  "orange",
];

const classArray = {
  0: "apple",
  1: "banana",
  2: "orange",
  length: 3,
};

const array = Array.from(classArray);
console.log(array); // ["apple", "banana", "orange"]

使用 [] 字面量：

const fruits = [
    "apple", 
    "banana", 
    "orange", 
]; 
const classArray = { 
    0: "apple", 
    1: "banana", 
    2: "orange", 
    length: 3, 
}; 

const array = [...classArray]; 

console.log(array); // ["apple", "banana", "orange"]

因为fruits 是一个数组对象，而 classArray 是一个类数组对象。

const fruits

const fruits 是一个数组对象，由 [] 字面量创建。它具有 length 属性，以及 push()、pop()、shift()、unshift()、slice()、concat()、join()、indexOf()、lastIndexOf()、find()、findIndex() 等数组方法。

const classArray

const classArray 是一个类数组对象，由对象字面量创建。它具有 length 属性，但不具有 push()、pop() 等数组方法。

具体区别如下面代码所示：

const fruits = ["apple", "banana", "orange"];
const classArray = {
  0: "apple",
  1: "banana",
  2: "orange",
  length: 3,
};

// fruits 是数组对象
console.log(fruits.length); // 3
console.log(fruits.push("grape")); // ["apple", "banana", "orange", "grape"]

// classArray 是类数组对象
console.log(classArray.length); // 3
// classArray 不具有 push() 方法
// classArray.push("grape"); // TypeError: Cannot add property push, object is not iterable

所以，将类数组对象转换为数组后，const array的输出可以表示fruits表示的内容。

空数组

空数组是没有元素的数组。可以使用以下三种方法之一创建空数组：

使用 [] 字面量：

const array = [];

使用 Array() 构造函数：

const array = Array();

使用 new Array() 构造函数：

const array = new Array();

空数组的 length 属性为 0。

数组去重的几种方法

在 JavaScript 中，可以使用以下四种方法去重数组：

使用 Set 对象

Set 对象是一个无序的集合，其中不允许重复元素。可以使用 Array.from(new Set(array)) 方法将数组转换为 Set 对象，然后再将 Set 对象转换回数组。

const fruits = ["apple", "banana", "apple", "orange"];
const uniqueFruits = Array.from(new Set(fruits));
console.log(uniqueFruits); // ["apple", "banana", "orange"]

使用 filter() 方法

filter() 方法可以过滤数组中的元素。可以使用 filter() 方法过滤掉数组中重复的元素。

//`filter()` 方法接受一个回调函数，该回调函数将每个元素作为参数，
//并返回一个布尔值。如果布尔值为 `true`，则该元素将被保留在结果数组中。

//在这句话中，回调函数接受三个参数：

-   `fruit`：当前元素
-   `index`：当前元素在数组中的索引
-   `array`：原始数组

//回调函数判断当前元素是否是数组中的唯一元素。
//如果是，则返回 `true`。否则，返回 `false`。

const fruits = ["apple", "banana", "apple", "orange"];

const uniqueFruits = fruits.filter((fruit, index, array) => {
  return array.indexOf(fruit) === index;
  //表示当前元素 `fruit` 在数组 `array` 中的索引是否与当前元素的索引 `index` 相同。
  //`indexOf()` 方法返回元素在数组中的索引。表示当前元素是否是数组中的唯一元素。
  //如果是，则 `indexOf()` 方法将返回当前元素的索引 `index`。
  //否则，`indexOf()` 方法将返回 `-1`。
});

console.log(uniqueFruits); // ["apple", "banana", "orange"]

在上述示例中，数组 fruits 中有两个 apple 元素。第一个 apple 元素的索引为 0，第二个 apple 元素的索引为 2。

因此，回调函数将返回 true 的元素只有第一个 apple 元素和 banana 元素。

ps：=== 为严格相等（三个等号）

使用 indexOf() 方法

indexOf() 方法可以返回元素在数组中的索引。可以使用 indexOf() 方法判断元素是否已经存在于数组中。

const fruits = ["apple", "banana", "apple", "orange"];

const uniqueFruits = fruits.filter((fruit) => {
  return fruits.indexOf(fruit) === -1;
});

console.log(uniqueFruits); // ["banana", "orange"]

具体解析看上方描述。

使用 for 循环

可以使用 for 循环遍历数组，并判断元素是否已经存在于数组中。

const fruits = ["apple", "banana", "apple", "orange"];
const uniqueFruits = [];

for (let i = 0; i < fruits.length; i++) {
  const fruit = fruits[i];

  if (uniqueFruits.indexOf(fruit) === -1) {
    uniqueFruits.push(fruit);
  }
}

console.log(uniqueFruits); // ["apple", "banana", "orange"]

选择方法

选择使用哪种方法去重数组取决于实际情况。如果数组元素是对象，可以使用 Set 对象或 filter() 方法。如果数组元素是基本类型，可以使用 indexOf() 方法或 for 循环。

Javascript基础-数组API和案例