ES6中的数组扩展方法


Posted in Javascript onAugust 26, 2016

form 转化为真正的数组

先说一下使用场景,在Js中,我们要经常操作DOM,比如获取全部页面的input标签,并且找到类型为button的元素,然后给这个按钮注册一个点击事件,我们可能会这样操作;

var inputObjs=document.getElementsByTagName('input');
for(var i=0;i<inputObjs.length;i++){
if(inputObjs[i].type==='button'){
inputObjs[i].onclick=function(){
return;
}
}
}

这样写肯定是没有问题的,但是我们知道很多操作数组的方法比for循环好用多了,比如es5的forEach方法就很好用;但是能直接用吗?不能!因为dom对象集合不是一个真正得Array数组类型,直接使用会报错的;

var inputObjs=document.getElementsByTagName('input');
inputObjs.forEach(); //inputObjs.forEach is not a function

尽管如此我们还是可以用,不能直接用可以间接用,使用js强大的对象冒充功能即可;

var inputObjs=document.getElementsByTagName('input');
console.info(inputObjs); //[]length: 0__proto__: HTMLCollection
console.info([].slice.call(inputObjs)); //[]length: 0__proto__: Array[0]

这样转化为真正的数组之后就可以随便调用数组的方法啦;这种方法固然可行,但是不太容易理解而且太过于“曲折”,es6给我们提供了一个更为简单直接的方法,form,使用起来很简单:

var inputObjs=document.getElementsByTagName('input');
console.info(inputObjs); //[]length: 0__proto__: HTMLCollection
console.info(Array.from(inputObjs)); //[]length: 0__proto__: Array[0]

结果是一样的但是语义上更加贴切也更容易理解,是不是很好用啊!当然这些还不够,不仅仅是类数组任何数据类型都能使用此方法转化为数组,但是不同的类型效果是不一样的,测试如下:

let str='google';
console.log(Array.from(str)); //["g", "o", "o", "g", "l", "e"]
let num=234;
console.log(Array.from(num)); //[]
let bol=false;
console.log(Array.from(bol));
let obj={foo:'foo',bar:'bar'};
console.log(Array.from(obj)); //[]
let superObj={0:'foo',1:'bar',length:2};
console.log(Array.from(superObj)); //["foo", "bar"]

这里列出了不同的数据类型调用该方法后的结果,值得留意的是字符串和一些特殊对象是可以转化为有内容的数组的,特殊的对象是指内容按照数字键值对排列,并且有length属性的对象;这种对象是可以使用for循环的,而字符串也是可以使用for循环来得到每一个字符的,所以归结为一句话,能使用for循环输出内容的使用from方法就不是一个空数组;在这里提醒一下,使用过jQuery的小伙伴可以留意一下,当你使用选择器选择元素返回的jquery对象是什么结构的?其实就是我们例子中最后一个的结构,具体可以参考我的jQuery源码分析系列文章

of 将值转化为数组

创建数组有两种方法一种是构造函数式:

let arr=Array(1,2,3);

另一种是最常用的字面量创建:

let arr=[1,2,3];

Array.of方法其实是对第一个种方式的补充,用法如下:

console.log(Array.of(1,2,3)); //[1,2,3]

貌似跟跟构造方法一样的效果,那这个方法为什么还有存在的必要呢?看下面的例子就明白了:

console.log(Array()); //[]
console.log(Array(1)); //[undefined]
console.log(Array(1,2)); //[1,2]

在这个例子中参数数量的不同其代表的意义不一样,只有一个参数时,参数表示的是长度,大于1一个参数时表示的元素,会引起混淆,但是Array.of方法就不会存在此问题吗,因为其参数始终表示的元素:

console.log(Array.of()); //[]
console.log(Array.of(1)); //[1]
console.log(Array.of(1,2)); //[1,2]

copyWithin 数组内部数据复制替换

copyWithin方法主要作用是数组内部值的替换,该方法接受三个参数,分别表示开始复制位置、结束复制位置和插入位置,示例如下:

[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]// 将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}
// 将2号位到数组结束,复制到0号位
var i32a = new Int32Array([1, 2, 3, 4, 5]);
i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]
// 对于没有部署TypedArray的copyWithin方法的平台
// 需要采用下面的写法
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]

以上所述是小编给大家介绍的ES6中的数组扩展方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
jQuery中extend函数详解
Jul 13 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
使用JS实现图片展示瀑布流效果的实例代码
Sep 12 Javascript
jQuery操作json常用方法示例
Jan 04 Javascript
Canvas放置反弹效果随机图形(实例)
Aug 17 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
es5 类与es6中class的区别小结
Nov 09 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 #Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 #Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 #Javascript
JavaScript组合模式学习要点
Aug 26 #Javascript
前端面试题及答案整理(二)
Aug 26 #Javascript
js前端面试题及答案整理(一)
Aug 26 #Javascript
JavaScript中ES6字符串扩展方法
Aug 26 #Javascript
You might like
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
python复制与引用用法分析
2015/04/08 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
优秀求职信范文分享
2013/12/19 职场文书
情人节活动策划方案
2014/02/27 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
电子商务求职信
2014/06/15 职场文书
党员剖析材料范文
2014/12/18 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书