前端数组方法大全

1.push()

push 是 JavaScript 中数组对象的一个方法，它用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度。

语法   

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

• arr：要操作的数组。
• element1, element2, ..., elementN：要添加到数组末尾的一个或多个元素

let fruits = ['apple', 'banana']
let newLength = fruits.push('orange', 'pear')
// 现在，fruits 数组变为 ['apple', 'banana', 'orange', 'pear']
// newLength 的值为 4，即新数组的长度

注意事项

• 方法会改变原始数组，并返回新数组的长度。
• 被添���到数组的元素将按照顺序依次添加到数组的末尾。
• push 方法可以接受任意数量的参数，每个参数都会被添加到数组中。

push 方法通常用于向数组中动态添加元素，特别是在需要扩展数组时非常有用

2.pop()

pop() 是 JavaScript 数组对象的一个方法，用于删除数组中的最后一个元素，并返回被删除的元素。

语法

arr.pop()

• arr：要操作的数组。

示例

let fruits = ['apple', 'banana', 'orange'];
let lastFruit = fruits.pop();
// 现在，fruits 数组变为 ['apple', 'banana']，lastFruit 的值为 "orange"

注意事项

• pop() 方法会改变原始数组，并返回被删除的元素。
• 如果数组为空，则 pop() 将不会改变数组，并返回 undefined。
• 这个方法是改变原数组的，它直接修改了数组本身，而不是返回一个新数组。

pop() 方法通常用于从数组中删除最后一个元素。这在需要动态调整数组长度或者处理栈数据结构时非常有用。

3.unshift()

unshift() 是 JavaScript 数组对象的一个方法，用于向数组的开头添加一个或多个元素，并返回修改后的数组的新长度。

语法

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

• arr：要操作的数组。
• element1, element2, ..., elementN：要添加到数组开头的一个或多个元素。

示例

let fruits = ['apple', 'banana'];
let newLength = fruits.unshift('orange', 'pear');
// 现在，fruits 数组变为 ['orange', 'pear', 'apple', 'banana']
// newLength 的值为 4，即新数组的长度

注意事项

• 方法会改变原始数组，并返回新数组的长度。
• 被添加到数组开头的元素将按照参数列表的顺序依次添加到数组的开头。
• unshift() 方法可以接受任意数量的参数，每个参数都会被添加到数组中。

unshift() 方法通常用于向数组中动态添加元素到开头位置。这在需要插入元素并保持数组顺序时非常有用。

4.shift()

shift() 是 JavaScript 数组对象的一个方法，用于删除数组中的第一个元素，并返回被删除的元素。

语法

arr.shift()

• arr：要操作的数组。

示例

let fruits = ['apple', 'banana', 'orange'];
let firstFruit = fruits.shift();
// 现在，fruits 数组变为 ['banana', 'orange']，firstFruit 的值为 "apple"

注意事项

• shift() 方法会改变原始数组，并返回被删除的元素。
• 如果数组为空，则 shift() 将不会改变数组，并返回 undefined。
• 这个方法是改变原数组的，它直接修改了数组本身，而不是返回一个新数组。

shift() 方法通常用于从数组中删除第一个元素。这在需要按顺序处理队列数据结构或者动态调整数组长度时非常有用

5.concat()

concat() 是 JavaScript 数组对象的一个方法，用于合并两个或多个数组，并返回一个新数组，而不会改变原始数组。

语法

const newConcatArray = arr1.concat(arr2, arr3, ..., arrN)

• arr1, arr2, ..., arrN：要合并的数组。可以是一个或多个数组。

示例

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2);
// 现在，newArr 的值为 [1, 2, 3, 4, 5, 6]

注意事项

• concat() 方法不会改变原始数组，而是返回一个新的合并后的数组。
• 当传入的参数是数组时，concat() 方法会将这些数组中的元素添加到新数组中，而不是将数组本身作为整个元素添加进去。
• concat() 方法可以接受单个数组作为参数，也可以接受多个数组作为参数。

concat() 方法经常被用来合并数组，并创建一个新的数组，它不会修改已有的数组，而是返回一个包含了所有合并元素的新数组。

6.slice()

slice() 是 JavaScript 数组对象的一个方法，用于从数组中提取某个范围内的元素，并返回一个新数组，而不改变原始数组

语法

const newArray = arr.slice(start, end)

• arr：要操作的数组。
• start：可选，从该索引处开始提取原数组中的元素（包括该索引）。如果未指定，默认为 0。
• end：可选，在该索引处结束提取（但不包括该索引）。如果未指定，则提取至数组末尾。

示例

let fruits = ['apple', 'banana', 'orange', 'grape', 'peach'];
let newFruits = fruits.slice(1, 3);
// 现在，newFruits 的值为 ['banana', 'orange']

注意事项

