JavaScript 数组常用的方法介绍 四

JavaScript 数组常用的方法介绍 四

push()

用于将一个或多个元素添加到数组的末尾，并返回修改后的数组的新长度。(注意： push() 方法会修改原始数组，而不是创建一个新的数组。)

• 语法：

array.push(element1, element2, ..., elementN)

• 参数：
  • element1, element2, …, elementN: 要添加到数组末尾的元素。
• 返回值：
  • 修改后的数组的新长度。
• 具体使用示例：

let arr = [1, 2, 3];

arr.push(4); // 向数组末尾添加元素
console.log(arr); // [1, 2, 3, 4]

arr.push(5, 6); // 可以一次添加多个元素
console.log(arr); // [1, 2, 3, 4, 5, 6]

let arr = [1, 2, 3, 1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8];
let uniqueArr = [];
arr.forEach((value) => {
  if (!uniqueArr.includes(value)) {
    uniqueArr.push(value);
  }
});
console.log(uniqueArr); // [1, 2, 3, 4, 5, 6, 7, 8]

pop()

用于删除数组的最后一个元素，并返回被删除的元素。(注意： pop() 方法会修改原始数组，而不是创建一个新的数组。如果数组为空，则调用 pop() 方法时不会产生错误，而是返回 undefined)

• 语法：

array.pop()

• 参数：
  • 无。
• 返回值：
  • 被删除的元素。如果数组为空，则返回 undefined。
• 具体使用示例：

let arr = [1, 2, 3, 4];

let lastElement = arr.pop(); // 删除数组的最后一个元素
console.log(lastElement); // 4
console.log(arr); // [1, 2, 3]

unshift()

用于将一个或多个元素添加到数组的开头，并返回修改后的数组的新长度。(**注意：**unshift() 方法会修改原始数组，而不是创建一个新的数组。)

• 语法：

array.unshift(element1, element2, ..., elementN)

• 参数：
  • element1, element2, …, elementN: 要添加到数组开头的元素。。
• 返回值：
  • 修改后的数组的新长度。
• 具体使用示例：

let arr = [3, 4, 5];

arr.unshift(1); // 向数组开头添加元素
console.log(arr); // [1, 3, 4, 5]

arr.unshift(0, 2); // 可以一次添加多个元素
console.log(arr); // [0, 2, 1, 3, 4, 5]

shift()

用于删除数组的第一个元素，并返回被删除的元素。(注意： shift() 方法会修改原始数组，而不是创建一个新的数组。如果数组为空，则调用 shift() 方法时不会产生错误，而是返回 undefined。)

• 语法：

array.shift()

• 参数：
  • 无。
• 返回值：
  • 被删除的元素。如果数组为空，则返回 undefined。
• 具体使用示例：

let arr = [1, 2, 3, 4];

let firstElement = arr.shift(); // 删除数组的第一个元素
console.log(firstElement); // 1
console.log(arr); // [2, 3, 4]

splice()

用于在任意位置向数组添加或删除元素，并返回被删除的元素。(注意： splice() 方法会修改原始数组，而不是创建一个新的数组。)

• 语法：

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

• 参数：
  • start: 起始位置，表示从哪个位置开始进行添加或删除操作。如果为负数，则从数组末尾开始计算。
  • deleteCount: 可选参数，表示要删除的元素个数。如果为 0，则不删除元素，只进行添加操作；如果省略该参数，则默认删除从 start 位置到数组末尾所有的元素。
  • item1, item2, …, itemN: 可选参数，表示要添加到数组中的元素。
• 返回值：
  • 一个数组，包含被删除的元素。如果没有元素被删除，则返回空数组 []。
• 具体使用示例：

let arr = [1, 2, 3, 4, 5];

let removed = arr.splice(1, 2); // 从索引为 1 的位置删除 2 个元素
console.log(arr); // [1, 4, 5]
console.log(removed); // [2, 3]

arr.splice(2, 0, "a", "b"); // 在索引为 2 的位置添加两个元素
console.log(arr); // [1, 4, "a", "b", 5]

join()

用于将数组的所有元素以指定的分隔符连接成一个字符串。(注意： join() 方法不会修改原始数组，而是返回一个新的字符串。)

• 语法：

array.join(separator)

• 参数：
  • separator: 可选参数，用于指定连接时要使用的分隔符。如果省略该参数，则默认使用逗号（,）作为分隔符。
• 返回值：
  • 一个字符串，包含数组中所有元素的连接结果。
• 具体使用示例：

let arr = ["apple", "banana", "orange"];

let result = arr.join(); // 使用默认分隔符（逗号）
console.log(result); // "apple,banana,orange"

result = arr.join("-"); // 使用短横线作为分隔符
console.log(result); // "apple-banana-orange"

slice()

