Array 深入淺出

array 構造器

ES6 && API >>> WEBPACK && GULP >> REACT || VUE

Ctrl+B //打開項目下文件
Ctrl+N //新建文件untitled
Ctrl+M //跳轉到語句頂部（底部）
Ctrl+D //選中光標前(中)語句
Ctrl+G //跳轉到指定行號位置
Ctrl+J //上下行合并（刪除中間enter，spase）
Ctrl+L //選中光標所在行
Ctrl+W //關閉當前文件
Ctrl+R //跳轉到函數位置，css，html
Ctrl+\ //關閉側邊欄
Ctrl+[ ] //前后移一字符
Ctrl+< //設置
通常使用字面量去聲明 以下例外 array更為簡潔
const b  = Array(8);//[undefined × 8]
const a = [];
a.length = 8; //[undefined × 8]
//Array(8)更為簡潔
未使用new 瀏覽器會做如下操作
function Array(){
  // 如果this不是Array的實例，那就重新new一個實例
  if(!(this instanceof arguments.callee)){
    return new arguments.callee();
  }
}
Array構造器根據參數長度的不同，做以下處理。
  • new Array(arg1, arg2,…)，參數長度為0或長度大于等于2時，傳入的參數將按照順序依次成為新數組的第0至N項（參數長度為0時，返回空數組）。
  • new Array(len)，當len不是數值時，處理同上，返回一個只包含len元素一項的數組；當len為數值時，根據如下規范，len最大不能超過32位無符號整型，即需要小于2的32次方（len最大為Math.pow(2,32) -1或-1>>>0），否則將拋出RangeError。
  • Array.of()
    • Array.of() 方法創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型。
    Array.of(element0[, element1[, ...[, elementN]]]);
Array.of(7);//[7]
Array(7);//[undefined x 7]
  • Array.from()
    • 只要一個對象有迭代器，Array.from就能把它變成一個數組（當然，是返回新的數組，不改變原對象）。以下均可轉換。
      • 類數組對象 {0:'name',1:'sex',length:2}
      • 可遍歷對象。map set
    Array.from(arrayLike[, mapFn[, thisArg]]);
arrayLike
想要轉換成真實數組的類數組對象或可遍歷對象。
mapFn 可選
可選參數，如果指定了該參數，則最后生成的數組會經過該函數的加工處理后再返回。
thisArg 可選
可選參數，執行 mapFn 函數時 this 的值。

    Array.from('abc');//["a", "b", "c"]
  • Array.isArray()
    Array.isArray([]);//true
Object.getPrototypeOf(array) === Array.prototype

  • 數組推導 (瀏覽器支持率過低 暫不贅述);

      Object.getOwnPropertyNames(Array.prototype); //獲取array  prototype 上的方法

改變自身值的方法(9個)

  • pop

    pop() 方法刪除一個數組中的最后的一個元素，并且返回這個元素。如果是棧的話，這個過程就是棧頂彈出。

    可操作類對象數組,如果類對象數組不具有長度屬性,返回undefind,并追加長度為0

    棧是一種先進后出的結構，新添加的或待刪除的元素都保存在棧的末尾，稱作棧頂，另一端叫做棧底。

    var arr = [1,2,3,4];
arr.pop();//[1,2,3]
  • push

    push()方法添加一個或者多個元素到數組末尾，并且返回數組新的長度。如果是棧的話，這個過程就是棧頂壓入。

    var arr = [];
arr.push(1,2,3); [1,2,3]
var arr2 = [4,5];
var l = Array.prototype.push.apply(arr,arr2);// 5
arr;// [1,2,3,4,5]
  • reverse

    reverse()方法顛倒數組中元素的位置，第一個會成為最后一個，最后一個會成為第一個，該方法返回對數組的引用。

    語法：arr.reverse()

    var arr = [1,2,3];
var arr2 = arr.reverse();
arr;//[3,2,1]

    可操作類對象數組。

  • shift

    shift()方法刪除數組的第一個元素，并返回這個元素。如果是棧的話，這個過程就是棧底彈出。

    語法：arr.shift()

    var arr = [1,2,3];
var itmes = arr.shift();
arr;//[2,3]
itme;// 1

    可操作類對象數組。

  • sort

    sort()方法對數組元素進行排序，并返回這個數組。

    語法：arr.sort([comparefn])

    //無comparefn,轉換為unicode 進行排序
