【JavaScript】数组方法 (ES6)

实例方法

find

arr.find(callback) 用于获取第 1 个符合要求的元素：

1. callback：(item, index, arr) => boolean
item-当前值、index-当前索引、arr-当前数组

• 返回值：callback 第一次返回 true 的对应 item；如果没有符合的元素，则返回 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 个符合要求的元素的下标：

1. callback：(item, index, arr) => boolean
item-当前值、index-当前索引、arr-当前数组

• 返回值：callback 第一次返回 true 的对应 index；如果没有符合的元素，则返回 -1

const arr = [{ name: 'aa' }, { name: 'bb' }]; // 数组元素为对象
const res = arr.findIndex(val => val.name == 'bb');
console.log(res); // 1

fill

arr.fill(value[, start[, end]]) 用于填充数组：

1. value：用于填充数组的值
2. start：开始填充的下标（包含），默认为 0
3. end：结束填充的下标（不包含），默认为 arr.length

• 会改变原数组
• 返回值：填充后的新数组

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 的填充操作可以认为是 "赋值"。所以填充引用类型数据时，其实所有元素都指向同一个地址：

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

可以先为空数组填充 null，再通过 map() 将 null 修改为对象 {}。这样填充的数组元素就是不同的对象啦。

必须先为空数组填充 null，因为 map 会跳过空项，不对其进行操作。

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

includes

arr.includes(value) 用于查看数组中是否包含指定数据：

1. value：查找的数据

• 返回值：找到指定数据，则返回 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 个缺点：

① 不够语义化，它是找到参数值的第 1 次出现位置，所以要去比较返回值是否等于 -1，表达起来不够直观

② 内部使用严格相等运算符 === 进行判断，因为 NaN !== NaN，所以不能检测 NaN 是否在数组中

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

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

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

静态方法

isArray

Array.isArray(value) 用于判断参数是不是数组：

• 返回值：value 是数组 则返回 true；value 不是数组 则返回 false

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

from

Array.from(arrObj[, callback[, thisObj]]) 可基于 [类数组对象] / [可迭代对象] 创建一个新的、浅拷贝的数组

1. arrObj：类数组对象 / 可迭代对象
2. callback：(item, index) => newItem
item-当前数据项、index-当前数据项的索引
   newItem 默认为 item
3. thisObj：callback 的 this 指向（箭头函数不生效 thisObj 配置项）

• 返回值：新创建的、浅拷贝的数组

const arr = [1, 1, 2];
const newArr = Array.from(new Set(arr)); // 转 Set 可去重; set 为可迭代对象
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 方法可以作用于 [字符串]，因为字符串也是可迭代对象：

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 方法还可以作用于 [下标为属性名，带 length 属性的类数组对象]

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

from 方法可用于浅拷贝数组：

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[, ...]) 用于创建数组：

1. data：数组的元素，可传递多个 data 参数

• 返回值：新创建的数组

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

该方法的主要目的，是弥补数组构造函数 Array() 的不足。因为不同的参数个数，会导致不同的 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]

关于数组的空位

数组的空位：数组的某一个位置没有值

const arr = [1, , 3];

ES5 对空位的处理很不一致，多数情况下会忽略空位。

• for ... in 会忽略空位

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

• forEach、filter、some、reduce 都会直接忽略空位

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

• map 操作元素时，会保留空位 (及跳过空位，不对其进行操作)

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

• join 和 toString 会将空位处理成空字符串 ''

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

ES6 则是明确将空位转为 undefined

• for ... of 会遍历空位

for (let i of [, ,]) {
    console.log(i); // undefined undefined  最后一个 , 会被视为尾逗号，所以只输出两次
}

• 扩展运算符 ...

[...['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"]

相关知识：

1. 【JavaScript】数组简介
2. 【JavaScript】数组实例方法 (ES5)
3. 【JavaScript】高阶数组实例方法 (ES5)