• slice() 方法不会改变原始数组，而是返回一个新的包含提取元素的数组。
• 如果省略 end 参数，则 slice() 方法会一直提取到原数组的末尾。
• 负数作为参数代表从末尾开始计算的位置，-1 表示倒数第一个元素。

slice() 方法常用于从现有数组中提取出需要的部分，例如根据索引范围获取子数组或者克隆数组

7.indexOf()

indexOf() 是 JavaScript 数组对象的一个方法，用于返回指定元素在数组中第一次出现的索引，如果不存在则返回 -1。

语法

arr.indexOf(searchElement, fromIndex)

• arr：要搜索的数组。
• searchElement：要查找的元素。
• fromIndex：可选，从该索引处开始查找。如果省略，则从数组的开头进行搜索。如果提供的索引值大于或等于数组长度，将会返回 -1。

示例

let fruits = ['apple', 'banana', 'orange', 'banana', 'peach'];
let index = fruits.indexOf('banana');
// 现在，index 的值为 1

let newIndex = fruits.indexOf('banana', 2);
// 现在，newIndex 的值为 3

注意事项

• 如果要查找的元素在数组中多次出现，indexOf() 方法返回第一次出现的索引。
• 如果要查找的元素不存在于数组中，indexOf() 将返回 -1。
• 可以使用 fromIndex 参数来指定从哪个索引开始进行搜索。

indexOf() 方法通常用于确定数组中是否包含某个特定元素，以及该元素第一次出现的位置。

8.includes()

includes() 是 JavaScript 数组对象的一个方法，用于判断数组中是否包含某个特定元素，并返回相应的布尔值。

语法

arr.includes(searchElement, fromIndex)

• arr：要搜索的数组。
• searchElement：要查找的元素。
• fromIndex：可选，从该索引处开始查找。如果省略，则从数组的开头进行搜索。

示例

let fruits = ['apple', 'banana', 'orange', 'peach'];
let hasBanana = fruits.includes('banana');
// 现在，hasBanana 的值为 true

let hasOrange = fruits.includes('orange', 2);
// 现在，hasOrange 的值为 false，因为在指定索引位置之后没有找到'orange'

注意事项

• 如果给定元素在数组中找到，则 includes() 返回 true，否则返回 false。
• 可以使用 fromIndex 参数来指定从哪个索引开始进行搜索。

includes() 方法通常用于检查数组中是否包含某个特定元素，返回的是布尔值，非常适合需要判断数组中是否存在某个元素的情况。

8.sort()

sort() 是 JavaScript 数组对象的一个方法，用于对数组的元素进行排序，并返回排序后的数组。默认情况下，sort() 方法将按照字符串 Unicode 码点进行排序。

语法

arr.sort(***pareFunction)

• arr：要排序的数组。
• ***pareFunction：可选，用来指定排序顺序。如果不传递该参数，元素将被转换为字符串，然后按照各自的 Unicode 码点进行排序。

示例

let numbers = [4, 2, 5, 1, 3];
numbers.sort();
// 现在，numbers 的值为 [1, 2, 3, 4, 5]

let fruits = ['banana', 'Orange', 'apple', 'cherry'];
fruits.sort();
// 现在，fruits 的值为 ["Orange", "apple", "banana", "cherry"]

注意事项

• 如果不提供 ***pareFunction 参数，sort() 将默认使用字符串排列顺序进行排序。
• 若要按照其他方式排序（例如数值大小），可以传入一个比较函数作为参数。

使用比较函数进行排序

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
// 现在，numbers 的值为 [1, 2, 3, 4, 5]

sort() 方法是对数组中的元素进行排序的一种便捷方式，但需要注意，默认情况下它会将元素作为字符串处理进行排序，因此当需要按其他方式排序时，需要使用比较函数。 

9.reverse()

reverse() 是 JavaScript 数组对象的一个方法，用于颠倒数组中元素的顺序，并返回颠倒顺序后的数组。原始数组将被修改。

语法

arr.reverse()

• arr：要操作的数组。

示例

let fruits = ['apple', 'banana', 'orange', 'peach'];
fruits.reverse();
// 现在，fruits 的值为 ['peach', 'orange', 'banana', 'apple']

注意事项

• reverse() 方法会改变原始数组，而不是返回一个新数组。
• 该方法用于颠倒数组中元素的顺序，可用于逆序展示数组的内容或者对数组内容进行逆序处理。

reverse() 方法可以轻松地对数组中的元素顺序进行逆转，但需要注意它直接修改了原数组。

10.join()

join() 是 JavaScript 数组对象的一个方法，用于将数组中所有元素以指定的分隔符连接成一个字符串，并返回这个字符串。

语法

arr.join(separator)

• arr：要操作的数组。
• separator：可选，指定连接元素时要使用的分隔符。如果省略，则默认为逗号 ","。

示例

