當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js Array Map and Set

發(fā)布時間：2025/5/22 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 js Array Map and Set 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Array

slice

slice()就是對應(yīng)String的substring()版本，它截取Array的部分元素，然后返回一個新的Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; arr.slice(0, 3); // 從索引0開始，到索引3結(jié)束，但不包括索引3: ['A', 'B', 'C'] arr.slice(3); // 從索引3開始到結(jié)束: ['D', 'E', 'F', 'G']

Note:slice()的起止參數(shù)包括開始索引，不包括結(jié)束索引。

如果不給slice()傳遞任何參數(shù)，它就會從頭到尾截取所有元素。利用這一點，我們可以很容易地復(fù)制一個Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var aCopy = arr.slice(); aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G'] aCopy === arr; // false

push和pop

push()向Array的末尾添加若干元素，pop()則把Array的最后一個元素刪除掉：

var arr = [1, 2]; arr.push('A', 'B'); // 返回Array新的長度: 4 arr; // [1, 2, 'A', 'B'] arr.pop(); // pop()返回'B' arr; // [1, 2, 'A'] arr.pop(); arr.pop(); arr.pop(); // 連續(xù)pop 3次 arr; // [] arr.pop(); // 空數(shù)組繼續(xù)pop不會報錯，而是返回undefined arr; // []

unshift和shift

如果要往Array的頭部添加若干元素，使用unshift()方法，shift()方法則把Array的第一個元素刪掉：

var arr = [1, 2]; arr.unshift('A', 'B'); // 返回Array新的長度: 4 arr; // ['A', 'B', 1, 2] arr.shift(); // 'A' arr; // ['B', 1, 2] arr.shift(); arr.shift(); arr.shift(); // 連續(xù)shift 3次 arr; // [] arr.shift(); // 空數(shù)組繼續(xù)shift不會報錯，而是返回undefined arr; // []

sort

sort()可以對當(dāng)前Array進(jìn)行排序，它會直接修改當(dāng)前Array的元素位置，直接調(diào)用時，按照默認(rèn)順序排序：

var arr = ['B', 'C', 'A']; arr.sort(); arr; // ['A', 'B', 'C']

能否按照我們自己指定的順序排序呢？完全可以.

如果是數(shù)字，我們可以直接比較，但如果是字符串或者兩個對象呢？直接比較數(shù)學(xué)上的大小是沒有意義的，因此，比較的過程必須通過函數(shù)抽象出來。通常規(guī)定，對于兩個元素x和y，如果認(rèn)為x < y，則返回-1，如果認(rèn)為x == y，則返回0，如果認(rèn)為x > y，則返回1，這樣，排序算法就不用關(guān)心具體的比較過程，而是根據(jù)比較結(jié)果直接排序。

JavaScript的Array的sort()方法就是用于排序的，但是排序結(jié)果可能讓你大吃一驚：

// 看上去正常的結(jié)果: ["Google", "Apple", "Microsoft"].sort(); // ["Apple", "Google", "Microsoft"];// apple排在了最后: ["Google", "apple", "Microsoft"].sort(); // ["Google", "Microsoft", "apple"]// 無法理解的結(jié)果: [10, 20, 1, 2].sort(); // [1, 10, 2, 20]

第二個排序把apple排在了最后，是因為字符串根據(jù)ASCII碼進(jìn)行排序，而小寫字母a的ASCII碼在大寫字母之后。

第三個排序結(jié)果是什么鬼？簡單的數(shù)字排序都能錯？

這是因為Array的sort()方法默認(rèn)把所有元素先轉(zhuǎn)換為String再排序，結(jié)果'10'排在了'2'的前面，因為字符'1'比字符'2'的ASCII碼小。

如果不知道sort()方法的默認(rèn)排序規(guī)則，直接對數(shù)字排序，絕對栽進(jìn)坑里！

幸運的是，sort()方法也是一個高階函數(shù)，它還可以接收一個比較函數(shù)來實現(xiàn)自定義的排序。

要按數(shù)字大小排序，我們可以這么寫：

var arr = [10, 20, 1, 2]; arr.sort(function (x, y) {if (x < y) {return -1;}if (x > y) {return 1;}return 0; }); // [1, 2, 10, 20]

如果要倒序排序，我們可以把大的數(shù)放前面：

var arr = [10, 20, 1, 2]; arr.sort(function (x, y) {if (x < y) {return 1;}if (x > y) {return -1;}return 0; }); // [20, 10, 2, 1]

默認(rèn)情況下，對字符串排序，是按照ASCII的大小比較的，現(xiàn)在，我們提出排序應(yīng)該忽略大小寫，按照字母序排序。要實現(xiàn)這個算法，不必對現(xiàn)有代碼大加改動，只要我們能定義出忽略大小寫的比較算法就可以：