var arr = [1,2,3,10,5];
arr.sort(); // [1, 10, 2, 3, 5]
//

  • 如果指明了comparefn，數組將按照調用該函數的返回值來排序。若 a 和 b 是兩個將要比較的元素：

    • 若 comparefn(a, b) < 0，那么a 將排到 b 前面；
    • 若 comparefn(a, b) = 0，那么a 和 b 相對位置不變；
    • 若 comparefn(a, b) > 0，那么a , b 將調換位置；
    var arr = [1,3,55,6,100,10,23];
arr.sort((a,b) => a-b); //[1, 3, 6, 10, 23, 55, 100]

    var arr = ['shift','push','revarse','pop','sort'];
arr.sort((a,b)=>a.localeCompare(b));//["pop", "push", "revarse", "shift", "sort"]
//localeCompare
//返回一個數字表示是否 引用字符串 在排序中位于 比較字符串 的前面，后面，或者二者相同。
//  當 引用字符串 在 比較字符串 前面時返回 -1
//  當 引用字符串 在 比較字符串 后面時返回 1
//  相同位置時返回 0
  • splice

    splice() 方法通過刪除現有元素和/或添加新元素來更改一個數組的內容。

    語法

    array.splice(start)
array.splice(start, deleteCount)
array.splice(start, deleteCount, item1, item2, ...)
    • array.splice(start) 
        var arr = [1,2,3,4,5];
  arr.splice(0);//[1,2,3,4,5]
  arr; //[]

  var arr = [1,2,3,4,5];
  arr.splice(3);//[4,5]
  arr; //[1,2,3]

  var arr = [1,2,3,4,5];
  arr.splice(6);//[]
  arr;//[1,2,3,4,5]

  var arr = [1,2,3,4,5];
  arr.splice(-1); //[5]
  arr;//[1, 2, 3, 4]

  //start
  //指定修改的開始位置（從0計數）。(1)(2)
  //如果超出了數組的長度，則從數組末尾開始添加內容。(3)
  //如果是負值，則表示從數組末位開始的第幾位（從1計數）。(4)
    • array.splice(start, deleteCount) 
      var arr = [1,2,3,4,5];
arr.splice(0,3);//[1,2,3]
arr; //[4,5]

var arr = [1,2,3,4,5];
arr.splice(0,0);//[]
arr;//[1,2,3,4,5]

var arr = [1,2,3,4,5];
arr.splice(0,10); //[1,2,3,4,5]
arr;//[]
//deleteCount
//整數，表示要移除的數組元素的個數。(1)
//如果 deleteCount 是 0，則不移除元素。這種情況下，至少應添加一個新元素。(2)
//如果 deleteCount 大于start 之后的元素的總數，則從 start 后面的元素都將被刪除（含第 start 位）。(3)
    • array.splice(start, deleteCount, item1, item2, ...) 
      var arr = [1,2,3,4,5];
arr.splice(0,3,'splice');//[1,2,3]
arr;//['splice',4,5]

var arr = [1,2,3,4,5];
arr.splice(-1,2,'hi','children');
arr;//[[1,2,3,'hi','children']
//item1, item2, ...
//要添加進數組的元素,從start 位置開始。
//如果不指定，則 splice() 將只刪除數組元素。
  • unshift

    將一個或多個元素添加到數組的開頭，并返回新數組的長度

    棧底插入

    語法arr.unshift(element1, ..., elementN)

    var arr = [1,2];
arr.unshift(-1,0);
arr;//[-1,0,1,2]

arr.unshift([-3,-2]);
arr;//[[-3,-2],-1,0,1,2];

Array.prototype.unshift.apply(arr,[-4]);
arr;// [-4,[-3,-2],-1,0,1]
  • copyWithin(ES6)

    copyWithin() 方法淺復制數組的一部分到同一數組中的另一個位置，并返回它，而不修改其大小。

    語法：arr.copyWithin(target, start=0[, end = this.length])

    • taget 指定被替換元素的索引
    • start 指定替換元素起始的索引
    • end 可選，指的是替換元素結束位置的索引。
    [1,2,3,4,5,6].copyWithin(-2);//[1,2,3,4,1,2]
//無start默認為0，end為arr.length
[1,2,3,4,5,6].copyWithin(0,3);//[4,5,6,4,5,6]
[1,2,3,4,5,6].copyWithin(0,2,3);//[3,2,3,4,5,6]
[1,2,3,4,5,6].copyWithin(-2,-3,-1);// [1, 2, 3, 4, 4, 5]

    可用于類數組對象

  • fill(ES6)

    fill() 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。

    語法

    arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)

    可用于類數組對象

    var arr = [1,2,3,4,5];
arr.fill(6);//[6,6,6,6,6]
arr.fill(5,3);//[6,6,6,5,5];
arr.fill(1,0,3);//[1,1,1,5,5]

不會改變自身的方法(9個)

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容