let fruits = ['apple', 'banana', 'orange'];
let result = fruits.join(', ');
// 现在，result 的值为 "apple, banana, orange"

let numbers = [1, 2, 3];
let numString = numbers.join('-');
// 现在，numString 的值为 "1-2-3"

注意事项

• join() 方法不会改变原始数组，而是返回一个将数组元素连接起来的新字符串。
• 如果数组中的元素是对象，那么在转换为字符串时会调用每个元素的 toString() 方法。

join() 方法通常用于将数组中的元素连接成一个字符串，特别适合于需要展示数组内容或者构建特定格式的字符串时使用。

11.String()

在 JavaScript 中，String() 是一个内置函数，用于将其他类型的值转换为字符串。

语法

• value：要转换为字符串的值。

示例

let num = 10;
let strNum = String(num);
// 现在，strNum 的值为 "10"，是一个字符串类型的值

let bool = true;
let strBool = String(bool);
// 现在，strBool 的值为 "true"，是一个字符串类型的值

let arr = [1, 2, 3];
let strArr = String(arr);
// 现在，strArr 的值为 "1,2,3"，是一个包含数组内容的字符串

注意事项

• 如果 value 是一个对象，String() 方法将返回对象的类型。
• 如果 value 是 null，String(null) 将返回 "null"。
• 如果 value 是 undefined，String(undefined) 将返回 "undefined"。
• 如果 value 是字符串类型，String() 方法将返回 value 对应的字符串本身。

使用 String() 函数可以将数字、布尔值、数组等各种类型的值转换为字符串，这在拼接字符串或者以字符串形式呈现数据时非常有用

12.toString() 

在JavaScript中，toString() 是一个内置函数，用于将某个对象转换为字符串。

语法

object.toString()

示例

let num = 10;
let strNum = num.toString();
// 现在，strNum 的值为 "10"，是一个字符串类型的值

let bool = true;
let strBool = bool.toString();
// 现在，strBool 的值为 "true"，是一个字符串类型的值

let arr = [1, 2, 3];
let strArr = arr.toString();
// 现在，strArr 的值为 "1,2,3"，是一个包含数组内容的字符串

对于数字、布尔值和数组这些基本数据类型，它们都有 toString() 方法，可以用来将它们转换成对应的字符串。

对于自定义对象，你可以根据自己的需要重写 toString() 方法，以便返回特定的字符串表示形式。当你需要自定义对象的字符串表示时，重写 toString() 方法可以派上用场。

总的来说，toString() 方法对于将不同类型的值转换为字符串是非常有用的，并且在日常的 JavaScript 编程中经常会被使用到。

模板字符串

