實(shí)例方法

find

arr.find(callback) 用于獲取第 1 個(gè)符合要求的元素：

1. callback：(item, index, arr) => boolean
item-當(dāng)前值、index-當(dāng)前索引、arr-當(dāng)前數(shù)組

• 返回值：callback 第一次返回 true 的對(duì)應(yīng) item；如果沒(méi)有符合的元素，則返回 undefined

const arr = [50, 10, 201, 103, 62, 81];
const res = arr.find(val => val > 100);
console.log(res); // 201

findIndex

arr.findIndex(callback) 用于獲取第 1 個(gè)符合要求的元素的下標(biāo)：

1. callback：(item, index, arr) => boolean
item-當(dāng)前值、index-當(dāng)前索引、arr-當(dāng)前數(shù)組

• 返回值：callback 第一次返回 true 的對(duì)應(yīng) index；如果沒(méi)有符合的元素，則返回 -1

const arr = [{ name: 'aa' }, { name: 'bb' }]; // 數(shù)組元素為對(duì)象
const res = arr.findIndex(val => val.name == 'bb');
console.log(res); // 1

fill

arr.fill(value[, start[, end]]) 用于填充數(shù)組：

1. value：用于填充數(shù)組的值
2. start：開(kāi)始填充的下標(biāo)（包含），默認(rèn)為 0
3. end：結(jié)束填充的下標(biāo)（不包含），默認(rèn)為 arr.length

• 會(huì)改變?cè)瓟?shù)組
• 返回值：填充后的新數(shù)組

const arr1 = new Array(3);
arr1.fill('pad');
console.log(arr1); // ['pad', 'pad', 'pad']

const arr2 = new Array(5);
arr2.fill('pad', 1, 3);
console.log(arr2); // [empty, 'pad', 'pad', empty × 2]

fill 的填充操作可以認(rèn)為是 “賦值”。所以填充引用類(lèi)型數(shù)據(jù)時(shí)，其實(shí)所有元素都指向同一個(gè)地址：

const arr = new Array(3);
arr.fill({ name: 'cc' });
arr[0].name = 'aa'; // 修改其中一項(xiàng)
console.log(arr); // [{name: "aa"}, {name: "aa"}, {name: "aa"}]

可以先為空數(shù)組填充 null，再通過(guò) map() 將 null 修改為對(duì)象 {}。這樣填充的數(shù)組元素就是不同的對(duì)象啦。

必須先為空數(shù)組填充 null，因?yàn)?map 會(huì)跳過(guò)空項(xiàng)，不對(duì)其進(jìn)行操作。

const nullArr = new Array(3).fill(null);
const arr = nullArr.map(() => ({}));
arr[0].name = 'aa';
console.log(arr); // [{name:'aa'}, {}, {}]

includes

arr.includes(value) 用于查看數(shù)組中是否包含指定數(shù)據(jù)：

1. value：查找的數(shù)據(jù)

• 返回值：找到指定數(shù)據(jù)，則返回 true；否則返回 false

const arr = ['apple', 'origan', 'banana'];
const a = arr.includes('apple');
console.log(a); // true

const b = arr.includes('pear');
console.log(b); // false

Array.prototype.indexOf 方法有 2 個(gè)缺點(diǎn)：
① 不夠語(yǔ)義化，它是找到參數(shù)值的第 1 次出現(xiàn)位置，所以要去比較返回值是否等于 -1，表達(dá)起來(lái)不夠直觀
② 內(nèi)部使用嚴(yán)格相等運(yùn)算符 === 進(jìn)行判斷，因?yàn)?NaN !== NaN，所以不能檢測(cè) NaN 是否在數(shù)組中

const arr = [1, NaN];
console.log(arr.indexOf(NaN)); // -1
console.log(arr.includes(NaN)); // true

注意：任何字符串查找空字符串 ''，都返回 true

'asd'.inciudes(''); // true

靜態(tài)方法

isArray

Array.isArray(value) 用于判斷參數(shù)是不是數(shù)組：

• 返回值：value 是數(shù)組 則返回 true；value 不是數(shù)組 則返回 false

const arr = [1, 2, 4, 5, 3];
const result = Array.isArray(arr);
console.log(result); // true

from

Array.from(arrObj[, callback[, thisObj]]) 可基于 [類(lèi)數(shù)組對(duì)象] / [可迭代對(duì)象] 創(chuàng)建一個(gè)新的、淺拷貝的數(shù)組

1. arrObj：類(lèi)數(shù)組對(duì)象 / 可迭代對(duì)象
2. callback：(item, index) => newItem
item-當(dāng)前數(shù)據(jù)項(xiàng)、index-當(dāng)前數(shù)據(jù)項(xiàng)的索引
   newItem 默認(rèn)為 item
