工作中難免會(huì)遇到各種各樣的數(shù)據(jù)結(jié)構(gòu)，較為全面的了解數(shù)組操作，對(duì)于復(fù)雜數(shù)據(jù)結(jié)構(gòu)的處理會(huì)非常有用且節(jié)省時(shí)間
所以想在這里總結(jié)一下工作中常用的數(shù)組操作，都是一些非常基礎(chǔ)的知識(shí)，大家看個(gè)樂就好~
目錄
- 工作中常用的數(shù)組方法
- sort() 方法如何進(jìn)行自定義排序
- 如何去除數(shù)組中的重復(fù)元素
- 如何判斷一個(gè)變量是否是數(shù)組？有哪些判斷方式？
- IF 條件中的空數(shù)組是 false 還是 true
- 面試問題合集
工作中常用的數(shù)組方法
-
push()- 向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長度。 -
pop()- 刪除數(shù)組的最后一個(gè)元素并返回該元素。 -
shift()- 刪除數(shù)組的第一個(gè)元素并返回該元素，數(shù)組中的其他元素向前移動(dòng)。 -
unshift()- 向數(shù)組的開頭添加一個(gè)或多個(gè)元素，并返回新的長度。 -
slice()- 返回?cái)?shù)組的一個(gè)片段或子數(shù)組。 -
splice()- 用于插入、刪除或替換數(shù)組的元素。 -
map()- 創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后的返回值。 -
filter()- 創(chuàng)建一個(gè)新數(shù)組，包含通過所提供函數(shù)實(shí)現(xiàn)的測試的所有元素。 -
reduce()- 對(duì)累加器和數(shù)組中的每個(gè)元素（從左到右）應(yīng)用一個(gè)函數(shù)，將其減少為單個(gè)值。 -
forEach()- 對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)。 -
find()- 返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的值，否則返回undefined。 -
findIndex()- 返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的索引，否則返回-1。 -
sort()- 對(duì)數(shù)組的元素進(jìn)行排序，并返回?cái)?shù)組。 -
reverse()- 顛倒數(shù)組中元素的順序。 -
concat()- 用于合并兩個(gè)或多個(gè)數(shù)組。 -
join()- 把數(shù)組的所有元素放入一個(gè)字符串。 -
includes()- 判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，根據(jù)情況返回 true 或 false。 -
some()- 測試數(shù)組中是不是至少有一個(gè)元素通過了被提供的函數(shù)測試。 -
every()- 測試一個(gè)數(shù)組內(nèi)的所有元素是否都能通過某個(gè)指定函數(shù)的測試。
常見數(shù)組方法中的用法、以及坑
slice() 和 splice() 方法之間有什么區(qū)別
-
slice()方法返回?cái)?shù)組的一個(gè)副本，從開始到結(jié)束（不包括結(jié)束），不改變?cè)瓟?shù)組。 -
splice()方法通過刪除或替換現(xiàn)有元素或添加新元素來修改數(shù)組，并返回被修改的元素?cái)?shù)組。在需要同時(shí)對(duì)數(shù)組進(jìn)行元素的刪除和添加操作時(shí)非常有用。
如何合并兩個(gè)數(shù)組
- 可以使用
concat()方法或者展開運(yùn)算符（...）。例如，arr1.concat(arr2)或[...arr1, ...arr2]。 -
concat()：用于合并多個(gè)數(shù)組成一個(gè)新數(shù)組，常用于不改變?cè)瓟?shù)組的情況下創(chuàng)建新的數(shù)組集合。
slice()、concat()、[...arr] 方法返回的數(shù)組是淺拷貝還是深拷貝
使用slice()、concat()、[...arr]是淺拷貝操作。淺拷貝是指只復(fù)制對(duì)象的第一層屬性，如果屬性是引用類型，復(fù)制的是引用。
如何有效地搜索數(shù)組中的元素
- 使用
indexOf()或includes()來檢查元素是否存在。 - 使用
find()或findIndex()來查找符合條件的元素或其索引。 - 這些方法都會(huì)在找到符合條件的第一個(gè)元素后停止搜索。
如何使用reduce()方法
-
reduce()方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的reducer函數(shù)（升序執(zhí)行），將其結(jié)果匯總為單個(gè)返回值。 - 例如，計(jì)算數(shù)組所有值的總和：
array.reduce((acc, val) => acc + val, 0)。
sort() 方法是否可以對(duì)純數(shù)字?jǐn)?shù)組進(jìn)行正確的排序
-
sort()方法可以用來按數(shù)字大小排序數(shù)組中的數(shù)字。 - 在JavaScript中，如果直接使用
sort()方法而不提供比較函數(shù)，它默認(rèn)會(huì)將數(shù)組元素轉(zhuǎn)換成字符串，然后按照字符串的Unicode字典順序進(jìn)行排序。 - 這種默認(rèn)行為對(duì)于數(shù)字排序通常是不正確的，特別是當(dāng)數(shù)字的位數(shù)不一致時(shí)。
let numbers = [10, 5, 100, 2, 1000];
numbers.sort();
console.log(numbers); // 輸出: [10, 100, 1000, 2, 5]
sort() 方法如何進(jìn)行自定義排序
在JavaScript中，Array.prototype.sort() 方法可以接受一個(gè)可選的比較函數(shù)作為參數(shù)，用來定義數(shù)組元素的排序方式。
這個(gè)比較函數(shù)應(yīng)該接受兩個(gè)參數(shù)（通常表示為a和b），這兩個(gè)參數(shù)是數(shù)組中將要被比較的兩個(gè)元素。比較函數(shù)的返回值決定了這兩個(gè)元素在最終排序后數(shù)組中的順序：
- 如果比較函數(shù)返回一個(gè)小于0的值，那么元素
a將排在元素b之前。 - 如果比較函數(shù)返回一個(gè)大于0的值，那么元素
b將排在元素a之前。 - 如果比較函數(shù)返回0，那么元素
a和b的順序不變。
sort()方法自定義排序的基礎(chǔ)示例
1. 數(shù)字排序
對(duì)于數(shù)字類型的數(shù)組，可以這樣定義比較函數(shù)來確保數(shù)組按照數(shù)值大小升序或降序排列：
let numbers = [10, 5, 100, 2, 1000];
// 升序排序
numbers.sort((a, b) => a - b);
console.log(numbers); // 輸出: [2, 5, 10, 100, 1000]
// 降序排序
numbers.sort((a, b) => b - a);
console.log(numbers); // 輸出: [1000, 100, 10, 5, 2]
2. 字符串排序（考慮大小寫）
對(duì)于字符串?dāng)?shù)組，如果要按字典順序排序，可能還需要考慮大小寫：
let words = ['banana', 'Apple', 'orange'];
// 升序排序，忽略大小寫
words.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
console.log(words); // 輸出: ['Apple', 'banana', 'orange']
3. 復(fù)雜對(duì)象數(shù)組排序
如果數(shù)組包含對(duì)象，可以根據(jù)對(duì)象的某個(gè)屬性來排序：
let items = [
{ name: "John", age: 25 },
{ name: "Anna", age: 30 },
{ name: "Mike", age: 22 }
];
// 根據(jù)age屬性升序排序
items.sort((a, b) => a.age - b.age);
console.log(items); // 輸出: [{ name: "Mike", age: 22 }, { name: "John", age: 25 }, { name: "Anna", age: 30 }]
sort()方法在工作中應(yīng)用的注意事項(xiàng)
- 使用
sort()方法時(shí)需要注意，它是在原數(shù)組上進(jìn)行排序，而不是返回一個(gè)新的排序后的數(shù)組。 - 如果不提供比較函數(shù)，
sort()將元素轉(zhuǎn)換為字符串，并按照字符串的Unicode碼點(diǎn)順序排序，這可能不會(huì)按照數(shù)值大小排序數(shù)字。 - 通過提供自定義的比較函數(shù)，可以靈活地控制數(shù)組的排序行為，滿足不同的業(yè)務(wù)需求。
如何去除數(shù)組中的重復(fù)元素
1. 使用 Set 對(duì)象
Set 是一種允許存儲(chǔ)任何類型唯一值的集合。由于 Set 自動(dòng)去除重復(fù)的元素，我們可以利用這個(gè)特性來去除數(shù)組中的重復(fù)項(xiàng)。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // 輸出: [1, 2, 3, 4, 5]
2. 使用 filter() 方法
filter() 方法創(chuàng)建一個(gè)新數(shù)組，其包含通過所提供函數(shù)實(shí)現(xiàn)的測試的所有元素。可以利用這個(gè)方法和 indexOf() 來過濾掉重復(fù)的元素。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
console.log(uniqueArray); // 輸出: [1, 2, 3, 4, 5]
3. 使用 reduce() 方法
reduce() 方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè) reducer 函數(shù)（升序執(zhí)行），將其結(jié)果匯總為單個(gè)返回值。這個(gè)方法也可以用來去除重復(fù)元素。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, current) => {
if (!acc.includes(current)) {
acc.push(current);
}
return acc;
}, []);
console.log(uniqueArray); // 輸出: [1, 2, 3, 4, 5]
4. 使用對(duì)象鍵
利用對(duì)象的屬性不能重復(fù)的特性，可以快速去除數(shù)組中的重復(fù)元素。
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueObj = {};
array.forEach(item => {
uniqueObj[item] = true;
});
const uniqueArray = Object.keys(uniqueObj).map(key => parseInt(key));
console.log(uniqueArray); // 輸出: [1, 2, 3, 4, 5]
如何判斷一個(gè)變量是否是數(shù)組？有哪些判斷方式？
在JavaScript中，判斷一個(gè)變量是否是數(shù)組可以通過多種方式實(shí)現(xiàn)。這些方法各有優(yōu)缺點(diǎn)，適用于不同的場景。
-
最推薦的方法：
Array.isArray()，因?yàn)樗唵吻铱偸强煽康摹?/li> -
較可靠的方法：
Object.prototype.toString.call()，尤其是在涉及多個(gè)執(zhí)行環(huán)境時(shí)。 -
其他方法：雖然
instanceof、constructor和isPrototypeOf可以用來判斷數(shù)組，但它們?cè)谀承┣闆r下可能不夠可靠或容易受到環(huán)境的影響。
1. 使用 Array.isArray() 方法（推薦）
Array.isArray() 是 ECMAScript 5 新增的方法，它提供了一種簡單、可靠的方式來判斷一個(gè)變量是否是數(shù)組。這是判斷數(shù)組的最推薦方式。
let arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 輸出：true
2. 使用 instanceof 操作符
instanceof 操作符用于測試一個(gè)對(duì)象在其原型鏈中是否存在一個(gè)構(gòu)造函數(shù)的 prototype 屬性。
let arr = [1, 2, 3];
console.log(arr instanceof Array); // 輸出：true
但是，instanceof 可能在不同的執(zhí)行環(huán)境（如不同的iframe或window對(duì)象）中不一定可靠，因?yàn)閿?shù)組的構(gòu)造器可能不同。
3. 使用 Object.prototype.toString.call()
這是一個(gè)更加通用的方法，可以用來獲取任意對(duì)象的類型。對(duì)于數(shù)組，Object.prototype.toString.call() 返回 "[object Array]"。
let arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr) === '[object Array]'); // 輸出：true
這種方法相對(duì)可靠，并且在不同的執(zhí)行環(huán)境中也能保持一致性。
4. 使用構(gòu)造函數(shù)屬性 constructor
每個(gè)數(shù)組都有一個(gè) constructor 屬性，指向它的構(gòu)造函數(shù)。如果這個(gè)屬性是 Array，那么對(duì)象通常是數(shù)組。但這種方法不是非常可靠，因?yàn)?constructor 屬性可以被改寫。
let arr = [1, 2, 3];
console.log(arr.constructor === Array); // 輸出：true
5. 使用 Array.prototype.isPrototypeOf()
這個(gè)方法可以用來檢查 Array.prototype 是否存在于某個(gè)對(duì)象的原型鏈上。
let arr = [1, 2, 3];
console.log(Array.prototype.isPrototypeOf(arr)); // 輸出：true
IF 條件中的空數(shù)組是 false 還是 true
在 JavaScript 中，空數(shù)組（[]）在 if 條件判斷中被視為 true。
這是因?yàn)樗袑?duì)象，包括數(shù)組（無論是否為空），在布爾上下文中都被視為 true。
這意味著即使數(shù)組沒有任何元素，它仍然被認(rèn)為是真值。
JS 中的哪些值會(huì)被判斷為 Falsy 值
以下是JavaScript中的所有 Falsy 值：
-
false- 布爾值false本身自然是Falsy。 -
0和-0- 數(shù)字零和負(fù)零。 -
0n- BigInt類型的零。 -
""（空字符串） - 雙引號(hào)或單引號(hào)中沒有任何字符。 -
null- 表示無值。 -
undefined- 變量已聲明但未賦值時(shí)的默認(rèn)值。 -
NaN- 表示 "不是一個(gè)數(shù)字" 的特殊值。
判斷為 Falsy 值的相關(guān)示例
在實(shí)際的編程實(shí)踐中，了解哪些值是 Falsy 值非常重要，因?yàn)樗鼈儠?huì)影響條件語句的行為。
if (false) {} // 不執(zhí)行
if (0) {} // 不執(zhí)行
if (-0) {} // 不執(zhí)行
if (0n) {} // 不執(zhí)行
if ("") {} // 不執(zhí)行
if (null) {} // 不執(zhí)行
if (undefined) {} // 不執(zhí)行
if (NaN) {} // 不執(zhí)行
if ([]) {} // 執(zhí)行，因?yàn)榭諗?shù)組是 true
面試問題合集
恭喜你耐心看完本文了，對(duì)照下方的問題列表，自我提問一下吧~
你知道哪些 JS 數(shù)組操作？
工作中常用哪些方法？
slice() 和 splice() 方法之間有什么區(qū)別？
如何合并兩個(gè)數(shù)組？
slice()、concat()、[...arr] 方法返回的數(shù)組是淺拷貝還是深拷貝？
如何有效地搜索數(shù)組中的元素？
如何使用reduce()方法？
sort() 方法是否可以對(duì)純數(shù)字?jǐn)?shù)組進(jìn)行正確的排序？
sort() 方法如何進(jìn)行自定義排序？
如何去除數(shù)組中的重復(fù)元素？
如何判斷一個(gè)變量是否是數(shù)組？
IF 條件中的空數(shù)組是 false 還是 true？
JS 中的哪些值會(huì)被判斷為 Falsy 值？
我是 fx67ll.com，如果您發(fā)現(xiàn)本文有什么錯(cuò)誤，歡迎在評(píng)論區(qū)討論指正，感謝您的閱讀！
如果您喜歡這篇文章，歡迎訪問我的 本文github倉庫地址，為我點(diǎn)一顆Star，Thanks~ :)
轉(zhuǎn)發(fā)請(qǐng)注明參考文章地址，非常感謝?。?！
