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 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
Javascript Cookie读写删除操作的函数
Mar 02 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
jQuery Mobile动态刷新页面样式的实现方法
May 28 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
vue设置全局访问接口API地址操作
Aug 14 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循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP7数组的底层实现示例
2019/08/25 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
详解Vue如何支持JSX语法
2017/11/10 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
python实现划词翻译
2020/04/23 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
python 求定积分和不定积分示例
2019/11/20 Python
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
金融管理毕业生求职信
2014/03/03 职场文书
公证委托书标准格式
2014/09/11 职场文书
小学生读书笔记
2015/07/01 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
标准发言稿结尾
2019/07/18 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
我的收音机情缘
2022/04/05 无线电