Array

javascript Array

1. Properties

  • Array.length

     var arr = ["apple","juice "];
     arr.length; // 2
    
  • Array.prototype

    Array.prototype是Array的原型,你可以在上面添加新的方法,所有的Array實(shí)例都會(huì)繼承新添加方法。

    if(!Array.prototype.first){
        Array.prototype.first = function(){
            return this[0];
        }
    }
    
    var arr = [1,2,3];
    arr.first = 1;
    

2. Methods

  • Array.from(arrayLike, mapFn?)

    Array.from()會(huì)從array-like or iterable object中創(chuàng)建一個(gè)新的數(shù)組實(shí)例。
    mapFn: 可選,可調(diào)用數(shù)組中每一個(gè)元素

    array-like: 類數(shù)組
    具有l(wèi)ength和index的對(duì)象.

    iterable object: 可迭代對(duì)象
    可以循環(huán)獲取對(duì)象里面值的對(duì)象,例如:Map和Set

    • 從字符串中獲取數(shù)組

      Array.from("echo"); //["e","c","h","o"]

      拓展
      把字符串轉(zhuǎn)成數(shù)組
      "echo".split("");

    • 從數(shù)組中拷貝數(shù)組

      var arr = [1,2,3];
      var fromArr = Array.from(arr);
      arr; //[1,2,3]
      fromArr; //[1,2,3]
      

      再看:

      var arr = [1,{a: 1}];
      var fromArr = Array.from(arr);
      fromArr[1].a = 2;
      arr; //[ 1, { a: 2 } ]
      fromArr; //[ 1, { a: 2 } ]
      

      發(fā)現(xiàn)了嗎?

      Array.from()是從數(shù)組中淺拷貝一個(gè)數(shù)組出來。

      想了解更多深拷貝和淺拷貝的東東?請(qǐng)狠狠的戳這里??

      前進(jìn)吧,少年

    • 從Set中獲取一個(gè)數(shù)組

    const set = new Set([1,2,2,3]);
    Array.from(set); //[1,2,3]
    

    Set數(shù)據(jù)結(jié)構(gòu)介紹??

    在這里

    • 從Map中獲取一個(gè)數(shù)組
    var m = new Map([[1, 2], [2, 4], [4, 8]]);
    Array.from(m); // [[1, 2], [2, 4], [4, 8]]
    

    Map數(shù)據(jù)結(jié)構(gòu)介紹??

    here

    • 從類數(shù)組中獲取一個(gè)數(shù)組
    function f() {
        return Array.from(arguments);
    } 
    f(1,2); //[1,2]
    

    拓展
    把類數(shù)組轉(zhuǎn)成數(shù)組
    function f() {
    return [].slice.call(arguments);
    }
    f(1,2); //[1,2]

    • mapFn的應(yīng)用
    Array.from([1,2,3], x => x * x); //[1,4,9]
    Array.from({length: 5}, (item, index) => index);
    //[0,1,2,3,4]
    
    
  • Array.isArray()

    Array.isArray() 用于確定傳遞的值是否是一個(gè) Array。

    Array.isArray([1,2,3]);  //true
    Array.isArray({a: 1});   //false
    
  • Array.of()

    Array.of() 方法創(chuàng)建一個(gè)具有可變數(shù)量參數(shù)的新數(shù)組實(shí)例,而不考慮參數(shù)的數(shù)量或類型。

    Array.of(1,2,3); //[1,2,3]
    Array.of(undefined); //[undefined]
    Array.of({a: 2}); //[{a: 2}]
    

