關(guān)于數(shù)組的操作

一、插入 / 刪除元素：

我們就不從創(chuàng)建開(kāi)始講了，那個(gè)太基礎(chǔ)了，js創(chuàng)建數(shù)組一般都直接let arr = […,…,…]，有部分仁兄喜歡new Array(…, …, …)，這樣看起來(lái)可能高級(jí)點(diǎn)，結(jié)果是一樣的哈。
這里我們直接來(lái)討論插入元素：

1、在末尾插入 / 刪除元素（push / pop，操作原數(shù)組）

push 方法用于在數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新數(shù)組的長(zhǎng)度。這是常用于將元素追加到數(shù)組的方法。

const fruits = ['apple', 'banana', 'cherry'];
fruits.push('grape'); // 向數(shù)組末尾添加 'grape'
fruits.pop(); // 刪除末尾的 'grape'

2、在開(kāi)頭插入元素 / 刪除開(kāi)頭元素（unshift / shift，操作原數(shù)組）

unshift方法：unshift 方法用于在數(shù)組的開(kāi)頭添加一個(gè)或多個(gè)元素，并返回新數(shù)組的長(zhǎng)度。

const fruits = ['banana', 'cherry'];
fruits.unshift('apple'); // 向數(shù)組開(kāi)頭添加 'apple'

shift方法：shift 方法用于刪除數(shù)組的第一個(gè)元素，并返回被刪除的元素。

const fruits = ['apple', 'banana', 'cherry'];
const removedFruit = fruits.shift(); // 刪除 'apple'
console.log(removedFruit); // 'apple'

3、（重要）在指定位置插入元素、替換元素或刪除元素（splice）

splice方法：splice 方法可以用于在指定位置插入元素、替換元素或刪除元素。它可以執(zhí)行更靈活的操作，因?yàn)槟憧梢灾付ú迦胛恢煤鸵迦氲脑亍?br> （1）在指定位置插入

array.splice(startIndex, deleteCount, item1, item2, ...);

參數(shù)解釋?zhuān)?br> startIndex：要插入元素的起始索引位置。
deleteCount：要?jiǎng)h除的元素?cái)?shù)量（可選，如果不刪除元素，則傳入 0）。
item1, item2, …：要插入到數(shù)組的元素（可選）。
示例，要在數(shù)組的第二個(gè)位置插入一個(gè)元素：

const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 0, 'grape'); // 在索引 1 處插入 'grape'，不刪除任何元素
console.log(fruits); // ['apple', 'grape', 'banana', 'cherry']

（2）刪除指定位置元素，splice 方法也可以用于刪除數(shù)組中的元素。你只需指定要?jiǎng)h除的元素?cái)?shù)量，并省略要插入的元素：

array.splice(startIndex, deleteCount);

示例，要?jiǎng)h除數(shù)組的第二個(gè)元素：

const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1); // 從索引 1 開(kāi)始刪除一個(gè)元素
console.log(fruits); // ['apple', 'cherry']

（3）替換元素，splice 方法還可以用于替換數(shù)組中的元素。你可以指定要?jiǎng)h除的元素?cái)?shù)量，并提供要插入的新元素：

array.splice(startIndex, deleteCount, newItem1, newItem2, ...);

示例，要將數(shù)組中的第二個(gè)元素替換為新的元素：

const fruits = ['apple', 'banana', 'cherry'];
fruits.splice(1, 1, 'grape'); // 從索引 1 開(kāi)始刪除一個(gè)元素并插入 'grape'
console.log(fruits); // ['apple', 'grape', 'cherry']

總結(jié)：splice 方法是一個(gè)非常靈活的數(shù)組操作方法，可以用于插入、刪除、替換元素，根據(jù)需要對(duì)數(shù)組進(jìn)行修改。要使用它，只需了解參數(shù)的用法并根據(jù)具體的需求進(jìn)行調(diào)整。同時(shí)，要注意 splice 會(huì)直接修改原數(shù)組，所以在使用時(shí)要小心。

