Published on

Js数组常用方法

Authors

JavaScript中的数组是一种用于存储和操作多个值的数据结构。它可以包含任意类型的值，包括数字、字符串、对象、函数等。数组在JavaScript中是一种有序的、可变长度的集合，可以通过索引访问和操作其中的元素。

以下是一些关于JavaScript数组的特点和功能：

  1. 有序集合：数组中的元素按照它们在数组中的顺序进行存储和访问。第一个元素的索引为0，第二个元素的索引为1，以此类推。

  2. 可变长度：JavaScript数组的长度是可变的，可以动态地添加或删除元素。数组的长度可以通过 length 属性进行访问和修改。

  3. 弱类型：数组中的元素可以是任意类型的值。同一个数组中可以同时包含不同类型的元素。

  4. 索引访问：可以使用方括号和索引值来访问数组中的元素。例如，array[0] 表示数组中的第一个元素。

  5. 常见操作：JavaScript提供了许多用于操作和处理数组的内置方法，如添加、删除、修改、筛选、排序等。这些方法可以通过数组对象进行调用，例如 array.push()、array.pop()、array.slice() 等。

  6. 迭代和遍历：可以使用循环结构（如 for 循环、forEach() 方法）来遍历数组中的元素，对每个元素执行相应的操作。

  7. 长度和空数组：可以通过 length 属性获取数组的长度。创建一个空数组可以使用 [] 或 new Array()。

  8. 数组的复制和合并：可以使用 slice() 方法复制数组，使用 concat() 方法合并多个数组。

  9. 数组的搜索和判断：可以使用 indexOf()、lastIndexOf()、includes() 等方法来搜索数组中的元素，并使用 Array.isArray() 方法判断一个值是否为数组。

JavaScript数组是非常常用和灵活的数据结构，它提供了丰富的方法和功能，可以方便地进行元素的增删改查，并进行各种操作和处理。

js 数组常用方法

  • ​​push()​​: 向数组的末尾添加一个或多个元素，并返回新的长度。
  • ​​pop()​​: 删除数组的最后一个元素，并返回该元素的值。
  • ​​shift()​​: 删除数组的第一个元素，并返回该元素的值。
  • ​​unshift()​​: 向数组的开头添加一个或多个元素，并返回新的长度。
  • ​​concat()​​: 连接两个或多个数组，并返回一个新的数组。
  • ​​slice()​​: 从数组中提取指定位置的元素，并返回一个新的数组。
  • ​​splice()​​: 从数组中删除、替换或添加元素，并返回被删除的元素。
  • ​​indexOf()​​: 返回指定元素在数组中的第一个匹配位置的索引，如果不存在则返回 -1。
  • ​​lastIndexOf()​​: 返回指定元素在数组中的最后一个匹配位置的索引，如果不存在则返回 -1。
  • ​​join()​​: 将数组中的所有元素连接成一个字符串，并返回该字符串。
  • ​​forEach()​​: 对数组中的每个元素执行指定的函数。
  • ​​map()​​: 创建一个新数组，其中的元素是原始数组经过指定函数处理后的值。
  • ​​filter()​​: 创建一个新数组，其中的元素是原始数组中满足指定条件的元素。
  • ​​reduce()​​: 对数组中的所有元素执行指定的累加函数，返回一个累积的结果。
  • ​​sort()​​: 对数组的元素进行排序。
  • ​​reverse()​​: 反转数组中的元素顺序。
  • ​​includes()​​: 判断数组是否包含指定元素，返回一个布尔值。
  • ​​some()​​: 检测数组中是否至少有一个元素满足指定条件，返回一个布尔值。
  • ​​every()​​: 检测数组中的所有元素是否满足指定条件，返回一个布尔值。
  • ​​find()​​​: 返回数组中满足指定条件的第一个元素，如果不存在则返回 ​​undefined​​。

栗子

  1. ​​push()​​ 和 ​​pop()​​:
let fruits = ['apple', 'banana'];
fruits.push('orange'); // 在数组末尾添加新元素
console.log(fruits); // 输出: ['apple', 'banana', 'orange']
let lastFruit = fruits.pop(); // 删除并返回数组的最后一个元素
console.log(lastFruit); // 输出: 'orange'