3. thisObj：callback 的 this 指向（箭頭函數(shù)不生效 thisObj 配置項(xiàng)）

• 返回值：新創(chuàng)建的、淺拷貝的數(shù)組

const arr = [1, 1, 2];
const newArr = Array.from(new Set(arr)); // 轉(zhuǎn) Set 可去重; set 為可迭代對(duì)象
console.log('newArr', newArr); // newArr [ 1, 2 ]

const arr = [1, 1, 2];
const newArr = Array.from(new Set(arr), item => item * 2);
console.log('newArr', newArr); // newArr [ 2, 4 ]

from 方法可以作用于 [字符串]，因?yàn)樽址彩强傻鷮?duì)象：

const str = 'man';
const arr1 = Array.from(str);
console.log(arr1); // ['m', 'a', 'n']

// 這里等效于字符串的 split 方法
const arr2 = str.split('');
console.log(arr2); // ['m', 'a', 'n']

from 方法還可以作用于 [下標(biāo)為屬性名，帶 length 屬性的類(lèi)數(shù)組對(duì)象]

const obj = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3,
};
const arr = Array.from(obj);
console.log(arr); // ["a", "b", "c"]

from 方法可用于淺拷貝數(shù)組：

const arr = [1, 2, 3];
const copyArr = Array.from(arr);
console.log('arr', arr); // arr [1, 2, 3]
console.log('copyArr', copyArr); // copyArr [1, 2, 3]

of

Array.of(data[, …]) 用于創(chuàng)建數(shù)組：

1. data：數(shù)組的元素，可傳遞多個(gè) data 參數(shù)

• 返回值：新創(chuàng)建的數(shù)組

const arr = Array.of('a', 'b', 'c', 'd');
console.log(arr); // [ 'a', 'b', 'c', 'd' ]

該方法的主要目的，是彌補(bǔ)數(shù)組構(gòu)造函數(shù) Array() 的不足。因?yàn)椴煌膮?shù)個(gè)數(shù)，會(huì)導(dǎo)致不同的 Array() 的行為。

new Array(); // []
new Array(3); // [empty, empty, empty]
new Array(3, 11, 8); // [3, 11, 8]

Array.of(); // []
Array.of(3); // [3]
Array.of(3, 11, 8); // [3, 11, 8]

關(guān)于數(shù)組的空位

數(shù)組的空位：數(shù)組的某一個(gè)位置沒(méi)有值

const arr = [1, , 3];

ES5 對(duì)空位的處理很不一致，多數(shù)情況下會(huì)忽略空位。

• for … in 會(huì)忽略空位

for (let i in [, ,]) {
    console.log(i);
}

• forEach、filter、some、reduce 都會(huì)直接忽略空位

const arr = [1, , 3];
console.log(arr); // [1, empty, 3]
const newArr = arr.filter(item => true);
console.log(newArr); // [ 1, 3 ]

• map 操作元素時(shí)，會(huì)保留空位 (及跳過(guò)空位，不對(duì)其進(jìn)行操作)

const arr = [1, , 3];
const newArr = arr.map(item => item + 1);
console.log(newArr); // [2, empty, 4]

• join 和 toString 會(huì)將空位處理成空字符串 ''

const arr = [1, , 3];
console.log(arr); // [1, empty, 3]
const str = arr.join(',');
console.log(str); // 1,,3

ES6 則是明確將空位轉(zhuǎn)為 undefined

• for … of 會(huì)遍歷空位

for (let i of [, ,]) {
    console.log(i); // undefined undefined  最后一個(gè) , 會(huì)被視為尾逗號(hào)，所以只輸出兩次
}

• 擴(kuò)展運(yùn)算符 ...

[...['a', , 'b']]; // ["a", undefined, "b"]

• entries、keys、values

[...[, 'a'].keys()]; // [0,1]
[...[, 'a'].values()]; // [undefined,"a"]
[...[, 'a'].entries()]; // [[0,undefined], [1,"a"]]

• find 和 findIndex

[, 'a'].find(item => true); // undefined
[, 'a'].findIndex(item => true); // 0

• fill

new Array(3).fill('a'); // ["a","a","a"]

• includes

let arr = ['apple', , 'banana'];
let result = arr.includes(undefined);
console.log(result); // true

• from

Array.from(['a', , 'b']); // ["a", undefined, "b"]

相關(guān)知識(shí)：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-621562.html

1. 【JavaScript】數(shù)組簡(jiǎn)介
2. 【JavaScript】數(shù)組實(shí)例方法 (ES5)
3. 【JavaScript】高階數(shù)組實(shí)例方法 (ES5)

到了這里，關(guān)于【JavaScript】數(shù)組方法 (ES6)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！