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是对原数组的过滤

转载于:https://www.cnblogs.com/machao/p/5275780.html

js 对Array的补充相关推荐

  1. Js中Array对象

    Js中Array对象 JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象. 描述 在JavaScript中通常可以使用Array构造器与字面量的方式创建数组. c ...

  2. 算法:js 数组 array 去重,并显示所有重复的元素

    算法:js 数组 array 去重,并显示所有重复的元素 遇到这样一个问题,一个数组中查重并提取所有重复的项目,不仅仅只展示多出来的. [1,2,2,3,4,5,6,7,3,2,3] 得出 [2,2, ...

  3. 《前端防坑》- JS基础 - Array.isArray()结果一定准确吗?

    在研究伪数组的时候发现了一个小问题,记录下,就是Array.isArray()判断数组的方法可能与instanceof判断出的结果可能不同. 参考文章:https://www.jianshu.com/ ...

  4. 【数组方法大合集】原生js数组array常用工具方法大合集

    var array = {/* 数组求和*/sum: arr => eval(arr.join("+")),/* 判断一个数组(支持一个字符串)里面的是否有任何一个元素被包含 ...

  5. js javaScript array 取指定元素索引、判断是否相同、重复、过滤数据

    最近写js也多了,Array中有好多方法不够用.自己加了些以后还可能用到. <script type="text/javascript"> //找到返回所在索引,不存在 ...

  6. 【JavaScript】JS的Array的用法总结

    目录 Array的长度相关问题 indexOf取元素下标 slice操作 push和pop操作 unshift和shift操作 sort操作 reverse操作 spilce操作 concat函数 j ...

  7. 2020-08-04 html的js位置 + css的flex实现九宫格 + JS的Array + 软技能的硬编码

    2020-08-04 题目来源:http://www.h-camel.com/index.html [html] 一般习惯把js写在</body>前,但有例外的情况吗?说说看 html文件 ...

  8. 云日记_登出操作个人中心页面js和jsp知识点补充

    用户退出     前端:         设置超链接的请求地址  user?actionName=logout     后台:         1. 销毁Session对象         2. 删除 ...

  9. java兼职招聘_英来网招聘:兼职js开发。(补充)

    我好像还没写过招聘启示,怎么写呢?js开发瓶颈和压力越来越大了,很多计划不断滞后,所以呢-- 兼职形式进行工作,每周15-20小时,工作内容基本上纯js开发,月薪:1500~2000 RMB. 嗯,再 ...

最新文章

  1. TensorFlow Keras API用法
  2. seaborn箱图(box plot)可视化、并且使用matplotlib的meanprops函数在箱图中自定义均值标签、标签形状、标签大小、标签填充色彩、标签边缘颜色
  3. mysql innodb 数据复制_五千万的数据 复制到另张表 是先复制数据再加索引还是先建好索引再复制数据 表引擎Innodb...
  4. Mysql中NUMERIC和DECIMAL类型区别比较
  5. linux执行python命令后permission denied
  6. php图片长宽处理,用php调整图片宽高 | 学步园
  7. 详解 | Spring Boot 最核心的 3 个注解详解
  8. nyoj 471:好多的树(容斥原理)
  9. 如何根据对象获取到对应的表名_Hands-on! 如何给 TiDB 添加新系统表
  10. Linux 命令(64)—— strings 命令
  11. java调用python脚本文件_Java实现调用jython执行python文件的方法
  12. web.xml中配置启动时加载的servlet,load-on-starup
  13. 为什么大多公司不要培训班培训出来的Java程序员?
  14. 密码学系列 - DER编码
  15. 移动硬盘插到台式机,外接网卡无法连接wifi处理
  16. 减少不必要的App运营成本,是2022年中小开发者要留心的
  17. 【狂神说】——Spring笔记(全)
  18. Cisco ASA 5520配置笔记
  19. 培训机构管理系统的搭建,附源码,适合SSM入门,随便看看,解决数据库驱动,连接url时区等等问题
  20. Memcache的安装与启动【小强测试培训班学员作品】

热门文章

  1. IComparable和Icomparer接口
  2. oracle 临时表空间满了_精心总结--Oracle查询表空间的每日增长量和历史情况统计脚本...
  3. web监听器监听mysql_JavaWEB开发15——ListenerListener
  4. android 热门开源库,GitHub安卓热门开源资源在项目中的使用及项目总结
  5. 95-908-030-源码-FlinkTable-Table API
  6. 【Elasticsearch】java 操作 Elasticsearch 7.8 索引 文档 等操作
  7. 【ElasticSearch】Es 缓存
  8. 【kafka】kafka rebalance generation
  9. JavaCC报错: JavaCC reported exit code 1: [-LOOKAHEAD=1, -STATIC=false
  10. Optional类的使用