ES6-数组的扩展-整理
一、Array.from():负责把类似数组的对象以及可遍历的对象转为真正的数组
1.类似数组的对象
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
}; let arrayLike2 = {
'0': 'a',
'1': 'b',
'2': 'c'
}; // ES5的写法
var arr1 = [].slice.call(arrayLike2);
console.log(arr1);//[] // ES6的写法
let arr2 = Array.from(arrayLike);
console.log(arr2);//["a","b","c"]
注:所谓类似数组的对象,本质特征只有一点,即必须有length属性。
2.可遍历的对象:NodeList对象或者是函数内部的arguments对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>123</p>
<p>234</p>
<p>345</p>
<script>
//NodeList对象
let ps = document.querySelectorAll('p');
console.log(ps);//[p, p, p]
Array.from(ps).forEach(function (p) {
console.log(p);
});
//arguments对象
let a = b = c = 1;
foo(a, b, c); function foo() {
var args = Array.from(arguments);
console.log(args);//[1, 1, 1]
}
</script>
</body>
</html>
3.部署了Iterator接口的数据结构,Array.from都可以将其转化为数组
Array.from("football");
// ["f", "o", "o", "t", "b", "a", "l", "l"] let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
4.如果是一个真正的数组,Array.from会返回一个一模一样的新数组
Array.from([1, 2, 3])
// [1, 2, 3]
5.扩展运算符(...
)也可以将某些数据结构转为数组。
sky('love','me','love','you');
function sky() {
var args = [...arguments];
console.log(args);// ["love", "me", "love", "you"]
}
扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,那么将无法转换。任何有length属性的对象,都可以通过Array.from方法转换成数组,而此时扩展运算符就无法转换。举栗验证如下:
Array.from({length:5});
// [undefined, undefined, undefined, undefined, undefined]
6.Array.from可以接受第二个参数,作用类似于数组的map方法,对数组的每一个元素进行操作,将处理后的值放入返回的数组
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x); Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
Array.from的第一个参数还可以指定第二个参数运行的次数,举栗
Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']
二、Array.of():将一组值转换成数组
这个方法主要是为了弥补Array的不足
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length //
Array的行为差异:
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array没有参数,一个参数,多个参数,返回的结果是不一样的。只有当参数个数超过两个的时候,Array才会正常返回由参数组成的新数组。参数个数只有一个的时候,是在指定这个数组的长度。
Array.of()的行为非常统一,基本上可以完全替代Array()和new Array()。
Array.of()方法可以用下面的代码模拟实现。
function ArrayOf(){
return [].slice.call(arguments);
}
三、copyWithin():在当前数组内部,将指定位置成员复制到其他位置,这个操作会覆盖原有成员,返回当前数组(被修改后的)
Array.prototype.copyWithin(target, start = 0, end = this.length)
这个方法可以接收三个参数:
target(必需):从该位置开始替换数据
start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。
end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
[1, 2, 3, 4, 5].copyWithin(0, 3) // [4, 5, 3, 4, 5]
上面代码表示将从3号位直到数组结束的成员(4和5),复制到从0号位开始的位置,结果覆盖了原来的1和2。
// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5] // -2相当于3号位,-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5] // 将3号位复制到0号位
[].copyWithin.call({length: 5, 3: 1}, 0, 3)
// {0: 1, 3: 1, length: 5}
关于第三个的理解:对象{length:5,3:1}有两个属性,length属性决定这个对象是类数组对象,另外还有一个key值为3,值为1的属性。将3号位复制到0号位,因此会创建key为0,值为1的属性(与key为3的值相同),所以结果是{0:1,3:1,length:5}
四、find()和findIndex()
find()用于找出第一个符合条件的数组成员。
它的参数是一个回调函数,所有数组成员一次执行该回调函数,直到找出第一个符合条件的数组成员。如果找不到,返回值为undefined
[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 4, 5, 10].find((n) => n < 0)
//undefined
find()回调函数可以接受三个参数,当前的值,当前的位置,和原数组
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) //
数组实例的findIndex()方法的用法与find方法非常类似,返回第一个符合条件的数组成员的位置,如果所有成员都不符合条件,则返回-1
。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) //
这两个方法都可以发现NaN,弥补了indexOf方法的不足。
[NaN].indexOf(NaN)
// -1 [NaN].findIndex(y => Object.is(NaN, y))
//
上面代码中,indexOf方法无法识别数组的NaN
成员,但是findIndex()方法可以借助Object.is方法做到。
五、fill()
fill()方法使用给定值,填充一个数组。
['a', 'b', 'c'].fill(7)
// [7, 7, 7] new Array(3).fill(7)
// [7, 7, 7] ['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']
//可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。
fill()用于初始化空数组比较合适,如果数组中已有元素,那么会被抹去。
最新文章
- Python黑帽编程2.7 异常处理
- 集成 Tomcat 插件到 Eclipse 的过程
- java_jdbc_反射技术将查询结果封装为对象
- Python 标准库 urllib2 的使用细节
- std::move()
- 开源自己用python封装的一个Windows GUI(UI Automation)自动化工具,支持MFC,Windows Forms,WPF,Metro,Qt
- SceneKit做一个旋转的地球效果
- linq给list集合数据分页
- 分布式服务框架介绍:最成熟的开源NIO框架Netty
- Python+AutoIt实现界面工具开发
- JAVA-Web 百度编辑器,修改默认大小
- BCP文件导入SQLServer数据库遇到的问题
- Photoshop 基础三 制作简单按钮
- idea 开发插件。
- 【转】详解在visual studio中使用git版本系统(图文)
- maven包上传私服
- 16进制转ascii,转字符串
- 原生JS,实现图片可拖拽,并且移动四个角和四条变能够自由变换图片大小
- bug:margin塌陷
- 省选模拟赛 LYK loves rabbits(rabbits)