JS裏的Array

Array

寫以前鞏固一下JS的七種數據類型:number, string, boolean, null, undefined, symbol, object,

因而可知, Array屬於object.

Array是JS的原生對象, 同時也是一個構造函數.

構造函數

var arr = new Array(2); // 生成一個兩個成員的數組,每一個位置都是空值
//等同於
var arr = Array(2);
複製代碼

Array構造函數有個很大的缺陷, 就是不一樣的參數, 會致使不一致性,好比:

var arr = new Array(2); // 第一個參數2表明數組的length

var arr = new Array(2,2); // 第一個參數2表明數組的第一個元素

var arr = new Array(); // 返回一個空數組

var arr = new Array('abc'); // 返回一個數組['abc']
複製代碼

所以,一般建立數組的時候,不建議使用構造函數建立, 使用數組字面量最好:

var arr = [1,2];
複製代碼

遍歷

// 下面是兩個數組 arr 和 obj

var arr = [1,2]; // 內存中 __proto__, 指向的是Array.prototype
var obj = {0:1, 1:2, 'length':2}; // 內存中 __proto__, 指向的是Object.prototype

// 遍歷arr
for(let i = 0; i < arr.length; i++){
	console.log(i, arr[i])
}
// 0 1
// 1 2

// 遍歷obj
for(let i = 0; i < obj.length; i++){
	console.log(i, obj[i])
}
// 0 1
// 1 2

obj.xxx = 'xxx';
// 獲得obj爲
obj = {0:1, 1:2, 'length':2, xxx:"xxx"}

// 再次遍歷obj獲得
// 0 1
// 1 2

// 換一種方法遍歷
for(let key in obj){
    console.log(key, obj[key])
}
// 0 1
// 1 2
// 2 3
// length 3
// xxx xxx
複製代碼

由上面的例子能夠總計出:

1. 因此遍歷是是遍歷, 和是否是數組無關, 有關的是有沒有下標.
2. 數組之因此爲數組, 是由於你以爲他是數組, 以爲是數組就使用for(let i = 0;i<obj.length;i++)進行遍歷, 以爲不是就使用for(let key in obj)遍歷.
3. 數組本質: proto(原型)指向了Array.prototype.
4. 僞數組：原型鏈中____proto___沒有指向Array.prototype;(例如：上面的obj，arguments)

靜態方法

Array.isArray 方法返回一個bool值, 表示參數是否爲數組.

var arr = [1,2,3];

typeof arr // 'object'
Array.isArray(arr) // true
複製代碼

實例方法

講實例方法以前,先看下Array建立以後的內存圖:

• valueOf(), toString()

全部對象都擁有的兩個公用方法.

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

arr.toString(); // "1,2,3"
複製代碼

• push(), pop()

push向數組添加一個或者元素, pop刪除數組的最後一個元素, 兩個方法都會改變原數組

var arr = ['a', 'b', 'c'];

arr.push(1)
arr.push('d')
arr.push(true)

arr // ['a', 'b', 'c', 1, 'd', true]

var arr = ['a', 'b', 'c']
arr.pop() // ['a', 'b']
複製代碼

push和pop結合使用, 構成了後進先出的stack結構.

• shift(), unshift()

shift刪除數組的第一個元素, unshift在數組第一個位置添加元素, 兩個方法都會改變原數組

var arr = ['a', 'b', 'c'];
a.shift() // ['b', 'c']
// 使用shift能夠清空一個數組

var arr = ['a', 'b', 'c'];
a.unshift('x', 'd') // ['x', 'd', 'a', 'b', 'c']
複製代碼

shift和unshift結合使用, 構成了先進先出的queue結構.

• join()

join數組元素之間用指定參數做爲分隔符拼接

var arr = [1,2,3];
arr.join(',') // "1,2,3"
arr.join() // "1,2,3" 不加參數,默認用逗號拼接

arr.toString(arr) // "1,2,3" 與join不一樣, 只是巧合

arr + "" // "1,2,3" 與join不一樣, 只是巧合

複製代碼

• concat()

concat拼接兩個數組,生成一個新數組, 原數組不變

var a = [1,2,3];
var b = [4,5,6];

a.concat(b) // [1,2,3,4,5,6]

a.concat([]) // [1,2,3]
a.concat([]) !== a

複製代碼

• reverse()

reverse顛倒排列數組元素 , 改變原數組

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

複製代碼

• sort()

sort對數組成員進行排序, 快速排序方法, 須要接受一個函數, 函數返回排序依據, 改變原數組

var a = [1,3,6,2,5];

a.sort(function(x,y){ return x-y }) // [1,2,3,5,6] 若是函數返回值小於等於0, 第一個元素排在第二個元素前面
a.sort(function(x,y){ return y-x }) // [6,5,3,2,1] 若是該函數的返回值大於0，表示第一個成員排在第二個成員後面

var students = ['小明','小紅','小花'] ;
var scores = { 小明: 59, 小紅: 99, 小花: 80 };
students.sort(function(x,y){
    return scores[x] - scores[y]
})

複製代碼

• map()

map將全部元素依次傳入參數函數, 並將每一次的執行結果組成一個新數組返回, 不改變原數組.

var a = [1, 2, 3];
a.map(function(n){
    return n + 1''
}) // [2, 3, 4]

複製代碼

• forEach()

forEach和map方法類似, 也是對數組的全部成員依次執行參數函數, 可是forEach不會有返回值,只用來操做數據.

// forEach 有三個參數, 一般只寫兩個參數
1. 當前值
2. 當前位置
3. 數組自己

var out = [];
[1, 2, 3].forEach(function(elem) {
  this.push(elem * elem);
}, out); // 其中this 就是[1,2,3], 第一個參數是一個函數, 第二個參數是空數組out, 回調函數內部的this指向了out

out // [1, 4, 9]

複製代碼

• filter()

filter過濾數組元素, 它的參數是一個函數，全部數組成員依次執行該函數，返回結果爲true的成員組成一個新數組返回。該方法不會改變原數組。

var a = [1,2,3,4,5,6];
a.filter(function(value){
    return value % 2 === 0
})
// [2,4,6]
a.filter(function(value,index){
    return index % 2 !== 0
})
// [1,3,5]

複製代碼

• reduce()

reduce方法依次處理數組的每一個成員，最終累計爲一個值.下面是四個參數:

1. 累積變量，默認爲數組的第一個成員
2. 當前變量，默認爲數組的第二個成員
3. 當前位置（從0開始）(可選)
4. 原數組 (可選)

var a = [1,2,3,4,5];
a.reduce(function(a,b){
    console.log(a,b);
    return a+b;
})
// 15

複製代碼

• 使用reduce表示map

var a = [1,2,3];
a.reduce(function(arr,n){
    arr.push(n*2);
    return arr;
},[])
// [2,4,6]

複製代碼

• 使用reduce表示filter

var a = [1,2,3,4,5,6];
a.reduce(function(arr,n){
    if(n % 2 === 0){
        arr.push(n)
    }
    return arr
}, [])
// [2, 4, 6]

複製代碼