天天看點

JS集合引用類型之 Array

Array

一、建立數組

1、使用Array建構函數

let colors = new Array();
// 建立一個初始length為20的數組
let arr = new Array(20);
// 傳入要儲存的數組元素
let arr1 = new Array('red', '1', 1);
           

2、省略new操作符,結果一緻

3、數組字面量(不會調用Array構造函數)

let arr = ['red', 'green', 'white'];
let arr1 = [];
let arr2 = [1, 2];
           

二、from()和of()方法

ES6新增的用于建立數組的靜态方法

from()

: 将類數組結構轉換為數組執行個體

of()

: 将一組參數轉換為數組執行個體

場合:

from

1、字元串拆分成數組

2、将集合和映射轉換為一個新數組

const m = new Map().set(1, 2).set(3, 4);
const n = new Set().add(1).add(2).add(3).add(4);
Array.from(m);           //[[1,2],[3,4]]
Array.from(n);           //[1,2,3,4]
           

3、對數組淺複制

const a1 = [1, 2, 3, 4];
const a2 = Array.from(a1);
console.log(a1);           // [1, 2, 3, 4]
alert(a1 === a2);          // false 
           

4、可以使用任何可疊代對象

const iter = {
 *[Symbol.iterator]() {
 yield 1;
 yield 2;
 yield 3;
 yield 4;
 }
};
console.log(Array.from(iter)); // [1, 2, 3, 4]
           

5、對象輕松地轉換為數組

function getArgsArray() {
  return Array.from(arguments);
}
console.log(getArgsArray(1, 2, 3, 4))    //[1, 2, 3, 4]
           

of

将一組參數轉換為數組

Array.of(1,2,3,4)   // [1,2,3,4]
Array.of(undefined)  // [undefined]
           

三、數組空位

注意:由于行為不一緻和存在性能隐患,是以實踐中要避免使用數組空位。如果确實需要

空位,則可以顯式地用 undefined 值代替。

四、數組索引

數組 length 屬性的獨特之處在于,它不是隻讀的。通過修改 length 屬性,可以從數組末尾删除或添加元素:

let colors = ["red", "blue", "green"]; // 建立一個包含 3 個字元串的數組
colors.length = 2;
alert(colors[2]); // undefined
           

使用length屬性也可以友善地向數組末尾添加元素,如

let colors = ["red", "blue", "green"]; // 建立一個包含 3 個字元串的數組
colors[colors.length] = "black"; // 添加一種顔色(位置 3)
colors[colors.length] = "brown"; // 再添加一種顔色(位置 4)
           

數組中最後一個元素的索引始終是 length - 1,是以下一個新增槽位的索引就是 length。

新的長度會在新增元素被添加到目前數組外部的位置上時自動更新。換句話說,就是 length 屬性會更新為位置加上 1。

let colors = ["red", "blue", "green"]; // 建立一個包含 3 個字元串的數組
colors[99] = "black"; // 添加一種顔色(位置 99)
alert(colors.length); // 100 
           
JS集合引用類型之 Array

五、檢測數組

1、

value instanceof Array

2、

Array.isArray(value)

六、疊代器方法

在Array原型上暴露了3個用于檢索數組内容的方法:

key()

values()

entries()

key() 傳回數組索引的疊代器;

value() 傳回數組元素的疊代器;

entries() 傳回數組索引,元素的疊代器;

eg:

const a1 = ["foo", "bar", "baz", "qux"];
a1.keys();
           
JS集合引用類型之 Array
const a = ["foo", "bar", "baz", "qux"];
Array.from(a.key());     // [1, 2, 3, 4]
Array.from(a.values());    // ["foo", "bar", "baz", "qux"]
Array.from(a.entries());   
           
JS集合引用類型之 Array

七、複制和填充方法

fill():填充數組,向一個已有的數組中插入全部或部分相同的值,開始索引用于指定開始填充的位置。

第二個參數:開始填充位置;

第三個參數:結束填充位置;

const zeroes = [0, 0, 0, 0, 0];
zeroes.fill(5);        // [5, 5, 5, 5, 5]
zeroes.fill(6, 3);       // [5, 5, 5, 6, 6]    
zeroes.fill(0); 
zeroes.fill(6, 1, 3);       // [0, 6, 6, 0, 0]  
           

copyWithin():批量複制,從第幾個開始複制,替換掉後面的

let arr =  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.copyWithin(5)        //[0, 1, 2, 3, 4, 0, 1, 2, 3, 4]
           

也可以指定從數組的第幾個到第幾個

let arr =  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.copyWithin(4, 0, 3)     // [0, 1, 2, 3, 0, 1, 2, 7, 8, 9]
           

繼續閱讀