实例方法
find
arr.find(callback) 用于获取第 1 个符合要求的元素：
-
callback：(item, index, arr) => booleanitem-当前值、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) => booleanitem-当前值、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) => newItemitem-当前数据项、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"]
文章来源：https://www.toymoban.com/news/detail-621562.html
相关知识：文章来源地址https://www.toymoban.com/news/detail-621562.html
- 【JavaScript】数组简介
- 【JavaScript】数组实例方法 (ES5)
- 【JavaScript】高阶数组实例方法 (ES5)
到了这里，关于【JavaScript】数组方法 (ES6)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