4、拼接數(shù)組（concat）

（1）合并多個(gè)數(shù)組，可以通過(guò)傳遞多個(gè)數(shù)組參數(shù)，將它們?nèi)亢喜⒌揭粋€(gè)新數(shù)組中（移動(dòng)端的下拉分頁(yè)加載更多經(jīng)常會(huì)用到）：

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）合并值到現(xiàn)有數(shù)組，通過(guò)將這些值作為參數(shù)傳遞給 concat 方法：

const originalArray = [1, 2, 3];
const newValue = 4;

const newArray = originalArray.concat(newValue);
console.log(newArray); // [1, 2, 3, 4]

注意事項(xiàng)：concat 方法不會(huì)修改原始數(shù)組，而是返回一個(gè)新數(shù)組。
如果傳遞給 concat 的參數(shù)為空，則它會(huì)創(chuàng)建原數(shù)組的一個(gè)淺拷貝。
如果要合并大量數(shù)組，使用 concat 可能不是最高效的方法，因?yàn)樗鼤?huì)創(chuàng)建新的數(shù)組，這可能會(huì)導(dǎo)致性能問(wèn)題。在合并大型數(shù)組時(shí)，可以考慮其他方法，例如使用 push 和循環(huán)。
concat 不會(huì)修改原始數(shù)組，但如果原始數(shù)組或任何合并的數(shù)組包含引用類(lèi)型（如對(duì)象或數(shù)組），則它們的引用將保留在新數(shù)組中，這可能會(huì)導(dǎo)致意外的行為。如果需要深拷貝，請(qǐng)考慮使用其他方法來(lái)創(chuàng)建新數(shù)組。
總之，concat 方法是一個(gè)方便的數(shù)組合并工具，用于將一個(gè)或多個(gè)數(shù)組合并成一個(gè)新數(shù)組，不會(huì)修改原始數(shù)據(jù)。它在創(chuàng)建新數(shù)組時(shí)非常有用，并且可以處理多個(gè)數(shù)組的合并。

5、擴(kuò)展運(yùn)算符（…）

使用擴(kuò)展運(yùn)算符：ES6引入的擴(kuò)展運(yùn)算符可以用于將一個(gè)數(shù)組的元素展開(kāi)到另一個(gè)數(shù)組中，從而實(shí)現(xiàn)元素的插入。

const fruits = ['apple', 'banana', 'cherry'];
const newFruits = [...fruits, 'grape']; // 創(chuàng)建一個(gè)新數(shù)組，并添加 'grape'

6、過(guò)濾元素（filter，刪除用法，返回新的數(shù)組）

filter 方法創(chuàng)建一個(gè)新數(shù)組，其中包含滿足特定條件的元素。你可以使用 filter 來(lái)過(guò)濾掉不需要的元素。

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(num => num !== 3); // 刪除等于 3 的元素
console.log(filteredNumbers); // [1, 2, 4, 5]

小結(jié)：

差不多以上就是數(shù)組所有的添加和刪除元素方法了，這部分特別基礎(chǔ)，適用于新手，同時(shí)有些不常用的方法，部分老手也經(jīng)常忘記，包括我自己，于是我整理了一份出來(lái)，哎，只怪我太健忘。

二、將數(shù)組轉(zhuǎn)換成字符串：join()和toString()；將字符串分隔成數(shù)組：split()

join() 允許你指定分隔符，因此你可以自定義連接數(shù)組元素的方式。
toString() 不允許指定分隔符，它總是使用英文逗號(hào) , 作為分隔符。
除了分隔符的區(qū)別，這兩種方法的功能相似，都用于將數(shù)組元素轉(zhuǎn)換為字符串。根據(jù)具體需求，你可以選擇使用其中之一。如果需要自定義分隔符或連接方式，join() 更靈活；如果只需使用英文逗號(hào)分隔元素，toString() 更簡(jiǎn)潔。