忽略大小寫來比較兩個字符串，實際上就是先把字符串都變成大寫（或者都變成小寫），再比較。

從上述例子可以看出，高階函數(shù)的抽象能力是非常強大的，而且，核心代碼可以保持得非常簡潔。

Note:sort()方法會直接對Array進(jìn)行修改，它返回的結(jié)果仍是當(dāng)前Array：

var a1 = ['B', 'A', 'C']; var a2 = a1.sort(); a1; // ['A', 'B', 'C'] a2; // ['A', 'B', 'C'] a1 === a2; // true, a1和a2是同一對象

reverse

reverse()把整個Array的元素給掉個個，也就是反轉(zhuǎn)：

var arr = ['one', 'two', 'three']; arr.reverse(); arr; // ['three', 'two', 'one']

splice

splice()方法是修改Array的“萬能方法”，它可以從指定的索引開始刪除若干元素，然后再從該位置添加若干元素：

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle']; // 從索引2開始刪除3個元素,然后再添加兩個元素: arr.splice(2, 3, 'Google', 'Facebook'); // 返回刪除的元素 ['Yahoo', 'AOL', 'Excite'] arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle'] // 只刪除,不添加: arr.splice(2, 2); // ['Google', 'Facebook'] arr; // ['Microsoft', 'Apple', 'Oracle'] // 只添加,不刪除: arr.splice(2, 0, 'Google', 'Facebook'); // 返回[],因為沒有刪除任何元素 arr; // ['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

concat

concat()方法把當(dāng)前的Array和另一個Array連接起來，并返回一個新的Array：

var arr = ['A', 'B', 'C']; var added = arr.concat([1, 2, 3]); added; // ['A', 'B', 'C', 1, 2, 3] arr; // ['A', 'B', 'C']

請注意，concat()方法并沒有修改當(dāng)前Array，而是返回了一個新的Array。

實際上，concat()方法可以接收任意個元素和Array，并且自動把Array拆開，然后全部添加到新的Array里：

var arr = ['A', 'B', 'C']; arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]

join

join()方法是一個非常實用的方法，它把當(dāng)前Array的每個元素都用指定的字符串連接起來，然后返回連接后的字符串：

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'
如果Array的元素不是字符串，將自動轉(zhuǎn)換為字符串后再連接。

filter

filter也是一個常用的操作，它用于把Array的某些元素過濾掉，然后返回剩下的元素。

和map()類似，Array的filter()也接收一個函數(shù)。和map()不同的是，filter()把傳入的函數(shù)依次作用于每個元素，然后根據(jù)返回值是true還是false決定保留還是丟棄該元素。

例如，在一個Array中，刪掉偶數(shù)，只保留奇數(shù)，可以這么寫：

var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) {return x % 2 !== 0; }); r; // [1, 5, 9, 15]

把一個Array中的空字符串刪掉，可以這么寫：

