Array.form的用法

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

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

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p id="h01"></p>

<script>

'use strict';

//便利NodeList数组

let ps = document.querySelectorAll('p');

console.log(ps);

Array.from(ps).forEach( function(p) {

    console.log(p);

});

//装换成数组

console.log(Array.from("hello"));

//本来的数组，返回原来的

let array0 = ["d","f","g"];

console.log(Array.from(array0));

//按照一定的规则改变数组内的值

console.log(Array.from([1,3,5]).map(x => x * x * x));

console.log(Array.from([1,,4,6,,0],(n => n || 0)));

//自定义改变数组内的值

function typesOf () {

     return Array.from(arguments,value => typeof(value)) ;

}

console.log(typesOf(null,[],NaN));

</script>

</body>

</html>

Array.of()

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

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

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

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

Array() // []

Array(3) // [, , ,]

Array(3, 11, 8) // [3, 11, 8]
Array.of() // []

Array.of(undefined) // [undefined]

Array.of(1) // [1]

Array.of(1, 2) // [1, 2]

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

function ArrayOf(){

  return [].slice.call(arguments);

}

数组推导

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

var a1 = [1, 2, 3, 4];

var a2 = [for (i of a1) i * 2];

a2 // [2, 4, 6, 8]

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

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

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

var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];

[for (year of years) if (year > 2000) year];

// [ 2006, 2010, 2014 ]

[for (year of years) if (year > 2000) if(year < 2010) year];

// [ 2006]

[for (year of years) if (year > 2000 && year < 2010) year];

// [ 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. HTML5 使用application cache 接口实现离线数据缓存

    1.配置缓存文件 cache manifest MIME TYPE:text/cache-manifest文件名称:name.appcache作用:用于配置需要缓存的文件 2.使用方法 在服务器上添加 ...

  2. K线图学习

    本博文(适合入门的股民朋友)内容来自网络,股市有风险,入市需谨慎 一.起源 K线图(Candlestick Charts)又称蜡烛图.日本线.阴阳线.棒线等,常用说法是“K线”,起源于日本十八世纪德川 ...

  3. PHP的数组排序函数

    <?php class order{ /** * * 数组排序 * @param array $arr 例如: * array ( array ( 'deskId' => '460646' ...

  4. 把C#程序（含多个Dll）合并成一个Exe的超简单方法

    开发程序的时候经常会引用一些第三方的DLL,然后编译生成的exe文件就不能脱离这些DLL独立运行了. 但是,很多时候我们本想开发一款只需要一个exe就能完美运行的小工具.那该怎么办呢? 下文介绍一种超 ...

  5. HTML5将图片转化成字符画

    HTML5将图片转化成字符画 字符画大家一定非常熟悉了,那么如何把一张现有的图片转成字符画呢?HTML5让这个可能变成了现实,通过canvas,可以很轻松实现这个功能.其实原理很简单:扫描图片相应位置 ...

  6. AOP面向切面编程的四种实现

     一.AOP(面向切面编程)的四种实现分别为最原始的经典AOP.代理工厂bean(ProxyFacteryBean)和默认自动代理DefaultAdvisorAutoProxyCreator以及Bea ...

  7. 9.30notes

    memcached   缓存机制,减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度. array_slice(data['list'],0,10) ...

  8. java入门第三步之数据库连接

    数据库连接可以说是学习web最基础的部分,也是非常重要的一部分,今天我们就来介绍下数据库的连接为下面学习真正的web打下基础 java中连接数据库一般有两种方式: 1.ODBC——Open Datab ...

  9. Linux系统的理解及学习Linux内核的心得

    作业列表      (点击作业跳转) linux内核分析作业:以一简单C程序为例,分析汇编代码理解计算机如何工作 linux内核分析作业:操作系统是如何工作的进行:完成一个简单的时间片轮转多道程序内核 ...

  10. Nova PhoneGap框架 第五章 文件结构

    一个好的项目架构必然有着合理的文件结构,如果一个项目的文件组织混乱,那么可以断言一定是项目架构有问题. 合理的文件结构能够帮你更清晰的管理你的文件,并且当需要添加新的文件的时候,你的程序员很清楚应该加 ...