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. [IOS]使用了cocoapods 抱错Pods was rejected as an implicit dependency for ‘libPods.a’ because its architectures ......

    Pods was rejected as an implicit dependency for ‘libPods.a’ because its architectures ‘i386’ didn’t ...

  2. java-JDBC配置驱动程序

    我们以常用的3种数据库为例. MySQL数据库 驱动程序包名:mysql-connector-java-3.1.11-bin.jar 驱动类的名字:com.mysql.jdbc.Driver JDBC ...

  3. awk使用shell变量

    awk使用shell变量  (可以计算浮点数) 其实在awk里,是不能直接使用shell变量的 方法是:awk -v 选项让awk 里使用shell变量 TIME=60 awk -v time=&qu ...

  4. 各种android应用模仿源码

    V2EX的非官方Android客户端,极力遵循Material Design风格 下载 湘潭大学三翼校园"四季电台" Android客户端   下载   高仿煎蛋客户端    下载 ...

  5. java 心得

    11. 最后的笑声 package javaBookPractice; public class LastLaugh { public static void main(String[] args) ...

  6. MySQL操作使用

    这只是一些简单的数据库命令,作为新手记录一下,以供后面查询使用. 查询服务器版本号和当前日期: select version(), current_date; 一个命令通常用一个SQL语句组成,后面跟 ...

  7. SQL Server 数据变更时间戳（timestamp）在复制中的运用

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 方案(Solution) 方案一(Solution One) 方案二(Solution Two ...

  8. ASP.Net中通过Jquery前端对Repeater控件绑定的数据进行操作

    说明:由于Repeater控件是动态绑定,通过Id获取数据只能默认获取第一行: 1.对Repeater中div设置样式 2.通过$(".css").each(function(){ ...

  9. Vue脚手架工具vue-cli和调试组件vue-devtools

    https://github.com/vuejs/vue-cli npm install vue-cli -g vue init webpack my-project cd my-project // ...

  10. 【笔记】js获取当前点击元素的索引

    以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...