1. 首頁 > 生活 > >

js給數組添加方法 js數組中添加數組

小知識

【js給數組添加方法 js數組中添加數組】


文章插圖
js給數組添加方法 js數組中添加數組

文章插圖
數組的創建
幾種創建數組的方法 1. let a1 = new Array(); 2. let a1 = Array();//與第一種方式等價 3. let a1 = Array.from(obj); //ES6 4. let a1 = Array.of(); //ES61，2兩種方法創建數組，如果傳入的參數是數字，表示新創建的數組的長度，而不是數組的元素 。of方法解決1，2兩種方法的歧義，數字代表的是數組的元素 。Array.from方法用于將類數組結構轉換為數組實例，Array.of方法用于將一組參數轉換為數組實例 。
Array.from()第一個參數是一個可迭代的類數組對象，或者有一個length屬性的可索引元素結構 。
Array.from("Polo"); //['P', 'o', 'l', 'o']const m = new Map().set(1,2).set(3,4);const s = new Set().add(1).add(2).add(3).add(4);Array.from(m); //[[1,2],[3,4]]Array.from(s); //[1,2,3,4]Array.from()可接收第二個可選映射函數參數，這個函數可以直接增強新數組的值，也就是說可以對第一個參數里的值做處理，新建數組的值為經過第二個參數函數加工的值 。
const a2 = Array.from([1,2,3,4], x => x * 2); //[2,4,6,8]Array.from()還可以接收第三個可選參數，用于指定映射函數中this的值，但這個重寫的this值在箭頭函數中不適用 。
const a3 = Array.from([1,2,3,4],function(x){return x**this.exponent},{exponent:2}); //[1,4,9,16]數組length屬性數組的length屬性不是只讀的，通過修改length屬性，可以從數組末尾刪除或添加元素 。
let colors = ['red', 'blue', 'green'];colors.length=4;//數組末尾增加一個元素，值為undefinedcolors[99] = 'black';//數組長度變為100,3-98位置的元素值為undefined檢查是否為數組ES6之前的版本，檢查數組用各類方式，各有各的道理，也有各自的問題 。ES6提供了Array.isArray方法，確定一個值是否為數組 。
if (Array.isArray(value)) {//操作數組}數組迭代方法
1. keys() //返回數組索引的迭代器2. values() //返回數組元素的迭代器3. entries() //返回索引/值對的迭代器4. for(const [index,element] of a.entries()) //ES6解構語法在循環中拆分鍵值對復制和填充Array.copyWithin(): 按照指定范圍淺復制數組中的部分內容，然后將他們插入到指定索引開始的位置 。第1個參數表示插入位置的索引，第2個可選參數表示開始復制的索引位置 。
let ints;reset = () => ints = [0,1,2,3,4,5,6,7,8,9];reset();ints.copyWithin(5); //[0,1,2,3,4,0,1,2,3,4]reset();ints.copyWithin(0,5); [5,6,7,8,9,5,6,7,8,9]reset();ints.copyWithin(4,0,3); //[0,1,2,3,0,1,2,7,8,9]Array.fill():第1個參數，表示用于填充的元素，第2個可選參數，表示填充的開始位置，第3個可選參數，表示填充的結束位置 。fill()靜默忽略超出數組邊界，零長度及方向相反的索引范圍 。
const zeroes = [0, 0, 0, 0, 0];zeroes.fill(5); //[5,5,5,5,5];zeroes.fill(0);zeroes.fill(7,3); //[0,0,0,7,7]zeroes.fill(0);zeroes.fill(7,1,3); //[0,7,7,0,0]數組排序方法
reverse(): 將數組元素反向排列sort()：按升序排列數組元素，sort()會在每一項上調用String()轉型函數，然后比較字符串來決定順序 。sort()方法可以接收一個比較函數 。用于判斷哪個值應該排在前面 。
let values = [0,1,5,10,15];values.reverse(); //[15,10,5,1,0]values.sort(); //[0,1,10,15,5]values.sort((x,y) => x - y); //[0,1,5,10,15]迭代方法
every()：對數組每一項都運行傳入的函數，如果每一項都返回true，則這個方法返回true 。some()：對數組每一項都運行傳入的函數，如果有一項函數返回true，則這個方法返回true 。filter()：對數組每一項都運行傳入的函數，函數返回true的項會組成之后的返回 。map()： 對數組每一項都運行輸入的函數，返回由每次函數調用的結果構成的數組 。forEach()：對數組每一項都運行傳入的函數，沒有返回值 。
let numbers = [1,2,3,4,5,6];numbers.filter((item,index,array) => item > 2); //[3,4,5,6]numbers.map((item,index,array) => item * 2); //[2,4,6,8,10,12]numbers.forEach((item,index,array) => {//執行某些操作});歸并方法
reduce()：從數組第一項開始遍歷到最后一項 。reduceRight()：從最后一項開始遍歷至第一項 。
let values = [1,2,3,4,5];let sum = values.reduce((prev,cur,index,array) => prev +cur); //15數組其他方法
concat()： 在現有數組全部元素基礎上創建一個新數組 。slice()：創建一個包含原有數組中一個或多個元素的新數組 。splice()：在數組中插入(刪除、替換)元素 。第1個參數，操作的位置，第2個參數，要刪除的元素個數，后面的n個參數，插入到數組中的元素 。indexOf()：查找元素所在的索引位置 。lastIndexOf()： 和indexOf方法類似，區別是從后往前找 。includes()：判斷是否包含元素 。
let color = ['red','green','blue'];let color2 = colors.concat('yellow',['black','brown']);//['red','green','blue','yellow','black','brown']let color3 = colors.slice(1); //['green','blue']let color3 = colors.slice(1,2); //['green']let removed = colors.splice(0,1); // removed = red; colors = ['green','blue']colors.splice(1,0,'yellow','orange'); //在第一個位置插入兩個元素 ['green',blue','yellow','orange']let numbers = [1,2,3,4,5,6,7,8,9];numbers.indexOf(4);//3numbers.includes(5);//trueMap:
ES6新增的集合類型，可以給Map構造函數傳入一個可迭代對象，需要包含鍵/值對數組 。Map可以使用任何javascript數據類型作為鍵 。map的值類型也是沒有限制的 。Map實例會維護鍵值對的插入順序，可以根據插入順序執行迭代操作 。
API：has(key) ：判斷鍵是否存在 。set(key,value)：設置鍵值對 。get(key)：根據key獲取對應的值 。delete(key)：刪除鍵值對 。clear()：清除這個map 。size屬性：獲取map的長度 。
Map與Object比較：
內存占用：不同瀏覽器情況不同，但給定固定大小的內存，Map可以存更多的鍵值對插入性能：插入Map一般會稍快 。查找速度：如果只包含少量鍵值對，Object速度更快，如果代碼涉及大量查找操作，某些情況下選Object可能更好刪除速度：Map的delete()操作性能更優綜上所述，一般情況下使用Map代替Object做鍵值操作是更明智的選擇 。
WeakMap：
與Map類似的數據 結構，主要應對垃圾回收優化操作，它不會阻止垃圾回收操作 。WeakMap不可迭代鍵，也不能clear()整個數據 。它非常適合保存關聯元數據，比如dom樹種的一個元素，作為WeakMap的key，當dom元素被刪除是，WeakMap對應的值被銷毀 。如果把dom元素做為Map的key，則不會釋放dom元素，造成內存浪費 。這是WeakMap中Weak的正解 。
Set:
集合，存儲不重復的值 。Set會維護插入是的順序，因此支持順序迭代 。
API:add()：增加值 。has()：判斷是否包含值 。delete()：刪除值size屬性：Set長度