ES5中的方法
arr.slice()
基于當(dāng)前數(shù)組中的一或多個項創(chuàng)建一個新數(shù)組弊知。slice()方法可以接受一或兩個參數(shù)，即要返回項的起結(jié)束位置。該方法返回的是新的數(shù)組,不會對原來的數(shù)組有影響
語法:arr.slice(起始的位置[從0開始],結(jié)束位置[從1開始])
let arr=["red","bule","yellow","white"];
console.log(arr.slice(1,3)); // ["bule", "yellow"]
注意點:
- 如果省略結(jié)束位置的話,就會從開始位置一直到最后一項
- 如果參數(shù)里面有負(fù)數(shù)的話,則用數(shù)組長度加上該數(shù)來確定相應(yīng)的位置仇参。例如蛤铜，在一個包含 5 項的數(shù)組上調(diào)用 slice(-2,-1)與調(diào)用 slice(3,4)得到的
結(jié)果相同嫩絮。如果結(jié)束位置小于起始位置丛肢，則返回空數(shù)組。
let item = arr.slice(-3,-1); // [12, 32]
let item2 = arr.slice(-1,-3); // []
arr.splice()
該方法應(yīng)該算是最強大的數(shù)組方法了,他有很多種用法
- 刪除: 可以刪除任意數(shù)量的項,只需要指定2個參數(shù):要刪除的第一項的位置和要刪除的項數(shù),返回的是被的部分,會組成一個新的數(shù)組剿干。原來的數(shù)組就會只剩下未被刪除的部分,語法:
arr.splice(起始位置 0開始,長度);
let arr = [12,3,4,323,12,32,34];
arr.splice(1,4); // [3,4,323,12]
- 插入:可以向指定位置插入任意項,秩序提供3個參數(shù):起始位置,0(要刪除的項目),和要插入的項,也可以插入多個項目,插入的項會在起始位置開始插入所有的項,語法:
arr.splice(起始位置,0,要插入的項)
let newArr = arr.splice(1, 0, 'pink','black','orange');
console.log(arr); // ["red", "pink", "black", "orange", "bule", "yellow", "white"]
- 替換:可以向指定位置插入任意數(shù)量的項,且同事刪除任意數(shù)量的項,要插入的項數(shù)不必與刪除的項數(shù)相等,語法:
arr.splice(起始位置,要刪除的項數(shù),和要插入的任意數(shù)量的項)
let arr = ["red", "pink", "black", "orange", "bule"]
let remove = arr.splice(1, 2, 'white','yellow');
console.log(arr); // ["red", "white", "yellow", "orange", "bule"]
// 當(dāng)插入的項數(shù)不等于刪除項的時候
let arr = ["red", "pink", "black", "orange", "bule"]
let remove = arr.splice(1, 2, 'white','yellow','pink');
console.log(arr); // ["red", "white", "yellow", "pink","orange", "bule"]
arr.indexOf()
該方法接收兩個參數(shù):要查找的項和(可選)表示查找起點的位置的索引值蜂怎。indexOf()是從數(shù)組的開頭開始查找,返回值是索引值。如果找不到的話,就會返回-1
用法:經(jīng)常是用來判斷某個數(shù)組中是否含有某個元素
let arr = ["red", "pink", "black", "orange", "bule"];
let item = arr.indexOf("pink"); // 1
arr.lastIndexOf ()
該方法接收兩個參數(shù):要查找的項和(可選)表示查找起點的位置的索引值置尔。lastIndexOf 是從數(shù)組的尾部開始查找,返回值是索引值
用法:經(jīng)常是用來判斷某個數(shù)組中是否含有某個元素
let arr = ["red", "pink", "black", "orange", "bule"];
let item = arr.lastIndexOf ("pink"); // 1
array.every()
對數(shù)組中的每一項運行給定函數(shù)杠步，如果該函數(shù)對每一項都返回 true，則返回 true
let number=[1,2,4,5,54,43,3];
let newArr = number.every(function(item,index){
return item > 2
})
console.log(newArr); // false 只要有一項不符合就會返回false
array.filter
對數(shù)組中的每一項運行給定函數(shù)榜轿，返回該函數(shù)會返回 true 的項(即符合條件的項)組成的數(shù)組幽歼。
let number=[1,2,4,5,54,43,3];
let newArr = number.filter(function(item,index){
return item > 2
})
console.log(newArr); // [4,5,54,43,3]
array.foreach()
對數(shù)組中的每一項運行給定函數(shù)。這個方法沒有返回值
var array1 = ['a', 'b', 'c'];
array1.forEach(function(element) {
console.log(element);
});
array.map()
對數(shù)組中的每一項運行給定函數(shù)谬盐，返回每次函數(shù)調(diào)用的結(jié)果組成的數(shù)組试躏。
let number = [1, 2, 4, 5, 54, 43, 3];
let newArr = number.map(function (item, index) {
return item * 2
})
console.log(newArr); // [2, 4, 8, 10, 108, 86, 6]
array.some()
對數(shù)組中的每一項運行給定函數(shù)，如果該函數(shù)對任一項返回 true设褐，則返回 true
let number=[1,2,4,5,54,43,3];
let newArr = number.every(function(item,index){
return item > 2
})
console.log(newArr); //false
array.reduce()
這兩個方法都會迭代數(shù)組的所有項颠蕴，然后構(gòu)建一個最終返回的值。其中助析，reduce()方法從數(shù)組的第一項開始犀被，逐個遍歷到最后。而 reduceRight()則從數(shù)組的最后一項開始外冀，向前遍歷到第一項寡键。
let arr= [1, 2, 4, 5, 54, 43, 3];
let sum = arr.reduce(function(prev,cur,index,array){
return prev+cur;
})
console.log(sum); //112
// 求平均數(shù)
let result2=arr.reduce((prev,cur,index,array)=>{
// 最后一個
if(index!==array.length-1){
return prev+cur/array.length
}
else{
return prev+cur
}
})
總結(jié):
- 返回布爾值的:some()、every()
- 返回新數(shù)組的:map()雪隧、filter()
- 沒有返回值的:forEach()
ES6中新增的方法
擴展數(shù)組:擴展運算符（spread）是三個點（...)
console.log(...[1,2,3]); // 1 2 3
console.log(1,...[2,3,4,5]); // 1 2 3 4 5
使用場景
復(fù)制數(shù)組
const arr=[1,2,3];
// ES5的寫法
const arr2=arr;
// ES6的寫法
const arr3=[...arr]
合并數(shù)組
const arr=[1,2,3,4];
const arr2=[5,6,7]
// ES5的寫法
const arr3=arr.concat(arr2); // [1,2,3,4,5,6,7]
// ES6的寫法
const arr4=[...arr,...arr2]; // [1,2,3,4,5,6,7]
將一個字符串轉(zhuǎn)為一個數(shù)組
let arr=[...'hello']; // ["h", "e", "l", "l", "o"]
函數(shù)中的參數(shù)需要展開的時候
function sayHi(array, ...args) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
sayHi('hello',...numbers)
注意點:展開的args必須是形參的最后一位,否則會報錯Rest parameter must be last formal parameter
Array.from
該方法用于將兩類對象轉(zhuǎn)為真正的數(shù)組：類似數(shù)組的對象和可遍歷的對象
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫法
var arr=[].slice.call(arrayLike);
// ES6的寫法
let arr2=Array.from(arrayLike)
如果參數(shù)是一個真正的數(shù)組的話,Array.from會返回一個一模一樣的數(shù)組
let arr=[1,2,4,5]
Array.from(arr) // [1,2,4,5]
Array.from還可以接受第二個參數(shù),作用類似于數(shù)組的map方法,用于對每個元素進行處理,將處理后的值放入返回的數(shù)組
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3, 4, 5], (x) => x * x) ;// [1, 4, 9, 16, 25]
使用場景
將dom操作返回的NodeList集合,以及函數(shù)內(nèi)部的arguments對象轉(zhuǎn)成真正的數(shù)組
// NodeList
let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
return p.textContent.length > 100;
});
// arguments對象
function foo() {
// Es5寫法
var args =[].slice.call(arguments)
// ES6寫法
var args2 = Array.from(arguments);
}
兼容性處理
對于還沒有部署該方法的瀏覽器,可以使用Array.prototype.slice方法來代替
const toArray = (() =>
Array.from ? Array.from : obj => [].slice.call(obj)
)();
Array.of()
Array.of() 方法用于將一組值轉(zhuǎn)換為數(shù)組
Array.of(3,4,8); // [3,4,8]
Array.of(4); // [4]
Array.of()總是返回參數(shù)組成的數(shù)組,如果沒有參數(shù),就返回一個空數(shù)組
Array.CopyWith
在當(dāng)前數(shù)組內(nèi)部西轩，將指定位置的成員復(fù)制到其他位置（會覆蓋原有成員），然后返回當(dāng)前數(shù)組脑沿。也就是說藕畔，使用這個方法，會修改當(dāng)前數(shù)組
語法:
Array.prototype.copyWithin(target, start = 0, end = this.length)
該方法接受三個參數(shù):
- target（必需）：從該位置開始替換數(shù)據(jù)庄拇。如果為負(fù)值注服，表示倒數(shù)。
- start（可選）：從該位置開始讀取數(shù)據(jù)措近，默認(rèn)為 0溶弟。如果為負(fù)值，表示倒數(shù)瞭郑。
- end（可選）：到該位置前停止讀取數(shù)據(jù)辜御，默認(rèn)等于數(shù)組長度。如果為負(fù)值屈张，表示倒數(shù)擒权。
這三個參數(shù)都應(yīng)該是數(shù)值苇本，如果不是，會自動轉(zhuǎn)為數(shù)值菜拓。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
// 將3號位復(fù)制到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
// -2相當(dāng)于3號位瓣窄，-1相當(dāng)于4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]
// 將3號位復(fù)制到0號位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
// 將2號位到數(shù)組結(jié)束，復(fù)制到0號位
let i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 對于沒有部署 TypedArray 的 copyWithin 方法的平臺
// 需要采用下面的寫法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