使用反引号 (`) 创建模板字符串可以将其他数据类型转换为字符串。

let num = 42;
let strNum = `${num}`; // 将数字转换为字符串，结果为 "42"

let bool = true;
let strBool = `${bool}`; // 将布尔值转换为字符串，结果为 "true"

let date = new Date();
let strDate = `${date}`; // 将日期转换为字符串，结果为 日期的字符串表示形式

let arr = [1, 2, 3];
let strArr = `${arr}`; // 将数组转换为字符串，结果为 "1,2,3"

let obj = { key: "value" };
let strObj = `${obj}`; // 将对象转换为字符串（'[object Object]'）

JSON.stringify() 方法

对于对象及其包含的值，可以使用 JSON.stringify() 方法将其转换为字符串。

let obj = { key: "value" };
let strObj = JSON.stringify(obj); // 将对象转换为字符串，结果为 '{"key":"value"}'
let arr = [1, 2, 3];
let strArr = JSON.stringify(arr); // 将数组转换为字符串，结果为 '[1,2,3]'
let num = 42;
let strNum = JSON.stringify(num); // 将数字转换为字符串，结果为 '42'
let bool = true;
let strBool = JSON.stringify(bool); // 将布尔值转换为字符串，结果为 'true'
let date = new Date();
let strDate = JSON.stringify(date); // 将日期转换为字符串，结果为 日期的字符串表示形式

数组长度

• length

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

// 获取数组的长度
console.log(arr.length); // 输出: 5

// 设置数组的长度
arr.length = 3; // 截断数组，只保留前三个元素
console.log(arr); // 输出: [1, 2, 3]

arr.length = 5; // 增加数组的长度，剩余位置用 undefined 填充
console.log(arr); // 输出: [1, 2, 3, undefined, undefined]

arr.length = 7; // 增加数组的长度，剩余位置用 undefined 填充
console.log(arr); // 输出: [1, 2, 3, undefined, undefined, undefined, undefined]

数组遍历方法

• forEach()
• map()
• filter()
• every()
• some()

1.forEach()

forEach() 是 JavaScript 数组对象的一个方法，用于对数组中的每个元素执行提供的回调函数一次。

语法

arr.forEach(callback(currentValue, index, array))

• arr：要操作的数组。
• callback：为数组中每个元素执行的函数。
  • currentValue：当前正在处理的元素。
  • index：可选，当前正在处理的元素在数组中的索引。
  • array：可选，当前正在处理的数组。

示例

let numbers = [1, 2, 3];
numbers.forEach(function(number) {
  console.log(number);
});
// 输出：
// 1
// 2
// 3

注意事项

• forEach() 方法会按照数组中元素的顺序依次执行提供的回调函数。
• 与普通的 for 循环相比，forEach() 提供了更简洁和易读的方式来遍历数组并对其中的元素进行操作。

forEach() 方法常用于遍历数组中的元素，在每个元素上执行指定的操作或者对数组进行处理。

2.map()

map() 是 JavaScript 数组对象的一个方法，用于对数组中的每个元素执行提供的回调函数，并返回执行后的结果组成的新数组。

语法

const newArray = arr.map(callback(currentValue, index, array))

• arr：要操作的数组。
• callback：为数组中每个元素执行的函数。
  • currentValue：当前正在处理的元素。
  • index：可选，当前正在处理的元素在数组中的索引。
  • array：可选，当前正在处理的数组。

示例

let numbers = [1, 2, 3];
let squaredNumbers = numbers.map(function(number) {
  return number * number;
});
// 现在，squaredNumbers 的值为 [1, 4, 9]

注意事项

• map() 方法会按照数组中元素的顺序依次执行提供的回调函数，并将每次执行的结果保存到一个新的数组中。
• map() 方法不会改变原始数组，而是返回一个新的包含处理后元素的数组。

map() 方法常用于遍历数组并将其中的元素映射成另一种形式，生成一个新的数组。

3.filter()

filter() 是 JavaScript 数组对象的一个方法，用于创建一个由所有通过测试的元素组成的新数组。传递给 filter() 的函数将为数组中的每个元素调用，并返回满足条件的元素所组成的新数组。

语法

const newArray = arr.filter(callback(element, index, array))

• arr：要操作的数组。
• callback：用来测试数组中的每个元素的函数。
  • element：当前正在处理的元素。
  • index：可选，当前正在处理的元素在数组中的索引。
  • array：可选，当前正在处理的数组。

示例

let numbers = [1, 2, 3, 4, 5];
let filteredNumbers = numbers.filter(function(number) {
  return number % 2 === 0; // 返回偶数
});
// 现在，filteredNumbers 的值为 [2, 4]

注意事项

• filter() 方法会按照数组中元素的顺序依次执行提供的回调函数，并将满足条件的元素保存到一个新的数组中。
• filter() 方法不会改变原始数组，而是返回一个新的包含满足条件元素的数组。

filter() 方法通常用于从数组中筛选出满足特定条件的元素，生成一个新的数组。

4.every()

every() 是 JavaScript 数组对象的一个方法，用于检测数组中的所有元素是否都满足指定条件，并返回布尔值。

语法

arr.every(callback(currentValue, index, array))

• arr：要操作的数组。
• callback：用于测试每个元素的函数。
  • currentValue：当前正在处理的元素。
  • index：可选，当前正在处理的元素在数组中的索引。
  • array：可选，当前正在处理的数组。

示例

let numbers = [2, 4, 6, 8, 10];
let allEven = numbers.every(function(number) {
  return number % 2 === 0;
});
// 现在，allEven 的值为 true

注意事项

• every() 方法会按照数组中元素的顺序依次执行提供的回调函数，如果所有元素都满足条件，则返回 true，否则返回 false。
• 如果数组为空，则 every() 方法返回 true。

every() 方法通常用于检查数组中的所有元素是否都满足特定条件，例如检查数组中的数字是否全部大于某个数，或者数组中的字符串是否都满足某个条件

5.some()

some() 是 JavaScript 数组对象的一个方法，用于检测数组中是否有至少一个元素满足指定条件，并返回布尔值。

语法

arr.some(callback(currentValue, index, array))

• arr：要操作的数组。
• callback：用于测试每个元素的函数。
  • currentValue：当前正在处理的元素。
  • index：可选，当前正在处理的元素在数组中的索引。
  • array：可选，当前正在处理的数组。

示例

let numbers = [1, 2, 3, 4, 5];
let hasEven = numbers.some(function(number) {
  return number % 2 === 0;
});
// 现在，hasEven 的值为 true

注意事项

• some() 方法会按照数组中元素的顺序依次执行提供的回调函数，如果有至少一个元素满足条件，则返回 true，否则返回 false。
• 如果数组为空，则 some() 方法返回 false。

some() 方法通常用于检查数组中是否至少有一个元素满足特定条件，例如检查数组中的数字是否有任何一个能够被另一个数整除，或者数组中的字符串是否有任何一个满足某个条件。