本教程操作环境：windows7系统、ECMAScript 6版、Dell G3电脑。
es6新增数组方法
1、Array.from()
Array.from 方法用于将两类对象转为真正的数组：
类似数组的对象（array-like object）
可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）
意味着，只要部署了Iterator接口的数据结构，Array.from都能将其转换为数组
实际开发中，一般可以用来转换DOM操作返回的NodeList集合，以及函数内部的arguments对象
传一个参数时，用于将类数组转为真正的数组
数组去重
复制代码1
2
3
4
const arr = [1,2,3,3,3,2,5];
console.log(Array.from(new Set(arr))); //[1,2,3,5]
//...也可实现相同的效果
console.log([...new Set(arr)]) //[1,2,3,5]
登录后复制对于没有部署该方法的浏览器，可使用Array.prototype.slice方法代替
复制代码1
2
3
cosnt toArray = (() => {
Array.from ? Array.from : obj => [].slice.call(obj)
})()
登录后复制还可以接收第二个参数，第二个参数传入一个函数，实现类似map方法的效果，对每个元素进行处理并返回处理好的数组
复制代码1
Array.from([1,2,3] , item => item *2) //[2,4,6]
登录后复制返回字符串的长度
可以用于将字符串转为数组，然后返回字符串的长度，因为它能够正确处理各种Unicode字符，从而避免JS将大于/uFFFF的Unicode字符算作2个字符的自身bug
复制代码1
2
3
function countLength(string) {
return Array.from(string).length
}
登录后复制2、Array.of()
Array.of 方法用于将一组值，转换为数组。弥补数组构造函数 Array()的不足。因为参数个数的不同，会导致 Array()的行为有差异
复制代码1
2
3
4
5
6
7
8
9
10
11
12
//如下代码看出差异
Array.of(3); // [3]
Array.of(3, 11, 8); // [3,11,8]
new Array(3); // [, , ,]
new Array(3, 11, 8); // [3, 11, 8]
// Array.of方法可以用下面的代码模拟实现。
function ArrayOf() {
return [].slice.call(arguments);
}
登录后复制3、数组实例的 find() 和 findIndex()
find()
返回第一个符合条件的数组成员，它的参数是一个回调函数，所有数组成员依次执行该函数，直到找出第一个满足条件的成员，然后返回该成员，如果没有符合条件的成员，则返回undefined
该方法的回调函数接收三个参数： 当前的值 ， 当前位置， 原数组
示例1
复制代码1
[1,12,4,0,5].find(（item,index , arr） => return item < 1) // 0
登录后复制示例2
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// find()
var item = [1, 4, -5, 10].find(n => n < 0);
console.log(item); // -5
// find 也支持这种复杂的查找
var points = [
{
x: 10,
y: 20
},
{
x: 20,
y: 30
},
{
x: 30,
y: 40
},
{
x: 40,
y: 50
},
{
x: 50,
y: 60
}
];
points.find(function matcher(point) {
return point.x % 3 == 0 && point.y % 4 == 0;
}); // { x: 30, y: 40 }
登录后复制findIndex()
写法用法基本与find()方法相同，只是返回第一个符合条件的数组成员的位置，如果没有则返回-1
示例1
复制代码1
[1,2,4,15,0].findIndex((item , index ,arr) => return item > 10) //3
登录后复制示例2
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var points = [
{
x: 10,
y: 20
},
{
x: 20,
y: 30
},
{
x: 30,
y: 40
},
{
x: 40,
y: 50
},
{
x: 50,
y: 60
}
];
points.findIndex(function matcher(point) {
return point.x % 3 == 0 && point.y % 4 == 0;
}); // 2
points.findIndex(function matcher(point) {
return point.x % 6 == 0 && point.y % 7 == 0;
}); //1
登录后复制4、数组实例的 fill()
- fill()方法使用给定值， 填充一个数组
- fill 方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
// fill方法使用给定值， 填充一个数组。
var fillArray = new Array(6).fill(1);
console.log(fillArray); //[1, 1, 1, 1, 1, 1]
//fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。
["a", "b", "c"].fill(7, 1, 2);
// ['a', 7, 'c']
// 注意，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。
let arr = new Array(3).fill({
name: "Mike"
});
arr[0].name = "Ben";
console.log(arr);
// [{name: "Ben"}, {name: "Ben"}, {name: "Ben"}]
登录后复制这两个方法都可以发现数组中的NaN，而ES5中的indexOf()是发现不了NaN的
5、数组实例的 entries()，keys() 和 values()
三个方法都用来遍历数组，都返回一个遍历器对象，可用for…of循环遍历
不同的是：
keys()是对键名的遍历
values()是对键值的遍历
entries()是对键值对的遍历
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
for (let index of ["a", "b"].keys()) {
console.log(index);
}
// 0 1
for (let elem of ["a", "b"].values()) {
console.log(elem);
}
// a b
for (let [index, elem] of ["a", "b"].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
var a = [1, 2, 3];
[...a.values()]; // [1,2,3]
[...a.keys()]; // [0,1,2]
[...a.entries()]; // [ [0,1], [1,2], [2,3] ]
登录后复制6、includes()方法返回一个布尔值
该方法返回一个布尔值，表示某个数组中是否包含给定的值
复制代码1
2
[1, 2, 3].includes(2) // true
[(1, 2, 3)].includes(4) // false
登录后复制还可接收第二个参数，表示搜索的起始位置，默认是0。如果第二个参数是负数，则表示到数的位置。如果第二个参数大于数组的长度，则从下标0处开始
includes 方法弥补了 indexOf 方法不够语义化和误判 NaN 的缺点
复制代码1
[1,23,NaN].includes(NaN) //true
登录后复制兼容方法：
复制代码1
2
3
4
5
function contains = ( () => {
Array.prototype.includes
?(arr , val) => arr.includes(val)
:(arr , val) => arr.some(item => return item === val)
})()
登录后复制7、数组实例的 flat()，flatMap()
- flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。传参数代表拉平几层默认是一层
- flatMap()只能展开一层数组。方法对原数组的每个成员执行一个函数（相当于执行 Array.prototype.map()），然后对返回值组成的数组执行 flat()方法。该方法返回一个新数组，不改变原数组
复制代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// flat()
[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]
//flatMap()
[2, 3, 4].flatMap((x) => [x, x * 2])
//map执行完后是[[2, 4], [3, 6], [4, 8]]
//然后在执行flat()方法得到下边的结果
// [2, 4, 3, 6, 4, 8]
// flatMap()只能展开一层数组。
// 相当于 .flat()
[1, 2, 3, 4].flatMap(x => [
[x * 2]
])
//map执行完后是[[[2]], [[4]], [[6]], [[8]]]
//然后在执行flat()方法得到如下结果
// [[2], [4], [6], [8]]复制代码
登录后复制8、数组实例的copywithin()
在当前数组内部将指定位置的成员复制到其他位置，然后返回当前数组，会改变原数组
接收三个参数：
1、target(必需) 从该位置开始替换数据
2、start(可选) 从该位置开始读取数据，默认为0，如果为负数，则表示到数
3、end(可选) 到该位置前停止读取数据，默认等于数组长度。如果是负数，表示到数
三个参数都应该是数字，如果不是，会自动转为数值
复制代码1
[1,2,3,4,5].copywithin(0,3); //[4,5,3,4,5] 表示从下标3位置直到结束的成员(4,5)，复制到从下标0开始的位置，结果替换掉了原来的1和2
登录后复制【相关推荐：javascript视频教程、web前端】
以上就是es6新增数组方法是什么的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是激昂胡萝卜最近收集整理的关于es6新增数组方法是什么的全部内容，更多相关es6新增数组方法是什么内容请搜索靠谱客的其他文章。
发表评论 取消回复