Array.form的用法

1.可以将各种值转为真正的数组，并且还提供map功能。这实际上意味着，只要有一个原始的数据结构，你就可以先对它的值进行处理，然后转成规范的数组结构，进而就可以使用数量众多的数组方法。

2.另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种Unicode字符，可以避免JavaScript将大于\uFFFF的Unicode字符，算作两个字符的bug。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. </head>
  6. <body>
  7. <p id="h01"></p>
  8.  
  9. <script>
  10. 'use strict';
  11.  
  12. //便利NodeList数组
  13. let ps = document.querySelectorAll('p');
  14. console.log(ps);
  15. Array.from(ps).forEach( function(p) {
  16.     console.log(p);
  17. });
  18.  
  19. //装换成数组
  20. console.log(Array.from("hello"));
  21.  
  22. //本来的数组，返回原来的
  23. let array0 = ["d","f","g"];
  24. console.log(Array.from(array0));
  25.  
  26. //按照一定的规则改变数组内的值
  27. console.log(Array.from([1,3,5]).map(x => x * x * x));
  28.  
  29. console.log(Array.from([1,,4,6,,0],(n => n || 0)));
  30.  
  31. //自定义改变数组内的值
  32. function typesOf () {
  33.      return Array.from(arguments,value => typeof(value)) ;
  34. }
  35.  
  36. console.log(typesOf(null,[],NaN));
  37. </script>
  38. </body>
  39. </html>

Array.of()

Array.of方法用于将一组值，转换为数组

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array.of基本上可以用来替代Array()或new Array()，并且不存在由于参数不同而导致的重载。它的行为非常统一。

Array.of总是返回参数值组成的数组。如果没有参数，就返回一个空数组。

  1. Array() // []
  2. Array(3) // [, , ,]
  3. Array(3, 11, 8) // [3, 11, 8]
  1. Array.of() // []
  2. Array.of(undefined) // [undefined]
  3. Array.of(1) // [1]
  4. Array.of(1, 2) // [1, 2]

Array.of方法可以用下面的代码模拟实现。

  1. function ArrayOf(){
  2.   return [].slice.call(arguments);
  3. }

数组推导

提供简洁写法，允许直接通过现有数组生成新数组。这项功能本来是要放入ES6的，但是TC39委员会想继续完善这项功能，让其支持所有数据结构（内部调用iterator对象），不像现在只支持数组，所以就把它推迟到了ES7。Babel转码器已经支持这个功能

  1. var a1 = [1, 2, 3, 4];
  2. var a2 = [for (i of a1) i * 2];
  3.  
  4. a2 // [2, 4, 6, 8]

上面代码表示，通过for...of结构，数组a2直接在a1的基础上生成。

注意，数组推导中，for...of结构总是写在最前面，返回的表达式写在最后面。

for...of后面还可以附加if语句，用来设定循环的限制条件。

  1. var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];
  2.  
  3. [for (year of years) if (year > 2000) year];
  4. // [ 2006, 2010, 2014 ]
  5.  
  6. [for (year of years) if (year > 2000) if(year < 2010) year];
  7. // [ 2006]
  8.  
  9. [for (year of years) if (year > 2000 && year < 2010) year];
  10. // [ 2006]

上面代码表明，if语句要写在for...of与返回的表达式之间，而且可以多个if语句连用。

map 和filter的区别：

map是对原数组的加工，filter是对原数组的过滤