const fruits = ['apple', 'banana', 'cherry'];
const fruitString = fruits.join(', '); // 使用逗號(hào)和空格分隔
console.log(fruitString); // 'apple, banana, cherry'

const fruits = ['apple', 'banana', 'cherry'];
const fruitString = fruits.toString();
console.log(fruitString); // 'apple,banana,cherry'

需要注意的是，這兩種方法都不會(huì)修改原始數(shù)組，它們只是返回一個(gè)新的字符串表示形式。

split() 方法。這個(gè)方法可以將字符串按照指定的分隔符拆分成一個(gè)數(shù)組。以下是示例：

const commaSeparatedString = "apple,banana,cherry";
// 使用逗號(hào)分隔的字符串轉(zhuǎn)換為數(shù)組
const commaSeparatedArray = commaSeparatedString.split(",");
console.log(commaSeparatedArray); // ['apple', 'banana', 'cherry']

三、所有數(shù)組方法匯總（只有你想不到的，沒(méi)有數(shù)組做不到的）

push()：將一個(gè)或多個(gè)元素添加到數(shù)組的末尾，并返回新數(shù)組的長(zhǎng)度。
pop()：刪除數(shù)組的最后一個(gè)元素，并返回被刪除的元素。
shift()：刪除數(shù)組的第一個(gè)元素，并返回被刪除的元素。
unshift()：在數(shù)組的開(kāi)頭添加一個(gè)或多個(gè)元素，并返回新數(shù)組的長(zhǎng)度。
concat()：將一個(gè)或多個(gè)數(shù)組合并成一個(gè)新數(shù)組，而不修改原數(shù)組。
join()：將數(shù)組的所有元素連接成一個(gè)字符串，并返回該字符串。
slice()：從數(shù)組中提取一段子數(shù)組，不修改原數(shù)組。
splice()：用于插入、刪除和替換數(shù)組中的元素。
forEach()：遍歷數(shù)組的每個(gè)元素，并對(duì)其執(zhí)行指定的函數(shù)。
map()：創(chuàng)建一個(gè)新數(shù)組，其中包含根據(jù)指定函數(shù)的返回值從原始數(shù)組中的每個(gè)元素生成的結(jié)果。
filter()：創(chuàng)建一個(gè)新數(shù)組，其中包含通過(guò)指定函數(shù)篩選的原始數(shù)組中的元素。
reduce()：通過(guò)指定函數(shù)將數(shù)組的所有元素匯總成一個(gè)值。
reduceRight()：類(lèi)似于 reduce()，但是從數(shù)組的最后一個(gè)元素開(kāi)始。
find()：查找數(shù)組中滿足指定條件的第一個(gè)元素，并返回該元素。
findIndex()：查找數(shù)組中滿足指定條件的第一個(gè)元素的索引，并返回該索引。
indexOf()：查找數(shù)組中指定元素的第一個(gè)索引。
lastIndexOf()：查找數(shù)組中指定元素的最后一個(gè)索引。
includes()：檢查數(shù)組是否包含指定元素。
some()：檢查數(shù)組中是否至少有一個(gè)元素滿足指定條件。
every()：檢查數(shù)組中是否所有元素都滿足指定條件。
sort()：對(duì)數(shù)組元素進(jìn)行排序（默認(rèn)按字母順序）。
reverse()：顛倒數(shù)組中元素的順序。
toString()：將數(shù)組轉(zhuǎn)換為字符串。
toLocaleString()：將數(shù)組元素轉(zhuǎn)換為本地化字符串。
isArray()：檢查一個(gè)值是否為數(shù)組。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-702975.html

到了這里，關(guān)于Js水幾個(gè)基礎(chǔ)知識(shí)點(diǎn)：數(shù)組的操作，字符串和數(shù)組之間的互轉(zhuǎn)，持續(xù)補(bǔ)充，歡迎關(guān)注的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！