适用场景：当需要在数组的末尾添加元素或者删除最后一个元素时，可以使用这两个方法。

  1. ​​shift()​​ 和 ​​unshift()​​:
let fruits = ['apple', 'banana'];
fruits.shift(); // 删除并返回数组的第一个元素
console.log(fruits); // 输出: ['banana']
fruits.unshift('orange'); // 在数组开头添加新元素
console.log(fruits); // 输出: ['orange', 'banana']

适用场景：当需要在数组的开头添加元素或者删除第一个元素时，可以使用这两个方法。

  1. ​​concat()​​:
let fruits = ['apple', 'banana'];
let moreFruits = ['orange', 'grape'];
let allFruits = fruits.concat(moreFruits); // 连接两个数组
console.log(allFruits); // 输出: ['apple', 'banana', 'orange', 'grape']

适用场景：当需要将两个或多个数组连接成一个新的数组时，可以使用 ​​concat()​​ 方法。

  1. ​​slice()​​:
let fruits = ['apple', 'banana', 'orange', 'grape'];
let citrusFruits = fruits.slice(2, 4); // 提取指定位置的元素
console.log(citrusFruits); // 输出: ['orange', 'grape']

适用场景：当需要从数组中提取指定位置的元素创建一个新的数组时，可以使用 ​​slice()​​ 方法。

  1. ​​splice()​​:
let fruits = ['apple', 'banana', 'orange', 'grape'];
let removedFruits = fruits.splice(1, 2, 'kiwi', 'melon'); // 删除元素并插入新元素
console.log(fruits); // 输出: ['apple', 'kiwi', 'melon', 'grape']
console.log(removedFruits); // 输出: ['banana', 'orange']

适用场景：当需要从数组中删除、替换或添加元素时，可以使用 ​​splice()​​ 方法。

  1. ​​indexOf()​​ 和 ​​lastIndexOf()​​:
let fruits = ['apple', 'banana', 'orange', 'banana', 'grape'];
let bananaIndex = fruits.indexOf('banana'); // 查找元素的第一个匹配位置
console.log(bananaIndex); // 输出: 1
let lastBananaIndex = fruits.lastIndexOf('banana'); // 查找元素的最后一个匹配位置
console.log(lastBananaIndex); // 输出: 3

适用场景：当需要查找数组中指定元素的位置时，可以使用这两个方法。

  1. join():
let fruits = ['apple', 'banana', 'orange'];
let fruitString = fruits.join(', '); // 将数组元素连接成字符串
console.log(fruitString); // 输出: 'apple, banana, orange'

适用场景：当需要将数组中的元素连接成一个字符串时，可以使用 join() 方法。

  1. forEach():
let fruits = ['apple', 'banana', 'orange'];
fruits.forEach(function(fruit) {
  console.log(fruit); // 遍历数组并对每个元素执行函数
});

适用场景：当需要对数组中的每个元素执行相同的操作时，可以使用 forEach() 方法。

  1. map():
let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map(function(number) {
  return number * 2; // 对数组中的每个元素执行函数，并返回新的值组成的数组
});
console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

适用场景：当需要对数组中的每个元素进行处理，并返回一个新的数组时，可以使用 map() 方法。

  1. filter():
let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0; // 返回满足条件的元素组成的新数组
});
console.log(evenNumbers); // 输出: [2, 4]

适用场景：当需要从数组中筛选出满足特定条件的元素，并返回一个新的数组时，可以使用 filter() 方法。

  1. reduce():
let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(acc, number) {
  return acc + number; // 对数组中的所有元素执行累加操作，返回累积的结果
}, 0);
console.log(sum); // 输出: 15

适用场景：当需要对数组中的所有元素进行累积操作，得到一个最终的结果时，可以使用 reduce() 方法。

  1. sort():
let fruits = ['banana', 'apple', 'orange'];
fruits.sort(); // 对数组元素进行排序
console.log(fruits); // 输出: ['apple', 'banana', 'orange']

适用场景：当需要对数组中的元素进行排序时，可以使用 sort() 方法。

  1. reverse():
let fruits = ['apple', 'banana', 'orange'];
fruits.reverse(); // 反转数组元素的顺序
console.log(fruits); // 输出: ['orange', 'banana', 'apple']