用于从数组中选取一部分元素，创建一个新的数组并返回。(注意： slice() 方法不会修改原始数组，而是返回一个新的数组。)

slice() 方法常用于从数组中选取一部分元素进行操作，例如对选取的元素进行排序、过滤、查找等操作。

• 语法：

array.slice(start, end)

• 参数：
  • start: 可选参数，表示选取元素的起始位置。如果为负数，则从数组末尾开始计算，例如 -1 表示最后一个元素
  • end: 可选参数，表示选取元素的结束位置。如果省略该参数，则默认选取到数组末尾所有的元素。如果为负数，则从数组末尾开始计算，例如 -1 表示倒数第二个元素。
• 返回值：
  • 一个新的数组，包含从原始数组中选取的元素。
• 具体使用示例：

let arr = ["apple", "banana", "orange", "pear", "peach"];

let result = arr.slice(1, 3); // 从索引为 1 的位置开始（包括该元素），选取 2 个元素（不包括索引为 3 的元素）
console.log(result); // ["banana", "orange"]

result = arr.slice(-2); // 从数组末尾倒数第二个元素开始选取所有元素
console.log(result); // ["pear", "peach"]

concat()

用于将两个或多个数组合并成一个新数组。它不会修改原始数组，而是返回一个新的数组。

• 语法：

newArray = array1.concat(array2, array3, ..., arrayX);

• 参数：
  • array1, array2, …, arrayX: 必需，要连接的数组。。
• 返回值：
  • 一个新数组，包含连接在一起的所有数组元素。
• 具体使用示例：

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var newArray = array1.concat(array2);

console.log(newArray); // 输出: [1, 2, 3, 4, 5, 6]

• concat()方法还可以用于连接字符串和数组，或者连接多个数组和字符串。

var array1 = [1, 2, 3];
var str = 'Hello';
var newArray = array1.concat(str);

console.log(newArray); // 输出: [1, 2, 3, "H", "e", "l", "l", "o"]

• concat()方法只会对数组进行一层的连接操作。如果数组中包含嵌套的数组，它们将被当作单个元素处理。

var array1 = [1, 2, 3];
var array2 = [[4, 5], [6]];
var newArray = array1.concat(array2);

console.log(newArray); // 输出: [1, 2, 3, [4, 5], [6]]

sort()

用于对数组元素进行排序。默认情况下，它会将元素转换为字符串并按照Unicode编码顺序进行排序。即使数组中的元素是数字，它们也会被当作字符串进行比较。(注意： sort()方法会直接修改原始数组，而不是创建一个新的排序后的数组。如果希望保留原数组并创建一个新的排序后的数组，应该在排序前先复制一份原数组。)

• 语法：

array.sort(compareFunction);

• 参数：
  • compareFunction（可选）：指定一个比较函数，用于确定元素的顺序。如果未提供该参数，则元素将按照默认的字符串排序顺序进行排序。
• 返回值：
  • 排序后的原始数组。注意，sort()方法会直接修改原始数组。
• 具体使用示例：

var fruits = ['apple', 'banana', 'cherry', 'date'];
fruits.sort();

console.log(fruits); // 输出: ["apple", "banana", "cherry", "date"]

• 按照数字大小进行排序，可以使用比较函数来指定排序规则。

var numbers = [10, 5, 8, 20, 3];
numbers.sort(function(a, b) {
  return a - b;
});

console.log(numbers); // 输出: [3, 5, 8, 10, 20]

forEach()

用于对数组中的每个元素执行一次提供的函数。它不会改变原始数组，而是对数组进行遍历操作。(注意： forEach()方法对于空数组将不会执行任何操作，而且无法使用break和continue语句中断循环。如果需要在遍历过程中中断循环，应该使用for循环或some()或every()等其他方法)

• 语法：

array.forEach(function(currentValue, index, array) {
  // 在这里编写需要执行的代码
});

• 参数：
  • function(currentValue, index, array)：必需，要执行的函数。currentValue为当前遍历到的元素；index为当前元素的索引；array为正在遍历的数组。
• 返回值：
  • undefined。
• 具体使用示例：

var fruits = ['apple', 'banana', 'cherry'];
fruits.forEach(function(fruit, index) {
  console.log(index + ': ' + fruit);
});

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

filter()

用于创建一个新数组，其中包含通过指定函数测试的所有元素。它不会修改原始数组，而是返回一个过滤后的新数组。(注意： filter()方法创建一个新数组，其中只包含通过测试的元素。原始数组不会被修改。)

• 语法：

newArray = array.filter(function(currentValue, index, array) {
  // 在这里编写需要执行的判断条件
  // 如果判断为true，则将当前元素添加到新数组中
});

