关于数组的操作
一、插入 / 删除元素:
我们就不从创建开始讲了,那个太基础了,js创建数组一般都直接let arr = […,…,…],有部分仁兄喜欢new Array(…, …, …),这样看起来可能高级点,结果是一样的哈。
这里我们直接来讨论插入元素:
1、在末尾插入 / 删除元素(push / pop,操作原数组)
push 方法用于在数组的末尾添加一个或多个元素,并返回新数组的长度。这是常用于将元素追加到数组的方法。
const fruits = ['apple', 'banana', 'cherry'];
fruits.push('grape'); // 向数组末尾添加 'grape'
fruits.pop(); // 删除末尾的 'grape'
2、在开头插入元素 / 删除开头元素(unshift / shift,操作原数组)
unshift方法:unshift 方法用于在数组的开头添加一个或多个元素,并返回新数组的长度。
const fruits = ['banana', 'cherry'];
fruits.unshift('apple'); // 向数组开头添加 'apple'
shift方法:shift 方法用于删除数组的第一个元素,并返回被删除的元素。
const fruits = ['apple', 'banana', 'cherry'];
const removedFruit = fruits.shift(); // 删除 'apple'
console.log(removedFruit); // 'apple'
3、(重要)在指定位置插入元素、替换元素或删除元素(splice)
splice方法:splice 方法可以用于在指定位置插入元素、替换元素或删除元素。它可以执行更灵活的操作,因为你可以指定插入位置和要插入的元素。
(1)在指定位置插入
array.splice(startIndex, deleteCount, item1, item2, ...);
参数解释:
startIndex:要插入元素的起始索引位置。
deleteCount:要删除的元素数量(可选,如果不删除元素,则传入 0)。
item1, item2, …:要插入到数组的元素(可选)。
示例,要在数组的第二个位置插入一个元素:
const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 0, 'grape'); // 在索引 1 处插入 'grape',不删除任何元素
console.log(fruits); // ['apple', 'grape', 'banana', 'cherry']
(2)删除指定位置元素,splice 方法也可以用于删除数组中的元素。你只需指定要删除的元素数量,并省略要插入的元素:
array.splice(startIndex, deleteCount);
示例,要删除数组的第二个元素:
const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1); // 从索引 1 开始删除一个元素
console.log(fruits); // ['apple', 'cherry']
(3)替换元素,splice 方法还可以用于替换数组中的元素。你可以指定要删除的元素数量,并提供要插入的新元素:
array.splice(startIndex, deleteCount, newItem1, newItem2, ...);
示例,要将数组中的第二个元素替换为新的元素:
const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1, 'grape'); // 从索引 1 开始删除一个元素并插入 'grape'
console.log(fruits); // ['apple', 'grape', 'cherry']
总结:splice 方法是一个非常灵活的数组操作方法,可以用于插入、删除、替换元素,根据需要对数组进行修改。要使用它,只需了解参数的用法并根据具体的需求进行调整。同时,要注意 splice 会直接修改原数组,所以在使用时要小心。
4、拼接数组(concat)
(1)合并多个数组,可以通过传递多个数组参数,将它们全部合并到一个新数组中(移动端的下拉分页加载更多经常会用到):
const arr1 = [1, 2];
const arr2 = ['a', 'b'];
const arr3 = [true, false];
const mergedArray = arr1.concat(arr2, arr3);
console.log(mergedArray); // [1, 2, 'a', 'b', true, false]
(2)合并值到现有数组,通过将这些值作为参数传递给 concat 方法:
const originalArray = [1, 2, 3];
const newValue = 4;
const newArray = originalArray.concat(newValue);
console.log(newArray); // [1, 2, 3, 4]
注意事项:concat 方法不会修改原始数组,而是返回一个新数组。
如果传递给 concat 的参数为空,则它会创建原数组的一个浅拷贝。
如果要合并大量数组,使用 concat 可能不是最高效的方法,因为它会创建新的数组,这可能会导致性能问题。在合并大型数组时,可以考虑其他方法,例如使用 push 和循环。
concat 不会修改原始数组,但如果原始数组或任何合并的数组包含引用类型(如对象或数组),则它们的引用将保留在新数组中,这可能会导致意外的行为。如果需要深拷贝,请考虑使用其他方法来创建新数组。
总之,concat 方法是一个方便的数组合并工具,用于将一个或多个数组合并成一个新数组,不会修改原始数据。它在创建新数组时非常有用,并且可以处理多个数组的合并。
5、扩展运算符(…)
使用扩展运算符:ES6引入的扩展运算符可以用于将一个数组的元素展开到另一个数组中,从而实现元素的插入。
const fruits = ['apple', 'banana', 'cherry'];
const newFruits = [...fruits, 'grape']; // 创建一个新数组,并添加 'grape'
6、过滤元素(filter,删除用法,返回新的数组)
filter 方法创建一个新数组,其中包含满足特定条件的元素。你可以使用 filter 来过滤掉不需要的元素。
const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(num => num !== 3); // 删除等于 3 的元素
console.log(filteredNumbers); // [1, 2, 4, 5]
小结:
差不多以上就是数组所有的添加和删除元素方法了,这部分特别基础,适用于新手,同时有些不常用的方法,部分老手也经常忘记,包括我自己,于是我整理了一份出来,哎,只怪我太健忘。
二、将数组转换成字符串:join()和toString();将字符串分隔成数组:split()
join() 允许你指定分隔符,因此你可以自定义连接数组元素的方式。
toString() 不允许指定分隔符,它总是使用英文逗号 , 作为分隔符。
除了分隔符的区别,这两种方法的功能相似,都用于将数组元素转换为字符串。根据具体需求,你可以选择使用其中之一。如果需要自定义分隔符或连接方式,join() 更灵活;如果只需使用英文逗号分隔元素,toString() 更简洁。
const fruits = ['apple', 'banana', 'cherry'];
const fruitString = fruits.join(', '); // 使用逗号和空格分隔
console.log(fruitString); // 'apple, banana, cherry'
const fruits = ['apple', 'banana', 'cherry'];
const fruitString = fruits.toString();
console.log(fruitString); // 'apple,banana,cherry'
需要注意的是,这两种方法都不会修改原始数组,它们只是返回一个新的字符串表示形式。
split() 方法。这个方法可以将字符串按照指定的分隔符拆分成一个数组。以下是示例:文章来源:https://www.toymoban.com/news/detail-702975.html
const commaSeparatedString = "apple,banana,cherry";
// 使用逗号分隔的字符串转换为数组
const commaSeparatedArray = commaSeparatedString.split(",");
console.log(commaSeparatedArray); // ['apple', 'banana', 'cherry']
三、所有数组方法汇总(只有你想不到的,没有数组做不到的)
push():将一个或多个元素添加到数组的末尾,并返回新数组的长度。
pop():删除数组的最后一个元素,并返回被删除的元素。
shift():删除数组的第一个元素,并返回被删除的元素。
unshift():在数组的开头添加一个或多个元素,并返回新数组的长度。
concat():将一个或多个数组合并成一个新数组,而不修改原数组。
join():将数组的所有元素连接成一个字符串,并返回该字符串。
slice():从数组中提取一段子数组,不修改原数组。
splice():用于插入、删除和替换数组中的元素。
forEach():遍历数组的每个元素,并对其执行指定的函数。
map():创建一个新数组,其中包含根据指定函数的返回值从原始数组中的每个元素生成的结果。
filter():创建一个新数组,其中包含通过指定函数筛选的原始数组中的元素。
reduce():通过指定函数将数组的所有元素汇总成一个值。
reduceRight():类似于 reduce(),但是从数组的最后一个元素开始。
find():查找数组中满足指定条件的第一个元素,并返回该元素。
findIndex():查找数组中满足指定条件的第一个元素的索引,并返回该索引。
indexOf():查找数组中指定元素的第一个索引。
lastIndexOf():查找数组中指定元素的最后一个索引。
includes():检查数组是否包含指定元素。
some():检查数组中是否至少有一个元素满足指定条件。
every():检查数组中是否所有元素都满足指定条件。
sort():对数组元素进行排序(默认按字母顺序)。
reverse():颠倒数组中元素的顺序。
toString():将数组转换为字符串。
toLocaleString():将数组元素转换为本地化字符串。
isArray():检查一个值是否为数组。文章来源地址https://www.toymoban.com/news/detail-702975.html
到了这里,关于Js水几个基础知识点:数组的操作,字符串和数组之间的互转,持续补充,欢迎关注的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!