數組

一、擴展運算符

含義

擴展運算符(spread)是三個點(...)。它好比 rest 參數的逆運算,將一個數組轉化為用逗號分隔的參數序列。

注意,只有函數調用時,擴展運算符才能放入圓括號中,否則會報錯。

(...[1, 2])
// Uncaught SyntaxError: Unexpected number

console.log((...[1, 2]))
// Uncaught SyntaxError: Unexpected number

console.log(...[1, 2])
// 1 2

以上三種情況,擴展運算符都是放在括號里,但前兩種會報錯,因為擴展運算符所在的括號不是函數調用。

應用

(1)復制數組

數組是復合數據類型(引用數據類型),直接復制的話只是復制了指向底層數據結構的指針,而不是克隆一個全新的數組。

const a1 = [1, 2];
const a2 = a1;

a2[0] = 2;
a1 // [2, 2]

ES5只能用變通方法來復制數組。

const a1 = [1, 2];
const a2 = a1.concat();
a2(0) = 2;
a1 // [1, 2]

上面代碼中,a1會返回原數組的克隆,再修改a2就不會對a1產生影響。

擴展運算符復制數組:

const a1 = [1, 2];
// 第一種方法
const a2 = [...a1];
// 第二種方法
const [...a2] = a1;
(2)合并數組
const a1 = ['a', 'b'];
const a2 = ['c'];
const a3 = ['d', 'e'];
// ES5 合并數組
a1.concat(a2, a3)
// ['a', 'b', 'c', 'd', 'e']

// ES6合并數組
[...a1, ...a2, ...a3]
// ['a', 'b', 'c', 'd', 'e']

這兩種方法都是######淺拷貝,使用時要注意。

const a1 = [{ foo: 1 }];
const a2 = [{ bar: 2 }];

const a3 = a1.concat(a2);
const a4 = [...a1, ...a2];

a3[0] === a1[0] // true
a4[0] === a1[0] // true

上面代碼中,a3和a4是用兩種不同方法合并而成的新數組,但是它們的成員都是對原數組成員的引用,這就是淺拷貝。如果修改了原數組的成員,會同步反映到新數組。

(3)與解構賦值結合
// ES5
a = list[0], rest = list.slice(1)
// ES6
[a, ...rest] = list
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

如果將擴展運算符用于數組賦值,只能放在參數的最后一位,否則會報錯。

const [...butLast, last] = [1, 2, 3, 4, 5];
// 報錯

const [first, ...middle, last] = [1, 2, 3, 4, 5];
// 報錯
(4)字符串

擴展運算符還可以將字符串轉為真正的數組。

[...'hello']
// [ "h", "e", "l", "l", "o" ]
(5)實現了 Iterator 接口的對象

任何定義了遍歷器(Iterator)接口的對象(參閱 Iterator 一章),都可以用擴展運算符轉為真正的數組。

let nodeList = document.querySelectorAll('div');
let array = [...nodeList];

上面代碼中,querySelectorAll方法返回的是一個NodeList對象。它不是數組,而是一個類似數組的對象。這時,擴展運算符可以將其轉為真正的數組,原因就在于NodeList對象實現了 Iterator 。

(6)Map 和 Set 結構,Generator 函數

擴展運算符內部調用的是數據結構的 Iterator 接口,因此只要具有 Iterator 接口的對象,都可以使用擴展運算符,比如 Map 結構。

let map = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
]);

let arr = [...map.keys()]; // [1, 2, 3]

如果對沒有 Iterator 接口的對象,使用擴展運算符,將會報錯。

const obj = {a: 1, b: 2};
let arr = [...obj]; // TypeError: Cannot spread non-iterable object

二、Array.from()

Array.from方法用于將兩類對象轉為真正的數組:類似數組的對象(array-like object)和可遍歷(iterable)的對象(包括 ES6 新增的數據結構 Set 和 Map)。

類數組轉成真數組

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

對于還沒有部署該方法的瀏覽器,可以用Array.prototype.slice方法替代

const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();

實際應用中,常見的類似數組的對象是 DOM 操作返回的 NodeList 集合,以及函數內部的arguments對象。Array.from都可以將它們轉為真正的數組。

// NodeList對象
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
  return p.textContent.length > 100;
});

// arguments對象
function foo() {
  var args = Array.from(arguments);
  // ...
}

上面代碼中,querySelectorAll方法返回的是一個類似數組的對象,可以將這個對象轉為真正的數組,再使用filter方法。

只要是部署了 Iterator 接口的數據結構,Array.from都能將其轉為數組。

Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

Array.from還可以接受第二個參數,作用類似于數組的map方法,用來對每個元素進行處理,將處理后的值放入返回的數組。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

下面的例子將數組中布爾值為false的成員轉為0。

Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

