脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → es6数组扩展方法

ES6中的数组扩展方法

 更新时间：2016年08月26日 17:07:25   作者：不一样的追寻着  
这篇文章主要介绍了ES6中的数组扩展方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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中的数组扩展方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • js对数字的格式化使用说明

    js对数字的格式化使用说明

    Javascript也提供了对数字进行格式化输出的支持，需要的朋友可以参考下。
    2011-01-01
  • 图片onload事件触发问题解决方法

    图片onload事件触发问题解决方法

    当页面上存在一个图片元素时如：<img src='xxxx' alt="" />,页面加载中ie7、8跟chrome下图片的onload事件非常奇怪，有后完全不触发，有时候触发后进行改变某些元素的操作，操作结果无效。
    2011-07-07
  • VsCode插件整理（小结）

    VsCode插件整理（小结）

    这篇文章主要介绍了VsCode插件整理（小结），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

    基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用

    通过本文主要介绍如何提取Bootstrap的图标信息，存储到数据库里面为我所用，非常具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-05-05
  • mongoose之bulkWrite操作使用实例

    mongoose之bulkWrite操作使用实例

    这篇文章主要为大家介绍了mongoose之bulkWrite操作使用实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • JS中使用Array函数shift和pop创建可忽略参数的例子

    JS中使用Array函数shift和pop创建可忽略参数的例子

    这篇文章主要介绍了JS中使用Array函数shift和pop创建可忽略参数的例子,这是一种比较高级的应用,需要的朋友可以参考下
    2014-05-05
  • JavaScript中分号的一些细节

    JavaScript中分号的一些细节

    这篇文章主要给大家介绍了关于JavaScript中分号的一些细节，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • javascript中sort() 方法使用详解

    javascript中sort() 方法使用详解

    sort()方法主要是用于对数组进行排序，默认情况下该方法是将数组元素转换成字符串，然后按照ASC码进行排序，这个大家都能理解，但如果数组元素是一个Object呢，转不了字符串，难道不能进行排序？答案当然是否定的,那么我们就来详细探讨下sort()方法的使用
    2015-08-08
  • js实现轮播图特效

    js实现轮播图特效

    这篇文章主要为大家详细介绍了js实现轮播图特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • JS浏览器导航栏navigator的一些冷知识

    JS浏览器导航栏navigator的一些冷知识

    这篇文章主要为大家介绍了JS导航栏navigator的一些冷知识使用方法实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12

最新评论