• 参数：
  • function(currentValue, index, array)：必需，用于测试每个元素的函数。currentValue为当前遍历到的元素；index为当前元素的索引；array为正在遍历的数组。
• 返回值：
  • 一个新数组，其中包含通过测试的所有元素。
• 具体使用示例：

var numbers = [1, 2, 3, 4, 5];
var evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

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

map()

用于创建一个新数组，其中包含对原始数组的每个元素应用指定函数的结果。它不会修改原始数组，而是返回一个映射后的新数组。(注意： map()方法创建一个新数组，其中包含对原始数组元素应用函数操作的结果。原始数组不会被修改。)

• 语法：

newArray = array.map(function(currentValue, index, array) {
  // 在这里编写需要执行的操作，并返回操作的结果
});

• 参数：
  • function(currentValue, index, array)：必需，用于操作每个元素的函数。currentValue为当前遍历到的元素；index为当前元素的索引；array为正在遍历的数组。
• 返回值：
  • 一个新数组，其中包含对原始数组元素应用函数操作的结果。
• 具体使用示例：

var numbers = [1, 2, 3, 4, 5];
var squaredNumbers = numbers.map(function(number) {
  return number * number;
});

console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]

some()

用于测试数组中的元素是否至少有一个满足指定条件的函数。它会遍历数组，直到找到满足条件的元素，然后返回true，否则返回false。(注意： some()方法只要找到满足条件的元素就会立即停止遍历，不会继续对剩余的元素进行判断。)

• 语法：

array.some(function(currentValue, index, array) {
  // 在这里编写需要执行的判断条件
  // 如果判断为true，则停止遍历并返回true
  // 如果遍历结束也没有找到满足条件的元素，则返回false
});

• 参数：
  • function(currentValue, index, array)：必需，用于测试每个元素的函数。currentValue为当前遍历到的元素；index为当前元素的索引；array为正在遍历的数组。
• 返回值：
  • 如果数组中至少有一个元素满足测试条件，则返回true；否则，返回false。
• 具体使用示例：

var numbers = [1, 2, 3, 4, 5];
var hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0;
});

console.log(hasEvenNumber); // 输出: true

every()

用于测试数组中的所有元素是否都满足指定条件的函数。它会遍历数组，直到找到一个不满足条件的元素，然后返回false，否则返回true。(注意： every()方法会遍历整个数组，直到找到不满足条件的元素或者遍历结束。如果数组为空，则every()方法将始终返回true。)

• 语法：

array.every(function(currentValue, index, array) {
  // 在这里编写需要执行的判断条件
  // 如果判断为false，则停止遍历并返回false
  // 如果遍历结束没有找到不满足条件的元素，则返回true
});

• 参数：
  • function(currentValue, index, array)：必需，用于测试每个元素的函数。currentValue为当前遍历到的元素；index为当前元素的索引；array为正在遍历的数组。
• 返回值：
  • 如果数组中所有元素都满足测试条件，则返回true；否则，返回false。
• 具体使用示例：

var numbers = [1, 2, 3, 4, 5];
var allEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0;
});

console.log(allEvenNumbers); // 输出: false

indexOf()

用于返回数组中指定元素的第一个索引位置。如果没有找到该元素，则返回-1。(注意： indexOf()方法对于查找基本数据类型（如数字、字符串、布尔值）非常有效。但是，对于查找对象或数组等复杂类型，它只能检查是否是同一引用，而不能检查对象或数组的内容是否相同。)

• 语法：

array.indexOf(searchValue, startIndex);

• 参数：
  • searchValue：必需，要查找的元素值。
  • startIndex：可选，开始查找的位置，默认为0。
• 返回值：
  • 如果找到指定元素，则返回其在数组中的第一个索引位置；否则，返回-1。
• 具体使用示例：

var fruits = ["apple", "banana", "orange"];
var bananaIndex = fruits.indexOf("banana");

console.log(bananaIndex); // 输出: 1

lastIndexOf()

用于返回数组中指定元素的最后一个索引位置。如果没有找到该元素，则返回-1。(注意： lastIndexOf()方法对于查找基本数据类型（如数字、字符串、布尔值）非常有效。但是，对于查找对象或数组等复杂类型，它只能检查是否是同一引用，而不能检查对象或数组的内容是否相同。)

• 语法：

array.lastIndexOf(searchValue, startIndex);

• 参数：
  • searchValue：必需，要查找的元素值。
  • startIndex：可选，开始查找的位置，默认为数组的最后一个元素。
• 返回值：
  • 如果找到指定元素，则返回其在数组中的最后一个索引位置；否则，返回-1。。
• 具体使用示例：

var fruits = ["apple", "banana", "orange", "banana"];
var bananaIndex = fruits.lastIndexOf("banana");

console.log(bananaIndex); // 输出: 3

reverse()

