Array
寫之前鞏固一下JS的七種數(shù)據(jù)類型:number, string, boolean, null, undefined, symbol, object,
由此可見, Array屬于object.
Array是JS的原生對(duì)象, 同時(shí)也是一個(gè)構(gòu)造函數(shù).
構(gòu)造函數(shù)
var arr = new Array(2); // 生成一個(gè)兩個(gè)成員的數(shù)組,每個(gè)位置都是空值
//等同于
var arr = Array(2);
Array構(gòu)造函數(shù)有個(gè)很大的缺陷, 就是不同的參數(shù), 會(huì)導(dǎo)致不一致性,比如:
var arr = new Array(2); // 第一個(gè)參數(shù)2代表數(shù)組的length
var arr = new Array(2,2); // 第一個(gè)參數(shù)2代表數(shù)組的第一個(gè)元素
var arr = new Array(); // 返回一個(gè)空數(shù)組
var arr = new Array('abc'); // 返回一個(gè)數(shù)組['abc']
因此,通常創(chuàng)建數(shù)組的時(shí)候,不建議使用構(gòu)造函數(shù)創(chuàng)建, 使用數(shù)組字面量最好:
var arr = [1,2];
遍歷
// 下面是兩個(gè)數(shù)組 arr 和 obj
var arr = [1,2]; // 內(nèi)存中 __proto__, 指向的是Array.prototype
var obj = {0:1, 1:2, 'length':2}; // 內(nèi)存中 __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
由上面的例子可以總計(jì)出:
- 所以遍歷是是遍歷, 和是不是數(shù)組無(wú)關(guān), 有關(guān)的是有沒(méi)有下標(biāo).
- 數(shù)組之所以為數(shù)組, 是因?yàn)槟阌X(jué)得他是數(shù)組, 覺(jué)得是數(shù)組就使用
for(let i = 0;i<obj.length;i++)進(jìn)行遍歷, 覺(jué)得不是就使用for(let key in obj)遍歷. - 數(shù)組本質(zhì): ____proto____(原型)指向了
Array.prototype.
靜態(tài)方法
Array.isArray 方法返回一個(gè)bool值, 表示參數(shù)是否為數(shù)組.
var arr = [1,2,3];
typeof arr // 'object'
Array.isArray(arr) // true
實(shí)例方法
講實(shí)例方法之前,先看下Array創(chuàng)建之后的內(nèi)存圖:
- valueOf(), toString()
所有對(duì)象都擁有的兩個(gè)公用方法.
var arr = [1,2,3];
arr.valueOf(); // [1,2,3]
arr.toString(); // "1,2,3"
- push(), pop()
push向數(shù)組添加一個(gè)或者元素, pop刪除數(shù)組的最后一個(gè)元素, 兩個(gè)方法都會(huì)改變?cè)瓟?shù)組
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結(jié)合使用, 構(gòu)成了后進(jìn)先出的stack結(jié)構(gòu).
- shift(), unshift()
shift刪除數(shù)組的第一個(gè)元素, unshift在數(shù)組第一個(gè)位置添加元素, 兩個(gè)方法都會(huì)改變?cè)瓟?shù)組
var arr = ['a', 'b', 'c'];
a.shift() // ['b', 'c']
// 使用shift可以清空一個(gè)數(shù)組
var arr = ['a', 'b', 'c'];
a.unshift('x', 'd') // ['x', 'd', 'a', 'b', 'c']
shift和unshift結(jié)合使用, 構(gòu)成了先進(jìn)先出的queue結(jié)構(gòu).
- join()
join數(shù)組元素之間用指定參數(shù)作為分隔符拼接
var arr = [1,2,3];
arr.join(',') // "1,2,3"
arr.join() // "1,2,3" 不加參數(shù),默認(rèn)用逗號(hào)拼接
arr.toString(arr) // "1,2,3" 與join不同, 只是巧合
arr + "" // "1,2,3" 與join不同, 只是巧合
- concat()
concat拼接兩個(gè)數(shù)組,生成一個(gè)新數(shù)組, 原數(shù)組不變
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顛倒排列數(shù)組元素 , 改變?cè)瓟?shù)組
var arr = [1,2,3];
arr.reverse(); // [3,2,1]
- sort()
sort對(duì)數(shù)組成員進(jìn)行排序, 快速排序方法, 需要接受一個(gè)函數(shù), 函數(shù)返回排序依據(jù), 改變?cè)瓟?shù)組
var a = [1,3,6,2,5];
a.sort(function(x,y){ return x-y }) // [1,2,3,5,6] 如果函數(shù)返回值小于等于0, 第一個(gè)元素排在第二個(gè)元素前面
a.sort(function(x,y){ return y-x }) // [6,5,3,2,1] 如果該函數(shù)的返回值大于0，表示第一個(gè)成員排在第二個(gè)成員后面
var students = ['小明','小紅','小花'] ;
var scores = { 小明: 59, 小紅: 99, 小花: 80 };
students.sort(function(x,y){
return scores[x] - scores[y]
})
- map()
map將所有元素依次傳入?yún)?shù)函數(shù), 并將每一次的執(zhí)行結(jié)果組成一個(gè)新數(shù)組返回, 不改變?cè)瓟?shù)組.
var a = [1, 2, 3];
a.map(function(n){
return n + 1''
}) // [2, 3, 4]
- forEach()
forEach和map方法相似, 也是對(duì)數(shù)組的所有成員依次執(zhí)行參數(shù)函數(shù), 但是forEach不會(huì)有返回值,只用來(lái)操作數(shù)據(jù).
// forEach 有三個(gè)參數(shù), 通常只寫兩個(gè)參數(shù)
1. 當(dāng)前值
2. 當(dāng)前位置
3. 數(shù)組本身
var out = [];
[1, 2, 3].forEach(function(elem) {
this.push(elem * elem);
}, out); // 其中this 就是[1,2,3], 第一個(gè)參數(shù)是一個(gè)函數(shù), 第二個(gè)參數(shù)是空數(shù)組out, 回調(diào)函數(shù)內(nèi)部的this指向了out
out // [1, 4, 9]
- filter()
filter過(guò)濾數(shù)組元素, 它的參數(shù)是一個(gè)函數(shù)上枕，所有數(shù)組成員依次執(zhí)行該函數(shù)咐熙，返回結(jié)果為true的成員組成一個(gè)新數(shù)組返回。該方法不會(huì)改變?cè)瓟?shù)組辨萍。
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方法依次處理數(shù)組的每個(gè)成員棋恼，最終累計(jì)為一個(gè)值.下面是四個(gè)參數(shù):
- 累積變量，默認(rèn)為數(shù)組的第一個(gè)成員
- 當(dāng)前變量锈玉，默認(rèn)為數(shù)組的第二個(gè)成員
- 當(dāng)前位置（從0開始）(可選)
- 原數(shù)組 (可選)
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]