适用场景：当需要反转数组中元素的顺序时，可以使用 reverse() 方法。

  1. includes():
let fruits = ['apple', 'banana', 'orange'];
let hasApple = fruits.includes('apple'); // 检查数组是否包含指定元素
console.log(hasApple); // 输出: true

适用场景：当需要判断数组是否包含某个元素时，可以使用 includes() 方法。

  1. some():
let numbers = [1, 2, 3, 4, 5];
let hasEvenNumber = numbers.some(function(number) {
  return number % 2 === 0; // 检查数组中是否存在满足条件的元素
});
console.log(hasEvenNumber); // 输出: true

适用场景：当需要判断数组中是否至少有一个元素满足特定条件时，可以使用 some() 方法。

  1. every():
let numbers = [1, 2, 3, 4, 5];
let allEvenNumbers = numbers.every(function(number) {
  return number % 2 === 0; // 检查数组中的所有元素是否都满足条件
});
console.log(allEvenNumbers); // 输出: false

适用场景：当需要判断数组中的所有元素是否都满足特定条件时，可以使用 every() 方法。

  1. find():
let numbers = [1, 2, 3, 4, 5];
let evenNumber = numbers.find(function(number) {
  return number % 2 === 0; // 返回数组中满足条件的第一个元素
});
console.log(evenNumber); // 输出: 2

适用场景：当需要找到数组中满足特定条件的第一个元素时，可以使用 find() 方法。

js 数组注意事项

在使用JavaScript数组时，有一些需要注意的事项：

  1. 数组下标从0开始：在JavaScript中，数组的索引是从0开始的。因此，第一个元素的索引为0，第二个元素的索引为1，以此类推。需要注意不要越界或混淆索引和长度。

  2. 动态长度：JavaScript数组的长度是可变的，可以通过添加或删除元素来改变数组的长度。在操作数组时，要注意维护正确的长度和索引关系。

  3. 弱类型元素：JavaScript数组可以包含不同类型的元素。这意味着在进行操作时，要注意元素的类型转换和一致性，以避免意外的行为。

  4. 原地修改和返回值：JavaScript数组的许多方法（如 push()、pop()、splice() 等）会在原地修改数组，并返回相应的结果。需要注意是否需要保留原始数组或处理返回值。

  5. 遍历方法的回调函数：在使用数组的遍历方法（如 forEach()、map()、filter() 等）时，需要注意回调函数的使用。确保回调函数正确处理每个元素，并返回期望的结果。

  6. 对象引用：当数组中的元素是对象时，要注意对象的引用问题。修改数组中的对象元素可能会影响到原始对象。需要小心处理对象的拷贝或引用，以避免意外的副作用。

  7. 性能考虑：在处理大型数组或需要频繁操作的情况下，要注意数组方法的性能。某些方法（如 splice()）可能会导致数组的重新分配和复制，影响性能。在需要高性能的场景下，可以考虑使用更适合的数据结构或算法。

  8. 数组方法的兼容性：不同的JavaScript环境和版本可能对数组方法的支持有所不同。在开发中，要注意目标环境的兼容性，并根据需要进行必要的兼容性处理或使用替代方法。

这些是在使用JavaScript数组时需要注意的一些事项。遵循这些注意事项可以帮助您更好地使用和处理数组，避免潜在的问题和错误。

ES6

需要注意的是，ES6新增的数组方法在一些较旧的JavaScript环境中可能不被支持。为了确保兼容性，可以采取以下方法：

  1. Polyfill：为不支持的环境提供兼容性代码，以模拟新增方法的行为。可以使用第三方库（如 Babel）或手动编写兼容性代码。

  2. 转译：使用构建工具（如 Babel）将使用ES6语法的代码转换为较旧的JavaScript版本，以确保在目标环境中的兼容性。

  3. 特性检测：在使用新增方法之前，可以使用特性检测（如 Array.prototype.methodName）来检查目标环境是否支持该方法，并根据结果选择是否使用该方法或提供替代方案。

总之，ES6新增的数组方法提供了更多的便利和灵活性，但在使用时需要注意目标环境的兼容性，并采取相应的兼容性策略。

Discuss on Twitter • View on GitHub