用于反转数组中的元素顺序。即，将数组中第一个元素变为最后一个元素，将最后一个元素变为第一个元素，以此类推。(注意： reverse()方法会把数组中的所有元素反转。这意味着它会反转数组中最后一个元素和第一个元素的位置，然后将倒数第二个元素和第二个元素的位置反转，以此类推。)

• 语法：

array.reverse();

• 参数：
  • 无。
• 返回值：
  • 该方法返回反转后的数组。注意：该方法会改变原始数组，而不是创建一个新的数组。
• 具体使用示例：

var fruits = ["apple", "banana", "orange"];
fruits.reverse();

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

reduce()

用于对数组中的每个元素执行一个回调函数，并将结果汇总为单个值。

• 语法：

javascript
array.reduce(callback, initialValue);

• 参数：
  • callback：必需，表示用于处理数组中每个元素的回调函数。该回调函数接收四个参数：
    • accumulator：累加器，保存回调函数的返回值。
    • currentValue：当前正在处理的元素。
    • currentIndex：当前正在处理的元素的索引。
    • array：调用reduce()方法的数组。
  • initialValue：可选，表示作为初始值传递给回调函数的值。如果未提供初始值，则使用数组的第一个元素作为初始值，并从第二个元素开始遍历数组。
• 返回值：
  • 最终计算得到的结果。
• 具体使用示例：

var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 输出: 15

find()

用于在数组中查找符合条件的第一个元素，并返回该元素。(注意： find()方法只返回符合条件的第一个元素。如果数组中有多个元素满足条件，find()方法也只会返回第一个符合条件的元素。)

• 语法：

array.find(callback);

• 参数：
  • callback：必需，表示用于测试每个元素的回调函数。该回调函数接收三个参数：
    • element：当前正在处理的元素。
    • index：当前正在处理的元素的索引。
    • array：调用find()方法的数组。
• 返回值：
  • 找到符合条件的第一个元素，如果没有找到则返回undefined。
• 具体使用示例：

var numbers = [1, 2, 3, 4, 5];
var evenNumber = numbers.find(function(element) {
  return element % 2 === 0;
});

console.log(evenNumber); // 输出: 2

findIndex()

用于在数组中查找符合条件的第一个元素的索引，并返回该索引。(注意： findIndex()方法只返回符合条件的第一个元素的索引。如果数组中有多个元素满足条件，findIndex()方法也只会返回第一个符合条件的元素的索引。)

• 语法：

array.findIndex(callback);

• 参数：
  • callback：必需，表示用于测试每个元素的回调函数。该回调函数接收三个参数：
    • element：当前正在处理的元素。
    • index：当前正在处理的元素的索引。
    • array：调用findIndex()方法的数组。
• 返回值：
  • 找到符合条件的第一个元素的索引，如果没有找到则返回-1。
• 具体使用示例：

var numbers = [1, 2, 3, 4, 5];
var evenIndex = numbers.findIndex(function(element) {
  return element % 2 === 0;
});

console.log(evenIndex); // 输出: 1

fill()

用于将数组的所有元素替换为静态值，从指定的起始索引开始到指定的结束索引结束。(注意： fill()方法会改变原始数组，而不是创建一个新数组。)

• 语法：

array.fill(value, start, end);

• 参数：
  • value：必需，表示要用来填充数组的静态值。
  • start：可选，表示填充开始的索引，默认为0。
  • end：可选，表示填充结束的索引，默认为数组的长度。
• 返回值：
  • 修改后的数组。
• 具体使用示例：

var numbers = [1, 2, 3, 4, 5];
numbers.fill(0, 2, 4);

console.log(numbers); // 输出: [1, 2, 0, 0, 5]

copyWithin()

用于将数组中的一部分元素复制到指定的位置。(注意： copyWithin()方法会改变原始数组，而不是创建一个新数组。)

• 语法：

array.copyWithin(target, start, end);

• 参数：
  • target：必需，表示复制的目标位置，即复制到哪个索引位置。
  • start：可选，表示复制的起始位置，默认为0。
  • end：可选，表示复制的结束位置，默认为数组的长度。
• 返回值：
  • 修改后的数组。
• 具体使用示例：

var numbers = [1, 2, 3, 4, 5];
numbers.copyWithin(0, 3, 5);

console.log(numbers); // 输出: [4, 5, 3, 4, 5]

includes()

用于判断数组是否包含指定的值。

• 语法：

array.includes(value, fromIndex);

• 参数：
  • value：必需，表示要查找的值。
  • fromIndex：可选，表示从哪个索引位置开始搜索，默认为0。
• 返回值：
  • 如果数组中包含指定的值，则返回true，否则返回false。
• 具体使用示例：

var numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // 输出: true
console.log(numbers.includes(6)); // 输出: false