js 对Array的补充的更多相关文章

  1. 斗篷指令、属性指令、表单指令、条件指令、循环指令、js的Array操作、前台数据库、

    ```python"""1)指令 属性指令:v-bind 表达指令:v-model 条件指令:v-show v-if 循环指令:v-for 斗篷指令:v-cloak 2) ...

  2. JavaScript基础18——js的Array对象

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. JS对Array进行自定制排序

    JS对Array进行自定制排序,简单的做一个记录,代码如下所示: //Test function function myFunction(){ var myArr = new Array(); var ...

  4. 多动手试试，其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量

    多动手试试,其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量,并且数组变量可以直接取到每一个元素var array1 = '<%=yearList =>'; ...

  5. JS中Array数组的三大属性用法

    原文:JS中Array数组的三大属性用法 Array数组主要有3大属性,它们分别是length属性.prototype属性和constructor属性. JS操作Array数组的方法及属性 本文总结了 ...

  6. JS数组array常用方法

    JS数组array常用方法 1.检测数组 1)检测对象是否为数组,使用instanceof 操作符 if(value instanceof Array) { //对数组执行某些操作 } 2)获取对象的 ...

  7. js 在array的遍历操作中修改arry中元素数量 出现的一些奇特的操作

    在js中array是属于复杂类型,在arr1=arr2得赋值操作中,arr1得到的值并不是arr2的value,而是一个指向引用.那么修改arr1的同时arr2读取的值也会同步变化,那么问题来了,上代 ...

  8. js create Array ways All In One

    js create Array ways All In One ES6 const arr = [...document.querySelectorAll(`[data-dom="^div& ...

  9. js swap array

    js swap array ES6 swap array 就地交换 no need let , const [ b, a, ] = [ a, b, ]; // ES6 swap const arr = ...

随机推荐

  1. Flask 重新认识

    总是觉的学习东西有点猴子掰玉米的感觉.今天就重新再掰一次吧. Installation: 安装之前建议先安装virtualenv,这个东东是帮助你在多个python版本之间保持同步,不至于python ...

  2. Python之路Day18-正则及Django

    一. 正则表达式 1.定义正则表达式 /.../  用于定义正则表达式 /.../g 表示全局匹配 /.../i 表示不区分大小写 /.../m 表示多行匹配JS正则匹配时本身就是支持多行,此处多行匹 ...

  3. android 之httpclient方式提交数据

    HttpClient: 今天实战下httpclient请求网络json数据,解析json数据返回信息,显示在textview, 起因:学校查询饭卡余额,每次都要访问校园网(内网),才可以查询,然后才是 ...

  4. SQL Server中CROSS APPLY和OUTER APPLY的应用详解

    SQL Server数据库操作中,在2005以上的版本新增加了一个APPLY表运算符的功能.新增的APPLY表运算符把右表表达式应用到左表表达式中的每一行.它不像JOIN那样先计算那个表表达式都可以, ...

  5. C++类型转换函数

    1.什么是类型转换函数 类型转换函数的作用是将一个类的对象转换成另一类型的数据. class testclass { private: int r; int m; public : testclass ...

  6. UI控件（UIImageView）

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; image1_ = [UIImage imageNa ...

  7. Python黑帽编程 3.5 DTP攻击

    Python黑帽编程 3.5 DTP攻击 在上一节,<Python黑帽编程 3.4 跨越VLAN>中,我们讨论了一般的VLAN中实施攻击的方法,这一节属于扩展内容,简单演示下Cisco特有 ...

  8. 有点担心Node.js的未来了

    原创文章转载请注明出处:@协思, http://zeeman.cnblogs.com 首先本文的目的不是引发语言之争,纯属个人的一些思绪记录. 因为工作原因,用Node.js做过几个项目,基本都是涉及 ...

  9. .NET 基础 一步步 一幕幕 [.NET 简介]

    .NET 简介 .NET是 Microsoft XML Web services 平台.是微软用来实现XML,Web Services,SOA(面向服务的体系结构service-oriented ar ...

  10. 如何用TDR来测试PCB板的线路阻抗

    隔壁小王已经讲了TDR的原理以及如何确定TDR的分辨率.那么,我们要正确测量PCB板上的线路阻抗,还有哪些需要注意的地方呢? 1. 阻抗测试的行业标准 之前贴过好多张阻抗测试的图片,重新再贴一张给大家 ...