ES6(三)数组的扩展
1、Array.form
ES6中,Array.from = function(items,mapfn,thisArg) { }
Array.from 用于将 类数组 和 可遍历对象(实现了Iterator接口的对象以及set、map)对象,转换成真正的数组。
(1) 第一个参数:items,类数组 和 可遍历对象。
在ES5中,将类数组转换成真正数组,如下:
var arr=[].slice.call(likeArray);
实际应用中,类数组对象常常包括 NodeList集合,以及 函数参数 arguments.
(2) 第二个参数,类似map方法,可以直接改变原数组的值。
如下:将 类数组中的值加 1
Array.from(arrayLike, (x)=>x+);
(3) 第三个参数,绑定this。
(4) Array.from 可以将只要原始的数据结构(string,number 等),会先对值进行处理,
然后转换成规范的数组结构,进而可以使用Array中的方法。
Array.from( { length:}, ()=>'jack');
将字符串转换为数组,能正确处理各种Unicode字符,避免 将大于 \uFFFF 的字符,算成两个字符。
function countString(string){
return Array.from(string).length;
}
2、Array.of
Array.of = function(items) { }
用于将一组值,转换成数组,用于弥补Array()不足。
比如:使用 Array(3),指定了数组为3,值为[undefined*3],当参数count>=2时,才会返回新数组。
ES5中可以如下代替:
function ArrayOf(){
return [].slice.call(arguments);
}
3、扩展运算符 ( ... )
扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果A对象没有实现此接口,则无法转换。
[...数据结构A] 这样的书写方式可以将某些数据结构转换成为数组。
扩展运算符 无法将类数组转换为 real Array.
4、数组实例的扩展
(1)copyWithin()
Array.prototype.copyWithin = function(target,start,enf) {}
1、在当前数组内部,将指定位置的成员复制到其他位置,且覆盖原有成员;
2、其中 包括start,不包括enf(end from),如果[1,3,5],即将 3,4位置的元素替换 arr
3、start,endf为负数,则表示数组倒数位数
[, , , , , ].copyWithin(, , ); //[0,1,3,3,4,5]
(2)find() and findIndex()
Array.prototype.find = function(predicate,thisArg) {}
find() 用于找出第一个符合条件的数组成员,参数是一个回调函数,所有数组成员依次执行该回调函数,若无符合条件,则返回undefined。
findIndex() 则返回第一个符合条件的成员的位置,未找到,则返回 -1。
let personList = [
{
name: 'jack',
age:
},
{
name: 'Tom',
age:
},
{
name: 'Lily',
age:
}
]; personList.find((item,index,arr)
=>(item.age < ));
这两个方法都可以发现 NaN,弥补了数组 IndexOf方法的不足。
[NaN].findIndex(y=>Object.is(NaN,y)) //
(3) fill()
Array.prototype.fill = function(value,start,end) {}
使用给定值,填充一个数组。
['a','b','c'].fill(,,);//[a,7,c]
(4)entries(),keys(),values()
var arr = ['key1', 'key2'];
for (let index of arr.keys) { }
如果不使用for...of
循环,可以手动调用遍历器对象的next
方法,进行遍历。
(5)includes()
String.prototype.includes = function(searchString,position) {};
表示某个数组是否包含给定的值
position 表示搜索的起始位置,负数为倒数位置
indexOf 内部使用严格相当运算符(===)进行判断,这会导致对NaN的误判。
[, , ].includes(, );
[NaN].indexOf(NaN); //-1
[NaN].includes(NaN); //true
Map 的has方法,用来查找 键名。
Set 的has方法,用来查找 值。
(5)数组的空位
数组的空位,是指某一个位置没有任何值,空位不是undefined。
1、forEach,filter,every,some 都会跳过空位。
2、map会跳过空位,但会保留这个值。
3、join 、toString 会将空位视为 undefined,undefined和null 则被处理成空字符串。
而Array.from 会将数组的空位 转换为 undefined,不会忽略这个空位。
( ... )也会转换为 undefined。 至于为什么会出现 空位,我也不太明白。
ES6(三)数组的扩展的更多相关文章
- ES6对数组的扩展(简要总结)
文章目录 数组的扩展(ES6) 1. 扩展运算符 2. Array.from 3. Array.of() 4. copyWithin() 5. find() 和 findIndex() 6. fill ...
- ES6 之 数组的扩展
ES5 检测数组 let arr = [1,2,3,4] Array.isArray(arr) arr instanceof Array 转换方法 arr.toLocaleString() arr.t ...
- ES6对数组的扩展
ECMAScript6对数组进行了扩展,为数组Array构造函数添加了from().of()等静态方法,也为数组实例添加了find().findIndex()等方法.下面一起来看一下这些方法的用法. ...
- 【ES6】数组的扩展——扩展运算符
1.扩展运算符[三个点(...)将一个数组转为用逗号分隔的参数序列] 作用:用于函数调用 function add(x, y) { return x + y; } const numbers = [2 ...
- 【ES6】数组的扩展
1.Array.from(): 将伪数组对象和遍历的对象转为真数组 如果一个对象的键都是正整数或者0,并且有 Length属性,那么这个对象很想数组,称它为伪数组. 伪数组: let obj = { ...
- ES6学习(三):数组的扩展
chapter08 数组的扩展 8.1 扩展运算符 8.1.1 扩展运算符的含义 ... 如同rest运算符的逆运算,将一个数组转换为用逗号分隔的参数序列. console.log(...[1, 2, ...
- 数组的复制及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的新特性(8)——数组的扩展
数组的扩展 扩展运算符 含义 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) / ...
- ES6中数组和对象的扩展运算符拷贝问题以及常用的深浅拷贝方法
在ES6中新增了扩展运算符可以对数组和对象进行操作.有时候会遇到数组和对象的拷贝,可能会用到扩展运算符.那么这个扩展运算符到底是深拷贝还是浅拷贝呢? 一..使用扩展运算符拷贝 首先是下面的代码. le ...
随机推荐
- 蓝桥杯 剪邮票 全排列+DFS
剪邮票 如[图1.jpg], 有12张连在一起的12生肖的邮票. 现在你要从中剪下5张来,要求必须是连着的. (仅仅连接一个角不算相连) 比如,[图2.jpg],[图3.jpg]中,粉红色所示部分就是 ...
- Python连接MySQL数据库中各种坑
第一个坑 要想连接数据库,我们必须拥有MySQL-python这个模块,首先,我在安装这个模块的时候就到了第一个大坑. 常规安装方法:进入cmd 使用 pip install MySQL-python ...
- 使用PowerApps快速构建基于主题的轻业务应用 —— 入门篇
作者:陈希章 发表于 2017年12月12日 前言 在上一篇文章 基于Office 365的随需应变业务应用平台 中我提到,随着随需应变的业务需要,以及技术的发展,业务应用的开发的模式也有了深刻的变化 ...
- springBoot actuator监控配置及使用
准备环境: 一个springBoot工程 第一步:添加以下依赖 <dependency> <groupId>org.springframework.boot</group ...
- SQL基础教程读书笔记-1
查询基础 2.2 算数运算符和比较运算符 2.2.1算数运算符 + - * / 需要注意NULL 5 + NULL 10 - NULL 1 * NULL 4 / NULL NULL / 9 NULL ...
- Vue 浅谈前端js框架vue
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...
- UVA 11324 The Largest Clique(强连通分量+缩点DAG的DP)
题意:给定一个有向图,求出一个最大的结点集,这个节点集中的随意两个点之间至少一个能到达还有一个点. 思路:假设一个点在这个节点集中,那么它所在的强连通分量中的点一定所有在这个节点集中,反之亦然, 求出 ...
- 数学之美?编程之美?数学 + 编程= unbelievable 美!
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:Rusu 导语 相信大家跟我一样,偶尔会疑惑:曾经年少的时候学习过的那么多的复杂的数学函数,牛逼的化学方程式,各种物理原理.公式,到底有 ...
- plsql本机不安装数据库连接远程数据库
用PL/SQL连接oracle数据库,不管是本地的还是远程的,一般都需要安装oracle客户端 如何达到不安装oracle客户端,又能使用PL/SQL工具? 1. oracle官网提供了i ...
- 「mysql优化专题」这大概是一篇最好的mysql优化入门文章(1)
优化,一直是面试最常问的一个问题.因为从优化的角度,优化的思路,完全可以看出一个人的技术积累.那么,关于系统优化,假设这么个场景,用户反映系统太卡(其实就是高并发),那么我们怎么优化? 如果请求过多, ...