3. prototype

  • Array.prototype.concat()

    concat() 方法用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會(huì)更改現(xiàn)有數(shù)組,而是淺復(fù)制一個(gè)新數(shù)組。

    連接兩個(gè)數(shù)組

    var alpha = ['a', 'b', 'c'];
    var numeric = [1, 2, 3];
    alpha.concat(numeric);
    // result in ['a', 'b', 'c', 1, 2, 3]
    

    連接三個(gè)數(shù)組

    var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];
    var nums = num1.concat(num2, num3);
    console.log(nums); 
    // results in [1, 2, 3, 4, 5, 6, 7, 8, 9]
    
  • Array.prototype.copyWithin(target, start, end)

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

    說明:

      1.把序列號(hào)為[start, end)的值拷貝到序列號(hào)為target的位置,而不改變?cè)瓟?shù)組大小。
      2.start省略后默認(rèn)為0,為負(fù)數(shù)時(shí)從尾部計(jì)算。
      3.end省略后為arrauy.length,為負(fù)數(shù)時(shí)從尾部計(jì)算。
    

    示例:

    [1, 2, 3, 4, 5].copyWithin(-2);
    // [1, 2, 3, 1, 2]
    
    [1, 2, 3, 4, 5].copyWithin(0, 3);
    // [4, 5, 3, 4, 5]
    
    [1, 2, 3, 4, 5].copyWithin(0, 3, 4);
    // [4, 2, 3, 4, 5]
    
    [1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
    // [1, 2, 3, 3, 4]
    
  • Array.prototype.every(fn)

    對(duì)一個(gè)數(shù)組里所有的值進(jìn)行檢測(cè),全部通過返回true,否則返回false.

    說明:

      1.fn(element, index, every)
    

    示例:

    let arr = [12, 14, 5, 39];
    
    function testArr(item, index, array){
        return item > 10;
    }
    
    function testItem(item, index, array){
        return item > 3;
    }
    
    console.log( arr.every(testArr) ); //false
    console.log( arr.every(testItem) ); //true
    console.log( arr.every(x => x > 1) ); //true
    
  • Array.prototype.fill(value, strat? end?)

    說明:

      1.start可選,默認(rèn)值為0.如果為負(fù)數(shù),則從尾部開始。
      2.end可選,默認(rèn)值為Array.length,則從尾部開始。
    

    示例:

    [1, 2, 3].fill(4);               // [4, 4, 4]
    [1, 2, 3].fill(4, 1);            // [1, 4, 4]
    [1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
    [1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
    [1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
    [1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
    Array(3).fill(4);                // [4, 4, 4]
    [].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}
    
  • Array.prototype.filter()

    入口:

      callback(item, index, array, thisArg?)
      
      item: 當(dāng)前元素
      index: 當(dāng)前元素的序列號(hào)
      array: 當(dāng)前作用的數(shù)組
      thisArg: 回掉函數(shù)中的this指向,如果未設(shè)置,則指向undefined
    

    出口:

      返回一個(gè)包含匹配元素的數(shù)組
    

    示例:

    const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];
    const filterItems = (query) => {
      return fruits.filter((el) =>
        el.toLowerCase().indexOf(query.toLowerCase()) > -1
      );
    }
    console.log(filterItems('ap')); // ['apple', 'grapes']
    console.log(filterItems('an')); // ['banana', 'mango', 'orange']
    
  • Array.prototype.find()

    入口:

      callback(item, index, array, thisArg?)
      
      item: 當(dāng)前元素
      index: 當(dāng)前元素的序列號(hào)
      array: 當(dāng)前作用的數(shù)組
      thisArg: 回掉函數(shù)中的this指向,如果未設(shè)置,則指向undefined
    

    出口:

      放回第一個(gè)匹配到的元素,如果不存在,返回undefined.
    

    示例:

    var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
        {name: 'cherries', quantity: 5}
    ];
    
    function findCherries(fruit) { 
        return fruit.name === 'cherries';
    }
    
    console.log(inventory.find(findCherries)); 
    // { name: 'cherries', quantity: 5 }
    
  • Array.prototype.findIndex()

    入口:

      callback(item, index, array, thisArg?)
      
      item: 當(dāng)前元素
      index: 當(dāng)前元素的序列號(hào)
      array: 當(dāng)前作用的數(shù)組
      thisArg: 回掉函數(shù)中的this指向,如果未設(shè)置,則指向undefined
    

    出口:

      放回第一個(gè)匹配到的元素的序列號(hào),如果不存在,返回undefined.
    

    示例:

    function isBigEnough(element) {
      return element >= 15;
    }
    
    [12, 5, 8, 130, 44].findIndex(isBigEnough); 
    // index of 4th element in the Array is returned,
    // so this will result in '3'
    
  • Array.prototype.forEach()

    入口:

      callback(item, index, array, thisArg?)
      
      item: 當(dāng)前元素
      index: 當(dāng)前元素的序列號(hào)
      array: 當(dāng)前作用的數(shù)組
      thisArg: 回掉函數(shù)中的this指向,如果未設(shè)置,則指向undefined
    

    操作:

      對(duì)數(shù)組中每一個(gè)元素執(zhí)行一次函數(shù)操作。
    

    示例:

    const arr = ['a', 'b', 'c'];
    
    arr.forEach(function(element) {
        console.log(element);
    });
    
    // a
    // b
    // c
    
  • Array.prototype.includes(searchItem, startIndex?)

    入口:

      searchItem: 需要搜索的目標(biāo)元素
      startIndex: 開始的位置
    

    出口:

      如果搜索到有目標(biāo)元素,返回true,否則,返回false.
    

    示例:

    var a = [1, 2, 3];
    a.includes(2); // true 
    a.includes(4); // false
    
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容