js 數組操做集錦

數組經常使用的基本方法

1、 數組的屬性：
constructor 返回(數組,數字，字符串等)對象原型建立的函數。
length 設置或返回數組元素的個數。
prototype 是js全局屬性，容許你向(數組,函數，stringd等)對象添加屬性或方法。

碼子展現以上三個屬性：

1. constructor ：
返回值：一個函數對象。該函數由(數組,數字，字符串)對象的原始建立。

[1,2,3,4].constructor
Number.constructor
'1234'.constructor
輸出：function Array() { [native code] }
      function Number() { [native code] }
      function String() { [native code] }
      
複製代碼

2.prototype ：  Array屬性構造器
咱們用prototype爲Array構造一個方法,爲處理數組提供一個公用的功能
Array.prototype.gets = function () {
    this.forEach(function (val) {
        console.log(val) //1234
        //這裏this表明數組
    })
}
調用運行構建的方法：
sets([1,2,3,4]);
sets([1])
function sets (item) {
    item.gets();    
}

咱們用prototype爲Array構造一個屬性：當構建一個屬性，全部的數組將被設置屬性，它是默認值。
  Array.prototype.name = 'val';給全部的數組設置屬性name
  [1,2].name  //輸出val
複製代碼

2、數組的方法： 直接上圖：

根據上圖，咱們對數組的方法進行歸類下：

1. 不會改變原數組的方法：

arr.slice()
arr.map()
arr.forEach()
arr.every()
arr.some()
arr.filter()
arr.reduce()
arr.entries()
arr.find()
arr.concat()
複製代碼

2. 能改變原數組的方法：

arr.splice()
arr.reverse()
arr.fill()
arr.copyWithin()
arr.sort()
arr.push()
arr.pop()
arr.unshift()
arr.shift()
複製代碼

3. es5之後新增的方法

copyWithin()     
 entries()   
 fill()    
 find()
 findIndex() 
 from() 
 keys() 
 以上方法兼容ie12+
 includes() 兼容 ie14+

複製代碼

如今咱們對es5之後新增的方法操做下：

array.copyWithin(target, start, end)
參數：
target	必需。複製到指定目標索引位置。
start	可選。元素複製的起始位置。
end	可選。中止複製的索引位置 (默認爲 array.length)。若是爲負值，表示倒數。
複製'qq'替換數組最後一位4
[1,2,'3','qq',4].copyWithin(-1,3,4) //[1,2,'3','qq','qq']
複製1,2替換數組後兩位'qq',4
[1,2,'3','qq',4].copyWithin(3,0,-1) //[1, 2, "3", 1, 2]
-----------------------------------------------------------------------
entries() 返回一個數組的迭代對象，該對象包含數組的鍵值對 (key/value)。
參數：無
迭代對象中數組的索引值做爲 key， 數組元素做爲 value。
 [0, "1"]
 [1, "2"]
 [2, "3"]
var x = ['1','2','3'].entries();
    x.next().value // [0, "1"]
    x.next().value //  [1, "2"]
----------------------------------------------------------------------    
fill() 方法用於將一個固定值替換數組的元素。
參數
value	必需。填充的值。
start	可選。開始填充位置。
end	可選。中止填充位置 (默認爲 array.length)

用 '啦啦'替換數組的第二項'嗯嗯'
['哈哈','嗯嗯','哦哦'].fill('啦啦',1,2);
//["哈哈", "啦啦", "哦哦"]
----------------------------------------------------------------------
find() 方法返回經過測試（函數內判斷）的數組的第一個(注意第一個)元素的值。
       爲數組中的每一個元素都調用一次函數執行：
       
參數：
function(currentValue, index,arr)	必需。數組每一個元素須要執行的函數。
函數參數:
currentValue	必需。當前元素
index	可選。當前元素的索引值
arr	可選。當前元素所屬的數組對象
thisValue	可選。 傳遞給函數的值通常用 "this" 值。若是這個參數爲空， "undefined" 會傳遞給 "this" 值 
當數組中的元素在測試條件時返回 true 時, find() 返回符合條件的元素，以後的值不會再調用執行函數。
若是沒有符合條件的元素返回 undefined

咱們來一個返回數組中符合 >6的第一個元素
function finds (x) {
    return this > 6
}
 
var a = [1,2,3,4,7,8];
console.log(a.find(finds)) //7
------------------------------------------
findIndex和find不一樣的是：
    (1).當數組中的元素在測試條件，若是沒有符合條件的元素則返回 -1
    (2)返回經過測試（函數內判斷）的數組的第一個元素的索引值(從0開始計算)
    console.log(a.findIndex(finds)) //4  輸入數組中第一個爲7的元素的索引
-----------------------------------------------------------
from() 方法用於經過擁有 length 屬性的對象或可迭代的對象來返回一個數組。
若是對象是數組返回 true，不然返回 false。

Array.from(object, mapFunction, thisValue);
參數 
object	必需，要轉換爲數組的對象。
mapFunction	可選，數組中每一個元素要調用的函數。
thisValue	可選，映射函數(mapFunction)中的 this 對象。

例：
將字符串轉成數組：Array.from("hello")  // [h,e,l,l,o]
爲要轉換成數組的字符操做： Array.form('hello',(x) => x + 1) //["h1", "e1", "l1", "l1", "o1"]
將類數組轉爲數組： Array.from({0:1,1:2,2:3,length:3}) //[1,2,3]
      或者這樣寫： Array.from({length:3}).map((val,i) => i + 1)  //[1,2,3]
--------------------------------------------------------------------------
keys() 方法用於從數組建立一個包含數組鍵的可迭代對象。 對對象數組不生效
若是對象是數組返回 true，不然返回 false。
參數：無
例：
返回元素索引：var x = [1,2,3].keys()   Array Iterator {} //返回原型對象的迭代器 
                x.next().value //0    
                x.next().value //1
                x.next().value //2
        注： next()方法返回keys的迭代對象{value: 2, done: false}

           
 -------------------------------------------------------------------------
 includes() 方法用來判斷一個數組是否包含一個指定的值，若是是返回 true，不然false。
 參數 
searchElement	必須。須要查找的元素值。
fromIndex	可選。從該索引處開始查找 searchElement。若是爲負值，則按升序從 array.length + fromIndex 的索引開始搜索。默認爲 0。
檢索[1,2,3]中是否有1: 
            直接檢索：[1,2,3].includes(1) //true
            按索引開始位置檢索： [1,2,3].includes(1,0) //true
        
    注意：若是fromIndex 大於等於數組長度 ，則返回 false 。該數組不會被搜索:
            [1,2,3].includes(3,3) //false
    注意： 若是 fromIndex 爲負值，計算出的索引將做爲開始搜索searchElement的位置。若是計算出的索引小於 0，則整個數組都會被搜索
         [1,2,3].includes('a', -100); // true
    
複製代碼

數組去重集結

原數組：var arr = [1,2,3,3,3,4,5.6,5.6,0,9];
複製代碼

1.indexOf或lastIndexOf去重

var newArr = [];
arr.forEach((val,index) => {
   newArr.indexOf(val) === -1 ? newArr.push(val) : '';
});
console.log(newArr)//[1, 2, 3, 4, 5.6, 0, 9]
複製代碼

2.ES6 newSet去重

Array.from(newSet(arr));//[1, 2, 3, 4, 5.6, 0, 9]
複製代碼