經(jīng)歷了幾天并不開(kāi)心的日子,應(yīng)試教育的無(wú)奈又一次擺在我眼前。哦,對(duì)了,我還是個(gè)非985&211大學(xué)的學(xué)生。
廢話不應(yīng)該那么多?
還是說(shuō)一說(shuō)ES6的數(shù)組吧...
無(wú)奈
首先我們應(yīng)該了解一下擴(kuò)展運(yùn)算符
擴(kuò)展運(yùn)算符...
,可以將一個(gè)數(shù)組轉(zhuǎn)為用逗號(hào)分隔的參數(shù)序列。
console.log(...[1, 2, 3]); // 1 2 3
- 將函數(shù)轉(zhuǎn)換為參數(shù)
function test(a,b,c) {
console.log(a+b+c);
}
var arr = [1,2,3];
/*es5中*/
test.apply(this,arr);
/*es6中*/
test(...arr);
- 合并數(shù)組
-
數(shù)組賦值
擴(kuò)展運(yùn)算符用于數(shù)組賦值,只能放在參數(shù)的最后一位,否則會(huì)報(bào)錯(cuò)
var [...arr, arr1] = [1, 2, 3, 4, 5];//報(bào)錯(cuò)
var [arr, ...arr1] = [1, 2, 3, 4, 5];
console.log(arr) // 1
console.log(arr1) // [2, 3, 4, 5]
var [arr, ...arr1] = [];
console.log(arr) // undefined
console.log(arr1) // []
var [arr, ...arr1] = ["foo"];
console.log(arr) // foo
console.log(arr1) // []
- 將字符串轉(zhuǎn)換為數(shù)組
console.log([...'hello']);// [ "h", "e", "l", "l", "o" ]
Array.from()方法
用于將類(lèi)數(shù)組和可遍歷的對(duì)象轉(zhuǎn)換為真正的數(shù)組
-
類(lèi)數(shù)組:就是類(lèi)似數(shù)組的對(duì)象,本質(zhì)上要有l(wèi)ength屬性,說(shuō)到底,任何擁有l(wèi)ength屬性的對(duì)象,都可以通過(guò)Array.from()方法轉(zhuǎn)換為數(shù)組。
可遍歷的對(duì)象:ES6新增的數(shù)據(jù)結(jié)構(gòu)set和map。
let myArray = {'0':'a','1':'b','2':'c'};
let arr = Array.from(myArray);
console.log(arr); //[]由于沒(méi)有l(wèi)ength屬性打印結(jié)果為一個(gè)空數(shù)組
let myArray = {'0':'a','1':'b','2':'c',length:3};
let arr = Array.from(myArray);
console.log(arr); //["a", "b", "c"]
console.log(Array.from({length:2})); //[undefined, undefined]
- 如果參數(shù)是一個(gè)真正的數(shù)組,Array.from()會(huì)返回一個(gè)一模一樣的新數(shù)組
var arr = [1,2,3];
var myArr = Array.from(arr);
console.log(myArr); //[1, 2, 3]
myArr[0] = 4;
console.log(myArr); //[4, 2, 3]
- Array.from()可以接受第二個(gè)參數(shù),用來(lái)對(duì)每個(gè)元素進(jìn)行處理然后放入返回的數(shù)組之中
var obj = {0:1,1:2,2:3,length:3};
var arr = Array.from(obj,x => x*x);
console.log(arr);
-
Array.from()的另一個(gè)應(yīng)用是,將字符串轉(zhuǎn)化成數(shù)組,然后返回字符串的長(zhǎng)度
因?yàn)樗軌蛘_處理各種Unicode字符,可以避JavaScript將大于\uFFFF的Unicode字符算成兩個(gè)字符的bug
function countSymbols(string) {
return Array.from(string).length;
}
Array.of()方法
用于將一組值,轉(zhuǎn)換為數(shù)組
console.log(Array.of(1,2,3)); //[1, 2, 3]
console.log(Array.of(undefined)); //[undefined]
console.log(Array.of()); //[]沒(méi)有參數(shù)時(shí),返回一個(gè)空數(shù)組。
-
這個(gè)方法的主要目的是彌補(bǔ)數(shù)組構(gòu)造函數(shù)Array()的不足
在數(shù)組的構(gòu)造函數(shù)中,如果只有一個(gè)值,那么這個(gè)值被認(rèn)作為是數(shù)組的長(zhǎng)度而不是數(shù)組的第一個(gè)值。
console.log(Array.of(2));
console.log(Array(2));
結(jié)果如圖
copyWithin()方法
將指定位置的成員復(fù)制到其他位置(會(huì)覆蓋原有成員),然后返回該數(shù)組
- 它接受三個(gè)參數(shù):
target(必填):從該位置開(kāi)始替換數(shù)據(jù)。
start(可選):從該位置開(kāi)始讀取數(shù)據(jù),默認(rèn)為0。如果是負(fù)值,表示倒數(shù)。
end(可選):到該位置前停止讀取數(shù)據(jù),默認(rèn)等于數(shù)組長(zhǎng)度。如果為負(fù)值,表示倒數(shù)。 - 舉個(gè)??大家就明白了
var arr = [1,2,3,4,5,6,7,8,9];
arr.copyWithin(0,3,6);
console.log(arr); //[4, 5, 6, 4, 5, 6, 7, 8, 9]
find()和findIndex()方法
- find()用于找出第一個(gè)符合條件的數(shù)組成員,返回該成員。如果沒(méi)有符合條件的成員,返回undefined
var arr = [1,5,10,15];
var num = arr.find(function(value) {
return value > 9;
});
console.log(num); //10
var arr = [1,5];
var num = arr.find(function(value) {
return value > 9;
});
console.log(num); //undefined
- findIndex()返回第一個(gè)符合條件的數(shù)組成員的位置,如果所有成員都不符合條件,則返回-1
var arr = [1,5];
var num = arr.findIndex(function(value) {
return value > 9;
});
console.log(num); //-1
回調(diào)函數(shù)可以接受三個(gè)參數(shù),以此為當(dāng)前的值、當(dāng)前的位置和原數(shù)組。
fill()方法
- 填充一個(gè)數(shù)組,一般用于數(shù)組的初始化
var arr = ['a','b','c'];
console.log(arr.fill(1)); // [1, 1, 1]
- 可以接受第二個(gè)和第三個(gè)參數(shù),用于指定填充的起始位置和結(jié)束位置
var arr = ['a','b','c'];
console.log(arr.fill(1,1,2)); // ["a", 1, "c"]
keys(),valueOf(),entries()方法
- keys()遍歷出所有的索引值
for (let index of ['a', 'b'].keys()) {
console.log(index);
} //0 1
- valueOf()遍歷所有的值
for (let index of ['a', 'b'].valueOf()) {
console.log(index);
} //a b
- entries()遍歷值和索引
for (let index of ['a', 'b'].entries()) {
console.log(index);
} //[0, "a"] [1, "b"]
include()方法
判斷數(shù)組是否包含給定的值,有返回true,沒(méi)有返回false,第二個(gè)參數(shù)表示搜索的起始位置
var arr = [1,2,3];
console.log(arr.includes(1)); //true
console.log(arr.includes(1,1)); //false
- includes不是利用嚴(yán)格等于判斷,所以可判斷是否有NaN
var arr = [1,2,3,NaN];
console.log(arr.indexOf(3));//2
console.log(arr.indexOf(1));//0
console.log(arr.indexOf(NaN));//-1
console.log(arr.includes(NaN));//true