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()用于初始化空数组比较合适，如果数组中已有元素，那么会被抹去。
ES6-数组的扩展-整理的更多相关文章
- 数组的复制及ES6数组的扩展
一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...
- es6数组的扩展
数组扩展运算符 ...(三个点) const demoArr=[0,1,2,3,4] console.log(...demoArr) // 0 1 2 3 4 // 他把一个数组用逗号分隔了出来 // ...
- ES6数组的扩展--Array.from()和Array.of()
一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...
- ES6 数组的扩展
1. Array.from() Array.from()将类数组(array-like)对象与可遍历的对象转化为数组并返回. 下面是一个类数组 let arr = { '0':'a', '1':'b' ...
- ES6数组的扩展运算符
一.基本使用 ES6中函数可以使用 rest参数 接收函数的多余参数,组成一个数组,放在形参的最后面. let fn = (a, ...value) => { console.log(a); c ...
- ES6对数组的扩展(简要总结)
文章目录 数组的扩展(ES6) 1. 扩展运算符 2. Array.from 3. Array.of() 4. copyWithin() 5. find() 和 findIndex() 6. fill ...
- ES6数组扩展
前面的话 数组是一种基础的JS对象,随着时间推进,JS中的其他部分一直在演进,而直到ES5标准才为数组对象引入一些新方法来简化使用.ES6标准继续改进数组,添加了很多新功能.本文将详细介绍ES6数组扩 ...
- ES6的新特性（8）——数组的扩展
数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...
- ES6学习（三）：数组的扩展
chapter08 数组的扩展 8.1 扩展运算符 8.1.1 扩展运算符的含义 ... 如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列. console.log(...[1, 2, ...
- Es6学习笔记(7)----数组的扩展
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 数组的扩展 1.扩展运算符:可以将数组转化成逗号隔离的单个参数...[1,2,3] //控制台运 ...
随机推荐
- jQuery ajax表单提交
Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form ...
- php 转化整型需要注意的地方
public function tt(){ $num = '19.90'; echo $num; echo '<br/>--------------<br/>'; echo 1 ...
- python多线程使用场景
python多线程使用场景 如果程序时cpu密集型的,使用python的多线程是无法提升效率的,如果程序时IO密集型的,使用python多线程可以提高程序的整体效率 CPU密集型(CPU-bound) ...
- JS创建类和对象，看完了，头就不大了
JavaScript 创建类/对象的几种方式 在JS中,创建对象(Create Object)并不完全是我们时常说的创建类对象,JS中的对象强调的是一种复合类型,JS中创建对象及对对象的访问是极其灵活 ...
- Grep---linux系统三剑客（一）
grep .sed.awk被称为linux中的"三剑客". grep 更适合单纯的查找或匹配文本 sed 更适合编辑匹配到的文本 awk 更适合格式化文本,对文本进行较复杂格式 ...
- 【ARM-Linux开发】Linux内存管理：ARM Memory Layout以及mmu配置
原文:Linux内存管理:ARM Memory Layout以及mmu配置 在内核进行page初始化以及mmu配置之前,首先需要知道整个memory map. 1. ARM Memory Layout ...
- 【DSP开发】DSP COFF 与 ELF文件
本文介绍了C6000最新的v7.2或者之后的编译器如何支持ELF(EABI)和COFF-ABI格式,首先由ARM引入嵌入式(Embedded) EABI的介绍,之后比较了COFF-ABI和EABI的区 ...
- img的src为空的时候，去除灰色的边框
- 33.TCP协议概念/scapy模块doos攻击
TCP协议概念/scapy模块: 1,TCP/IP四层协议: 2,TCP数据包的构成: TCP FLAGS:TCP数据包标志位 U:URG,紧急比特 A:ACK,确认比特 P:PSH,推送比特 S:S ...
- NOIP 2015：信息传递
题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...