ES6新特性-------数组、Math和扩展操作符(续)
三、Array
Array对象增加了一些新的静态方法,Array原型上也增加了一些新方法。
1.Array.from 从类数组和可遍历对象中创建Array的实例
类数组对象包括:函数中的arguments、由document.getElementsByTagName()返回的nodeList对象、新增加的Map和Set数据结构。
//in ES6中 类数组转换为数组的方法
let itemElements=document.querySelectorAll('.item');
let items=Array.from(itemElements);
items.forEach(function(item){
console.log(item.nodeType);
});
//in ES5 类数组转换数组的方法
var items=Array.prototype.slice.call(itemElements);
上面的例子中,类数组对象itemElements对象是不具备数组方法forEach()的,但可以通过Array.from()方法转换为Array。
Array.from()另一个特性是它的第二个可选参数mapFunction,该参数允许你通过一次单独调用创建一个新的映射数组:
let navElements=document.querySelectorAll("nav li");
let navTitles=Array.from(navElements,el=>el.textContent);
2.Array.of方法
该方法表现的很像Array的构造函数,它适合只传一个参数的情况,因此Array.of是new Array()的更优选择,所以,构建数组的方式,现在有三种:
let x=new Array(3);// [undefined,undefined,undefined]
let y=Array.of(8);//[8]
let z=[1,2,3];
3.Array的find,findIndex,fill方法
1)find返回回调返回true的第一个元素
2)findIndex返回回调函数返回true的第一个元素的下标
3)fill用所给参数‘覆盖’数组的元素
[5,3,4,10,1].find(n=>n===10);//10 [5,3,4,10,1].findIndex(n=>n===10);//2 [5,3,4,10,1].fill(7);//[7,7,7,7,7] [5,3,4,10,1].fill(7,1,3);//[5,7,7,7,1]
四、Math
Math对象新增了几个新方法:
//Math.sign返回数字的符号,结果为1、-1或0
Math.sign(5);//1
Math.sign(-9)//-1
//Math.trunc 返回无小数位的数字
Math.trunc(5.9);//5
Math.trunc(6.8908);//6
//Math.cbrt返回数字的立方根
Math.cbrt(64);//4
五、扩展操作符
扩展操作符用于特定地方扩展元素,例如:在一个数组中扩展一个数组的元素。
let values=[1,2,4];
let some=[...values,8];//[1,2,4,8]
let more=[...values,8,...values];//[1,2,4,8,1,2,4]
再如 函数调用中的参数中的应用:
let values=[1,2,4];
doSomething(...values); function doSomething(x,y,z){
//x=1.y=2,z=4
} //在ES5中的调用方式 doSomething.apply(null,values);
正如所看到的,该语法使我们免去使用fn.apply()的麻烦,它很灵活,因为扩展操作符可以用在参数列表中的任意位置。
我们已经看到把扩展操作符应用在数组和参数中,事实上,我们可以把它用在所有可比案例的对象中:
let form = document.querySelectorAll('#my-form').
inputs=form.querySelectorAll('input');
selects=form.qurySelectorAll('select');
let allTheThings=[form,...inputs,...selects];
现在,allTheThings是一个包含<form>节点、<input>子节点和<select>子节点的二维数组。
ES6新特性-------数组、Math和扩展操作符(续)的更多相关文章
- ES6新特性:Function函数扩展, 扩展到看不懂
本文所有Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 函数的默认值: 如果有参数 ,那就用参数, 如果没有参数, 那就用默认的参数: aj ...
- javascript ES6 新特性之 扩展运算符 三个点 ...
对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...
- ES6新特性概览
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- 你不知道的JavaScript--Item24 ES6新特性概览
ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...
- 34.js----JS 开发者必须知道的十个 ES6 新特性
JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...
- ES6新特性概览1
本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...
- ES6新特性:Proxy代理器
ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...
- 前端入门21-JavaScript的ES6新特性
声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...
随机推荐
- LeetCode_Surrounded Regions
Given a 2D board containing 'X' and 'O', capture all regions surrounded by 'X'. A region is captured ...
- 如何允许外网可以连接mysql数据库
1.首先检查mysql所在服务器的防火墙,如果限制了外网对3306端口的连接,那么放开限制Linux服务器中执行 iptables -L 可以查看当前的防火墙规则iptables -F 可以清 ...
- UML--核心元素之用例
Use case 一个系统就是由各种各样的愿望组成的. 一个用例就是与参与者actor交互的,并且给参与者提供可观测的有意义的结果的一系列活动的集合. 例如你想做一顿饭吃,你需要完成煮饭和炒菜两件事情 ...
- Axure设计分析作业-实例解析
本文转载自人人都谁产品经理,作者完全使用Axure做了这一个产品需求文档.文档地址:http://1passwordmanager.sinaapp.com/ 大家可以先睹为快.这个PRD完全使用axu ...
- 【转】多核CPU运行模式
多核CPU运行模式主要有以下三种: •非对称多处理(Asymmetric multiprocessing,AMP)——每个CPU内核运行一个独立的操作系统或同一操作系统的独立实例(instantiat ...
- Console 程序在任务计划程序无法读写文件
当我们把Console 程序作为Window计划任务的计划任务的操作的时候,我们明明设置了程序的执行权限或者文件夹的读写权限(尝试了所有权限,各种账号读写权限的切换都不好使),但是当我们有读写操作的时 ...
- array模块
array模块定义了一种序列数据结构,看起来和list很相似,但是所有成员必须是相同基本类型. 2.1 array-固定类型数据序列 array作用是高效管理固定类型数值数据的序列. 2.2.1 初始 ...
- 跨服务器查询sql语句样例
若2个数据库在同一台机器上:insert into DataBase_A..Table1(col1,col2,col3----)select col11,col22,col33-- from Data ...
- go中string和slice no-copy转换
在go里面,string和slice的互换是需要进行内存拷贝的,虽然在底层,它们都只是用 pointer + len来表示的一段内存. 通常,我们不会在意string和slice的转换带来的内存拷贝性 ...
- ThinkPHP整合百度Ueditor图文教程
ThinkPHP整合百度Ueditor图文教程 ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOM ...