实例方法
find
arr.find(callback)
用于获取第 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 个符合要求的元素的下标:
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]])
用于填充数组:
value
:用于填充数组的值start
:开始填充的下标(包含),默认为0
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)
用于查看数组中是否包含指定数据:
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]])
可基于 [类数组对象] / [可迭代对象] 创建一个新的、浅拷贝的数组
arrObj
:类数组对象 / 可迭代对象callback
:(item, index) => newItem
item
-当前数据项、index
-当前数据项的索引
newItem
默认为item
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[, …])
用于创建数组:
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"]
相关知识: