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：可选，表示作为初始值传递给回调函数的值。如果未提供初始值，则使用数组的第一个元素作为初始值，并从第二个元素开始遍历数组。
- callback：必需，表示用于处理数组中每个元素的回调函数。该回调函数接收四个参数：
- 返回值：
- 最终计算得到的结果。
- 具体使用示例：
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()方法的数组。
- callback：必需，表示用于测试每个元素的回调函数。该回调函数接收三个参数：
- 返回值：
- 找到符合条件的第一个元素，如果没有找到则返回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()方法的数组。
- callback：必需，表示用于测试每个元素的回调函数。该回调函数接收三个参数：
- 返回值：
- 找到符合条件的第一个元素的索引，如果没有找到则返回-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