js 數組和類數組的區別

時間 2019-11-18

原文原文鏈接

　　類數組定義javascript

　　1）擁有length屬性，其它屬性（索引）爲非負整數（對象中的索引會被當作字符串來處理）；
2）不具備數組所具備的方法；html

　　javascript中常見的類數組有 arguments對象和 DOM方法的返回結果。好比 document.getElementsByTagName()。java

　　判斷是不是類數組es6

function isLikeArray(o) {
    if (typeof o === 'object' && isFinite(o.length) &&  o.length >= 0 && o.length < 4294967296){
        // 4294967296: 2^32
        return true
    } else {
        return false
    }
}

類數組轉換爲數組 args = Array.prototype.slice.call(arguments);數組

// 類數組轉換爲數組首先Array.prototype.slice.call(arrayLike)的結果是將arrayLike對象轉換成一個Array對象。因此其後面能夠直接調用數組具備的方法瀏覽器

Array.prototype.sliceapp

　　slice() 方法可提取字符串的某個部分，並以新的字符串返回被提取的部分。函數

String 對象的方法 slice()、substring() 和 substr() （不建議使用）均可返回字符串的指定部分。slice() 比 substring() 要靈活一些，由於它容許使用負數做爲參數。slice() 與 substr() 有所不一樣，由於它用兩個字符的位置來指定子串，而 substr() 則用字符位置和長度來指定子串。post

還要注意的是，String.slice() 與 Array.slice() 類似。ui

Array.slice

返回值

返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。

說明

請注意，該方法並不會修改數組，而是返回一個子數組。若是想刪除數組中的一段元素，應該使用方法 Array.splice()。

（1）Array.prototype.slice表示數組的原型中的slice方法。注意這個slice方法返回的是一個Array類型的對象。

//slice的內部實現
Array.prototype.slice = function(start,end){  
      var result = new Array();  
      start = start || 0;  
      end = end || this.length; //this指向調用的對象，當用了call後，可以改變this的指向，也就是指向傳進來的對象，這是關鍵  
      for(var i = start; i < end; i++){  
           result.push(this[i]);  
      }  
      return result;  
 }

（2）能調用call的只有方法，因此不能用[].call這種形式，得用[].slice。而call的第一個參數表示真正調用slice的環境變爲了arrayLike對象。因此就好像arrayLike也具備了數組的方法。

（3）附上轉成數組的通用函數

var toArray = function(s){  
    try{  
        return Array.prototype.slice.call(s);  
    } catch(e){  
            var arr = [];  
            for(var i = 0,len = s.length; i < len; i++){  
                //arr.push(s[i]);  
                 arr[i] = s[i];     //聽說這樣比push快
            }  
             return arr;  
    }

//也能夠用es6

Array.from方法轉爲數組若是有不支持Array.from方法的瀏覽器，能夠用Array.prototype.slice方法替代 const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )();

Array.from使用

Array.from('一二三四五六七') // ["一", "二", "三", "四", "五", "六", "七"] // 等效的es5是'一二三四五六七'.split('') Array.from(new Set([1,2,1,2])) // 等效[...new Set([1,2,1,2])] => [1,2] // 用來數組去重 Array.from(new Map([[1, 2], [2, 4], [4, 8]])) // 接受一個map Array.from(arguments)// 接受一個類數組對象Array.from(document.querySelectorAll('div')) Array.from({1: 2,length:3}) // [undefined, 2, undefined]

　　類數組和數組的區別

① instanceof

② constructor

③ toString（）

④ ES 提供的方法 isArray（）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul id="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
	<script type="text/javascript">
	// 獲取全部li
	var lis = document.getElementsByTagName("li");
	// 定義數組
	var arr = [];
	// 請問有幾種方式來區別類數組和數組？
	
	// typeof 用來判斷類型 （是值類型仍是引用類型） 返回的是一個字符串
 
	// 第一種方式 instanceof
	console.log(arr instanceof Array);
	console.log(lis instanceof Array);
 
	// 第二種方式
	console.log(arr.constructor === Array)
	console.log(lis.constructor === Array)
 
	// 第三種方式
	console.log(Object.prototype.toString.call(arr) === "[object Array]")
	console.log(Object.prototype.toString.call(lis) === "[object Array]")
 
	// 使用ES5提供的方法
	console.log(Array.isArray(arr))
	console.log(Array.isArray(lis))
	</script>
</body>
</html>

　　將數組轉化爲類數組（參數列表）

調用apply方法的時候,第一個參數是對象(this), 第二個參數是一個數組集合, 這裏就說明apply的一個巧妙用法，能夠將一個數組默認的轉換爲一個參數列表([param1,param2,param3] 轉換爲 param1,param2,param3)，這個若是讓咱們用程序來實現將數組的每個項,來轉換爲參數的列表,可能都得費一會功夫,藉助apply的這點特性,因此就有了如下高效率的方法。

能夠看看 js函數中的apply()、call()、bind()方法 ---（apply的其餘巧妙用法（通常在什麼狀況下能夠使用apply））

　　（1）Math.max 實現獲得數組中最大的一項

由於Math.max 參數裏面不支持Math.max([param1,param2]) 也就是數組，可是它支持Math.max(param1,param2,param3…),因此

能夠根據剛纔apply的那個特色來解決 var max=Math.max.apply(null,array),這樣輕易的能夠獲得一個數組中最大的一項 (apply會將一個數組裝換爲一個參數接一個參數的傳遞給方法)

這塊在調用的時候第一個參數給了一個null,這個是由於沒有對象去調用這個方法,我只須要用這個方法幫我運算,獲得返回的結果就行,.因此直接傳遞了一個null。

var arr = new Array(1,2,3,4,5);
var max = Math.max.apply(null,arr);    //5

（2）Array.prototype.push 能夠實現兩個數組合並

　　一樣push方法沒有提供push一個數組,可是它提供了push(param1,param,…paramN);

　　若是咱們要把 arr2展開，而後一個一個追加到arr1中去，最後讓arr1=[「1」,「2」,「3」,「4」,「5」,「6」]
　　arr1.push(arr2)顯然是不行的，由於這樣作會獲得[「1」,「2」,「3」,[「4」,「5」,「6」]]

　　咱們只能用一個循環去一個一個的push(固然也能夠用arr1.concat(arr2)，可是concat方法並不改變arr1自己,須要從新定義一個變量)

　　因此一樣也能夠經過apply來轉換一下這個數組,即:

    var arr1=new Array("1","2","3");   
    var arr2=new Array("4","5","6");   
    Array.prototype.push.apply(arr1,arr2);
　　console.log(arr1,arr2)
    console.log("arr1="+arr1+",arr2="+arr2);