var arr = ['A', '', 'B', null, undefined, 'C', ' ']; var r = arr.filter(function (s) {return s && s.trim(); // 注意：IE9以下的版本沒有trim()方法 }); arr; // ['A', 'B', 'C']

可見用filter()這個高階函數(shù)，關(guān)鍵在于正確實現(xiàn)一個“篩選”函數(shù)。

filter()接收的回調(diào)函數(shù)，其實可以有多個參數(shù)。通常我們僅使用第一個參數(shù)，表示Array的某個元素。回調(diào)函數(shù)還可以接收另外兩個參數(shù)，表示元素的位置和數(shù)組本身：

var arr = ['A', 'B', 'C']; var r = arr.filter(function (element, index, self) {console.log(element); // 依次打印'A', 'B', 'C'console.log(index); // 依次打印0, 1, 2console.log(self); // self就是變量arrreturn true; });

利用filter，可以巧妙地去除Array的重復(fù)元素：

'use strict';varr,arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];r = arr.filter(function (element, index, self) {return self.indexOf(element) === index; });alert(r.toString());

去除重復(fù)元素依靠的是indexOf總是返回第一個元素的位置，后續(xù)的重復(fù)元素位置與indexOf返回的位置不相等，因此被filter濾掉了。

reduce

Array的reduce()把一個函數(shù)作用在這個Array的[x1, x2, x3...]上，這個函數(shù)必須接收兩個參數(shù)，reduce()把結(jié)果繼續(xù)和序列的下一個元素做累積計算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

比方說對一個Array求和，就可以用reduce實現(xiàn)：

var arr = [1, 3, 5, 7, 9]; arr.reduce(function (x, y) {return x + y; }); // 25

Map

Map是一組鍵值對的結(jié)構(gòu)，具有極快的查找速度。

舉個例子，假設(shè)要根據(jù)同學(xué)的名字查找對應(yīng)的成績，如果用Array實現(xiàn)，需要兩個Array：

var names = ['Michael', 'Bob', 'Tracy']; var scores = [95, 75, 85];

給定一個名字，要查找對應(yīng)的成績，就先要在names中找到對應(yīng)的位置，再從scores取出對應(yīng)的成績，Array越長，耗時越長。

如果用Map實現(xiàn)，只需要一個“名字”-“成績”的對照表，直接根據(jù)名字查找成績，無論這個表有多大，查找速度都不會變慢。用JavaScript寫一個Map如下：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]); m.get('Michael'); // 95

初始化Map需要一個二維數(shù)組，或者直接初始化一個空Map。Map具有以下方法：

var m = new Map(); // 空Map m.set('Adam', 67); // 添加新的key-value m.set('Bob', 59); m.has('Adam'); // 是否存在key 'Adam': truem.get('Adam'); // 67 m.delete('Adam'); // 刪除key 'Adam'm.get('Adam'); // undefined

由于一個key只能對應(yīng)一個value，所以，多次對一個key放入value，后面的值會把前面的值沖掉：

Set

Set和Map類似，也是一組key的集合，但不存儲value。由于key不能重復(fù)，所以，在Set中，沒有重復(fù)的key。

要創(chuàng)建一個Set，需要提供一個Array作為輸入，或者直接創(chuàng)建一個空Set：

var s1 = new Set(); // 空Set var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重復(fù)元素在Set中自動被過濾：

var s = new Set([1, 2, 3, 3, '3']); s; // Set {1, 2, 3, "3"}

注意數(shù)字3和字符串'3'是不同的元素。

通過add(key)方法可以添加元素到Set中，可以重復(fù)添加，但不會有效果：

s.add(4) s// {1, 2, 3, 4} s.add(4) s// {1, 2, 3, 4}

通過delete(key)方法可以刪除元素：

var s = new Set([1, 2, 3]); s; // Set {1, 2, 3} s.delete(3); s; // Set {1, 2}

Note:Map和Set是ES6標(biāo)準(zhǔn)新增的數(shù)據(jù)類型，請根據(jù)瀏覽器的支持情況決定是否要使用。

遍歷for ... of

遍歷Array可以采用下標(biāo)循環(huán)，遍歷Map和Set就無法使用下標(biāo)。為了統(tǒng)一集合類型，ES6標(biāo)準(zhǔn)引入了新的iterable類型，Array、Map和Set都屬于iterable類型。

具有iterable類型的集合可以通過新的for ... of循環(huán)來遍歷。

用for ... of循環(huán)遍歷集合，用法如下：

for ... of和for ... in區(qū)別

for ... in循環(huán)由于歷史遺留問題，它遍歷的實際上是對象的屬性名稱。一個Array數(shù)組實際上也是一個對象，它的每個元素的索引被視為一個屬性。

當(dāng)我們手動給Array對象添加了額外的屬性后，for ... in循環(huán)將帶來意想不到的意外效果：

var a = ['A', 'B', 'C']; a.name = 'Hello';for (var x in a) {alert(x); // '0', '1', '2', 'name' }

for ... in循環(huán)將把name包括在內(nèi)，但Array的length屬性卻不包括在內(nèi)。

for ... of循環(huán)則完全修復(fù)了這些問題，它只循環(huán)集合本身的元素：

var a = ['A', 'B', 'C']; a.name = 'Hello'; for (var x of a) {alert(x); // 'A', 'B', 'C' }

這就是為什么要引入新的for ... of循環(huán)。

然而，更好的方式是直接使用iterable內(nèi)置的forEach方法，它接收一個函數(shù)，每次迭代就自動回調(diào)該函數(shù)。以Array為例：

var a = ['A', 'B', 'C']; a.forEach(function (element, index, array) {// element: 指向當(dāng)前元素的值// index: 指向當(dāng)前索引// array: 指向Array對象本身alert(element); });

注意，forEach()方法是ES5.1標(biāo)準(zhǔn)引入的，你需要測試瀏覽器是否支持。

Set與Array類似，但Set沒有索引，因此回調(diào)函數(shù)的前兩個參數(shù)都是元素本身：

var s = new Set(['A', 'B', 'C']); s.forEach(function (element, sameElement, set) {alert(element); });

Map的回調(diào)函數(shù)參數(shù)依次為value、key和map本身：

var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]); m.forEach(function (value, key, map) {alert(value); });

如果對某些參數(shù)不感興趣，由于JavaScript的函數(shù)調(diào)用不要求參數(shù)必須一致，因此可以忽略它們。例如，只需要獲得Array的element：

var a = ['A', 'B', 'C']; a.forEach(function (element) {alert(element); });

轉(zhuǎn)載于:https://www.cnblogs.com/zi-xing/p/9502845.html

總結(jié)

以上是生活随笔為你收集整理的js Array Map and Set的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。