另一個例子是返回各種數據的類型

function typesOf () {
  return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']

Array.from()可以將各種值轉為真正的數組,并且還提供map功能。

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']

Array.from()的另一個應用是,將字符串轉為數組,然后返回字符串的長度。因為它能正確處理各種 Unicode 字符,可以避免 JavaScript 將大于\uFFFF的 Unicode 字符,算作兩個字符的 bug。

function countSymbols(string) {
  return Array.from(string).length;
}

三、Array.of()

Array.of()方法用于將一組值轉化為數組。

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

四、數組方法

1、數組實例的 copyWithin()

數組實例的copyWithin方法,在當前數組內部,將指定位置的成員復制到其他位置(會覆蓋原有成員),然后返回當前數組。也就是說,使用這個方法,會修改當前數組。

Array.prototype.copyWithin(target, start = 0, end = this.length)

它接受三個參數。

target(必需):從該位置開始替換數據。如果為負值,表示倒數。
start(可選):從該位置開始讀取數據,默認為 0。如果為負值,表示倒數。
end(可選):到該位置前停止讀取數據,默認等于數組長度。如果為負值,表示倒數。
這三個參數都應該是數值,如果不是,會自動轉為數值。

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]

上面代碼表示將從 3 號位直到數組結束的成員(4 和 5),復制到從 0 號位開始的位置,結果覆蓋了原來的 1 和 2。

// -2相當于3號位,-1相當于4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

2、數組實例的 find() 和 findIndex()

數組實例的find方法,用于找出第一個符合條件的數組成員。它的參數是一個回調函數,所有數組成員依次執行該回調函數,直到找出第一個返回值為true的成員,然后返回該成員。如果沒有符合條件的成員,則返回undefined。

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

上面代碼中,find方法的回調函數可以接受三個參數,依次為當前的值、當前的位置和原數組。

數組實例的findIndex方法的用法與find方法非常類似,返回第一個符合條件的數組成員的位置,如果所有成員都不符合條件,則返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

這兩個方法都可以接受第二個參數,用來綁定回調函數的this對象。

function f(v){
  return v > this.age;
}
let person = {name: 'John', age: 20};
[10, 12, 26, 15].find(f, person);    // 26

上面的代碼中,find函數接收了第二個參數person對象,回調函數中的this對象指向person對象。

另外,這兩個方法都可以發現NaN,彌補了數組的indexOf方法的不足。

[NaN].indexOf(NaN)
// -1

[NaN].findIndex(y => Object.is(NaN, y))
// 0

3、數組實例的 entries(),keys() 和 values()

ES6 提供三個新的方法——entries(),keys()和values()——用于遍歷數組。它們都返回一個遍歷器對象(詳見《Iterator》一章),可以用for...of循環進行遍歷,唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

4、數組實例的 includes()

Array.prototype.includes方法返回一個布爾值,表示某個數組是否包含給定的值,與字符串的includes方法類似。ES2016 引入了該方法。

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

該方法的第二個參數表示搜索的起始位置,默認為0。如果第二個參數為負數,則表示倒數的位置,如果這時它大于數組長度(比如第二個參數為-4,但數組長度為3),則會重置為從0開始。

[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

indexOf方法有兩個缺點,一是不夠語義化,它的含義是找到參數值的第一個出現位置,所以要去比較是否不等于-1,表達起來不夠直觀。二是,它內部使用嚴格相等運算符(===)進行判斷,這會導致對NaN的誤判。

[NaN].indexOf(NaN)
// -1

includes使用的是不一樣的判斷算法,就沒有這個問題。

[NaN].includes(NaN)
// true

下面代碼用來檢查當前環境是否支持該方法,如果不支持,部署一個簡易的替代版本。

const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(['foo', 'bar'], 'baz'); // => false

5、數組實例的 flat(),flatMap()

數組的成員有時還是數組,Array.prototype.flat()用于將嵌套的數組“拉平”,變成一維的數組。該方法返回一個新數組,對原數據沒有影響。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

上面代碼中,原數組的成員里面有一個數組,flat()方法將子數組的成員取出來,添加在原來的位置。

flat()默認只會“拉平”一層,如果想要“拉平”多層的嵌套數組,可以將flat()方法的參數寫成一個整數,表示想要拉平的層數,默認為1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

上面代碼中,flat()的參數為2,表示要“拉平”兩層的嵌套數組。

如果不管有多少層嵌套,都要轉成一維數組,可以用Infinity關鍵字作為參數。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果原數組有空位,flat()方法會跳過空位。

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap()方法對原數組的每個成員執行一個函數(相當于執行Array.prototype.map()),然后對返回值組成的數組執行flat()方法。該方法返回一個新數組,不改變原數組。

// 相當于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()只能展開一層數組。

// 相當于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容